Flashy Card

Interactive card with smooth animated activation and visual effects.

Installation

npx shadcn@latest add @scrollxui/flashy-card

Usage

import { FlashyCard } from '@/components/ui/flashy-card';

<FlashyCard
  className='w-full max-w-sm'
  defaultSrc='https://images.pexels.com/photos/1933316/pexels-photo-1933316.jpeg'
  activeSrc='https://www.pexels.com/download/video/1390942/'
  activeType='video'
/>

API Reference

Flashy Card

Interactive card with smooth animated activation and visual effects.

Props

Property	Type	Default	Description
`children`	ReactNode	`-`	Custom content using FlashyCardDefault and FlashyCardActive slots.
`onStateChange`	function	`-`	Callback fired when card toggles between active and inactive state.
`disabled`	boolean	`false`	Disables interaction and prevents state change animations.
`iconClassName`	string	`-`	Custom className applied to the center action button.
`rippleClassName`	string	`-`	Custom className for the ripple pulse effect.
`glareClassName`	string	`-`	Custom className for the glare sweep overlay.
`defaultSrc`	string	`-`	Image source displayed when the card is inactive.
`activeSrc`	string	`-`	Image or video source displayed when the card is active.
`activeType`	string	`auto`	Forces active content type: image or video.
`className`	string	`-`	Additional className applied to the card container.