Docs·Dither Prism Hero

Dither Prism Hero

A breathtaking WebGL hero background featuring advanced dithering, prismatic refraction, and holographic iridescence rendered in real-time with GLSL.

Installation

pnpm dlx shadcn@latest add @componentry/dither-prism-hero

Usage

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

<DitherPrismHero 
    title1="Experience" 
    title2="The Future"
/>

API Reference

PropertyTypeDefault
title1

First line of the main metallic headline.

string—
title2

Second line of the main metallic headline.

string—
color1

Primary color (deep/dark) for the gradient base.

string"#0f0f23"
color2

Secondary color (mid-tone) for gradient transitions.

string"#6366f1"
color3

Tertiary color (bright/accent) for gradient highlights.

string"#ec4899"
speed

Animation speed multiplier for all shader effects.

number1
ditherIntensity

Intensity of the dithering effect (0-1). Higher values create a more pronounced retro/grainy look.

number0.15
prismIntensity

Intensity of the prismatic rainbow refraction (0-1).

number0.5
showParticles

Whether to show floating particles layer.

booleantrue
particleCount

Number of floating particles (performance consideration).

number50
particleColor

Color of the floating particles.

string"#ffffff"
children

Custom content to render on top of the background (e.g., buttons, forms).

ReactNode—
className

Additional CSS classes for the container.

string—

View source

Click the icon in the preview panel to browse source for each variant.

Keep in mind

This component is inspired by various open-source projects and patterns. Please verify licenses and implementation details before using in production.

Need a custom component?

I build bespoke UI components & websites tailored to your brand.

DM me on X

Experience

The Future