UI Craft Library
Relevant source files
The following files were used as context for generating this wiki page:
The UI Craft Library (@siluat/ui-craft) is a specialized personal collection of React-based UI animation components and interaction practices. It serves as a dedicated space within the monorepo for experimenting with sophisticated motion designs, SVG manipulations, and complex transition effects. Sources: packages/ui-craft/README.md:1-3, CLAUDE.md:27-27, README.md:13-13
The library focuses on "crafting" high-quality visual experiences rather than providing standard UI primitives. It integrates heavily with modern animation engines and utility libraries to achieve fluid effects such as gooey filters, SVG morphing, and expand/collapse transitions. Sources: packages/ui-craft/package.json:28-31, playgrounds/ui-craft-playground/app/(navigation)/data/craftMeta.tsx:1-3
Architecture and Core Technologies
The library is architected as a standalone package within a Turborepo monorepo. It follows a modular structure where React components are the primary unit of export. Sources: packages/ui-craft/README.md:5-6, CLAUDE.md:21-30
Technical Stack
The library leverages a specific set of tools to enable complex animations:
| Category | Technology | Purpose |
|---|---|---|
| Core Framework | React 19 | Component-based UI architecture. |
| Animation Engine | Framer Motion | High-level declarative animations and gestures. |
| SVG Morphing | Flubber | Smooth interpolation between disparate SVG shapes. |
| Utilities | react-use | Collection of essential React hooks for state and lifecycle. |
| Testing | Vitest & React Testing Library | Unit and component testing suite. |
Sources: packages/ui-craft/package.json:20-31, CLAUDE.md:41-45
Component Distribution
Components are exported using the ./react/* pattern, allowing consumers to import specific animation modules directly. Sources: packages/ui-craft/package.json:10-12, CLAUDE.md:58-58
The diagram shows the internal organization of the library's exports and their underlying technological dependencies. Sources: packages/ui-craft/README.md:5-6, packages/ui-craft/package.json:28-31
Key Animation Modules
The library includes several distinct categories of animation "crafts," as seen in the playground metadata and source exports. Sources: playgrounds/ui-craft-playground/app/(navigation)/data/craftMeta.tsx:5-30
SVG Path Morphing
Utilizes flubber to animate transitions between complex SVG paths, specifically used for icon loops.
- Implementation:
FfxivJobIconsLoopUsingFlubber - Logic: Interpolates between different SVG paths representing FFXIV job icons.
Sources: playgrounds/ui-craft-playground/app/(navigation)/data/craftMeta.tsx:11-17, packages/ui-craft/package.json:28-28
Gooey Effects
Implements organic-looking "sticky" transitions between elements using SVG filters.
- Implementation:
FfxivJobIconsLoopUsingGooeyEffect - Logic: Uses SVG
<filter>tags withfeGaussianBlurandfeColorMatrixto create a gooey visual connection between moving elements.
Sources: playgrounds/ui-craft-playground/app/(navigation)/data/craftMeta.tsx:18-24
List Transitions
Focuses on layout animations where list items expand or collapse, affecting the surrounding document flow.
- Implementation:
ListItemExpandTransition - Logic: Likely uses Framer Motion's
layoutprop or specific height-based transitions to smoothly resize containers.
Sources: playgrounds/ui-craft-playground/app/(navigation)/data/craftMeta.tsx:25-31
Development and Quality Workflow
UI Craft follows a strict development cycle involving a dedicated playground for visual fine-tuning. Sources: packages/ui-craft/README.md:8-15
Development Cycle
The workflow ensures that animations are both visually polished in the playground and verified through automated tests. Sources: packages/ui-craft/README.md:8-15, packages/ui-craft/package.json:6-8
Commands and Testing
The library includes scripts for testing and coverage.
- Test Command:
bun test - Coverage Command:
bun test --coverage - Playground Run:
bun dev:ui-craft(executed from root)
Sources: packages/ui-craft/package.json:6-8, packages/ui-craft/README.md:10-12
Summary
The UI Craft Library is a specialized animation module focusing on high-end visual effects like SVG morphing (via Flubber) and gooey transitions. It serves as a testing ground for sophisticated UI interactions within the broader web-projects repository, supported by a dedicated Next.js playground for real-time visual iteration. Sources: README.md:13-13, packages/ui-craft/README.md:14-15, CLAUDE.md:27-27