React Kinetic Typography Components
Variable font weights, letter-spacing animation, masked text, outlined strokes and oversized headlines. Typography used as the main visual, suited to brand pages and portfolios.
10 components, 7 of them free to install without an account.
A heading rendered as several overprinted colour plates that slide in from misalignment into exact register when they enter the viewport, then drift slightly out of register again on hover.
- Leading UnfoldFree
Narrative through line height — a paragraph starts compressed into a near-solid block of ink, and scroll progress gradually unfolds the leading and tracking into a readable paragraph, growing the layout height and pushing the following sections down.
A festival-poster lineup layout — names are grouped into rows by tier with the size stepping down each level, and hovering or clicking one promotes it to a bigger row with a shared layout animation while the rest re-justify to fill the width.
An interactive modular type scale playground: pick a ratio or drag the slider, and every level on the page recomputes and reflows in sync with a spring animation.
A variable-font showcase in the style of a foundry specimen page — a giant glyph, a weight ladder, and a size ramp — where dragging an axis slider makes the whole specimen tween and reflow in sync with Motion.
A layout skeleton built from giant letters used as mask windows, each holding its own image or video that moves with parallax on scroll, with small type flowing around them.
- Alphabet LedgerFree
An alphabetical index scroll — a poster-scale initial letter is the sticky anchor of each section, and at the handover the new letter pushes the previous one out with a thin-to-bold weight baton animation.
A woodtype flush heading — each line of a multi-line heading is solved onto the variable font's wdth axis so it stretches flush to both edges of the container, and on reveal the lines spring open from an extremely narrow width to the solved width, one after another.
A launch-style sequence of title cards, each with its own entrance (blur-in, word stagger, punch, oversized pan, gradient keyword), background flips between cards and an optional HUD, played automatically or on scroll.
Large type filled with procedurally generated materials — wood grain, brushed metal, paper noise, marble and holo foil — cross-fading on autoplay or hover with a sweeping highlight, and no texture images loaded.