proNew275 lines · framer-motion, three

Hero Starfield Warp

A starfield that streaks instead of twinkling. A centred hero with a three.js starfield tunnel: each star is drawn as a short line segment between its previous and current depth, so speed reads as streak length rather than point size.

Use it for: Launch, changelog or 'ship fast' pages that want literal warp-speed motion instead of a generic particle drift.
Themes: Light + dark
License: Commercial use

Live

Jump · Warp drive

Ship at warp speed

A streaking starfield tunnel for launch pages, release notes and anything that wants to feel fast.

Engage →Read the changelog

tsx

"use client";

import * as React from "react";
import { motion, useReducedMotion } from "framer-motion";
import { cn } from "@/lib/utils";

function useReducedMotionSafe() {
  const prefersReduced = useReducedMotion();
  const [mounted, setMounted] = React.useState(false);
  React.useEffect(() => setMounted(true), []);
  return mounted ? !!prefersReduced : false;
}

/**
 * Centred hero with a three.js starfield tunnel: points stream toward the
 * camera and are drawn as short trailing line segments, so speed reads as
 * streak length rather than a particle sprite. three.js is imported lazily.
 */

export interface HeroStarfieldWarpProps {
  eyebrow?: string;
  headline?: string;

The rest is in Pro.

Full source, the rebuild prompt and registry install unlock with Pro or Lifetime.

Get Pro

How it behaves

→Stars are stored as flat typed arrays (x, y fixed; z animated) and rendered as THREE.LineSegments: each frame the previous z becomes the trailing vertex and the new z the leading one, so the GPU's own perspective projection stretches nearer stars into longer streaks automatically.
→When a star's z passes the near plane it respawns at the far plane with a new random (x, y) offset, so the tunnel never empties.
→speed scales how fast stars approach; warp switches between a fast streaking tunnel and a slow calm drift (same code path, different rate constant); density scales star count (capped).
→Each line segment's colour interpolates from a dim to a bright theme colour (--muted-foreground → --foreground) based on closeness to camera, additive-blended for a glow.
→Colours are re-read from computed CSS custom properties on every .dark class toggle.
→If the WebGLRenderer can't acquire a context, a faint static radial glow stands in for the tunnel.
→Render loop pauses off-screen and when the tab is hidden; prefers-reduced-motion advances one tiny step and stops instead of looping.
→On unmount: cancels the frame, disposes the geometry/material, calls renderer.dispose() + renderer.forceContextLoss(), and removes the canvas.

Accessibility

✓The starfield canvas and its fallback are aria-hidden; only the eyebrow, heading, copy and two real <a> CTAs are exposed to assistive tech.
✓A radial mask fades the tunnel out near the edges so headline contrast stays high in both themes.
✓Headline is a single <h1>; CTAs keep the design system's visible focus ring.
✓Honours prefers-reduced-motion.