Hub

CLAY
AURORA

Soft, puffy 3D clay elements floating under a shimmering northern lights sky. Claymorphism's rounded, tactile surfaces meet Aurora Gradient's luminous color flows -- like colorful Play-Doh toys arranged on a table under the aurora borealis.

Clay Ball Palette

Aurora Blue
#38b6ff
Aurora Purple
#7b5ea7
Aurora Green
#56d991
Aurora Pink
#ff6b9d
Aurora Mix
#9b7ec8

Clay Cards on Aurora Canvas

Puffy Surfaces

Rounded corners (24-32px) with inner highlight gradients and multi-layered clay shadows create that squeezable, tactile feeling.

Aurora Lighting

Slowly drifting blur orbs in blue, green, purple and pink simulate northern lights, casting color onto clay surfaces.

Playful Depth

The combination of clay elevation shadows and aurora background glow creates a magical sense of floating 3D objects.

Clay Workshop - Shadow Recipe

How Clay Elements Are Made

Step 1: Shape
border-radius: 24-32px;
background: var(--surface);
Step 2: Outer Shadow
box-shadow:
  12px 12px 24px rgba(0,0,0,0.3),
  -6px -6px 18px rgba(123,94,167,0.15);
Step 3: Inner Highlight
box-shadow:
  inset 0 2px 4px rgba(255,255,255,0.08);
Step 4: Aurora Tint
background: radial-gradient(
  circle at 35% 30%,
  #6dd5ff, var(--aurora-1));

Aurora Toggle Switches

Aurora Blue
Aurora Green
Aurora Pink

Clay Character under Aurora Glow

Aurora Progress Bars

Blue to Green - 85%
Purple to Pink - 62%
Green to Blue - 74%

Northern Lights Spectrum

Blue #38b6ff Purple #7b5ea7 Green #56d991 Pink #ff6b9d

Squish Buttons with Aurora Glow

Depth Demonstration - Aurora Light Reflection

Level 1
Subtle
Level 2
Elevated
Level 3
Floating

AI Request Prompt

Design a landing page in Clay Aurora fusion style -- combining Claymorphism's puffy 3D surfaces with Aurora Gradient's luminous flowing colors. Think: colorful Play-Doh toys under the northern lights.

COLOR TOKENS:
--bg: #1a1030 (deep aurora purple-dark)
--surface: #2a1f45 (slightly lighter clay surface)
--text: #f0eaff (light lavender)
--aurora-1: #38b6ff (blue)
--aurora-2: #7b5ea7 (purple)
--aurora-3: #56d991 (green)
--aurora-4: #ff6b9d (pink)
--clay-shadow: rgba(0,0,0,0.3)
No other colors.

TYPOGRAPHY:
- Headings: 'Nunito', sans-serif -- font-weight: 800 | 900 (rounded, playful for clay)
- Body: 'Inter', sans-serif -- font-weight: 400 | 500
- Hero h1: clamp(2rem, 5.5vw, 3.6rem), gradient text with aurora colors
- Body text: line-height: 1.75, color: rgba(240,234,255,0.82)

UI - CLAY ELEMENTS:
- All clay elements: border-radius 24-32px
- Clay shadow recipe: box-shadow 12px 12px 24px rgba(0,0,0,0.3), -6px -6px 18px rgba(123,94,167,0.15), inset 0 2px 4px rgba(255,255,255,0.08)
- Clay hover: translateY(-3px) with enhanced shadows
- Clay balls: radial-gradient(circle at 35% 30%, highlight, base-color, dark-variant), 50% border-radius
- Clay buttons: squish on hover (scale 0.96), aurora glow on active (box-shadow with aurora color)
- Clay toggles: inset shadows for track, radial gradient knobs with aurora colors
- Clay progress bars: inset shadow tracks, aurora gradient fills with inner highlight

UI - AURORA BACKGROUND:
- Fixed aurora layer with 2 pseudo-element blur orbs (filter: blur(120px))
- ::before: 600x350px, linear-gradient(135deg, blue+purple), drift animation 14s
- ::after: 500x400px, linear-gradient(225deg, pink+green), drift reversed
- Mid-orb: 400x300px, radial-gradient(green, transparent), pulse animation 10s

LAYOUT:
- Page wrapper: width min(1060px, 92vw), margin 0 auto, z-index 1
- Card grid: display grid, repeat(auto-fit, minmax(240px, 1fr)), gap 16px
- Depth panels: 3-column grid showing elevation levels

MOTION:
- @keyframes auroraDrift: translate(0,0) scale(1) to translate(50px,25px) scale(1.15), 14s alternate
- @keyframes auroraPulse: opacity 0.4 scale(1) to opacity 0.7 scale(1.2), 10s alternate
- @keyframes shimmer: background-position 0% to 100%, 6s infinite
- @keyframes charBob: translateY(0) to translateY(-6px), 3s infinite (clay character bounce)
- Clay hover transitions: transform 0.3s, box-shadow 0.3s
- Button squish: transform 0.15s

RESPONSIVE:
- Mobile (<=600px): card grid and depth panels stack to single column
- Desktop: max-width 1060px, multi-column grids

FORBIDDEN:
- Flat, non-elevated surfaces -- every clay element needs shadow depth
- Sharp corners less than 14px border-radius
- Bright white backgrounds -- stay dark with aurora glow only
- Static aurora -- background orbs must animate continuously
- Thin, flat shadows -- clay needs multi-layer box-shadow (outer + inner highlight)

OUTPUT:
1) Aurora background layer with drift/pulse animations
2) Clay component library: balls, cards, buttons, toggles, progress bars
3) Clay character figure made of CSS shapes
4) Full single-file HTML/CSS with all keyframe animations