Starfield Parallax
A three-depth-layer field of drifting, twinkling stars with true parallax speed.
- Category
- Backgrounds
- Added
- 2026-09-01
- Deps
- none
- Updated
- 2026-09-01
This is a viberdy Pro component
The live preview, the props panel and the write-up are open to everyone. The full source, the AI prompt and CLI install are part of Pro.
Deep space, shipped
Three depth layers drifting in parallax
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
// ---------------------------------------------------------------
}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.
Pairs well with
Matched on shared tags and category — the entries most likely to be used alongside this one.
Pointer Warp Dot Field
backgroundsA canvas dot grid that bulges and brightens away from the cursor.
Caustic Light Pool
backgroundsWater caustics computed from the real focusing condition, so the bright filaments land where the physics puts them.
Flow Field Drift
backgroundsParticles carried through a divergence-free curl-noise field, so the frame never drains into a few basins.