Spectral Card — React Interaction

A touch of iridescence. Real content, spatial tilt, and light that follows you.

Starting live preview

Usage

import { SpectralCard } from "@/components/SpectralCard";

export function Card() {
  return <SpectralCard
    {...{
      tilt: 12,
      glare: 0.6
    }}
  ><div style={{ padding: 40 }}><h2>Your content, in a new light.</h2><p>Any text, image or link belongs here.</p></div></SpectralCard>;
}

Implementation notes & API

Accepts children, tilt, glare, radius, disabled, className and style. Works without WebGPU. Touch and reduced-motion keep content still. Use native links/buttons inside children.

Property	Type	Notes / default
`children`	`ReactNode`	Your own content; the default is a demonstration
`disabled`	`boolean`	false; motion also respects system preferences
`radius`	`number`	24 pixels
`className / style`	`string / CSSProperties`	Applied to the outer container

View source on GitHubFree for commercial projects · MIT