---
id: "aw-el-3cffef14-a3cc-4dca-92ed-5e5c443c8de3"
source: https://www.awwwards.com/inspiration/about-page-header-floema
author: "Bürocratik (burocratik)"
media: "video, 1600x1200, 15.3s"
model: claude-opus-5-5
generated: 2026-10-31
---
# Mossy Stone Letter Header with Kingfisher

## Summary
An about-page header where a huge black placeholder wordmark sits behind a sculpted stone letterform growing out of a mossy, grassy mound. Soft leaf shadows drift across the warm off-white background, and a tiny kingfisher flies in to perch on top of the stone. A quiet blend of brand typography, nature photography and ambient motion that makes a corporate page feel alive.

## Style
- Theme: light (warm off-white with black type and natural greens)
- Mood: natural, calm, crafted, sophisticated, organic
- Tags: hero, about-page, wordmark, nature, leaf-shadows, cut-out-photography, layered-depth, ambient-motion
- Category: Hero, 3D

## Palette
| Role | Hex |
|---|---|
| Warm off-white | #EEEAE4 |
| Leaf shadow | #DED9D2 |
| Ink black | #221F1A |
| Deep moss | #1A1B07 |
| Moss olive | #3F371F |
| Dry stone | #807358 |
| Light stone | #AE9E82 |
| Kingfisher blue | #1F7FC4 |

## Typography
- Wordmark: geometric sans, bold, lowercase with a capital arrow-shaped first letter and a registered mark, black, about 13% of frame height, spanning 60% of the width. Placeholder wordmark; closest free font Outfit Bold or Manrope ExtraBold.
- Intro line ("Rethinking spaces beyond expectations"): neutral grotesk, regular, sentence case, three stacked lines, about 1.6% of frame height, followed by a hairline and a tiny "Here's how we do it" link.
- Nav items: 7px uppercase grotesk inside small white pills. Inter Medium.
- Video card text: white grotesk 9px, two lines, plus a tiny caps button label.

## Layout
- 4:3 frame (1600x1200) of a full-viewport header.
- Wordmark centred horizontally, its top at about 37% of the height; the stone sculpture overlaps its lower right half, creating a foreground, midground and background sandwich.
- The grassy mound fills the bottom 40% of the frame, cropped at the bottom edge.
- Top-right nav: a row of five white pills (about 60x16px, fully rounded, 4px gap) plus a language toggle; a small search icon on the left.
- Bottom-left: intro text block about 16% wide with a 1px rule, 40px from the left.
- Bottom-right: dark video card about 200x130px, 6px radius, with a white pill "Get in touch" button and mail icon at its bottom-left.

## Elements
- Stone sculpture: weathered grey stone carved into a bold angular letterform with a dark mossy recess, rising from the mound.
- Mound: grass tufts, small yellow wildflowers, ferns and grey rocks, cut out against the background.
- Kingfisher: small bird with a blue back and orange chest, about 3% of frame height, perched on the top edge of the stone.
- Leaf shadows: soft, blurred grey silhouettes of leaves and branches across the upper half, as if from a tree off-screen.
- Video card: looping footage of a person working in a workshop, dark overlay, message line and button.
- Custom cursor: small arrow.

## Motion
- 0 to 3400ms: the leaf shadows fade in and begin to sway (about 12px drift, 4s sine loop) while the kingfisher flies in from the right and lands (600ms).
- 3400 to 8900ms: the page scrolls slightly; the wordmark, stone and mound move at different speeds (parallax factors about 0.6, 1.0 and 1.2).
- 8900ms: the mound and stone shift down and sideways, revealing more grass, then reset.
- 11600 to 14400ms: the kingfisher hops and flicks its tail, shadows keep swaying; the video card plays continuously.
- Easing is soft (ease-in-out, 600 to 1200ms) with no hard cuts.

## Rebuild it
1. React header `relative h-screen bg-[#EEEAE4] overflow-hidden` with layers: shadows, wordmark, sculpture and mound, bird, UI.
2. Leaf shadows: a large PNG of leaf silhouettes with `blur-sm opacity-20 mix-blend-multiply`, animated with Motion `animate={{ x: [0, 12, 0], rotate: [0, 1, 0] }}` on a 4s loop.
3. Wordmark as an SVG centred with `w-[60vw]`; place the cut-out sculpture PNG absolutely so it overlaps the right half.
4. Parallax: Motion `useScroll` and `useTransform` with different ranges per layer (`y` 0 to -60px for the wordmark, 0 to -120px for the mound).
5. Kingfisher: a short WebM with alpha or a sprite sheet; trigger the landing with `whileInView` and a 0.6s ease-out path.
6. UI: nav pills `rounded-full bg-white h-4 px-3 text-[7px] uppercase`, video card `rounded-md overflow-hidden w-[200px]` with a white pill button.

## Generation prompt
A warm off-white website header with a huge bold black lowercase wordmark partly hidden behind a weathered stone sculpture shaped like an angular letter, rising from a cut-out mound of moss, grass, ferns and yellow wildflowers; soft blurred leaf shadows sway across the background and a small blue and orange kingfisher lands on the stone; minimal nav pills, a short intro line and a small dark video card; calm, natural and refined.