Starfield Parallax
A three-depth-layer field of drifting, twinkling stars with true parallax speed.
Canvas 2D0 deps1 file · 3 KB TSXreduced-motion aware
Props
"use client";
import { useEffect, useRef } from "react";
type Star = { baseX: number; y: number; r: number; layer: number; phase: number };
const LAYER_ALPHA = [0.35, 0.65, 1];
const LAYER_SPEED_PX_S = [14, 30, 52];
export function StarfieldParallax({
density = 90,
speed = 1,
color = "#ffffff",
}: {
density?: number;
speed?: number;
color?: string;
}) {
// ---------------------------------------------------------------
// Full source available with a viberdy Pro subscription.
// https://viberdy.dev/pricing
// ---------------------------------------------------------------
}Details
About this background
Starfield Parallax draws every star to one canvas rather than one DOM node each — at 90 default stars that's a single clearRect plus 90 small arc fills per frame, and the props panel caps density at 160, well inside what one canvas handles without dropped frames. The distinguishing choice versus the other canvas pieces in this batch is that each star's x position is recomputed each frame as a pure function of elapsed time and a per-star seeded base position, rather than incrementally added to every frame — so there's no accumulated floating-point drift over a long-running session, and any given frame is fully reproducible from t alone. Three depth layers move at different fixed speeds, which is what actually produces the parallax read rather than just "stars moving." Random seeding (position, depth, twinkle phase) happens once, inside a post-mount ResizeObserver callback, so there is nothing for the server to disagree with the client about. The caveat: because star size stays small and near-white, it wants a genuinely dark base — a light or midtone background flattens the twinkle almost completely.
