Spectral Card

A lightweight WebGL image card with GSAP-smoothed pointer tilt, localized refraction, chromatic edges, and static reduced-motion fallback.

Portrait 09

Spectral Card

Customize

Image URL

Tone

Energy1.00

Rest zoom8%

Zoom24%

Spectrum0.70

Displace0.85

Gloss0.45

Tilt10.00

Float10px

Hover time1.8s

Motion time0.5s

Usage

import { SpectralCard } from "@/components/lazy-ui/spectral-card";

export function Demo() {
  return (
    <SpectralCard
      media="/images/piano-girl.webp"
      width={360}
      height={640}
      tone="ember"
    >
      <div className="flex h-full items-end p-6 text-white">
        <div>
          <p className="text-xs uppercase tracking-[0.24em] text-white/60">
            Lazy UI
          </p>
          <h3 className="text-3xl font-light">Spectral Card</h3>
        </div>
      </div>
    </SpectralCard>
  );
}