Astra Field — React Animated Background
A spiral written in starlight. Cool stellar dust, warm distant suns and a luminous core, suspended in a deep blue field.
Usage
import { AstraField } from "@/components/AstraField";
export function Galaxy() {
return <div style={{ height: 640 }}><AstraField interactive
{...{
interactive: true,
intro: true,
introDuration: 4.8,
shape: "six",
color: "#8cbeed",
intensity: 1,
speed: 0.35
}}
/></div>;
}Implementation notes & API
Original WebGL point-sprite implementation inspired by the OpenAI Astra page; no remote assets or Three.js dependency. Stars gather from a scattered 3D cloud into the spiral on mount (4.8 seconds). intro=false skips assembly; introDuration changes its duration independently of ambient speed. Restart animation replays it. Reduced motion shows the finished field immediately. shape chooses the six-shaped spiral or a galaxy. Drag and arrow keys rotate; Home resets. All copy belongs in your own DOM. Seeded particles, additive stellar glow, DPR capped at 1.5, 45fps. Hidden and offscreen scenes pause; reduced motion freezes ambient movement.
| Property | Type | Notes / default |
|---|---|---|
interactive | boolean | false in the library; enabled in this preview |
fallback | ReactNode | Shown when the renderer is unavailable |
className / style | string / CSSProperties | Applied to the outer container |