Getting Started
Scroll Animations
Text Animations
Hover & Cursor
Sliders & Carousels
Galleries & Grids
Menus & Navigation
Preloaders & Intros
Page Transitions
3D & WebGL
import { StrokeCoverScroll } from "@/registry/tween/stroke-cover-scroll"
export function StrokeCoverScrollDemo() {
return <StrokeCoverScroll />
}
import { StrokeCoverScroll } from "@/components/ui/stroke-cover-scroll"<StrokeCoverScroll
before={{ title: "Room 14, before", body: "Bare plaster, rollers out." }}
after={{ title: "Room 14, after", body: "Two coats, dry by noon." }}
strokeColor="#FF5A36"
/>The section pins for pinDistanceFactor viewport heights and a scrubbed timeline drives thirteen diagonal strokes, each drawn twice (a dark outline and a slightly thinner fill) by animating stroke-dashoffset from the path length to 0.
The strokes draw in an interleaved order (outer ones first, then the gaps) with small timing wobbles until the screen is covered. At that moment the first message is swapped for the second, and the strokes undraw in reverse order by pushing the dash offset to -length. Around the swap, three sparkle shapes pop in with a back.out scale and spin, then shrink away.
The trigger uses usePreviewScroller, and a ResizeObserver rebuilds it on resize. With prefers-reduced-motion: reduce the second message is shown without strokes.
| Prop | Type | Default | Description |
|---|---|---|---|
intro | ReactNode | default copy | Heading of the section before the pin. |
before | { title, body } | default copy | Message shown before the strokes cover the screen. |
after | { title, body } | default copy | Message revealed when the strokes undraw. |
outro | ReactNode | default copy | Heading of the section after the pin. |
strokeColor | string | "#FF5A36" | Stroke fill color. |
outlineColor | string | "#16130F" | Stroke outline, sparkle outline and text color. |
sparkleColor | string | "#FFF6E6" | Sparkle fill color. |
background | string | sky → butter gradient | CSS background of all three sections. |
pinDistanceFactor | number | 4 | Pin length in viewport heights. |
scroller | HTMLElement | string | null | — | Optional ScrollTrigger scroller; defaults to the preview one. |
className | string | — | Extra classes on the outer container. |