Drift Card

An interactive card with a drift hover effect that visually highlights content.

Installation

npx shadcn@latest add @scrollxui/drift-card

Usage

import DriftCard from '@/components/ui/drift-card';

<DriftCard className='w-full max-w-md h-72 mx-auto relative overflow-hidden'>
  <img
    src='https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?q=80&w=1200&auto=format&fit=crop'
    alt='Preview'
    className='w-full h-full object-cover rounded-xl'
  />
</DriftCard>

API Reference

Drift Card

An interactive card with a drift hover effect that visually highlights content

Props

Property	Type	Default	Description
`children`	ReactNode	`—`	Content rendered inside the drifting card.
`className`	string	`—`	Additional classes to customize the container styling.
`style`	CSSProperties	`—`	Inline styles passed to the outermost container.
`...props`	HTMLAttributes<HTMLDivElement>	`—`	Any additional div attributes.