That's it. Your site now has text reveal.

npm install @caustics/text-reveal

<script>
  import { TextReveal } from '@caustics/text-reveal';
</script>

<TextReveal preset="rise" />

npm install @caustics/text-reveal

import { TextReveal } from '@caustics/text-reveal/react';
return <TextReveal preset="rise" />;

npm install @caustics/text-reveal

import { mount } from '@caustics/text-reveal';
mount(document.querySelector('#hero'), { preset: 'rise' });

Sensible defaults. Documented types.

Prop

Type

Default

Description

preset

string

"rise"

Named preset. Overrides individual props when set.

colors

string[]

undefined

Override palette. Accepts hex, hsl, or CSS custom properties.

reducedMotion

'pause' | 'static'

'pause'

Behavior when prefers-reduced-motion is active.

class

string

undefined

Additional CSS classes applied to the root element.

A zip. Everything else lives at caustics.dev.

caustics-text-reveal/
├── svelte/     TextReveal.svelte · index.ts · types.ts
├── react/      TextReveal.tsx · index.ts · types.ts
├── vanilla/    text-reveal.ts · compiled .js
├── docs/       README.md · API.md · CHANGELOG.md
├── LICENSE.md  Caustics Commercial License
└── package.json

Text Reveal splits text into characters, words, or lines and animates each unit in with the Web Animations API — staggered, eased, and ordered exactly how you want. Reveal on mount, or scroll-trigger via IntersectionObserver. Zero dependencies: no GSAP, no runtime libraries, around 4 KB gzipped.

The whole point is that the effect never costs you accessibility. The split spans are aria-hidden; the container carries an aria-label with the original, unbroken string — so a screen reader reads “Typography that earns attention,” never “T… y… p… o…” one glyph at a time. prefers-reduced-motion is honoured live: the text snaps to its final state with no per-character motion, and re-enables itself if the user toggles the OS setting mid-session. On destroy the element is restored to its exact original text.

Ships with a vanilla reveal() / mount() API, a [data-text-reveal] zero-markup auto-init, a Svelte 5 component and use:textReveal action, and a React hook and component — all driving the same engine.

That's it. Your site now has text reveal.

Sensible defaults. Documented types.

A zip. Everything else lives at caustics.dev.

Ready to ship?