---
id: "aw-site-65547"
source: https://www.awwwards.com/sites/why-zero
author: "Sindhur Dutta (dutta)"
media: "photo, 1600x1200"
model: claude-opus-5-5
generated: 2026-10-31
---
# Dreamy Meadow Hero with Reaching Hands

## Summary
A presentation shot of a website hero: a dreamy 3D meadow with ancient columns, a pond, wildflowers, drifting pink petals and god rays, with a bold black placeholder wordmark at the centre and a floating bottom dock holding a black "Join Beta" pill. The browser card sits on a teal water-caustic backdrop while a glossy green 3D hand and a real human hand reach toward each other across it, echoing a classical fresco. Worth studying for its storytelling hero and game-like UI chrome (an XP counter and a frequency ruler).

## Style
- Theme: light (pastel sky and meadow framed by teal water)
- Mood: dreamy, mythic, optimistic, surreal, fresh
- Tags: hero, 3d-scene, dreamscape, petals, floating-dock, gamified-ui, webgl, classical-ruins
- Category: Hero, 3D

## Palette
| Role | Hex |
|---|---|
| Deep teal water | #387B65 |
| Sky mist | #BFD6CF |
| Sage green | #9DBCAB |
| Pale aqua | #D8ECEA |
| Cloud white | #F6FCFC |
| Meadow green | #77AC89 |
| Dry grass | #BBB498 |
| Earth brown | #694E41 |
| Petal pink | #F4A3C0 |
| Accent green | #01C654 |

## Typography
- Central wordmark: heavy geometric sans, lowercase, black with a soft inner gloss, about 9% of frame height, tight tracking. Placeholder wordmark; closest free font Outfit ExtraBold or Lexend Bold.
- Dock button ("Join Beta"): white medium sans, sentence case, 13px. Inter Medium.
- XP badge ("100 XP"): bold numerals plus regular uppercase "XP", 12px, dark grey. Inter.
- Ruler readout ("-75 BZ"): tiny monospace caps, 9px, grey. JetBrains Mono.

## Layout
- 4:3 presentation frame (1600x1200); the browser card is about 78% wide and 16:9, centred slightly above middle, with 16px radius, a white 2px border and a soft shadow.
- The hero scene fills the card edge to edge; the wordmark sits on the exact centre over the horizon line.
- Top centre: a horizontal ruler of fine tick marks (about 240px wide) with a centre needle and readout below.
- Top-right: a pill badge with a sparkle icon and XP count (about 80x28px, translucent white, 14px radius).
- Bottom centre: a floating dock overlapping the bottom edge: a 32px circular green orb icon, a 270x36px black pill button, and a 32px white circle menu button with two lines.
- The two hands break out of the card on the upper-left and lower-right, creating depth beyond the frame.

## Elements
- Meadow scene: soft-focus field of pink and purple wildflowers, a reflective pond, two broken white marble columns, distant hills and bright cumulus clouds.
- God rays: diagonal light shafts from the upper right.
- Petals: 10 to 15 pink petals scattered at different depths and blur levels.
- Green hand: glossy, subsurface-lit 3D hand reaching down from the top-left, index finger extended.
- Human hand: photographic hand reaching up from the bottom-right.
- Backdrop: teal water with caustic light patterns and a pale foam band along the bottom.
- UI chrome: frequency ruler, XP badge, small circular back button top-left, and the dock.

## Motion
Static image. A subtle idea: let the petals drift diagonally at 10 to 20px per second with slow rotation and parallax by depth, while the two hands ease toward each other by 8px on scroll.

## Rebuild it
1. React hero section `relative h-screen overflow-hidden` with a full-bleed background (a pre-rendered meadow image or a React Three Fiber scene with fog and a sky dome).
2. Centre the wordmark absolutely: `text-[12vw] font-extrabold lowercase tracking-tight text-neutral-900` with a subtle `drop-shadow`.
3. Ruler: a flex row of 1px ticks (`h-2` and `h-3` every fifth) in `text-neutral-500`, centred at `top-6`, with a mono readout below.
4. XP badge: `fixed top-6 right-6 rounded-full bg-white/70 backdrop-blur px-3 h-7 text-xs font-semibold`.
5. Dock: `fixed bottom-6 left-1/2 -translate-x-1/2 flex items-center gap-2 rounded-full bg-white/60 backdrop-blur p-1`; inside, a green orb, a `bg-neutral-900 text-white rounded-full h-9 w-[270px]` button and a circular menu button.
6. Petals: 15 absolutely positioned SVG petals animated with Motion `animate={{ x: [...], y: [...], rotate: 360 }}` and random durations of 12 to 20s on `repeat: Infinity`, blurred by depth.

## Generation prompt
A dreamy website hero shown as a rounded browser card floating over teal caustic water: a pastel 3D meadow with wildflowers, a still pond, two broken white marble columns, soft clouds, god rays and drifting pink petals, a bold black lowercase wordmark in the centre, a tiny tick-mark ruler at the top, an XP pill badge, and a floating dock with a black pill button; a glossy green 3D hand reaches down from the top-left toward a human hand from the bottom-right, surreal and mythic.