Flashy Card

Interactive card with smooth animated activation and visual effects.

Default content

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

PropertyTypeDefaultDescription
childrenReactNode-
Custom content using FlashyCardDefault and FlashyCardActive slots.
onStateChangefunction-
Callback fired when card toggles between active and inactive state.
disabledbooleanfalse
Disables interaction and prevents state change animations.
iconClassNamestring-
Custom className applied to the center action button.
rippleClassNamestring-
Custom className for the ripple pulse effect.
glareClassNamestring-
Custom className for the glare sweep overlay.
defaultSrcstring-
Image source displayed when the card is inactive.
activeSrcstring-
Image or video source displayed when the card is active.
activeTypestringauto
Forces active content type: image or video.
classNamestring-
Additional className applied to the card container.

Built withby Ahdeetai.