Starfield Warp Scroll
A pinned canvas starfield where scroll drives the warp. A thousand weighted-color streaks fire out of a center hole, stretching and brightening the further they travel, while three headlines hand off word by word: one fades out as it swells past full size, the next fades in as it settles. Canvas 2D with GSAP ScrollTrigger, SplitText, and Lenis. No images.
npx shadcn@latest add https://ui.aryank.space/r/starfield-warp-scroll.jsonInstalls from ui.aryank.space. To add it by hand, copy the files in Usage below, or register the @compronents namespace via the docs.
| Prop | Type | Default | Description |
|---|---|---|---|
| introHeading / headings / outroHeading | string / [string, string, string] / string | BLANK copy | Copy for the lead-in section, the three warp headlines, and the closing section. |
| starCount | number | 1000 | Number of streaks in the field. |
| palette / paletteWeights | string[] / number[] | 6 cyan-to-pink hexes | Streak colors and the probability weight of each, sampled once per star at creation. |
| embedded | boolean | true | Own the scroll container so it fits a bounded box. Set false to drive it from the window scroll. |
headingstextThe three headlines that hand off across the warp.
palettecolorStreak colors, sampled with per-color weights.
starCounttextHow many streaks are drawn each frame.
gsaplenis