Infrastructure,rendered in light.
A cinematic marketing platform for an institutional OTC desk — one WebGL stage, eleven scenes, zero page loads.
Serious capital deserves a serious first impression.
Sharp runs the full institutional stack — liquidity, execution, settlement and custody. The brief: explain all of it to treasurers, funds and banks in a single visit, and look as precise as the product — without the neon coins and hype that crowd the category.
We rebuilt the brand around a single idea — the block. A unit of value, a unit of infrastructure. It assembles, disperses, builds cities and settles into grids as you scroll, telling the product story without a single stock image.
Challenge
Make a regulated, B2B trading desk feel as crafted as a luxury product — without losing institutional calm.
Idea
One continuous 3D stage. The block is the hero, the camera is the narrator, scroll is the timeline.
Outcome
A site that paints in 0.3 s, scales its 3D down for low-end phones and tells the whole pitch in one scroll.
Eleven scenes. One camera.
The homepage is not a stack of sections. A fixed WebGL stage and fixed HTML layers are choreographed by scroll — every scene owns a slice of the timeline, and five 3D “owners” hand the camera to each other without a cut.
Deep links like /#contact jump straight into any scene. A side meter tracks where you are in the story.
- 01IntroA sphere of satin blocks assembles
- 02ServicesThe sphere disperses as the service cards rise
- 03CompanyOne block survives and becomes glass monoliths
- 04MissionThe camera dollies through arcs of light
- 05InfrastructureA crystal with four orbiting layers
- 06PlatformFly-through into the trading terminal
- 07TerminalWarp tunnel behind frosted feature cards
- 08NetworkA block city pulsing with light waves
- 09SettlementThe city flattens into a ring-lit grid
- 10IntelligenceParticles gather into a dotted planet
- 11ContactThe planet rolls aside to host the form
Deep ink, electric light.
The palette lives between midnight and cobalt, with cyan reserved for one job: the light that shows you what matters. A neutral grotesk carries the facts, an italic serif carries the feeling, mono labels keep it precise.
The shard. A faceted crystal — one facet lit, one in shadow. It echoes the Infrastructure crystal and stays legible down to a 16 px favicon.
The whole story, in one hand.
Every scene was re-laid out for portrait, not shrunk. Scroll lengths and layouts have their own mobile values, block and particle counts follow the device’s quality tier, and resolution drops automatically when the frame rate does.
Cinematic, and still fast.
No blocking loader: the hero paints with the first frame while the 3D stage loads and compiles its shaders in parallel. Next.js 16, React Three Fiber, GSAP and Lenis, exported as a fully static site. Visitors who prefer reduced motion get native scroll and a near-still stage.
Thank you.
- Art direction
- Brand, 3D look-dev
- UI / UX
- Desktop & mobile
- WebGL & Motion
- R3F, GSAP, shaders
- Development
- Next.js 16, static