Editorial Type

Type that performs.

Typography carries the voice of a page. These components give type a performance without sacrificing reading: every animated string is exposed once to assistive technology, and every effect has a calm static form.

C.09
viewportstaggerzero deps
Kinetic Headline
Display type that rises out of masks line by line, word by word or character by character.
Typography & Text · React / CSS / Tailwind
C.10
hoverfocuscontinuouszero deps
Text Scramble
Text that resolves through a flurry of random glyphs — without ever changing width.
Typography & Text · React / Tailwind
C.11
scrollscroll-linkedmotion
Gradient Reveal Text
A paragraph whose words take on an accent gradient as you scroll it into place.
Typography & Text · React / Motion / Tailwind
C.12
hoverfocuscontinuouszero deps
Infinite Marquee
A seamless horizontal marquee that eases to a stop on hover and never jumps.
Typography & Text · React / CSS / Tailwind
C.41
viewportcontinuouszero deps
Typewriter
Types, holds and deletes a rotating list of phrases behind a blinking caret.
Typography & Text · React / Tailwind
C.42
pointercontinuouszero deps
Proximity Text
Letters swell in weight, width and scale as the pointer approaches — on any variable font.
Typography & Text · React / CSS / Tailwind
C.43
hoverfocuscontinuouszero deps
Circular Text
A rotating ring of type around a centre slot — the classic “available for work” badge.
Typography & Text · React / SVG / Tailwind
C.44
viewporthovertweenzero deps
Marker Highlight
Hand-drawn annotations — marker swipes, underlines, circles, boxes — that draw in on view.
Typography & Text · React / SVG / CSS / Tailwind
C.71
viewportstaggerzero deps
Split-Flap Display
A Solari departure board: hinged flaps fall cell by cell until the new text is spelled out.
Typography & Text · React / CSS / Tailwind
C.72
pointercontinuouszero deps
Masked Text
Display type used as a window onto a moving texture — gradient, grain, stripes or your image.
Typography & Text · React / CSS / Tailwind
C.73
viewportcontinuouszero deps
Morph Text
Words that melt into one another through a liquid blur-and-threshold morph.
Typography & Text · React / SVG / CSS / Tailwind
C.74
hoverfocuscontinuouszero deps
Glitch Text
A tasteful RGB-split glitch: colour channels jump out in clipped slices, capped at three bursts a second.
Typography & Text · React / CSS / Tailwind
C.101
scrollscroll-linkedmotion
Scroll Text Path
Type that travels along a curved SVG path — wave, arc, loop or your own — steered by scroll progress.
Typography & Text · React / Motion / SVG / Tailwind
C.102
viewporttweenzero deps
Fit Text
A headline that sizes itself to exactly fill its container's width — per line, with any font, without a first-paint jump.
Typography & Text · React / CSS / Tailwind
C.103
clickkeyboardstaggermotion
Testimonial Rotator
An editorial quote carousel: words blur in one by one, authors swap, and a pausable timer fills the active indicator.
Typography & Text · React / Motion / Tailwind
C.104
clickhovercontinuouszero deps
Falling Text
A sentence whose words or letters break loose and fall with real 2D physics — then can be dragged, thrown and reset.
Typography & Text · React / CSS / Tailwind
C.131
hoverfocustweenzero deps
Animated Link
Inline links with refined hover and focus underlines — slide, grow, double, highlight, arrow and wave — that follow line wraps.
Typography & Text · React / CSS / SVG / Tailwind
C.132
hoverfocusspringmotion
Wave Text
Letters that ripple in a springy wave from the letter nearest the pointer — on hover, focus, in view or continuously.
Typography & Text · React / Motion / Tailwind
C.133
pointerkeyboardtweenzero deps
Type Specimen
An interactive variable-font specimen: editable sample, live axis sliders, waterfall, glyph loupe and CSS output.
Typography & Text · React / CSS / Tailwind
C.134
clickkeyboardcontinuouszero deps
Spoiler Text
Text hidden under shimmering particle noise that dissolves outward from where you click.
Typography & Text · React / Canvas / Tailwind
C.161
hoverfocustweenzero deps
Sidenotes
Numbered references whose notes sit in the margin beside their line, and fold into inline disclosures on narrow containers.
Typography & Text · React / CSS / Tailwind
C.162
clickkeyboardtweenzero deps
Read More
Line-clamped text that expands to its measured height, with a fade at the clamp and a button only when it overflows.
Typography & Text · React / CSS / Tailwind
C.163
hoverviewporttweenzero deps
Text Prism
Words printed on the faces of a 3D prism that tumbles to the next word, with the width reserved for the longest.
Typography & Text · React / CSS / Tailwind
C.164
viewporthoverstaggerzero deps
Stroke Draw Text
Display text drawn as a self-tracing outline, letter by letter, that then fills in.
Typography & Text · React / SVG / Tailwind
C.191
hoverpointerspringmotion
Text Image Reveal
Editorial text where marked words reveal an image: an inline pill that pushes the line apart, or a floating print that follows the pointer.
Typography & Text · React / Motion / Tailwind
C.192
keyboardclickzero deps
Text Search Highlighter
Find-in-text for any content block: every match highlighted, a "3 of 12" counter, and Enter / Shift+Enter to step through them.
Typography & Text · React / CSS / Tailwind
C.193
clickkeyboardtweenmotion
Text Diff
An animated word- or character-level diff: deletions strike through, insertions type in, inline or side by side with a +12 −5 summary.
Typography & Text · React / Motion / Tailwind
C.194
clickkeyboardspringmotion
Code Walkthrough
A presentation-style code walkthrough: each step highlights a line range, lines grow and collapse between steps, and captions explain.
Typography & Text · React / Motion / Tailwind

Technology requirements

Everything this set needs, combined. Each component remains a separate, self-contained file.

ReactCSSTailwindMotionSVGCanvas

npm dependencies: motion
Peer: react, tailwindcss

npm install motion

Next collectionMicro-Interaction Toolkit