Getting Started
Scroll Animations
Text Animations
Hover & Cursor
Sliders & Carousels
Galleries & Grids
Menus & Navigation
Preloaders & Intros
Page Transitions
3D & WebGL
import { StarfieldScroll } from "@/registry/tween/starfield-scroll"
export function StarfieldScrollDemo() {
return <StarfieldScroll />
}
import { StarfieldScroll } from "@/components/ui/starfield-scroll"<StarfieldScroll
intro="Engines Hot"
headers={["Clear the pad", "Into the dark", "Hold the line"]}
outro="Touchdown"
/>The starfield section pins for pinDistanceFactor viewport heights. Each star is a radial streak with a random direction, length, width and weighted palette color, drawn on a 2D canvas as a gradient line from a central hole outwards. The scroll progress raises a "fill" value that sets the travel speed, so streaks rush outward faster the further you scroll and fade in softly near the center.
A single scrubbed timeline, split into words with SplitText, fades the first header out word by word while it scales up, brings the second in and out, then settles on the third. The trigger uses usePreviewScroller and a ResizeObserver rebuilds it on resize. With prefers-reduced-motion: reduce only the final header is shown over a static field.
| Prop | Type | Default | Description |
|---|---|---|---|
intro | ReactNode | "Engines Hot" | Heading of the section before the pin. |
headers | [string, string, string] | default copy | The three headers that scrub over the starfield. |
outro | ReactNode | "Touchdown" | Heading of the section after the pin. |
starCount | number | 1000 | Number of streaks. |
palette | string[] | ice → amber | Hex colors for streaks. |
paletteWeights | number[] | weighted | Probability weight of each palette color. |
pinDistanceFactor | number | 5 | Pin length in viewport heights. |
background | string | "#0f0f0f" | Section background. |
scroller | HTMLElement | string | null | — | Optional ScrollTrigger scroller; defaults to the preview one. |
className | string | — | Extra classes on the outer container. |