A breathtaking WebGL hero background featuring advanced dithering, prismatic refraction, and holographic iridescence rendered in real-time with GLSL.
| Prop | Type | Default |
|---|---|---|
title1First line of the main metallic headline. | string | — |
title2Second line of the main metallic headline. | string | — |
color1Primary color (deep/dark) for the gradient base. | string | "#0f0f23" |
color2Secondary color (mid-tone) for gradient transitions. | string | "#6366f1" |
color3Tertiary color (bright/accent) for gradient highlights. | string | "#ec4899" |
speedAnimation speed multiplier for all shader effects. | number | 1 |
ditherIntensityIntensity of the dithering effect (0-1). Higher values create a more pronounced retro/grainy look. | number | 0.15 |
prismIntensityIntensity of the prismatic rainbow refraction (0-1). | number | 0.5 |
showParticlesWhether to show floating particles layer. | boolean | true |
particleCountNumber of floating particles (performance consideration). | number | 50 |
particleColorColor of the floating particles. | string | "#ffffff" |
childrenCustom content to render on top of the background (e.g., buttons, forms). | ReactNode | — |
classNameAdditional CSS classes for the container. | string | — |
Click on the icon in the top right of the example preview to view the source code for specific variants.
This component is inspired by various open-source projects and patterns. Please verify licenses and implementation details before using in production.
import { DitherPrismHero } from "@/components/ui/dither-prism-hero"
<DitherPrismHero
title1="Experience"
title2="The Future"
/>