Case study / Studio website
Veloste.com
Our own site. A single-screen, real-time 3D experience whose layout is a working demonstration of what Veloste brings to clients: interaction that feels new yet needs no instructions, a chrome mark rendered live in the browser, and the optimisation discipline that keeps all of it smooth.
The challenge
Show what we do instead of saying it.
A studio website has to prove its own claims. Veloste sells three things, custom brand-led websites, interaction and motion systems, and immersive 3D experiences, and a page of adjectives would not demonstrate any of them. The site had to be the portfolio.
It also had to respect the people using it. Distinctive enough to be remembered, familiar enough that nobody needs a tutorial, fast enough that the 3D never feels like a cost, and shaped so that every path ends at a scoped-quote form. The whole thing had to work in strict black and white, with no colour to hide behind.
The interaction
Unique, yet familiar.
The entire site lives on one scroll axis that runs from minus one to plus one. The landing sits at zero: a black screen, the wordmark, and the chrome star. Scrolling down opens About. Scrolling up from the landing opens Contact. That is the only gesture a visitor has to know, and it is the one they already use everywhere else. The page does not move down, though. It opens.
As progress passes a dead zone, a white circle at the star's tip solidifies and grows until it becomes the page background, and the star itself lifts toward white and blooms into it. A plain white plate fades in beneath to guarantee full coverage, and the black text arrives deliberately late, so type only lands once there is white to land on. Scroll input drives a critically damped spring rather than a linear tween, so each wheel notch changes acceleration, not velocity, and the flood never lurches.
Everything around that moment is conventional on purpose. A pill navigation with About, Work, and Contact floats at the top and inverts when the page turns light. Labelled indicators sit at the star's tips. Overlays close on Escape and hand focus to their close button. Deep links such as /#contact land on the right pane, open panes scroll natively on touch, and reduced-motion preferences are honoured.
The layout
Every surface demonstrates a service.
The site is arranged so that each thing a visitor touches corresponds to something Veloste can build for them. The landing is the immersive 3D work. The transition between screens is the motion system. The About and Contact panes are the brand-led design and conversion-focused UX. The Work overlay and the static case-study pages show that the same language holds up across a whole site, not just a hero.
The static pages, including this one, are hand-written HTML that share one token file and the same pill navigation with the homepage, so they read as rooms of the same building. Every route funnels to the same place: a short scoped-quote form with email and phone alongside it, and a link to a free website brief builder for people who prefer to scope things themselves first.
- Landing Immersive 3D: a chrome star lit and rendered live in WebGL
- Transition Motion system: spring-driven scroll, tip-circle flood, lagged type
- About pane Brand-led design: monochrome, typography-first, structured content
- Contact pane Conversion-focused UX: scoped-quote form, email, phone, brief builder
- Work overlay Case studies with horizontal scroll-snap galleries, lazy-loaded on demand
- Static pages Service, resource, and case-study pages on shared tokens and navigation
The 3D logo and painted normals
A light mesh that reads as worked metal.
The star is a single mesh with one physically based material, and it is deliberately smooth. Its character comes from a tangent-space normal map instead of the geometry: the brushed patches, halftone dots, and hatching that break up its reflections were painted into the map by hand in Blender. The surface stays light to render, but under the lights it reads as a worked metal object, and because the painted normals bend the reflections, the chrome shifts as the star yaws with each scroll.
Lighting is treated like a product shot. A key and a rim directional light and a point light from below give the crisp specular edges, while an environment built from seven rectangular area lights is baked once at load and supplies the soft chrome reflections for free at runtime. The base colour is levelled and contrast-stretched in code so the mark stays strictly monochrome, and the frame passes through filmic tone mapping with an exposure derived from a simple whites, highlights, shadows, and blacks grade.
The glow is the same material, not a second model. As the flood advances, the star's colour lifts toward white, its emissive intensity rises above the bloom threshold, and the post-processing pass carries the halo, so the mark burns out into the page without drawing anything twice.
- One mesh, one material 20,791 vertices and 37,440 triangles, no separate glow copy
- Painted normal map 1024-pixel tangent-space map carrying brushed, dotted, and hatched detail
- Product-shot lighting Key, rim, and under lights plus a once-baked seven-panel environment
- Emissive glow through bloom Colour, emissive, metalness, roughness, and reflection strength all keyed to scroll
- Scroll-linked yaw The star turns up to 40 degrees across the axis, so the reflections move
- Monochrome grade Levels, contrast, and filmic tone mapping tuned for pure black and white
Optimisation
Render only when something changes.
The model ships at under 200 KB. It is compressed with glTF-Transform using meshopt compression and mesh quantization, and both textures are stored as WebP: the 1024-pixel normal map costs about 9 KB and the colour map about 2 KB. The model and both display fonts, converted from OTF to WOFF2 at roughly 25 KB each, are preloaded from the document head so the scene can start the moment the bundle is ready. The Work overlay is a separate chunk that is prefetched when the cursor reaches the navigation.
The render loop is demand-driven. Frames are only requested while the scroll spring is still moving, so a site that is sitting still costs the GPU nothing. The entire scroll pipeline is built on refs rather than React state: every scroll-linked value, from the star's rotation to the pane opacities, is derived from a single progress number, and no component re-renders during a scroll. Values that reach CSS are quantized, diffed, and written to the scene wrapper rather than the document root, so style recalculation stays inside the scene subtree.
GPU cost is budgeted rather than assumed. Device pixel ratio is capped by viewport width, canvas anti-aliasing is off in favour of two-sample MSAA in the post-processing pass, five punctual lights were consolidated into three with the baked environment carrying the rest, and thirteen per-frame subscriptions became one. The full-viewport backdrop blur behind the Work overlay was removed after it proved to be the cause of choppy scrolling there, and glass blur now survives only on the small navigation pill and indicators.
Measured while scrolling hard on a 144 Hz display, the main axis holds 135 frames per second with a 95th-percentile frame time of 7 milliseconds, and six frames out of more than 650 exceeded 33 milliseconds. Those figures come from the studio's own hardware. Veloste does not publish invented traffic or conversion results.