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

Route polished React, Tailwind, shadcn/Radix/Base/React Aria, chart, toast, shader, animated-icon, timeline, interaction, and creative-design-app work to the strongest source before hand-crafting. Use for landing pages, dashboards, design systems, agent artifacts, uncommon components, charts, narrative timelines, notifications, shaders, icons, hover/scroll micro-interactions, or a canvas-and-controls design tool. Triggers on component libraries or vocabulary; Toolcraft; Component Gallery; Design Engineer Tools; shadcn/ui; Radix; Base UI; Astryx; Kumo; Blocks.so; Tailark; 8bitcn; Kibo UI; Intent UI; SmoothUI; UI-Layouts; Shadcn Blocks; Shadcn Studio; Shadcn Space; Kokonut; Bklit; Chanh Dai; Evil Charts; Lifeline; Sonner; Skiper; Cult UI; Magic UI; Motion Primitives; React Bits; Originkit; Fancy Components; Origin UI; Componentry; Iconsax; Its Hover; lucide-animated; Super Hover; Shaders.com; Tailwind components; or "find better design sources.

Skill Source

---
name: animated-component-libraries
description: Route polished React, Tailwind, shadcn/Radix/Base/React Aria, chart, toast, shader, animated-icon, timeline, interaction, and creative-design-app work to the strongest source before hand-crafting. Use for landing pages, dashboards, design systems, agent artifacts, uncommon components, charts, narrative timelines, notifications, shaders, icons, hover/scroll micro-interactions, or a canvas-and-controls design tool. Triggers on component libraries or vocabulary; Toolcraft; Component Gallery; Design Engineer Tools; shadcn/ui; Radix; Base UI; Astryx; Kumo; Blocks.so; Tailark; 8bitcn; Kibo UI; Intent UI; SmoothUI; UI-Layouts; Shadcn Blocks; Shadcn Studio; Shadcn Space; Kokonut; Bklit; Chanh Dai; Evil Charts; Lifeline; Sonner; Skiper; Cult UI; Magic UI; Motion Primitives; React Bits; Originkit; Fancy Components; Origin UI; Componentry; Iconsax; Its Hover; lucide-animated; Super Hover; Shaders.com; Tailwind components; 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.

### Full creative-app boundary

When the request is to build a complete focused design tool—not merely choose
components—route to [[toolcraft]] only if the product needs a visual canvas plus
meaningful controls and may need upload, history, pan/zoom, layers, timeline,
keyframes, or image/video export. Toolcraft is an application architecture with
editable runtime source and protected proof, not another component shelf. Keep
ordinary websites, dashboards, forms, single effects, and small parameter
overlays on the incumbent design system and the narrowest component source.

Before selecting Toolcraft, name the product output, interaction ownership,
animation intent, artifact/export intent, reference evidence, and acceptance
proof. Generate a project only after explicit selection; do not bulk-install
its repeated helper skills as global owners. [Source:
`pixel-point/toolcraft@4b1e415b`, reviewed 2026-08-12]

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.
- **Narrative timelines:** Lifeline for a bounded career, company, project, or
  journey story when a continuous temporal rail is the actual information job.
- **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, Originkit, Fancy Components, Its Hover, lucide-animated, Super Hover, Shaders.com.
- **Guarded references:** Originkit and Componentry one exact registry item at a time; Iconsax as a proprietary-license icon reference, never a bulk or open-source source.

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` |
| Complete named-catalog review / source-first exploration | `references/details.md#source-first-catalog-review`; dated inventories in `references/catalogs/` |
| Distinct directions around a dominant interactive visual | `../design-engineering-polish/references/signature-first-exploration.md`; choose the signature before supporting catalog components |
| 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.

## 2026-08-10 Guarded Source Additions

- Use **Componentry** only when one exact expressive component is a strong fit. Inspect the registry JSON and every dependency, retokenize it, and verify accessibility, reduced motion, performance, lint, and tests locally. Do not bulk-add its registry or trust the MCP label as a security boundary.
- Use **Iconsax** for icon discovery/reference only under its official proprietary free license. The website's “open source” wording and changing icon counts do not override the license terms: do not redistribute the pack loosely, transfer the license, omit required attribution/notices, or claim authorship.

## 2026-08-12 Narrative Timeline Route

- Recommend **Lifeline** for an authored narrative timeline: one selected
  person, company, project, product history, or bounded journey with sparse
  milestones and media. Do not use it as the default workflow queue, audit log,
  or dense operational timeline; keep a literal list/search/detail route.
- Treat `evilrabbit/lifeline@8ddbb3d` as a pinned reference, not an automatic
  install. Its MIT source, TypeScript check, and Next production build passed,
  but it has no tests, CI, or releases and its lint command reported 35 errors
  under the captured dependency lock. Before adoption, prove semantic controls,
  focus management, keyboard/touch parity, reduced motion, long/sparse data,
  current-date injection, resize, frame cost, and host-page scroll release.
- For every source-copy registry, compare the exact live registry JSON with a
  registry rebuilt from the pinned source. Lifeline's live installer payload on
  2026-08-12 matched its checked-in generated JSON but lagged four current
  source files. The payload delivered by the install URL is the dependency;
  branch code, README prose, and demo behavior do not substitute for payload
  parity.

## 2026-08-12 Originkit Route

- Recommend **Originkit** when one named Framer/React effect—text, cursor,
  gallery, canvas, border, background, animation, or interaction—fits the art
  direction and owned primitives do not already cover it. Do not route a vague
  “make it premium” request to bulk installation.
- Treat the saved X post, live preview, hosted registry, MCP response, npm CLI,
  and delivered component source as separate evidence. The current audit found
  160 components and 48 sections, not a current 250+ component catalog. Pin the
  CLI invocation, but never infer component-source rights from the CLI's MIT
  license.
- Inspect the exact payload before dependency installation. Record component
  terms, source hashes, composed registry items, remote imports, dependency and
  lifecycle-script changes, semantics, keyboard/touch behavior, reduced
  motion, teardown, visibility/offscreen suspension, frame cost, GPU/battery
  pressure, mobile behavior, and a static or low-power fallback. If component
  rights are not explicit, rebuild the interaction principle on owned code.
- Do not globally install or authenticate Originkit for discovery. Prefer a
  pinned `npx originkit@0.2.23 list|search` call; fetch one item into a clean
  branch/worktree with `--dry-run --no-deps` before allowing any writes or
  package-manager scripts.

---

Timeline

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