animated-component-libraries

Generated source view for the actual executable engineering/animated-component-libraries skill. The durable routing article is Frontend and Design Skills. Source: skills/engineering/animated-component-libraries/SKILL.md

Runtime Source

Bundled Resources

These files are part of the executable skill folder and must be preserved with the skill source.

Description

Component-source routing for polished React, Tailwind, shadcn/Radix/Base, chart, toast, shader, animated-icon, interaction, and component-vocabulary sources: Component Gallery, Design Engineer Tools, shadcn/ui, Radix UI, Base UI, Astryx, Cloudflare Kumo, Blocks.so, Kokonut UI, Bklit UI, Chanh Dai components, Evil Charts, Sonner, Skiper UI, Cult UI, Magic UI, Motion Primitives, React Bits, Fancy Components, Origin UI, Its Hover, lucide-animated, Super Hover, and Shaders.com. Use when building landing pages, dashboards, design systems, agent artifacts, or interactive UIs requiring named UI primitives, pre-made animated/uncommon components, chart treatments, toast/notification feedback, shader effects, animated icons, hover/scroll micro-interactions, or component-source selection instead of hand-crafting everything. Triggers on component libraries, component vocabulary, Component Gallery, Design Engineer Tools, shadcn/ui registries, Radix, Base UI, Astryx, Kumo, Kokonut, Bklit, blocks, Chanh Dai, Evil Charts, Sonner, Skiper, Cult UI, Magic UI, React Bits, Fancy Components, Origin UI, Its Hover, lucide-animated, Super Hover, Shaders.com, Tailwind CSS components, CSS techniques, or "find better design sources.

Skill Source

---
name: animated-component-libraries
description: Component-source routing for polished React, Tailwind, shadcn/Radix/Base, chart, toast, shader, animated-icon, interaction, and component-vocabulary sources: Component Gallery, Design Engineer Tools, shadcn/ui, Radix UI, Base UI, Astryx, Cloudflare Kumo, Blocks.so, Kokonut UI, Bklit UI, Chanh Dai components, Evil Charts, Sonner, Skiper UI, Cult UI, Magic UI, Motion Primitives, React Bits, Fancy Components, Origin UI, Its Hover, lucide-animated, Super Hover, and Shaders.com. Use when building landing pages, dashboards, design systems, agent artifacts, or interactive UIs requiring named UI primitives, pre-made animated/uncommon components, chart treatments, toast/notification feedback, shader effects, animated icons, hover/scroll micro-interactions, or component-source selection instead of hand-crafting everything. Triggers on component libraries, component vocabulary, Component Gallery, Design Engineer Tools, shadcn/ui registries, Radix, Base UI, Astryx, Kumo, Kokonut, Bklit, blocks, Chanh Dai, Evil Charts, Sonner, Skiper, Cult UI, Magic UI, React Bits, Fancy Components, Origin UI, Its Hover, lucide-animated, Super Hover, Shaders.com, Tailwind CSS components, CSS techniques, or "find better design sources."
origin: personal
source_slug: animated-component-libraries
---


# Animated Component Libraries

## Overview

This skill provides component-source routing for polished React, Tailwind, shadcn/Radix, chart, toast, shader, and focused UI libraries. It is not only for animation. It is the "check the good shelves before hand-rolling" skill.

The current source shelf is:

- **Vocabulary/source maps:** Component Gallery and Design Engineer Tools.
- **Foundation:** shadcn/ui, Radix UI, and Base UI.
- **Agent-ready design systems:** Astryx and Cloudflare Kumo.
- **Block catalogs:** Blocks.so, shadcn registry directory, Tailwind Plus, Origin UI.
- **Animated / chart sources:** Kokonut UI, Bklit UI, Magic UI, and Motion Primitives.
- **Kevin-special craft sources:** Chanh Dai components, Skiper UI, Cult UI, Evil Charts.
- **Small focused component libraries:** Sonner and the UI primitives shortlist.
- **Animated/effect sources:** Magic UI, React Bits, Fancy Components, Its Hover, lucide-animated, Super Hover, Shaders.com.

Before choosing one, read `wiki/design/component-library-sources.md` and `wiki/design/ui-library-ranking.md`. For animation engine choice, read `wiki/design/motion-library-ranking.md`; for Three.js/WebGL/R3F choice, read `wiki/design/web3d-library-ranking.md`. Those pages are the source of truth for the live routing order and recent additions.


## Progressive Disclosure

This `SKILL.md` is the routing layer. Detailed recipes, examples, integration notes, and troubleshooting guidance live in `references/details.md` so they are loaded only when the task needs them.

Before producing concrete output, making a design recommendation, or debugging an implementation, load the relevant reference section below. Do not rely on memory for branch-specific APIs, examples, or caveats.

| Task branch | Read first |
| --- | --- |
| Source Shelf | `references/details.md#source-shelf` |
| Library Selection Protocol | `references/details.md#library-selection-protocol` |
| Core Concepts | `references/details.md#core-concepts` |
| Common Patterns | `references/details.md#common-patterns` |
| Integration Patterns | `references/details.md#integration-patterns` |
| Performance Optimization | `references/details.md#performance-optimization` |
| Common Pitfalls | `references/details.md#common-pitfalls` |
| Resources | `references/details.md#resources` |

## Related Skills

- **motion-framer**: For understanding underlying animation concepts used by both libraries
- **frontend-design**: For art direction and distinctive UI build decisions
- **web-design-engineer**: For full polished web artifacts and named style recipes
- **gsap-scrolltrigger**: Alternative approach for scroll-driven animations
- **react-spring-physics**: Alternative physics-based animation library
- **threejs-webgl**: For 3D background effects as alternative to Particles/Plasma

## 2026-06-30 Routing Additions

- Use **Component Gallery** before prompting vague UI requests. Find the exact primitive name, synonym set, accessibility expectations, and design-system references, then feed those names into the UI build.
- Use **Design Engineer Tools** when the problem is broader than component choice: inspiration, AI coding surface, motion, capture, 3D, interface design, visual tooling, fonts, or utilities.
- Use **Its Hover** or **lucide-animated** for shadcn-installable animated React icons when the motion explains action, status, or affordance. Keep icons editable as source and verify license/style fit.
- Use **Super Hover** only for moving or scrolling surfaces where native `:hover` cannot express the intended interaction. It is a creative enhancement, not a default app-state primitive.
- Use **shadcn scroll-fade** before custom scroll masks when a container needs subtle overflow affordance without visible scrollbars.

---

Timeline

• 2026-07-15 | Generated a browseable source page from the actual executable skill file. Source: skills/engineering/animated-component-libraries/SKILL.md