Get everything for $99, lifetime

Components

Prism

Pro

Installation

ProRequires a Planes Pro license.
npx shadcn add @useplanes/prism

Works once the @useplanes registry is set up in your project (one-time). After that, copy and run commands directly.

Unlock with Planes Pro

$99 once · 161 Pro components · lifetime updates.

I have a licenseGet Pro
import { Prism } from "@/components/ui/Prism";

<div className="relative h-[560px] bg-black">
  <Prism dispersion={0.35} clearCenter />
  <h1 className="absolute inset-0 grid place-items-center text-white">
    Your headline
  </h1>
</div>

Use cases

  • Hero background

    Premium, quiet motion with colour that comes from physics rather than a gradient.

  • Pricing or CTA backdrop

    Turn dispersion down for a monochrome version behind a single card.

  • Video poster or OG frame

    A still frame holds up as a static image.