Dither Prism Hero

Heroes 8

About

A full-screen WebGL hero background with animated dithering patterns, prismatic color refraction, holographic iridescence, and floating particles behind headline text.

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

Code

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

Usage.tsx

import DitherPrismHero from "@/components/ui/dither-prism-hero";

const settings = {
  title1: "Dither",
  title2: "Prism",
  color1: "#0f0f23",
  color2: "#6366f1",
  color3: "#ec4899",
  speed: 1,
  ditherIntensity: 0.15,
  prismIntensity: 0.5,
  particleCount: 50,
  showParticles: true,
  particleColor: "#ffffff",
};

export default function Demo(props: Partial<typeof settings>) {
  const s = { ...settings, ...props };
  return (
    <div className="h-screen w-full">
      <DitherPrismHero {...s} />
    </div>
  );
}