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 @compronents/starfield-warp-scrollInstalls from ui.aryank.space. Needs a registry token and a one-time @compronents entry in components.json. The docs walk through both.
Checking access…
| 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