BUILD
- Build a complete Claymorphism playful SaaS / onboarding homepage. Not a card, not an isolated navbar, not a full-page login, not tabs.
- Domain from Use on: Kids and Playful SaaS. Login is a soft strip, never the whole page.
STYLE
- Claymorphism: fat radius, pastel fill, inner light
- Ground #F3E6D8. Tiles #F7D9C4. Radius 32px. Inner glow inset 0 -10px 18px rgba(255,255,255,0.7) plus soft clay shadow 0 10px 18px rgba(160,110,80,0.18)
- Type #1D1D1F. Join CTA #00C2B3, white type, inner highlight. Font on the generated page: Nunito. No Inter
LAYOUT
- Inflated North bar as chrome: separate Play / Parents / Privacy, search, Join
- Container max-width 1120px. Finished onboarding home: split clay hero, three steps, mosaic, join strip, three-column footer
- Tiles sit on the pastel ground; the page is not one giant clay blob
SECTIONS
1. Inflated hero: "Inflated. Pastel. Inner light." plus a clay-board visual. CTA Start playing
2. Three onboarding tiles: Create, Play, Share
3. Mosaic: Play home (lead) + Parents + Join strip
4. Soft login strip: white pill name field + Continue — Login use-on, not a sign-in page
5. Three-column footer: Play / Parents / Help
INTERACTION
- Hover lifts 2px and the clay shadow softens. Not Neumorphism inset. Not a press translate
TECHNICAL
- React, Tailwind CSS, restyle shadcn/ui — not default shadcn. One homepage route.
DON'Ts
- No purple, violet, indigo, fuchsia. No Inter. No emoji icons
- Keep 32px and inner glow. Do not flatten into a generic rounded card page
- Do not make login the whole homepage. Do not output only a headline plus two empty cells
MOTION
- Press: inner shadow deepens with scale(0.97), 160ms ease-out.
- Rest lift: 4px over 200ms. Slower than the press, and softer.
- No spring, no bounce. Clay is heavy; it should not wobble.
- prefers-reduced-motion: shadow change only.