Text FX Pack: 5 Kinetic Typography Effects for React and Vanilla JS

Type is the first thing a visitor reads and the first place a site feels cheap. The Text FX Pack gives your headlines the motion language of award sites: five kinetic typography effects that each drop in with a single function call, hold 60fps, and clean up after themselves. No build step, no dependencies, no WebGL. Every effect ships as both a vanilla ES module and a React 18 component.

WHAT YOU GET

- Scramble Reveal: characters churn through random glyphs and lock into the real text one by one when the headline scrolls into view.

- Split Lines: the block splits into its rendered lines at runtime and each line slides up out of a mask with a stagger, like a title card.

- Gradient Shimmer: a band of light sweeps across the headline, clipped to the letterforms. Liquid metal for logotypes and heroes.

- Magnet Letters: every letter is a small spring. The pointer scatters them and they snap back with real overshoot, or flip the mode and they lean in.

- Typewriter Plus: a typewriter with human rhythm, longer breaths after punctuation, multi-string rotation, and a cursor that only blinks at rest.

SETUP

1. Unzip.

2. Pick an effect folder inside components/.

3. Vanilla: copy the .js file and import it as an ES module. React 18+: copy the .jsx file and its .js neighbor together.

4. Call the factory with a target element, or wrap your text in the component. Done.

Every effect takes an options object with sensible defaults and full knobs: timing, stagger, easing, colors, physics, glyph pools, cursor behavior. Each folder includes a polished demo.html and a README with the complete props table.

WHAT IS INCLUDED

- 5 vanilla ES modules (scramble-reveal, split-lines, gradient-shimmer, magnet-letters, typewriter-plus)

- 5 matching React 18 components

- 5 standalone demo pages

- Per-effect READMEs plus a pack README

- Engineering you can trust: every effect pauses on hidden tabs, honors prefers-reduced-motion with a finished static state, keeps screen readers on the real copy via aria-label, and fully restores the DOM on destroy or unmount.

LICENSE

One-time purchase, single buyer (person or company). Use in unlimited personal and commercial projects, including client work, on your own sites, products, and channels. Do not resell or redistribute the files themselves. Full plain-language license included in the download.