design-infraReport a problem or share feedback← Catalog
Animated Background
curatedtheme-awarefreemotion-primitives/animated-background
A component that provides animated background effects for UI elements.
$
npx shadcn@latest add @motion-primitives/animated-backgroundnpm deps: motion
Our notes
Sliding highlight behind the hovered/active item (tabs, nav, segmented controls). You pass the bg class (e.g. bg-muted), so it follows the theme.- Source
- Motion Primitives
- Kind
- effect
- Categories
- background
- Use as
- wrapper — wraps your existing element
- Applies to
- tabsnavigationbutton
- Motion
- on hover, state · subtle · motion · medium cost · ignores reduced motion
- Tags
- motion
- Licence
- MIT (ibelick/motion-primitives). Motion Primitives Pro is a separate paid product — not catalogued.
- Live demo
- motion-primitives.com
- Docs
- motion-primitives.com
Similar
Compare all 4 →- Expanding Icon Tabsmicrokit/expanding-icon-tabsIcon toolbar whose chosen item widens to show its label while siblings slide over; ←/→ move focus, Escape and outside-click collapse it, role=toolbar, motion-reduce handled. Good for compact app toolbars and view switchers. Hard-coded items and light-dark() hex colours — rebuild with your icons and tokens.
- Liquid Glass (@samasante/liquid-glass)liquidglass/liquid-glassWrap any styled box in <Glass> (your translucent background is the tint; children stay crisp; optics via the optics prop). True refraction of the live page is Chrome/Edge only (backdrop-filter: url()); Safari/Firefox fall back to frost + tint + edge light. To bend in every browser, give it geometry (size + center) to refract its own children, or refract={copy} / src for images, video and canvas (WebGL). Headless — tint it with your tokens. v0.1.x: pin the version; use one or two lenses per screen and check text contrast over busy backgrounds. React >=18 peer, zero runtime deps, MIT.
- Liquid Gooeylibrariesdev/liquid-gooeyPlayful merges for FABs, tab pills, menus. Too much for enterprise UIs.