plaaayground
A design system and component library built with React, Tailwind CSS, and Framer Motion.
65
Components
9
Categories
v2
Version
Design Principles
Spring Physics
All interaction animations use spring physics — no ease/linear for interactions.
Scale on Press
Scale down on press (not hover). Press = commitment, hover = exploration.
44px Touch Targets
All interactive elements meet the 44px minimum touch target.
Reduced Motion
Respects prefers-reduced-motion. Every animation has a zero-motion fallback.
Contained Gestures
Drag and scroll interactions are contained to prevent bleed.
Blur Emergence
Elements emerge from blur — a signature DD pattern.
Components
DD Components
Devouring Details-inspired micro-interactions
5
UI Primitives
Core UI components built on Radix UI
30
Feedback
Status and notification components
5
Forms
Form inputs and controls
5
Data Display
Components for displaying data and content
7
Interaction
Interactive utility components
4
Board
Spatial canvas system components
4
Workspace
Workspace panel components
3
Layout
App layout and navigation
2