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

Dependencies: next-themes clsx tailwind-merge

Usage

API Reference

PropTypeDefault
speednumber

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

1
noisePrismGradientNoise

Optional grain overlay opacity and scale.

—
radiusstring

Border radius applied to the gradient container.

"0px"
classNamestring

Additional CSS classes for the gradient container.

—
styleCSSProperties

Additional inline styles for the gradient container.

—

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
PreviousLiquid ChromeNextSilk Aurora
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>