Are the text animations performant?

Yes. They run on Framer Motion with transform and opacity animations and respect reduced motion.

How do I adopt the type scale?

The sizes are based on Tailwind utilities. You copy the classes or set up your own scale in your configuration.

Elements/Typography

Text animations for headlines, words and numbers. On hover, on scroll or on loop.

Tap a card to play the effect.

Interactive text

Highlighted words that draw their own icon on hover and reveal a preview image.

Justified TypesetterNew

Issue 07

FieldNotes onSlow Work

Six workshops, one winter, and a stack of pages that took longer than planned.

Echo Trail HeadlineNew

Everything arrives late and stays long

Extruded Hover TypeNew

Depth

Redacted Reveal TextNew

The report said we could not measure it so we built the sensor.

Photo Knockout HeadlineNew

From the field

Twelve weeks of observation, kept short.

Spotlight Reveal TextNew

Not everything has to be visible at once. Move your cursor across it.

6 of 9 shown

Text-Reveal

Text that fades in as you scroll.

Typewriter Cycle

We build

Scramble Text

Split Line Masking

Text across several lines,

line by line,

faded in.

Hover Blur Text

Moveyourmouseoverthistext.

Blur To Clear

Blurred, then clear.

Smooth Reveal

Content that appears as you scroll.

6 of 15 shown

Letters & words

Motion at the word and letter level.

Word Rotate

Built forTeams

Scroll Opacity Fade

A sentence

that becomes visible

line by line

as you scroll,

quite calmly.

Word Stagger

Eachwordanimatedonitsown.

Scroll Typewriter

Scroll Word Stagger

Fadedinwordbyword.

Scroll Words From Sides

Wordsmovetogetherfromthesides.

6 of 12 shown

Text styles & effects

Visual refinements like outlines, gradients and shimmer.

Variable Weight Hover TextNew

Move your cursor over this line

Animated Gradient Text

Motion in the gradient

Text Reveal Lens

Text Hover Stroke

Hover Me

Metallic Shimmer Wipe

Metallic sheen

Scroll Gradient Reveal

From light to dark.

6 of 11 shown

Marquees & Badges

Running strips, counters and rotating markers.

Curved Marquee TextNew

Radial Text MarqueeNew

Endless

Live Ticker Number

1248

Slot Machine Number

000

Flip Board Number

0000

Odometer Number

0123456789012345678901234567890123456789