React Text Animation Components
ReactFrame has 9 React text animation components (5 free): scramble and decrypt effects, word-by-word reveals driven by scroll, 3D tilt and liquid distortion for display type, text made of particles, kinetic typography and infinite text marquees.
How to choose
- Hero headlines: text-scramble-pro, tilt-text or liquid-text.
- Storytelling while scrolling: word-reveal or scroll-word-highlight.
- Bold brand moments: kinetic-typography-showcase, particle-text.
- Running banners: infinite-marquee or diagonal-ticker-strips.
All 9 components
- Text Scramble ProFree
- Cycling phrases that decrypt from scrambled characters into readable text, left-to-right, right-to-left, or random reveal order, with a scramble-out transition and blinking cursor.
- npx shadcn@latest add https://reactframe.com/r/text-scramble-pro.json
- Tilt TextFree
- Large display text that tilts and scales in 3D toward the cursor, with smoothed spring-like motion and optional gradient fill.
- npx shadcn@latest add https://reactframe.com/r/tilt-text.json
- Liquid TextFree
- Text distorted through an animated SVG noise filter, 5 presets (liquid, melt, blob, ghost, crystal), cursor-proximity intensity, and a click burst ripple.
- npx shadcn@latest add https://reactframe.com/r/liquid-text.json
- Word RevealFree
- Staggered word or character reveal text, driven by scroll progress, viewport entry, or a manual trigger, 4 animation presets, 3 stagger patterns, and word highlighting.
- npx shadcn@latest add https://reactframe.com/r/word-reveal.json
- Scroll Word HighlightPremium
- A vertical snap-scrolling list of words next to a sticky prefix label, using CSS scroll-driven animation to glow, scale, and unblur the word nearest the center.
- Kinetic Typography ShowcasePremium
- Large-scale animated typography with two switchable themes: rotating 3D ribbons of text wrapped around a cylinder, or a stack of flipping cube towers revealing up to three face labels, both with mouse tilt and glow.
- Particle TextPremium
- Text rendered as a field of canvas particles that repel, attract, or swirl away from the cursor and burst apart on click, then spring back into formation.
- Infinite MarqueeFree
- A seamless scrolling text marquee with solid/gradient/outline text styles, a separator, double-row mode, and edge fade.
- npx shadcn@latest add https://reactframe.com/r/infinite-marquee.json
- Diagonal Ticker StripsPremium
- Two diagonally intersecting, infinite-scrolling text strips whose direction arrows flip with page scroll direction, with a left-to-right intro reveal, edge fade masking, and 3 preset two-color themes plus full custom colors.
Questions
- Is animated text still readable by search engines and screen readers?
- Yes, the text stays in the DOM as real text; the effects animate how it's drawn. Keep the page's h1 as real text rather than a canvas-only effect.
- Are these components free?
- 5 of the 9 are free (Text Scramble Pro, Tilt Text, Liquid Text, Word Reveal, Infinite Marquee); the others are premium and included in All-Access.
- How do I install them?
- Free components install with the shadcn CLI, for example: npx shadcn@latest add @reactframe/<slug>. You get the full React + Tailwind source in your project, with Motion as the only animation dependency.
Related collections
Want a whole page built from these? Ask your AI to build it with ReactFrame.