About
An animated WebGL light ribbon with rainbow spectral fringe drifting on a pure black background, used as a decorative hero or section backdrop.
Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Spectral Ribbon to your project and fits it to your theme.
Code
How Spectral Ribbon is used: the demo's code. The component's own source comes with a free account.
Usage.tsx
import { SpectralRibbon } from "@/components/ui/spectral-ribbon";
export default function SpectralRibbonDemo() {
return (
<div className="h-screen w-full">
<SpectralRibbon className="h-full w-full" />
</div>
);
}
















