The AnimatedBackground component visually highlights selected items by sliding a background into view when hovered over or clicked. This smooth transition helps users focus on the active item, making it ideal for interactive lists, menus, or navigations where clear selection feedback is important.
import AnimatedBackground from '@/components/ui/animated-background';
export function AnimatedCardBackgroundHover() {
const ITEMS = [
{
id: 1,
title: 'Dialog',
description: 'Enhances modal presentations.',
},
{
id: 2,
title: 'Popover',
description: 'For small interactive overlays.',
},
{
id: 3,
title: 'Accordion',
description: 'Collapsible sections for more content.',
},
{
id: 4,
title: 'Collapsible',
description: 'Collapsible sections for more content.',
},
{
id: 5,
title: 'Drag to Reorder',
description: 'Reorder items with drag and drop.',
},
{
id: 6,
title: 'Swipe to Delete',
description: 'Delete items with swipe gestures.',
},
];
return (
<div className='grid grid-cols-2 p-10 md:grid-cols-3'>
<AnimatedBackground
className='rounded-lg bg-zinc-100 dark:bg-zinc-800'
transition={{
type: 'spring',
bounce: 0.2,
duration: 0.6,
}}
enableHover
>
{ITEMS.map((item, index) => (
<div key={index} data-id={`card-${index}`}>
<div className='flex select-none flex-col space-y-1 p-4'>
<h3 className='text-base font-medium text-zinc-800 dark:text-zinc-50'>
{item.title}
</h3>
<p className='text-base text-zinc-600 dark:text-zinc-400'>
{item.description}
</p>
</div>
</div>
))}
</AnimatedBackground>
</div>
);
}
Part of Motion Primitives — browse the full library on 21st.dev.