Claymorphism

Published on 2025-12-28 06:48:41

Claymorphism, also known as Clay UI, is a design trend that gained traction around 2021, often viewed as the spiritual successor to Neumorphism. Fueled by the rise of the Metaverse and 3D NFT art (like Doodles), this style mimics the texture of unrendered 3D clay models or inflatable toys. It aims to create a digital interface that feels as if it were molded from soft polymer or marshmallows. Visual Characteristics Inflated Volume: This is the defining feature. All UI elements (cards, buttons) appear convex and inflated. This is achieved via a specific CSS shadow stack: drop shadows for levitation, combined with inner highlights (top-left) and inner shadows (bottom-right) to sculpt the 3D curvature. Matte Finish & Roundness: Unlike the glossy reflections of Glassmorphism, Claymorphism emphasizes a matte, non-reflective surface, resembling rubber or clay. To match the "inflated" metaphor, it employs extreme border radii (often exceeding 30px), making elements look pillowy and soft. Friendly Palette & Vibe: To reinforce the psychological cues of safety, fun, and approachability, this style almost exclusively uses bright Pastel/Macaron colors (Pink, Sky Blue, Mint). Combined with floating animations and wave-shaped dividers, it is perfectly suited for EdTech, children's apps, and Web3 social platforms, creating a stress-free and engaging environment.

Style System

**Role:** You are a Frontend Creative Developer specializing in CSS Art and 3D UI trends. You are an expert in using `box-shadow` to simulate physical materials without WebGL. **Task:** Recreate the "CLAY_ACADEMY" landing page using the Claymorphism style. **[CONFIGURATION]** - **[STYLE_NAME]:** Claymorphism - **[INDUSTRY]:** EdTech - **[PROJECT_NAME]:** CLAY_ACADEMY - **[TECH_STACK]:** HTML5 + Modern CSS3 (Embedded Styles). - **[PAGE_STRUCTURE]:** Navbar, Hero, Features, Dashboard Preview, Testimonials, Pricing, Newsletter, Footer. **Technical Requirements:** 1. **Global Variables (`:root`):** - **Colors:** `--theme-primary: #5fb2ec;`, `--theme-bg-light: #f0f4f8;`. Use distinct pastel variables for accents (purple, green, orange). - **Font:** Import 'Lexend' from Google Fonts for that rounded, friendly look. 2. **The "Clay" CSS Formula (Crucial):** - Create a `.clay-card` class using a specific shadow stack to create volume: ```css box-shadow: 12px 12px 24px rgba(163, 177, 198, 0.4) (Bottom Right Shadow), -12px -12px 24px rgba(255, 255, 255, 0.8) (Top Left Light), inset 2px 2px 4px rgba(255, 255, 255, 0.8) (Inner Highlight), inset -2px -2px 4px rgba(0, 0, 0, 0.02) (Inner Shadow); border-radius: 2rem; ``` - **Buttons:** Implement `.clay-button` with a hover lift effect (`translateY(-2px)`) and an active "pressed" state (`inset` shadows become dominant). 3. **Advanced Layout & Effects:** - **Wave Dividers:** Use SVG path dividers (`.wave-top`, `.wave-bottom`) to create seamless transitions between white (`.section-white`) and gray (`.section-std`) sections. - **3D Perspective:** In the Dashboard section, use `perspective: 1000px` and `transform: rotateY(-10deg) rotateX(5deg)` to make cards look like physical objects floating in 3D space. - **Animations:** Add `@keyframes float` for background blobs and hero images. 4. **Specific Components:** - **Hero:** Must include background "blobs" with `filter: blur(90px)`. - **Testimonials:** Quotes inside bubbles, with the avatar sitting below. - **Pricing:** The "Popular" card should be scaled (`transform: scale(1.05)`) and have a prominent badge.