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 StarfieldTintsDemo() {
  const fill = { "--sb-starfield-height": "100%" } as CSSProperties;
  return (
    <div className="w-full h-[420px] grid grid-cols-2 sm:grid-cols-4 gap-3">
      <Starfield tint="white" style={fill} />
      <Starfield tint="violet" style={fill} />
      <Starfield tint="cyan" style={fill} />
      <Starfield tint="green" warp speed={60} style={fill} />
    </div>
  );
}