Animated Components, Used With Taste

Condensed from: React Bits (https://github.com/DavidHDev/react-bits), Magic UI (https://github.com/magicuidesign/magicui), Canvas UI (https://github.com/DavidHDev/canvas-ui)

components.json lists 331 installable components: React Bits 218 (text-animations 33, animations 38, components 48, micro 35, backgrounds 64), Magic UI 78, Canvas UI 35. Every entry carries an exact install command, docs URL and npm deps. Search it by tags and category, then read tasteNote.

Decision guide

Animate only with a job. Motion should explain (state change, cause and effect, hierarchy) or set the first impression. If you cannot name the job, ship it static.
One hero effect per page. Choose one signature moment (animated headline, shader background or 3D object); everything else stays quiet. Magic UI's own guardrail: no more than two high-motion effects in one viewport.
Backgrounds must not fight content. Slow, low contrast, tinted toward the brand palette. Put a scrim or radial mask under text and check 4.5:1 contrast against the brightest frame. No cursor-reactive backgrounds behind forms or long reading.
Text effects belong on headlines only. Animate words or lines, not characters, finish in about a second, and end on plain, selectable, screen-reader-visible text.
Cursor effects are for portfolios and brand pages, never apps, dashboards or checkout. Never hide the system cursor where people fill forms.
Be consistent. Pick one entrance (for example Blur Fade) and one CTA treatment and reuse them site-wide.
The React Bits micro category is the safe zone. Those pieces improve UX (Hold Button for destructive actions, Code Slots for OTP, Warm Tooltip for toolbars) and rarely read as gimmicks.

Performance and reduced motion

Shader backgrounds (raw WebGL2, ogl, three, vgpu) cost GPU and battery. Allow one live canvas per viewport, lazy-load anything below the fold (dynamic import, ssr: false in Next.js), pause offscreen, cap device pixel ratio at 2.
three-based entries (Lanyard, Hyperspeed, Model Viewer, Blob Cursor, Paper Crumple, Color Bends, every Canvas UI *-object) add a large bundle; prefer zero-dep or ogl alternatives when they look similar.
Honor prefers-reduced-motion: many sources check it, but verify, and render the final state (static text, still gradient or poster).
On touch devices (pointer: coarse) disable cursor-driven effects and cut particle counts.
Canvas UI's HTML-in-canvas effects reach full quality only in Chromium with the canvas-draw-element flag or an origin-trial token; other browsers get a GPU overlay fallback. Its 3D object effects work everywhere. WebGPU builds need Chrome or Edge 113+, Safari 26+ or Firefox 141+.

Install variants

All three registries are listed in the shadcn public index, so namespaced commands work after npx shadcn@latest init. Swap npx for pnpm dlx, yarn or bun x --bun as needed.

React Bits: npx shadcn@latest add @react-bits/<Name>-<LANG>-<STYLE>. Name is PascalCase (SplitText; ASCII Text is ASCIIText), LANG is JS or TS, STYLE is CSS or TW, so every component has four variants. The catalog uses TS-TW. Alternatives: npx shadcn@latest add https://reactbits.dev/r/SplitText-TS-TW.json or npx jsrepo@latest add https://reactbits.dev/r/SplitText-TS-TW. For MCP browsing add "registries": {"@react-bits": "https://reactbits.dev/r/{name}.json"} to components.json.
Magic UI: npx shadcn@latest add @magicui/<slug> (several slugs in one command is fine). Needs Tailwind v4; Tailwind v3 projects use the legacy docs at v3.magicui.design. Import from @/components/ui/<slug>. Manual installs must also copy the keyframes the docs list.
Canvas UI: npx shadcn@latest add @canvas-ui/<slug>-<framework> where framework is react, vue, svelte, solid, preact or vanilla; append -webgpu for the WebGPU build (adds vgpu). Files land in components/canvasui/. Most effects wrap content: <Liquid><Page /></Liquid>, and the page stays clickable.
Agents can browse all three through npx shadcn@latest mcp init --client claude.

License

React Bits and Canvas UI: MIT + Commons Clause. Free in any app, site or product, commercial included. You may not sell, sublicense or redistribute the components themselves (alone, in a bundle, or ported), so no reselling them as a UI kit or template pack.
Magic UI: MIT.

Twenty picks by job

Job	Pick (library/slug)	Note
Hero headline	react-bits/split-text	Words or lines, one pass
Hero headline, softer	react-bits/blur-text	Calm focus pull
Rotating value prop	magic-ui/word-rotate	Three to five words
Announcement pill	magic-ui/animated-shiny-text	Sits above the H1
Key phrase emphasis	magic-ui/highlighter	One phrase per section
Logo cloud	magic-ui/marquee	Monochrome logos, edge fade
Logo cloud, alt	react-bits/logo-loop	Pauses on hover
Testimonials	magic-ui/marquee + magic-ui/tweet-card	Vertical columns work well
Social proof by CTA	magic-ui/avatar-circles	Pair with a count
Primary CTA	magic-ui/shimmer-button	One per page
CTA polish	react-bits/magnet	Low strength only
Hero background	react-bits/aurora	Brand-tinted, slow
Quiet background	magic-ui/grid-pattern	With a radial mask
Textured gradient	react-bits/grainient	Muted colors
Number stats	magic-ui/number-ticker	Trigger once in view
Prices and live metrics	react-bits/counter	Odometer roll
Feature cards	magic-ui/magic-card	Or react-bits/spotlight-card
Feature layout	magic-ui/bento-grid	Deliberate size rhythm
Dock	magic-ui/dock	App-like portfolios only
Cursor	react-bits/target-cursor	Portfolio pages only

Section entrances: magic-ui/blur-fade or react-bits/animated-content. Integrations: magic-ui/animated-beam. Product demo: magic-ui/hero-video-dialog, magic-ui/safari, magic-ui/terminal. One spectacle hero: canvas-ui/glass-object with your logo SVG.

Read by your agent through get_guide("components") in the taste MCP.