Shadcn Templates
crucible

Crucible

Animated React components with real heat: 100+ free, MIT-licensed WebGL and canvas backgrounds, text effects, cards, data viz, and AI chat UI. TypeScript, Tailwind v4, reduced-motion safe.

Free
Price
Oct 19, 2026
Listed
Crucible screenshotOpen Crucible

Overview

Crucible is a library of animated React components designed for dark interfaces, with original shaders, physical motion and accessibility built in. The site counts 238 components across 14 categories, from fullscreen WebGL backgrounds to full landing sections and app UI. Of those, 114 are free with previews, source and CLI install, and the remaining pro components are sold as a single lifetime purchase.

Every animated component ships with reduced-motion fallbacks, offscreen pausing and an exported props contract. Components install through the shadcn CLI, by copy-paste from the code tab, or through Crucible's MCP server for coding agents. Every preview on the site is the shipped component running live.

Features

  • Backgrounds: 54 fullscreen shaders, particle fields and reactive surfaces, including pro pieces like a real fluid simulation.
  • Text effects: 19 reveals, scrambles, metallic sweeps and morphs.
  • Cards and buttons: 16 cards with tilt, spotlight and living borders, plus 9 buttons with heat passes, ripples and magnetic pulls.
  • Data and AI: Self-drawing charts, rolling counters and live maps, plus AI components for streaming replies, tool calls and agent plans.
  • Sections and app UI: 26 landing sections and 14 app UI pieces such as tables, settings, inboxes, wizards and schedulers.
  • Themes: Named themes including Molten, Corona, Anvil, Bellows and Cinderfall.
  • Pro license: A one-time lifetime purchase covers every pro component, future drops, commercial use and MCP access.

Tech stack

  • React, TypeScript
  • Tailwind CSS v4
  • WebGL and canvas

Registry

Install via the shadcn CLI registry:

npx shadcn@latest add @crucible/component-name

Similar listings

All Component Library