BrikoLab
A home page for an engineering company, where work that is normally invisible becomes something you can scroll.
BrikoLab designs medical devices end to end: requirements, research, electronics, prototypes, documentation, state registration. Every one of those is real engineering and none of it photographs. The old page listed the services and left the reader to imagine the rest.
- Year
- 2026
- Role
- Design, front-end, WebGL
- Stack
- Three.js · GLSL · GSAP · Lenis
- Page
- 7421px, ten sections
Theproblem
A company that develops medical devices sells predictability, and predictability is invisible. What the old site had instead were the claims every engineering company writes: high quality, expert support, individual approach, modern technology. Nothing checkable, and nothing that explains what buying from them actually involves.
WhatIdid
What it replaced
The old home page opened on a carousel: five slides of stock photography, a violet gradient over each one, and a headline that changed every few seconds before anybody had finished reading the previous one. Everything below it was the same set of claims every engineering company writes. Nothing on the page said what working with this company actually involves.
The page opens on matter, not on a headline
Forty-five thousand particles drift, breathe and part around the cursor: raw material before it becomes a device. Three forces act on every point, all of them computed in the vertex shader, all of it one draw call. The first scroll collapses the canvas for good, so the effect introduces the page once and then gets out of its way.
The seven stages are the spine of the page
Technical proposal, preliminary design, detailed design, working prototype, verification, testing and state registration, market entry. It is the strongest thing this company has and it lived only in the founder’s head. On the page it is a staircase that steps down to the right and assembles itself in a cascade from 01 to 07 the first time it is scrolled into view, with outline numerals borrowed from an engineering drawing rather than from decoration.
Nothing is hidden behind a click
Each service card keeps its description open: no expand, no ellipsis, no second screen to reach the text somebody came for. Pointing at a card is the reward rather than the requirement. The photograph fades up underneath, in colour and desaturated in CSS, and the card goes dark so the type stays readable over it.
A second field of particles, and a reason for it
The about block used to carry a badge reading twenty plus and a row of promises. It now carries plain sentences about the founders and the work, with a helix of thirteen thousand points assembling itself beside them. On white it uses normal blending rather than additive, because additive light on a white ground is invisible by definition.
Six fields of competence, one visual weight
The photographs are desaturated in CSS so that none of the six shouts at the other five. It is the same trick as the cards and the same reason: a page about engineering should not have a hierarchy that came from whichever stock photograph happened to be brightest.
A form that knows what it is collecting
Phone mask, de-duplicated file chips, explicit consent, and a warning that patient data must not be attached. That last one is not decoration: this is a medical device company, and the wrong file arriving in an inbox is a problem no design system can fix afterwards.
Underthehood
One accent, used once per screen
Manrope in two weights, three whites, one ink, and a single teal. The teal is allowed on buttons, bullets, numerals, links and the particle field, and nowhere else. An editorial grid of twelve columns in a 1200px container gives the page the authority the subject needs, and the air around it does the rest.
Forty-five thousand points, one draw call
One BufferGeometry with custom vertex and fragment shaders, an EffectComposer with a restrained bloom pass, and a device pixel ratio clamped to two and folded into the point size by hand. Two and a half percent of the particles are oversized to carry the bokeh, and the base alpha sits at 0.13 so the bloom never burns out.
Additive glow disappears on white
The helix further down the page is thirteen thousand points on a white background, so it uses normal blending rather than additive. Additive light on white is invisible by definition, which is the sort of thing you find out by looking at the running page rather than by reasoning about it.
Reduced motion is real, not a checkbox
With reduced motion requested, smooth scrolling is never created at all, time is frozen inside the shaders, the helix appears already assembled, and the marquee becomes a static grid. Each of those is a different mechanism, which is why the setting is usually half implemented.
No bundler, and a flag for screenshots
The page is a hand-written HTML file with inline styles and two ES modules loaded through a CDN import map, so it can be grafted onto the existing theme without a build step. Appending ?nogl removes the 3D hero, which is the only reliable way to capture the page in headless Chrome, where the WebGL compositor returns black frames. Every state in this case was captured from the running page that way.