Cadence Motion · Sample 402
Eight scroll-triggered entrances, documented like a type specimen — each one named, timed, and printed with its easing curve. Content is legible first; motion is the finishing pass.
We treat entrances the way we treat a grid: shared timings, one easing family, predictable stagger. The reader should feel authorship, never notice mechanics.
Motion earns its place when it clarifies where to look next — and then gets out of the way.Cadence Motion — house rule №1
Scroll each block into view. Every card prints the exact easing curve and duration token driving it — the same tokens you would copy into your own stylesheet.
The block is masked from its baseline upward. Because clip-path runs on the compositor, text never reflows and edges stay crisp — a confident, architectural entrance for headings and hero copy.
A brief defocus that resolves as the element settles. Reserved for supporting prose and captions — soft enough to feel atmospheric, quick enough to stay out of the reading path.
A feathered gradient mask travels across the panel, revealing image or illustration with no hard edge. Ideal for media tiles and full-bleed art, where a clip would feel abrupt.
Words arrive in sequence, giving a sentence its own tempo.
Each word is wrapped and indexed; the delay compounds by --stagger. Best on short, meaningful lines — a headline, a manifesto — never on body paragraphs.
Cadence
The finest grain: glyphs cascade in with a whisper of rotation. The accessible name is preserved on an aria-label so screen readers hear whole words. Use sparingly — signatures, wordmarks, a single line.
A restrained scale from 0.9, anchored low so the element feels like it stands up rather than zooms toward the reader. Pairs well with cards and callouts that deserve a beat of emphasis.
SVG strokes animate via stroke-dashoffset, sequenced path by path. For logos, diagrams, and underlines that should feel hand-drawn.
How the studio keeps eight entrances feeling like one system.
unobserve after their entrance. The replay control re-arms them on demand.