StarField

A warp-speed star field effect with configurable density and color. Built with Three.js and @react-three/fiber.

Interactive Demo

Loading star field...

Color

Stars: 1000

Speed: 1.0

import { StarField } from "@mantleui/react/three";

<StarField
  color="#ffffff"
  count={1000}
  speed={1}
  height={400}
/>

Prop	Type	Default	Description
`count`	`number`	`1000`	Number of stars.
`color`	`string`	`"#ffffff"`	Star color.
`speed`	`number`	`1`	Warp speed multiplier.
`depth`	`number`	`10`	Depth of the star tunnel.
`starSize`	`number`	`0.01`	Size of each star point.
`height`	`string \| number`	`400`	Height of the container.
`backgroundColor`	`string`	`"transparent"`	Background color of the container.

count1000

number

Number of stars.

color"#ffffff"

string

Star color.

speed1

number

Warp speed multiplier.

depth10

number

Depth of the star tunnel.

starSize0.01

number

Size of each star point.

height400

string | number

Height of the container.

backgroundColor"transparent"

string

Background color of the container.