QuackElements
Browse components+
Backgrounds/Prism Tiles

Prism Tiles

A responsive field of beveled glass tiles carrying animated ribbons of prismatic light.

Interactive example

Customize

Shape the glass lattice and its moving light bands.

Direction

Installation

Run the CLI from your project root. Dependencies and component source are added automatically.

$npx quackelements add prism-tiles

Usage

The generated file lives in your repository, so the component API and styles remain fully editable.

example.tsx
import { PrismTiles } from "@/components/quack/backgrounds/prism-tiles"

export function PrismTilesDemo() {
  return (
    <PrismTiles
      className="min-h-[420px]"
      direction="top-to-bottom"
      speed={1}
      opacity={1}
      chromaticSpread={0}
      tileDensity={4}
      rippleLayers={6}
      warpStrength={0.33}
      bandSharpness={3}
      colorA="#1e00ff"
      colorB="#d765e6"
      backgroundColor="#05030a"
    />
  )
}