clay-premium
CommunityTactile clay UI with four-layer shadows.
Design & Creative#animations#design-system#claymorphism#clay-premium#shadow-stack#ui-physics#tactile-ui
AuthorTheBlueBear02
Version1.0.0
Installs0
System Documentation
What problem does it solve?
Clay Premium provides a tactile, clay-inspired design system that adds depth and mass to UI, replacing flat interfaces with four-layer shadow stacks and convex/concave interactions on a lavender canvas.
Core Features & Use Cases
- Four-layer clay shadow architecture for true depth and volume
- Candy-store color palette, Nunito/DM Sans typography, and motion tokens
- Animated background blobs and buoyant micro-interactions for a tactile feel
- Token-driven design system with responsive breakpoints and asymmetric layouts
- Use cases: landing pages, dashboards, product UI patterns, AI-assisted design reasoning
Quick Start
Build the sample LandingPage.jsx that demonstrates the 4-layer clay shadow stack, animated blobs, and asymmetric bento grid.
Dependency Matrix
Required Modules
None requiredComponents
Standard package💻 Claude Code Installation
Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.
Please help me install this Skill: Name: clay-premium Download link: https://github.com/TheBlueBear02/drip-skills/archive/main.zip#clay-premium Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
Agent Skills Search Helper
Install a tiny helper to your Agent, search and equip skill from 471,000+ vetted skills library on demand.