Animated Background

Visually highlights selected items by sliding a background into view when hovered or clicked. Inspired by Motion Primitives’ Animated Background. Ideal for tabs, menus, and card grids.

Installation

npm

npx shadcn@latest add https://joaocarmassi.com/components/animated-background.json

pnpm

pnpm dlx shadcn@latest add https://joaocarmassi.com/components/animated-background.json

yarn

npx shadcn@latest add https://joaocarmassi.com/components/animated-background.json

bun

bunx --bun shadcn@latest add https://joaocarmassi.com/components/animated-background.json

Import

import { AnimatedBackground } from '@/components/ui/animated-background';

---

Animated Card Background (Hover)

Each child must have a data-id attribute. Enable hover mode with enableHover. Use a grid to make the sliding effect more visible across items.

⚛React

▲Next.js

TSTypeScript

🌊Tailwind

◆Prisma

▼Vercel

<div className='grid grid-cols-3 gap-4'>
  <AnimatedBackground className='rounded-lg bg-muted/60' enableHover>
    <div
      data-id='react'
      className='flex cursor-pointer flex-col items-center justify-center gap-2 p-6'
    >
      <span className='text-xl font-bold text-sky-500'>⚛</span>
      <span className='text-xs font-medium'>React</span>
    </div>
    <div
      data-id='nextjs'
      className='flex cursor-pointer flex-col items-center justify-center gap-2 p-6'
    >
      <span className='text-xl font-bold'>▲</span>
      <span className='text-xs font-medium'>Next.js</span>
    </div>
    <div
      data-id='typescript'
      className='flex cursor-pointer flex-col items-center justify-center gap-2 p-6'
    >
      <span className='text-xl font-bold text-blue-500'>TS</span>
      <span className='text-xs font-medium'>TypeScript</span>
    </div>
  </AnimatedBackground>
</div>

---

Click Mode

Omit enableHover for click-based selection with a defaultValue. Works well as a tab bar with compact items.

Home

About

Services

Contact

<AnimatedBackground defaultValue='tab-1' className='rounded-full bg-muted'>
  <div
    data-id='tab-1'
    className='cursor-pointer rounded-full px-5 py-2 text-sm font-medium'
  >
    Home
  </div>
  <div
    data-id='tab-2'
    className='cursor-pointer rounded-full px-5 py-2 text-sm font-medium'
  >
    About
  </div>
  <div
    data-id='tab-3'
    className='cursor-pointer rounded-full px-5 py-2 text-sm font-medium'
  >
    Services
  </div>
</AnimatedBackground>

---

Props

Prop	Type	Default	Description
children	ReactElement[]	—	Children with data-id attributes.
defaultValue	string	—	Default active item identifier.
onValueChange	(id: string | null) => void	—	Callback on active change.
className	string	—	Class for the animated background.
transition	Transition	—	Motion transition config.
enableHover	boolean	false	Enable hover activation.