---
name: web-motion-library
description: Select and implement interactive web animations, 3D elements, and pre-built React/Tailwind/Framer Motion components for landing pages and hero sections. Use when adding hover effects, morphing shapes, hero sections with background video, or choosing from Magic UI's 50+ animated component library.
cluster: creative-frontend
version: 1.0.0
---

# Web Motion Library

Reference library for interactive web animations and pre-built component systems. Covers hover motion patterns, morphing background shapes, full-screen hero sections, and the Magic UI component library (50+ animated React/Tailwind/Framer Motion components).

## When to Use

- Adding interactive hover animations to image grids or text rows
- Implementing morphing SVG background shapes
- Building full-screen hero sections with background video
- Selecting pre-built animated components from Magic UI
- Choosing between animation approaches for landing pages

## Animation Patterns

| Pattern | Source | Tech Stack | Best For |
|---------|--------|-----------|----------|
| Hover Motion Grid | sink.design / Codrops | CSS + JS | Image grids that respond to mouse movement, intro animations |
| Morphing Shapes | Codrops | SVG + CSS | Organic background transitions, exhibition-style layouts |
| Hero Section | Viktor Oddy | React + Tailwind CSS | Full-screen hero with background video, Rubik font, SVG CTA |
| Magic UI Components | magicui.design | React + Tailwind + Framer Motion | 50+ pre-built animated components (marquees, borders, cards) |

## Component Selection Guide

### When you need...

| Need | Use | Why |
|------|-----|-----|
| Mouse-reactive image grid | Hover Motion pattern | Rows move in sync with cursor, supports intro animation reveal |
| Organic background animation | Morphing Shapes pattern | SVG shape transitions, exhibition/gallery aesthetic |
| Full-screen landing hero | Viktor Oddy Hero | Background video, Rubik typography, custom SVG button |
| Animated marquee/ticker | Magic UI: Marquee | Infinite scroll with pause-on-hover |
| Glowing card borders | Magic UI: Shine Border | Animated gradient border effect |
| Notification feed | Magic UI: Notification List | Stacked animated notification cards |
| Social proof logos | Magic UI: Company Logos | Auto-scrolling logo strip |
| Concentric circles | Magic UI: Circles | Expanding ring animation |
| Ripple effects | Magic UI: Ripple | Click/hover ripple animations |

## Key Technical Notes

- Magic UI is a **shadcn/ui companion** — install components individually, not as a monolithic package
- All Magic UI components are **open-source** (React + TypeScript + Tailwind + Framer Motion)
- Hero section uses **Rubik font** (Google Fonts) with tight line-height (0.98) and negative letter-spacing (-2px to -4px)
- SVG CTA buttons use custom path fills instead of standard CSS backgrounds for unique shapes

See `references/patterns.md` for implementation details and component specifications.