BackgroundsCanvasHyperspace

Star Field

A hyperspace canvas field where cursor movement steers flight direction.

"use client";

import { useEffect, useRef } from "react";

export default function StarField() {
  const canvasRef = useRef(null);
  const mouse = useRef({ x: 0, y: 0 });
  const config = {
    count: 260,
    speed: 0,
    steering: 0.9,
    opacity: 0.5,
    bgColor: "#0a0d14",
    starColor: "rgba(210,225,255,<alpha>)"
  };

  useEffect(() => {
    const reduceMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
    if (reduceMotion) return;
    const canvas = canvasRef.current;
    const ctx = canvas.getContext("2d");
    const pixelRatio = Math.min(window.devicePixelRatio || 1, 2);
    let frame = 0;
    let width = 0;
    let height = 0;

    const makeStar = () => ({
      x: (Math.random() - 0.5) * 2,
      y: (Math.random() - 0.5) * 2,
      z: Math.random()
    });
    const stars = Array.from({ length: config.count }, makeStar);

    function resize() {
      const rect = canvas.getBoundingClientRect();
      width = rect.width;
      height = rect.height;
      canvas.width = Math.max(1, Math.floor(width * pixelRatio));
      canvas.height = Math.max(1, Math.floor(height * pixelRatio));
      ctx.setTransform(pixelRatio, 0, 0, pixelRatio, 0, 0);
    }

    function draw() {
      const centerX = width / 2;
      const centerY = height / 2;
      ctx.fillStyle = config.bgColor;
      ctx.fillRect(0, 0, width, height);

      for (const star of stars) {
        star.z -= config.speed;
        star.x += mouse.current.x * config.speed * config.steering;
        star.y += mouse.current.y * config.speed * config.steering;
        if (star.z <= 0) Object.assign(star, makeStar());

        const sx = (star.x / star.z) * width * 0.5 + centerX;
        const sy = (star.y / star.z) * height * 0.5 + centerY;
        if (sx < 0 || sx > width || sy < 0 || sy > height) {
          Object.assign(star, makeStar());
          continue;
        }

        const oldZ = star.z + config.speed;
        const osx = (star.x / oldZ) * width * 0.5 + centerX;
        const osy = (star.y / oldZ) * height * 0.5 + centerY;
        const alpha = Math.min(1, (1 - star.z) * 1.4) * config.opacity;

        ctx.beginPath();
        ctx.moveTo(osx, osy);
        ctx.lineTo(sx, sy);
        ctx.strokeStyle = config.starColor.replace("<alpha>", String(alpha));
        ctx.lineWidth = Math.max(0.3, (1 - star.z) * 2.5);
        ctx.stroke();
      }

      frame = requestAnimationFrame(draw);
    }

    resize();
    draw();
    const observer = new ResizeObserver(resize);
    observer.observe(canvas);
    return () => {
      cancelAnimationFrame(frame);
      observer.disconnect();
    };
  }, []);

  return (
    <canvas
      ref={canvasRef}
      onPointerMove={(event) => {
        const rect = event.currentTarget.getBoundingClientRect();
        mouse.current = {
          x: (event.clientX - rect.left) / rect.width - 0.5,
          y: (event.clientY - rect.top) / rect.height - 0.5
        };
      }}
      onPointerLeave={() => { mouse.current = { x: 0, y: 0 }; }}
      style={{ display: "block", width: "100%", height: "100%" }}
    />
  );
}

Effect guide

Copy the star field animated background effect

What it is: A hyperspace canvas field where cursor movement steers flight direction.

Where to use it: Use this motion pattern for hero sections, product pages, dashboards, and interactive marketing surfaces.

Supported formats: React, Vue, Vanilla JS.

Get motion drops

New UI effects, code snippets, and GrabMotion updates by email.