Caustic Light Card

A premium card surface with animated pool-like caustic highlights rendered by a lightweight WebGL2 fragment shader. Caustics are masked to the lower region, brightest near the bottom, with hover-driven boosts to intensity and speed. Off-screen cards pause automatically and only four visible cards animate at once.

UniqueUI CLI

npx uniqueui add caustic-light-card

shadcn CLI

npx shadcn@latest add https://uniqueui-platform.vercel.app/r/caustic-light-card.json -y

shadcn path expects @/lib/utils (run shadcn init first). Same source file is installed to components/ui/.

Preview

Caustics · shader canvas overlay

Pool-light shimmer on glass cards.

Hover the card: caustics brighten and flow faster while text stays cleanly readable.

Usage

import { CausticLightCard } from "@/components/ui/caustic-light-card";

export default function Example() {
  return (
    <CausticLightCard
      className="h-[420px] w-full rounded-2xl"
      causticColor="#fff7e0"
      intensity={0.6}
      speed={0.5}
      coverage={0.55}
    >
      <div className="flex h-full items-end p-8">
        <div>
          <h2 className="text-3xl font-semibold text-white">Caustic light card</h2>
          <p className="mt-2 max-w-md text-sm text-white/85">
            Hover for stronger shimmer while the copy remains crisp.
          </p>
        </div>
      </div>
    </CausticLightCard>
  );
}

Props

Prop	Type	Description
`causticColor`	`string`	Tint for the caustic highlights. Use warm off-whites for natural pool-light refractions.
`intensity`	`number`	Base brightness multiplier for caustic glow.
`speed`	`number`	Base animation speed multiplier.
`coverage`	`number`	Fraction of card height covered by caustics (0-1). Higher values push shimmer farther upward.
`className`	`string`	Classes for the outer card wrapper.
`children`	`React.ReactNode`	Foreground content rendered above the caustic overlay.