Component theme

Kinetic Typography

20 components, each a single self-contained HTML file — no frameworks, no build step. Preview them here, or see them live on the canvas.

• Weight Morph WaveEach letter of a word pulses font-weight and vertical scale in a staggered sine wave, shifting hue from cyan to blue.
• Scramble DecodeNeon-green monospace words scramble through random glyphs then lock left-to-right like a terminal decrypting. Auto-cycles; click skips to next word.
• Split-Flap BoardSix amber tiles cycle through letters to spell airport-style words (DEPART, ARRIVE, ONTIME, BOARDS) on a dark charcoal background with a rotateX flip…
• Gradient ShimmerBold "SHIMMER" text with a rainbow gradient clipped to the letterforms, continuously panning for a glossy iridescent sweep on deep umber.
• Glitch RGB SplitRed and cyan pseudo-element copies of GLITCH drift and randomly snap with clipped displacement, simulating a CRT RGB-split glitch on near-black.
• Marquee TickerTwo rows of bold words scroll in opposite directions — yellow left, teal right — with red bullet separators on a dark green background, news-ticker style.
• Moving MaskDiagonal gradient light band sweeps across REVEAL, illuminating letters in shifting teal-copper hues against dark. Pure CSS mask + background-clip animation.
• Wavy SineLetters of "WAVES~" bob vertically and rotate along a staggered sine wave with per-letter hue cycling between cyan and teal on a deep navy background.
• 3D Extruded WordBold word "DEPTH" rotates in 3D via oscillating rotateX/Y transforms; 14-layer drop-shadow stack creates a warm extruded block illusion.
• Typewriter LoopMonospace terminal line types and deletes phrases in a loop with randomized keystroke timing; a glowing green block caret blinks throughout.
• Stagger CascadeAmber glyphs drop one by one with motion trails and spring squash on impact; settled word breathes with a sine lift, then cycles to the next word.
• Rack FocusTwo stacked words trade sharpness in a cinematic rack-focus breath: the defocused word blooms into a soft cyan halo while the focused one snaps razor-sharp.
• Kerning BreathThe word BREATHE expands and contracts letter-spacing in a slow 5.2-second breath cycle; hairline glows pulse in each gap, rippling outward from center.
• Ransom AssemblyMixed-font letters on cut-paper swatches fly in from random edges and spring-tumble into RANSOM, then reassemble. Click to restart.
• Ticker Tape FallSplit-flap letter reels spin and brake staggered onto each letter with motion-blur streaks and a teal glow flash on lock. Auto-cycles four words.
• Line Wipe SweepA gold scan bar sweeps down outlined letters, filling them with glowing solid color as it passes — like a darkroom print developing. Cycles through four…
• Optical Axis MorphThe word MORPH breathes between narrow-upright and wide-italic states via canvas-drawn stroke segments; copper-to-vermillion glow pulses with each axis cycle.
• Baseline BounceAmber monospace letters bounce off a baseline in a staggered ripple with squash-stretch and shadow puddles. Pointer kicks letters up; click launches all.
• Vapor Condense300 teal particles drift as a glowing haze then gradually condense into the crisp word VAPOR via cosine easing, then dissolve back — looping continuously.
• Pivot Flip RowA row of split-flap cards flips letter by letter in a cascading wave, cycling through words in mint-on-purple departure-board style.