Black Hole

Shaders 22

About

An animated WebGL eclipse: a dark disc with a glowing rim and a soft corona that drifts around it. Use it as a hero or card background. Three colors, speed, size and grain are props, with no dependencies. Part of GradFlow: https://gradflow.meerbahadin.dev

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

Code

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

Usage.tsx

import { BlackHole } from "@/components/ui/black-hole"

// the adjustable settings 21st shows next to the preview
const settings = {
  color1: "#ff5a14",
  color2: "#080a24",
  color3: "#ffe1aa",
  speed: 0.6,
  scale: 1.2,
  noise: 0.14,
}

export default function BlackHoleDemo(props: Partial<typeof settings>) {
  const config = { ...settings, ...props }

  return (
    <div className="relative h-screen w-full overflow-hidden bg-black">
      <BlackHole {...config} className="absolute inset-0" />
      <div className="absolute inset-x-0 bottom-0 flex flex-wrap items-end justify-between gap-6 p-10 text-white">
        <div>
          <h1 className="text-4xl font-medium tracking-tight">Black hole</h1>
          <p className="mt-2 max-w-sm text-sm text-white/60">
            One of twenty WebGL shaders from GradFlow. Three colors, no dependencies.
          </p>
        </div>
        <a
          href="https://gradflow.meerbahadin.dev"
          target="_blank"
          rel="noreferrer"
          className="rounded-full border border-white/20 bg-white/10 px-4 py-2 text-sm font-medium backdrop-blur-md transition-colors hover:bg-white/20"
        >
          gradflow.meerbahadin.dev ↗
        </a>
      </div>
    </div>
  )
}