---
id: "aw-site-58884"
source: https://www.awwwards.com/sites/kriss-ai
author: "Studio 28K (28K)"
media: "photo, 1600x1200"
model: claude-opus-5-5
generated: 2026-10-31
---
# Isometric Clinic Hero with Clay Clouds

## Summary
A hero for an AI chatbot aimed at dental clinics: a soft mauve sky with puffy clay clouds, a centred greeting headline with a blinking text cursor, and an isometric 3D cutaway of a clinic building rising from the bottom edge, its rooms filled with tiny staff, desks and equipment. Bracket-cornered glass buttons and a frosted nav bar tie the UI to the scene. A warm, approachable way to sell a B2B tool with miniature storytelling.

## Style
- Theme: light (dusty mauve with soft clay 3D)
- Mood: friendly, soft, approachable, playful, calm
- Tags: hero, isometric-3d, clay-render, cutaway-building, typing-cursor, bracket-corners, glass-nav, ai-chatbot
- Category: Hero, 3D

## Palette
| Role | Hex |
|---|---|
| Mauve sky | #CBC5C5 |
| Mauve mid | #BFB6B7 |
| Dusty rose | #B8ADAE |
| Shadow mauve | #ACA2A3 |
| Taupe | #968A88 |
| Ink black | #0F0F0F |
| Floor blue | #8E9FD8 |
| Warm peach | #E8B48E |

## Typography
- Headline ("Hi, I'm ..."): neo-grotesk, bold, sentence case, near black, about 6% of frame height, -0.02em tracking, followed by a tall white blinking cursor bar. Inter Bold or Manrope ExtraBold.
- Subline ("An AI chatbot for dentists"): same family, regular, about 2.6% of frame height, two centred lines.
- Nav links and buttons: medium grotesk 13px, sentence case. Inter Medium.
- Wordmark top-left: thin wide-tracked caps with a speech-bubble bracket (placeholder wordmark). Michroma or Syncopate for a similar feel.
- Scroll hint: 11px white sans, two lines.

## Layout
- 4:3 frame (1600x1200), single full-viewport hero.
- Headline block centred horizontally, its baseline at about 40% of the height; subline 40px below; Learn more button 60px below that.
- Building occupies the bottom 45%, centred, cropped by the bottom edge, drawn in true isometric (30 degree) projection with the roof cut away.
- Nav: frosted glass bar top-right (about 440x56px, 4px radius) holding five text links and a black "Book Demo" block button (about 115x40px, 2px radius); L-shaped white bracket corners at its top-left and bottom-right.
- Learn more button: frosted grey block (about 150x56px) with the same L-bracket corners (2px white strokes, 16px legs).
- Bottom-left: mouse icon plus scroll hint; bottom-right: a 40px white square chat launcher with a bracket corner.

## Elements
- Clay clouds: five puffy white-grey clouds with soft ambient occlusion, a few small detached puffs, scattered at the top and sides.
- Clinic cutaway: curved white walls with a pale pink roof slab, rooms with peach floors (server racks, lockers, plants) and blue floors (reception desk, staff at computers, shelves), a lower floor peeking out.
- Tiny people: low-poly staff figures seated at desks.
- Text cursor: 4px wide white bar the height of the headline cap height.
- Bracket corners: white L shapes offset 6px outside the element bounds.

## Motion
Static image. A subtle idea: type the headline letter by letter (60ms per character) with the cursor blinking at 530ms, let the clouds bob 6px on staggered 4 to 6s loops, and slowly orbit the building by 3 degrees as the user scrolls.

## Rebuild it
1. React hero `relative h-screen bg-gradient-to-b from-[#CBC5C5] to-[#B8ADAE] overflow-hidden`.
2. 3D: a React Three Fiber canvas at the bottom with an orthographic camera at an isometric angle, a clay-style building glTF (`MeshStandardMaterial`, roughness 0.9) and soft `AccumulativeShadows` or baked AO; clouds as merged spheres with a white matte material.
3. Headline: `text-7xl font-bold tracking-tight text-[#0F0F0F]`; type it with a substring state and a `motion.span` cursor (`animate={{ opacity: [1, 0] }}`, 0.53s, `repeat: Infinity`, `ease: 'steps(1)'`).
4. Bracket corner component: a relative wrapper with two absolutely positioned 16px `div`s using `border-t-2 border-l-2` and `border-b-2 border-r-2` in white, offset `-6px`.
5. Nav: `fixed top-6 right-6 flex items-center gap-6 bg-white/30 backdrop-blur-md px-6 h-14 rounded`, ending with `bg-[#0F0F0F] text-white h-10 px-6`.
6. Clouds: Motion `animate={{ y: [0, -6, 0] }}` with random 4 to 6s durations; respect reduced motion.

## Generation prompt
A soft dusty-mauve website hero for a friendly AI assistant for dental clinics: puffy white clay clouds floating in a pastel sky, a bold black centred greeting headline with a blinking white text cursor, a short subline and a frosted button with white bracket corners, and below an isometric 3D cutaway of a cute clinic building with curved walls, peach and blue floors, tiny staff at desks, plants and equipment; clay render style, gentle and approachable.