LivingNebula

Heroes 56

About

A full-screen, canvas-driven star nursery that pulses with creative energy. Particles emit from the center point, drift outward under drag, and fade in and out to simulate a living nebula breathing with cosmic light. Built with HTML5 Canvas and React.

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

Code

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

Usage.tsx

import LivingNebula  from "@/components/ui/living-nebula-2";

export const LivingNebulaDemo = () => (
  <LivingNebula
    particleCount={1200}
    trailLength={0.15}
    canvasGlow={20}
    className="flex flex-col items-center justify-center text-center px-4 py-8"
  >
    <h1 className="text-5xl font-bold text-transparent bg-clip-text bg-gradient-to-b from-white to-gray-300">
      Living Nebula
    </h1>
    <p className="mt-4 text-lg text-gray-300 max-w-xl">
      A generative star nursery that pulses with creative energy at the heart of the cosmos.
    </p>
    <button className="mt-8 px-6 py-3 bg-white/10 text-white rounded-lg backdrop-blur-sm border border-white/20 shadow-lg hover:bg-white/20 transition">
      Witness Creation
    </button>
  </LivingNebula>
)

export default LivingNebulaDemo