Starfield
Pro
Warp-speed stars flying toward the viewer, with streaks that stretch as you go faster.
Jump to lightspeed
Customize
300
1
0.5
#f4ede3
Installation
Starfield is part of Pro. After purchase you're invited to the private mekai-ui/mekai-ui-pro GitHub repository: copy starfield.tsx into components/ui and run npm install motion.
Usage
import { Starfield } from "@/components/ui/starfield";
<section className="relative h-[600px] bg-ink-950">
<Starfield count={300} speed={1.5} trail={0.6} />
</section>Props
5 properties| Property | Type | Default | Description |
|---|---|---|---|
| count | number | 300 | Stars on screen at once. |
| speed | number | 1 | Flight speed multiplier. |
| color | string | "#f4ede3" | Star color as a hex value. |
| trail | number | 0.5 | Streak length, from 0 (dots) to 1 (long warp streaks). |
| className | string | — | Extra classes for the canvas. It fills its nearest positioned parent. |
Dependencies: motion