S-20 · Site recreation · 2026-10-09
4082 Studio
1367 Studio recreation
Recreation of a software agency site in 15 pages, with a hero zoom scene and globe
How it was made
The original is the site of a software agency with offices in Marseille and Florianópolis.
The home hero moves into a photo over 500vh, and the orange of the lens covers the whole screen. The scene is built from two values: photo zoom and an orange overlay.
The header shrinks from a 1144px-wide bar to a 682px pill after only 10px of scrolling. The original values were carried over down to the 600ms curve.
The original globe is three.js WebGL. Redrawing it with orthographic graticules in Canvas 2D removed 312KB of three-related code.
The person in the hero video was replaced with a photo of orange-lens sunglasses. The orange was darkened to #d93500 for a 4.7:1 contrast with white text.
Key features
- 500vh hero zoom scene
- Header pill transition · full-screen menu panel
- Focus area hover preview · 2D globe
- Blog filter · contact form dropdown
Where and how to use it
Suits development agencies with around 6 services and few cases. When offices are in several time zones, the globe replaces the address list.
Industries
- Software development agencies
- Web and app studios
- Companies with offices in several cities
Reusable screens and features
- Service list hover preview
- Office time globe
- Blog filter
- Inquiry form
Points to check
The contact form is validated but not submitted. One high-resolution photo is needed to fill the opening scene.
After reading the document
The live site opens in a new window.
Go to site(opens in new window)