ClayForge v2.0

ClayForge

Production-ready multi-variant morphism UI library with physics-driven animation, multi-sensory interaction, and full accessibility compliance.

Morphing Button States

Claymorphic Synthesizer

Claymorphic Synthesizer

Click keys or use keyboard A-K for white keys, W-U for black

Orbital Typewriter

Radial Dial Typewriter

Drag to wind the dial, release to type. Or just use your keyboard.

Start typing...

Physics States Gallery

Physics States Gallery

Interactive demonstrations of each morphic state

Puff

Inflate on hover

Squish

Compress on press

Swell

Glow & expand

Bounce

Elastic spring back

Spring Damping Control

0.5
Bouncy (0.1)Damped (1.0)

Figma Integration Specs

Component tokens and design system architecture

Design Tokens

Clay/Shadow {
  outer-drop: 0 24px 48px -8px rgba(0,0,0,0.25);
  inner-occlusion: inset 0 -8px 24px rgba(0,0,0,0.12);
  inner-reflection: inset 0 8px 24px rgba(255,255,255,0.55);
  squircle-radius: 40% / 60%;
}

Animation Tokens

Spring/Physics {
  bouncy: cubic-bezier(0.34, 1.56, 0.64, 1);
  smooth: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  elastic: cubic-bezier(0.68, -0.6, 0.32, 1.6);
  duration-fast: 200ms;
  duration-slow: 800ms;
}

Component Variants

Clay
Glass
Silicon
Gel
Paper