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.

About This Style

Claymorphism is a curated UI design style featuring light aesthetics. This style is well-suited for SaaS products, landing pages, portfolios, and any digital interface that aims to create a strong visual identity. The Claymorphism approach prioritises a consistent visual language — from color palette and typography to spacing rhythms and interactive states — so every element reinforces the overall design intent.

The Claymorphism design language emphasises [CONFIGURATION], [PROMPT], Subject:, Visual Atmosphere & Aesthetic:. Every visual decision — from component proportions to micro-interactions — is guided by the principle of geometry:. This produces interfaces that feel purposeful and polished rather than decorative, making the style especially effective for products that need to communicate quality and clarity at a glance.

The Claymorphism source template is implemented using box-shadow, border-radius, SVG, transitions. The code is structured as a single, self-contained HTML file with no external dependencies, making it straightforward to inspect, adapt, and integrate into any frontend stack. Key implementation details — including layout structure, color tokens, and animation timing — are documented inline so you can understand every decision without guesswork.

**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.

# Visual Design Prompt for Midjourney v7 / Nano Banana **[CONFIGURATION]** [STYLE_NAME] = Claymorphism (Clay UI) [INDUSTRY] = EdTech & Online Learning [PROJECT_NAME] = CLAY_ACADEMY [PAGE_STRUCTURE] = Floating Nav, Hero with 3D Blobs, Wave Dividers, Feature Grid, Tilted Dashboard Cards, Testimonials, Pricing, Footer. **[PROMPT]** **Subject:** A friendly, high-fidelity UI design for an education platform called "CLAY_ACADEMY". The interface uses the "Claymorphism" aesthetic, featuring soft, inflated, 3D-looking elements that resemble modeled clay or marshmallows. **Visual Atmosphere & Aesthetic:** * **Materiality:** Matte, non-reflective surfaces. It looks like soft plastic or aerated ceramic. * **Geometry:** Extreme rounded corners (2rem+ radius) and pill shapes. Everything looks "puffy" and convex. * **Lighting:** Soft, diffused global illumination. Depth is created using multiple shadows (inner highlights and outer drop shadows) to simulate volume. * **Color Palette:** A soft Light Gray (#f0f4f8) and White background foundation, accented with vibrant Pastels: Sky Blue (#5fb2ec), Lavender Purple (#a855f7), and Soft Orange (#f97316). **Detailed Page Layout:** 1. **Header:** A floating, glass-effect pill navbar containing a rounded logo. 2. **Hero Section:** Features floating, blurred 3D color blobs in the background. The main visual is a "floating" white clay card containing a photo of students, slightly tilted. 3. **Layout Structure:** Sections are separated by **smooth SVG wave dividers** that transition between white and light gray backgrounds. 4. **Dashboard Section:** Features "tilted" 3D cards (rotated on Y-axis) showing progress bars and user avatars, giving a strong sense of perspective. 5. **UI Elements:** Buttons are pill-shaped with a "pressed" effect (inner shadow) when active. Icons are contained in colorful, indented circles. 6. **Pricing:** Three vertical cards floating in space. The middle "Pro" card is scaled up and has a "Most Popular" badge. **Rendering Quality:** 3D render style, friendly, approachable, tactile, high contrast text (Lexend font), clean, minimalistic but dimensional.