Moving text is the quickest way to give a page a voice: a headline that rises into place, a ticker that never stops, words that light up as you read. These elements cover the common patterns, each as a small standalone script with no dependencies. Pick one, tune it in the preview, and copy the code or the prompt.
Text animation elements
Marquee tickerEndless horizontal text that pauses on hover, with speed, gap and direction controls.
Split text revealA headline whose words rise out of a mask one after another when it scrolls into view.
Letter pop introEach letter overshoots its size and settles, staggered left to right, for a bold page intro.
Word read highlightWords in a paragraph light up one by one as it scrolls through the viewport.
Scroll velocity skewText that leans and splits into two colour fringes in proportion to how fast the page scrolls.
Scroll spring headingAn oversized heading slides sideways with scroll progress through a spring, lagging and settling.
Hover font variantsA text index whose rows flip through serif, mono, outline, wide and italic styles while hovered or focused.
How to choose
- Marquee ticker: scrolling text banner, ticker, logo strip.
- Split text reveal: kinetic headline, headline reveal, text reveal on scroll.
- Letter pop intro: intro animation, title pop, loader title.
- Word read highlight: scroll text highlight, read progress text, scroll-linked paragraph.
- Scroll velocity skew: scroll speed effect, kinetic headline on scroll, rgb split text.
- Scroll spring heading: oversized heading scroll, horizontal text on scroll, spring scroll text.
- Hover font variants: menu hover font change, project index hover, text list hover effect.
Check how a real site does it
Not sure which technique a site you like uses? Run it through the animation library checker or open the gallery of site breakdowns.
Animation library checkerFind out whether a site runs GSAP, Three.js, Lenis or Framer Motion.
Website font finderThe fonts a page really loads, from just a URL.
Color palette from URLThe colors a site really uses, ranked, as copy-ready CSS.
Design token extractorPull a site's CSS variables and tokens as JSON or Tailwind.