CSS Animations · Text

Twenty-six ways to move a sentence.

Segmentation uses Intl.Segmenter grapheme clusters, and every DOM-surgery effect keeps one accessible reading of the text throughout — a visually-hidden twin holds the real words while the animated layer is decorative and aria-hidden.

Scroll the matrix Read the catalog docs →

Segmentation cards trigger on scroll — continuous, typing, and structural loops below are already running.

MOVE

twenty-six primitives, one HTML attribute.

Segmentation & reveals

split-text, parameterized by unit (chars/words/lines) and direction, plus the reveal-direction presets built on the same primitive. Scroll to trigger — on:enter, the library default.

Segmentation — 3

Every character finds its own delay.

data-kui="split-chars 700ms"

Words arrive one at a time, in order.

data-kui="split-words 600ms"

Lines are measured after wrapping, then revealed as whole units, top to bottom.

data-kui="split-lines 650ms"

Reveals — 3

Words rise into place from below.

data-kui="text-reveal-up 600ms"

Words settle down from above.

data-kui="text-reveal-down 600ms"

Each line unmasks from a clipped sliver into full view.

data-kui="text-reveal-mask 700ms"

Continuous motion

Runs the moment the page loads, and never stops — on:load.

Motion — 2

This sentence never sits still.

data-kui="text-wave on:load"

A nervous little tremor, per letter.

data-kui="text-jitter on:load"

Typing

A caret, a cursor, a sentence assembling itself in real time.

Typing — 2

This line types itself out, once.

data-kui="typewriter"

Typed, deleted, retyped, forever.

data-kui="typewriter-loop on:load"

Resolve

Character-by-character decode from a scrambled charset to the real text.

Resolve — 3

RESOLVING FROM NOISE

data-kui="scramble"

01000100 01000101 01000011 01001111 01000100 01000101

data-kui="decode"

SIGNAL LOCK ACQUIRED

data-kui="glitch"

Color & line

Paint and stroke, layered onto text without touching layout.

Color — 4

A sheen that never stops sweeping.

data-kui="gradient-shimmer on:load"

Hover to sweep a gradient across me.

data-kui="gradient-sweep 900ms on:hover" — point at me

Hover for a highlighter to sweep behind me.

data-kui="highlight-sweep 500ms on:hover" — point at me

Outline first, then fills solid.

data-kui="text-outline-fill 700ms"

Line — 1

Hover to draw my underline.

data-kui="underline-draw 500ms on:hover" — point at me

Variable font

Animates standard font-weight/font-stretch/font-style — smoother still with an actual variable-font file loaded.

Variable font — 3

Weight, thin to bold.

data-kui="var-weight 700ms on:hover" — point at me

Width, condensed to wide.

data-kui="var-width 700ms on:hover" — point at me

Slant, upright to oblique.

data-kui="var-slant 2000ms on:hover" — point at me

Structural

Larger structural moves — cyclers, marquees, redaction, extrusion.

Structural — 5

designers

data-kui="word-cycler words:designers|developers|… interval:1800ms"

DESIGNIMATION · DECLARATIVE ANIMATION · NATIVE CSS FIRST ·

data-kui="marquee 14s" — infinite, time-driven

SCROLL TO DRIVE THIS ROW · SCROLL TO DRIVE THIS ROW ·

data-kui="marquee-scroll-linked timeline:scroll"

CLASSIFIED

data-kui="redaction-reveal 900ms"

DEPTH

data-kui="text-3d-extrude 700ms"