0 / 0 pages shipped · hover a tile
Every page, designed then built
Client-First classes, an editor-ready CMS and every script on GitHub behind an init guard.
/briefing
The objective
5 TEN designs and builds huge light-up installations: LED ceilings, media walls, the New Year's Eve ball. The site was planned, mocked up and designed from the ground up to show the scale of their work and where it lives around the world, and to feel as precise as their engineering.
Built from the ground up: planned and mocked up first, designed in Figma, then built in Webflow with Client-First structure, a Three.js globe fed by the Projects collection, GSAP scroll systems and Unicorn Studio WebGL, all editable by the team in the CMS.
Mission parameters
/systems · 6 deployed
Systems deployed
Open a system to see what it does, why it matters and, in Engineer mode, how it works.
SYS-01
Interactive project globe
Three.js · CMS
What it does
A 3D globe shows every project where it was built. Spin it, tap a glowing pin, and a card pops up with the photo and a link to the case study.
Why it matters
Visitors see the studio's reach in one second, before reading a word.
Under the hood
A factory function creates an independent [[Three.js]] globe per wrapper, so the hero and the teaser can coexist. Pins are read from hidden [[CMS]] items via data attributes (lat, lng, city, slug). Raycasting on invisible hitboxes handles hover and tap; nearby pins group into clusters.
Curious how it works?
Switch Crew level to Engineer for the technical breakdown.
SYS-01
Process as geometry
Three.js · IntersectionObserver
What it does
Each step of their process gets its own slowly rotating wireframe shape. On phones, they swap to lightweight flat drawings.
Why it matters
It explains a technical process visually and signals precision without a paragraph of copy.
Under the hood
Wireframe platonic solids rendered in Three.js, animated only while on screen. Below the mobile breakpoint the canvas is hidden and a 150px [[SVG]] takes its place.
Curious how it works?
Switch Crew level to Engineer for the technical breakdown.
SYS-01
Breakout split-text
SplitType · ScrollTrigger
What it does
A big statement breaks apart and reassembles line by line as you scroll.
Why it matters
It slows the reader down on the one sentence that matters.
Under the hood
One master controller owns the split-text, scroll-section and fade-up behaviors, so they share a single [[ScrollTrigger]] setup instead of fighting each other.
Curious how it works?
Switch Crew level to Engineer for the technical breakdown.
SYS-01
Pinned video gallery
HLS · Webflow Interactions
What it does
The page holds still while a gallery of installation videos plays through, then lets go.
Why it matters
Video is their strongest proof, so it gets the whole screen.
Under the hood
HLS video loads eagerly and autoplays muted. The scroll distance lives in the Designer on a runway element per breakpoint, so the animation and the pin end at the same moment.
Curious how it works?
Switch Crew level to Engineer for the technical breakdown.
SYS-01
Dot-field text mask
Canvas · data attributes
What it does
A field of dots reacts to your cursor, and the headline is cut out of it.
Why it matters
It turns the call to action into something people play with.
Under the hood
The dot spacing is set per breakpoint with data attributes (desktop, tablet, mobile), read by a helper that rebuilds the grid when the window crosses a breakpoint.
Curious how it works?
Switch Crew level to Engineer for the technical breakdown.
SYS-01
WebGL atmosphere
Unicorn Studio
What it does
Soft, moving light effects sit behind the footer and gallery, like light spill from a screen.
Why it matters
The site feels lit, the way their installations are.
Under the hood
Five [[Unicorn Studio]] scenes, initialized once globally. A second init call would break every embed, so it is guarded.
Curious how it works?
Switch Crew level to Engineer for the technical breakdown.
/impact · 5 problems solved
Problems solved
What the site does for the people who run it and the people who visit it.
SOLVED-01For visitors
Show the reach instead of claiming it
Before
A plain grid of projects can't tell a visitor that 5 TEN builds installations from New York to Las Vegas.
Now
A 3D globe pins every installation where it was built. Spin it, tap a pin, and the photo and case study pop up.
Result
Visitors understand the studio's reach in seconds, before they read a word.
Under the hood
Pins are read from the Projects collection through data attributes. Invisible hitboxes handle hover and tap, and nearby pins group into clusters.
SOLVED-01For visitors
Add a project once and it shows up everywhere
Before
Without a system, adding new work means editing several pages by hand, and older projects clutter the portfolio.
Now
The team adds a project in the Webflow CMS with its location. It lands on the globe, the Projects grid and its own page. A "Has case study" switch keeps older work on the globe only.
Result
New work goes live in minutes, without a developer.
Under the hood
Webflow can't bind a switch to an attribute, so the globe reads two filtered Collection Lists and the grid filters to case studies only.
SOLVED-01For visitors
Let the videos do the selling
Before
Installation videos are the studio's strongest proof, but small embeds don't show the scale.
Now
A pinned gallery holds the page still while the videos play full-screen, then lets go the moment it ends.
Result
Every visitor sees the work at full size, and scrolling never gets stuck.
Under the hood
The scroll distance lives on one runway element, calibrated per breakpoint (160 / 150 / 135 / 120vh). A parent's overflow: hidden was silently killing sticky, so it became overflow: clip.
SOLVED-01For visitors
Big visuals that still load fast on a phone
Before
3D and WebGL can make a phone page slow and drain the battery.
Now
3D only runs while it's on screen. On phones the rotating process shapes swap to lightweight drawings.
Result
The same wow on desktop and a quick page on mobile.
Under the hood
An IntersectionObserver starts and stops each render loop. A bug that started the loop twice was removed, which halved the CPU cost. Below the mobile breakpoint a 150px SVG replaces the canvas.
SOLVED-01For visitors
Explain a technical process without a wall of text
Before
Consulting, engineering and execution is hard to picture from paragraphs, and prospects arrived with the same questions.
Now
Each step gets its own rotating wireframe shape and one short line of copy.
Result
Prospects understand how 5 TEN works before the first call.
Under the hood
Wireframe platonic solids in Three.js. Page CSS was trimmed from 16 sections to 8 to stay under Webflow's silent page-CSS limit.
/manifest · what shipped
Mission manifest
Everything this mission delivered, planned and mocked up first, then built from the ground up.
Mission · planet
Role
Designer + developer
Platform · Year
CMS collections
0 collections
Mission type
0 disciplines
Drag the tags
Mission parameters
All met
Status
Live
Self-initiated identity
/telemetry
By the numbers
11
projects pinned on the globe
5
WebGL scenes
13
scripts, each with a double-init guard
4
breakpoints hand-calibrated
/stack · 0 tools
Tools in orbit
Every tool this mission ran on. Pull one out of orbit and let go; it finds its way back.
Hover a tool
Tools in orbit
/observatory · from this mission
