Free Website Audit β€” Find what’s slowing your site down

0.1.0

Holographic Card

Card with holographic foil effect using WebGL shader, creating rainbow iridescence.

Card with holographic foil effect using WebGL shader, creating rainbow iridescence.

Features

  • βœ… Zero dependencies - Pure React implementation
  • βœ… Full accessibility - ARIA labels, keyboard navigation, screen reader support
  • βœ… Theme support - Light, dark, and auto modes
  • βœ… Reduced motion support - Respects user preferences

Props

intensity

  • Type: number - Default: 0.8
  • Holographic effect intensity (0-1)

theme

  • Type: 'light' | 'dark' | 'auto' - Default: 'auto'
  • Theme mode

className

  • Type: string
  • Additional CSS class

children

  • Type: ReactNode
  • Card content

Customization

Webflow Classes

Target these classes in Webflow Designer for custom styles:

  • .cc-holographic-card
  • .cc-holographic-card__canvas
  • .cc-holographic-card__content