Nebula

Heroes 30

About

An animated deep-space nebula background using a WebGL fractal noise shader with customizable colors and speed.

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

Code

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

Usage.tsx

import Nebula from "@/components/ui/nebula";

export default function NebulaDemo() {
  return (
    <div className="relative h-[500px] w-full overflow-hidden rounded-xl bg-black">
      <Nebula />
      <div className="relative z-10 flex h-full flex-col items-center justify-center gap-4 text-center">
        <h1 className="bg-gradient-to-b from-white to-white/60 bg-clip-text text-5xl font-semibold tracking-tight text-transparent">
          Explore the Nebula
        </h1>
        <p className="max-w-md text-balance text-white/70">
          A deep space nebula effect rendered with fractional distortion shaders.
        </p>
      </div>
    </div>
  );
}