Drift Card

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

Installation

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

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.