Animated Background

An animated background effect that highlights elements smoothly on hover or click, enhancing user interaction.

Quad-turbo W16, pure speed. A masterpiece of engineering designed for breathtaking acceleration and top speeds.

Hybrid V12 with insane power. Combines electrification with legendary Italian performance for unmatched thrill.

Plug-in hybrid with 1000 HP. A blend of electrification and raw horsepower delivering unparalleled driving dynamics.

F1 tech in a road car. A hybrid hypercar that merges Formula 1 innovations with everyday drivability and power.

Hybrid hypercar, ultimate grip. A fusion of cutting-edge technology and extreme handling precision on any road.

Revs up to 8500 RPM. Designed for extreme speed, aerodynamics, and record-breaking track performance.

Installation

Install this component and its dependencies with a single command.

npx shadcn@latest add https://ui.voxletstudio.com//r/animated-background.json

Once your project registers the @voxlet namespace, this also works: npx shadcn@latest add @voxlet/animated-background

Prop	Type	Default	Description
className	string	undefined	Additional custom class names for styling the animated background.
children	ReactElement<{ 'data-id': string }>[] \| ReactElement<{ 'data-id': string }>	-	An array or a single React element with a `data-id` attribute used for tracking active elements.
defaultValue	string	undefined	Specifies which item should be highlighted by default.
onValueChange	(newActiveId: string \| null) => void	undefined	Callback function triggered when the active element changes.
transition	Transition	undefined	Defines the transition animation properties using the Motion library.
enableHover	boolean	false	Enables hover-based activation instead of click-based interaction.