npm install @caustics/scroll-reveal <script> import { ScrollReveal } from '@caustics/scroll-reveal'; </script> <ScrollReveal preset="subtle" />
| Prop | Type | Default | Description |
|---|---|---|---|
| preset | string | "subtle" | Named preset. Overrides individual props when set. |
| speed | number | 1.0 | Animation speed multiplier. 0 = static. |
| intensity | number | 0.5 | Effect intensity. Range: 0–1. |
| colors | string[] | undefined | Override palette. Accepts hex, hsl, or CSS custom properties. |
| reducedMotion | 'pause' | 'static' | 'static' | Behavior when prefers-reduced-motion is active. |
| class | string | undefined | Additional CSS classes applied to the root element. |
caustics-scroll-reveal/ ├── svelte/ ScrollReveal.svelte · index.ts · types.ts ├── react/ ScrollReveal.tsx · index.ts · types.ts ├── vanilla/ scroll-reveal.ts · compiled .js ├── docs/ README.md · API.md · CHANGELOG.md ├── LICENSE.md MIT, commercial use included └── package.json
Scroll Reveal uses the IntersectionObserver API for performant scroll detection with zero layout thrashing. CSS transforms and opacity transitions run on the GPU compositor thread, guaranteeing 60fps even with dozens of simultaneous reveals.
All animations respect prefers-reduced-motion by default.