Getting Started
Scroll Animations
Text Animations
Hover & Cursor
Sliders & Carousels
Galleries & Grids
Menus & Navigation
Preloaders & Intros
Page Transitions
3D & WebGL
import { StrokeRowsScroll } from "@/registry/tween/stroke-rows-scroll"
export function StrokeRowsScrollDemo() {
return <StrokeRowsScroll />
}
import { StrokeRowsScroll } from "@/components/ui/stroke-rows-scroll"<StrokeRowsScroll
introTitle="Three stages, nine nights, one long summer"
outroTitle="Lineup lands Friday, keep the weekend clear"
rowColors={[
["#FF5E5B", "#3DDC97", "#2F5BFF"],
["#2F5BFF", "#F7B2D9", "#3DDC97"],
["#FFD23F", "#FF5E5B", "#F7B2D9"],
]}
/>The intro section pins for pinDistanceFactor viewport heights (default 8), and one scrubbed timeline drives everything:
stroke-dashoffset in a staggered top, bottom, middle order, 0.3s apart, until they cover the screen.The trigger takes its scroller from usePreviewScroller, and a ResizeObserver on the scroller rebuilds the timeline. With prefers-reduced-motion: reduce, the section shows the end state (dark palette, second headline) with no pin.
| Prop | Type | Default | Description |
|---|---|---|---|
introTitle | ReactNode | default copy | Headline shown before the midpoint. |
outroTitle | ReactNode | default copy | Headline shown after the midpoint. |
closingTitle | ReactNode | default copy | Headline of the trailing section; pass null to omit it. |
rowColors | [string, string, string][] | 3 palettes | Stroke colors for the top, middle and bottom rows. |
curveColors | [string, string] | ["#FFD23F", ...] | Colors of the two curved strokes. |
borderColor | string | "#0f0f0f" | Color of the border path behind every stroke. |
lightBackground | string | "#EFE9DD" | Background before the midpoint. |
darkBackground | string | "#11151C" | Background after the midpoint. |
lightForeground | string | "#11151C" | Text color before the midpoint. |
darkForeground | string | "#F5EFE3" | Text color after the midpoint. |
pinDistanceFactor | number | 8 | How many viewport heights the section pins for. |
fontFamily | string | Barlow Condensed stack | Headline font. |
scroller | HTMLElement | string | null | — | Optional ScrollTrigger scroller; defaults to the preview's. |
className | string | — | Extra classes on the outer container. |