Starfield

Backgrounds

About

A canvas-based warp-speed pixel starfield background with configurable speed, star density, colour tint and a warp-streak mode, ported from the Starbase web component library by zweiundeins.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Starfield to your project and fits it to your theme.

Code

How Starfield is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import Starfield from "@/components/ui/starfield";
import type { CSSProperties } from "react";

export default function StarfieldWarpDemo() {
  return (
    <div className="w-full h-[420px]">
      <Starfield
        tint="cyan"
        warp
        speed={60}
        style={{ "--sb-starfield-height": "100%" } as CSSProperties}
      />
    </div>
  );
}