A breathtaking WebGL hero background featuring advanced dithering, prismatic refraction, and holographic iridescence rendered in real-time with GLSL.
pnpm dlx shadcn@latest add @componentry/dither-prism-heroDependencies: framer-motion @react-three/fiber three
import { DitherPrismHero } from "@/components/ui/dither-prism-hero"
<DitherPrismHero
title1="Experience"
title2="The Future"
/>| Prop | Type | Default |
|---|---|---|
title1 | stringFirst line of the main metallic headline. | — |
title2 | stringSecond line of the main metallic headline. | — |
color1 | stringPrimary color (deep/dark) for the gradient base. | "#0f0f23" |
color2 | stringSecondary color (mid-tone) for gradient transitions. | "#6366f1" |
color3 | stringTertiary color (bright/accent) for gradient highlights. | "#ec4899" |
speed | numberAnimation speed multiplier for all shader effects. | 1 |
ditherIntensity | numberIntensity of the dithering effect (0-1). Higher values create a more pronounced retro/grainy look. | 0.15 |
prismIntensity | numberIntensity of the prismatic rainbow refraction (0-1). | 0.5 |
showParticles | booleanWhether to show floating particles layer. | true |
particleCount | numberNumber of floating particles (performance consideration). | 50 |
particleColor | stringColor of the floating particles. | "#ffffff" |
children | ReactNodeCustom content to render on top of the background (e.g., buttons, forms). | — |
className | stringAdditional CSS classes for the container. | — |
Keep in mind
Need a custom component?
I build bespoke UI components & websites tailored to your brand.