DocsPrism Gradient

Prism Gradient

A theme-aware WebGL prism field with liquid checkered motion, electric-blue refraction, and an optional tactile grain layer.

Installation

pnpm dlx shadcn@latest add @componentry/prism-gradient

Usage

API Reference

PropertyTypeDefault
speed

Animation speed multiplier. Set to 0 for a still frame.

number1
noise

Optional grain overlay opacity and scale.

PrismGradientNoise—
radius

Border radius applied to the gradient container.

string"0px"
className

Additional CSS classes for the gradient container.

string—
style

Additional inline styles for the gradient container.

CSSProperties—

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
import { PrismGradient } from "@/components/ui/prism-gradient"
<div className="relative min-h-[480px] overflow-hidden rounded-2xl">
  <PrismGradient noise={{ opacity: 0.18, scale: 0.8 }} />
</div>