Verdant
A climate concept site built around an orbiting ring of cards, scenic depth, and one central living-systems stage.
Key signals
18-card ring
Orbit cards frame one living-systems stage.
1 hero stage
Movement stays concentrated in the first screen.
Scenic depth
Backdrop, blur, and pace keep the motion cinematic.
Project access
See the live site inside the case study.
The live build lets visitors move through the orbit hero directly instead of relying on a single static screenshot.
If your browser blocks framed third-party pages, use the live link below to open the project directly.
Live capture
Homepage orbit
The centered living-systems stage stays readable even while the card ring carries the motion.
Hero shell
Orbit frame detail
The orbit shell shows how the surrounding cards shape the hero before the rest of the page loads in.
Scroll state
Morph sequence
Lower on the page, the motion language shifts into a more editorial sequence without dropping the climate tone.
Challenge
Create one dominant hero interaction that felt dimensional and cinematic while keeping the first screen legible on first read.
Stack
Service lanes
System map
Step 01
Centered the hero on a living-systems panel framed by a full orbit of smaller image cards.
Step 02
Used scenic depth, blur, and spacing to give the movement weight without letting the center composition break down.
Step 03
Let the hero carry the identity of the page so the concept feels distinct before the user reaches the lower sections.
Deliverables
- Orbit hero composition
- Motion timing and depth treatment
- Scenic art direction
- Homepage prototype capture
Outcomes
- Delivered a signature hero that feels distinct from a standard split-screen landing page.
- Balanced movement with clarity so the first screen still reads quickly.
- Established a visual system strong enough to carry the rest of the concept.
Related scope