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";

<SpectralCard
  media="/images/piano-girl.webp"
  tone="ember"
  energy={1}
  restZoom={0.08}
  hoverZoom={0.24}
  spectrum={0.7}
  displace={0.85}
  gloss={0.45}
  tiltDepth={10}
  floatRange={10}
  hoverDuration={1.8}
  motionDuration={0.45}
/>