---
id: "aw-el-d43606df-813c-4d29-8a23-b09f99e1efeb"
source: https://www.awwwards.com/inspiration/3d-pages-montfort
author: "Immersive Garden (immersivegarden)"
media: "video, 1600x1200, 10.0s"
model: claude-opus-5-5
generated: 2026-10-31
---
# Scroll Through Clouds Above Snowy Peaks

## Summary
A corporate site that scrolls the camera through a 3D sky: snowy mountain peaks rise out of a sea of white clouds, then the camera sinks into the cloud layer while thin uppercase statements and short paragraphs float by, until the clouds darken into a stormy sea scene with a tanker. Worth studying for using volumetric clouds as a calm, continuous canvas that turns a text-heavy corporate story into a journey.

## Style
- Theme: light (pale cloud whites turning to storm slate)
- Mood: serene, airy, expansive, premium, cinematic
- Tags: 3d-clouds, scroll-camera, volumetric, mountains, thin-sans, corporate, custom-cursor
- Category: 3D, Motion

## Palette
| Role | Hex |
|---|---|
| Cloud gray | #D1DCE2 |
| Mist | #DCE5EB |
| Highlight white | #F0F7FA |
| Cloud shadow | #C5D1D8 |
| Storm slate | #586875 |
| Ice blue | #AEBBC4 |
| Steel | #8C9AA5 |
| Navy type | #2B4A75 |

## Typography
- Statements: geometric sans, light (300), uppercase, tracked about +0.04em, navy, about 4% of frame height, left aligned in 2 to 5 lines. Closest free font: Jost 300 or Josefin Sans 300.
- Logo: a small dotted shield mark plus a widely tracked (+0.4em) uppercase name in thin sans (shown as a placeholder wordmark).
- Paragraphs: same geometric sans, light, sentence case, about 2% of height, navy at 80%.
- Links and nav: tiny uppercase sans tracked +0.2em with a circular arrow button or a 1px underline.
- On the storm scene, type switches to white.

## Layout
- 4:3 frame (1600x1200), full-bleed 3D canvas.
- Top nav: a row of small group links at top left with a short underline under the active one, and news and menu items at top right.
- Hero: logo at left middle; a large peak at centre; scroll cue bottom left; a short horizontal line bottom right as a progress marker.
- Text blocks alternate sides: statements at upper right or upper left, paragraphs offset diagonally below, with generous empty sky between.
- Custom cursor: a 24px thin navy ring with a small dot.
- A slim vertical scrollbar indicator on the right edge.

## Elements
- Volumetric cloud layer with soft self-shadowing.
- Snowy mountain peaks with blue-gray rock and sharp ridges.
- Floating text blocks, a circular arrow link button, a diamond-shaped index marker.
- Storm scene: dark slate clouds and a red-hulled tanker at sea.
- Up arrow and short line indicators at the bottom right.

## Motion
- 0.4 to 2.2s: hero idle; the camera drifts forward slowly and clouds roll (about 2 percent per second); the logo fades out as scrolling starts.
- 2.2 to 4.0s: the camera descends into the clouds; peaks pass and fade into mist; the first statement fades in line by line (about 120ms stagger, 700ms each, ease-out).
- 4.0 to 7.6s: continued descent; text blocks move up faster than the clouds for parallax and fade out at the top.
- 7.6 to 9.4s: clouds darken to storm slate (color grade over about 1s); the ship emerges below and white text appears.
- Smooth scroll with heavy inertia (lerp about 0.08); not looping.

## Rebuild it
1. Fixed React Three Fiber canvas behind a tall scroll container; drive camera `position.y` and `position.z` from `useScroll` progress (drei `ScrollControls` works well).
2. Clouds: drei `Clouds` and `Cloud` components with white color, low opacity and slow `speed`; add mountain GLBs with a cool fog (`<fog args={["#D1DCE2", 10, 60]} />`).
3. Color grade: lerp the fog color and background from `#D1DCE2` to `#586875` over the last 25% of scroll.
4. Text: HTML overlay sections `absolute` per scroll page, headings `font-light uppercase tracking-[0.04em] text-[#2B4A75] text-[clamp(28px,3.4vw,52px)]`.
5. Reveal: split statements by line and animate `opacity` and `y: 20` to 0 with Motion, 700ms ease-out, 120ms stagger on `whileInView`.
6. Smooth scrolling with Lenis (lerp 0.08) and a custom ring cursor following the pointer with a spring.

## Generation prompt
A serene cinematic website scene: snowy blue-gray mountain peaks rising out of a sea of soft white volumetric clouds under a pale sky, the camera slowly descending through the cloud layer while thin navy uppercase statements and short paragraphs float in the empty sky, ending in darker stormy slate clouds over a sea with a cargo tanker; airy, expansive, premium corporate mood, no real brand names.