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

npx shadcn@latest add https://prismaui.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.