Free Webinar β€” Building for Scale with Pion & Webflow

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