Reveal entrance
Mask-slide — words rise from a horizon
pnpm add @caustics/kinetic-text gsap <!-- Svelte 5 — drop-in component --> <script> import KineticText from '@caustics/kinetic-text/svelte'; </script> <KineticText tag="h1" text="Welcome" preset="reveal" />
pnpm add @caustics/kinetic-text gsap /* React — hook returns a ref */ import { useKineticText } from '@caustics/kinetic-text/react'; const ref = useKineticText({ text: 'Welcome', preset: 'reveal' }); return <h1 ref={ref}></h1>;
pnpm add @caustics/kinetic-text gsap /* Vanilla — programmatic mount() */ import { mount } from '@caustics/kinetic-text'; const instance = mount(document.querySelector('h1'), { text: 'Welcome', preset: 'reveal', }); /* instance.update({ ... }), instance.destroy(), etc */
Every preset is a tuned configuration of one (or two, via compose)
of seven animation families — entrance, scroll-progress, scroll-velocity,
scramble, ambient variable-font, and pointer-interactive. Hover any card to
replay it. Set one with preset="reveal", override individual
family configs as needed.
| Prop | Type | Default | Description |
|---|---|---|---|
| text | string | string[] | required | Text to render. Array → one paragraph per item. |
| preset | PresetName | — | One of 20 curated configurations. User props override preset values. |
| enter | EnterConfig | — | 7 variants: fade-translate, mask-slide, blur-focus, stretch, weight-swell, scale-explode, rotate-settle. |
| scroll | ScrollConfig | — | Continuous interpolation tied to scroll position. weight, width, slant, color, opacity-wipe. |
| velocity | VelocityConfig | — | Reacts to scroll speed. Variants: weight, skew, stretch, all. Eases to idle when stopped. |
| scramble | ScrambleConfig | — | Cycles random glyphs and resolves. ascii / katakana / binary / alphanumeric / custom string. |
| ambient | AmbientConfig | — | Continuous variable-font axis modulation. Pauses offscreen via IntersectionObserver. |
| interactive | InteractiveConfig | — | Pointer-driven motion. jello-drag, magnetic, repel, weight-follow, wave. |
| compose | [Family, Family] | — | Run two families on the same text. e.g. enter + ambient. |
| split | SplitMode | 'chars' | 'chars' · 'words' · 'lines' · 'chars-words' · 'words-lines' |
| reducedMotion | 'respect' | 'soften' | 'essential' | 'ignore' | 'respect' | Behaviour under prefers-reduced-motion. Live media-query subscription. |
| accessibility | AccessibilityConfig | — | aria-label preservation, live-region politeness, screen-reader announcements. |
| onEnterComplete / onScrambleComplete / onGsapUnavailable | callback | — | Lifecycle hooks. Engine degrades gracefully if GSAP / SplitText is missing. |
caustics-kinetic-text/ ├── svelte/ KineticText.svelte · index.ts · types.ts ├── react/ KineticText.tsx · index.ts · types.ts ├── vanilla/ kinetic-text.ts · compiled .js ├── docs/ README.md · API.md · CHANGELOG.md ├── LICENSE.md Caustics Commercial License └── package.json
Kinetic typography — text as motion — is its own discipline. The current state of the art on the web is a collection of disconnected techniques: one site stitches gsap.from(chars, { stagger }) reveals together, another writes a custom scramble effect, a third rolls its own variable-font scroll-progress code. Every site reinvents the wheel.
Kinetic Text is the first component to unify these techniques into one instrument. Variable-font animation, character splitting, scroll-velocity reactivity, physics-based propagation, scramble effects, and elastic-neighbor interactions — all configurable via a compact prop surface, all sharing a consistent accessibility layer.
Six animation families compose freely: enter on visible, ambient on always, scramble on hover, jello on drag — and any two of them run on the same text via the compose prop. Variable-font axes (wght, wdth, slnt, opsz) animate as first-class citizens, applied straight through font-variation-settings. If the loaded font lacks a requested axis the browser ignores it and renders at the default — graceful degradation with no surprise crashes.
The accessibility story is the differentiator. aria-label preservation on the parent + aria-hidden on every split descendant means screen readers read the original text and ignore the visual fragmentation. prefers-reduced-motion is respected by default with four configurable modes ('respect' | 'soften' | 'essential' | 'ignore'). Live media-query subscription means toggling the OS preference mid-session reactively pauses or resumes — no page reload.
GSAP is a peer dependency. Most consumers already use GSAP elsewhere; bundling our own copy would cause ScrollTrigger scope clashes and timeline conflicts. If GSAP isn’t installed, the component renders unanimated text with a clear dev-mode warning — never crashes the page.
Ships with twenty curated presets across six categories. Bring your own fonts, your own copy, your own brand — Kinetic Text wires the motion.
Caustics Commercial License · lifetime updates within v1