---
id: "aw-el-403cbbf2-c538-4c41-8ed4-a573d4b2681b"
source: https://www.awwwards.com/inspiration/3d-transition-montfort
author: "Immersive Garden (immersivegarden)"
media: "video, 1600x1200, 12.6s"
model: claude-opus-5-5
generated: 2026-10-31
---
# Misty Summit Day To Night Transition

## Summary
A corporate group hero where the camera floats through clouds around a snowy 3D mountain peak: shafts of light descend, a widely tracked word marquee for the group's divisions slides across the mist, and the scene finally transitions to a deep navy night with the summit lit in warm alpenglow. It is a refined lesson in atmospheric WebGL used to express calm, scale and permanence.

## Style
- Theme: mixed (misty white day, navy night)
- Mood: serene, majestic, corporate, airy, cinematic
- Tags: webgl, 3d-mountain, clouds, light-rays, marquee, tracked-type, day-night, scroll-transition
- Category: Motion, 3D

## Palette
| Role | Hex |
|---|---|
| Mist | #E9E8E4 |
| Night navy | #182537 |
| Ice | #D8DEE1 |
| Cloud grey | #CCCDCC |
| Haze | #BBBEBE |
| Rock grey | #6A6B6E |
| Steel blue text | #3E5A80 |
| Alpenglow | #C2733A |

## Typography
- Marquee and lockup (placeholder group name and division names separated by middle dots): geometric sans, light 300, all caps, very wide tracking (about 0.4em), about 4.5% of frame height, steel blue on mist and pale blue on night. Josefin Sans (300) or Montserrat (300).
- Nav tabs (five division names), "NEWS", "MENU", "SCROLL DOWN TO DISCOVER": sans 7 to 8px, uppercase, tracking 0.12em, steel blue at 60%, the active tab full strength with a 1px underline. Montserrat (500).

## Layout
- 4:3 canvas (1600x1200), the WebGL scene full-bleed.
- Top bar at about 6% height: five division tabs left aligned with an underline under the active one, and at the right "NEWS" with a small round count badge, "MENU" and a two-dot icon.
- Lockup: a dotted shield-like monogram placeholder and the tracked name on one line at the left third, vertically centred on the mountain's mid-slope.
- A 26px outlined circle with a hand cursor icon sits at the left at about 32% height (drag hint).
- Bottom: "scroll down to discover" at the bottom left, a short dash or circled dash at the bottom right.

## Elements
- Snow-capped mountain peak with crisp ridges, partly sunk in a sea of volumetric clouds.
- Vertical light shafts, thin and soft, falling through the mist.
- Horizontal marquee of tracked words separated by middle dots.
- Drag hint circle with hand icon.
- Night version: dark navy sky, cyan light beams behind the summit, warm orange rim light on the faces of the peak.

## Motion
- 0 to 2s: camera drifts toward the peak; clouds roll slowly (parallax layers at different speeds); the lockup fades out.
- 2 to 5s: light shafts fade in from the top (about 800ms) and the marquee words slide in from the right as a continuous ticker (about 120px per second).
- 5 to 10s: the mountain desaturates to grey and rotates slightly as the camera orbits (about 10deg); clouds thicken at the bottom.
- About 9.6s: the active nav tab moves to the next division; the underline slides across (300ms).
- 10 to 12.6s: a cross-dissolve and light change to night (about 1200ms): sky goes navy, beams turn cyan, the peak gains orange rim light and the lockup returns.

## Rebuild it
1. Full-screen react-three-fiber `Canvas` with a GLB mountain (or displaced plane from a heightmap), a `MeshStandardMaterial` with snow by normal-y threshold.
2. Clouds: several large camera-facing planes with noise textures, `transparent`, `depthWrite: false`, moving at different speeds; add `Fog` in #E9E8E4.
3. Light shafts: additive gradient planes with low opacity, faded with Motion values passed to uniforms.
4. Day to night: animate a `progress` uniform from 0 to 1 with Motion `animate()` over 1.2s, lerping sky colour, fog colour (#E9E8E4 to #182537), key light colour (white to #C2733A) and intensity.
5. Marquee: an HTML overlay `whitespace-nowrap uppercase font-light tracking-[0.4em] text-[4.5vw]` translated with a looping Motion `x` from 0 to -50%.
6. Nav: tabs with a shared `layoutId` underline so it glides between active items.

## Generation prompt
A serene cinematic 3D website hero: a snow-capped mountain peak rising out of a sea of soft white clouds, delicate vertical light shafts falling through the mist, widely spaced thin uppercase words sliding across the scene like a slow ticker, then the scene transitions to a deep navy night with cyan light beams behind the summit and warm orange alpenglow on its faces; minimal corporate interface, airy and majestic, no logos.