Flashy Card

Interactive card with smooth animated activation and visual effects.

Installation

npx shadcn@latest add https://scrollxui.dev/registry/flashy-card.json

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.