The task
A security product is hard to show. There is nothing to photograph, the screenshots are dashboards that look the same at every vendor, and the words on the page are the words every vendor uses. A site like that is read as a brochure and closed.
So the page was built around one thing that moves, and the story it tells is the story of an attack: something gets in, time passes with nobody noticing, the odd thing is spotted, the odd thing is contained. Four shapes, four screens, no captions explaining them.
The mechanics of the particle field come from a site we took apart and rebuilt in our own code — the formulas of the simulation and nothing else. The subject, the shapes, the palette, the copy and the interaction are ours.
What we built
One scene carries the whole page
Ten thousand particles live in a single field. Each one is the outline of a cube rather than a dot, so a shape made of them reads as a body with a front and a back, and it keeps reading when it turns.
Scroll position is the only control. As the page moves, the particles fly to the next target and the shape rebuilds in front of the reader. There is no video here and no sequence of images, so the page cannot be caught between two frames, and it never plays the same way twice.
The problem is one number, and the number has a source
Two weeks is how long an attacker stays inside a network before anyone notices. That single figure carries the whole problem section: it is set large, in its own screen, with the year it belongs to and the report it comes from printed underneath rather than left as a claim.
Beside it the particles gather into an hourglass, and one grain in the falling sand is red. It is the same red particle that runs through all four shapes — the one event nobody has looked at yet.
Detection is something the reader does with the cursor
A counter in the corner counts events from the second the page opens, and the line beside it says that one of them does not belong. The odd one is a single red particle among ten thousand.
Move the cursor near it and the field parts around it. Click it and the page answers with the line the product sells: isolated in 3.8 seconds. What the section claims in words, the reader has already done with their own hand.
By that point the shape has turned into an eye, and the red particle is sitting in the pupil.
The answer is a shield, and the page ends on it
The last shape is a shield seen at three quarters, with a rim, a rib and a thickness of its own, so it reads as an object rather than as an icon. The call to action stands opposite it, on the screen where the reader has just watched the threat get shut in.
Every shape here is built as a volume on purpose. Between the screens the field turns and breaks apart, and a flat picture would collapse into a line the moment it went edge-on — the first version of the eye was thrown away for exactly that.
The page says what it is and who made it
Nocta is invented. It is a portfolio build, not a client, and the foot of the page says so in one line instead of leaving a reader to work it out. The studio is credited on the same line.
Under the shield there is a block that speaks in our own voice: every screen here was drawn, measured and animated by hand, and yours can be built the same way. It ends with a WhatsApp button, and a second one floats in the corner of every screen.
That floating button opens by itself ten seconds in, greets the visitor in the language of their browser — English, Russian or Portuguese — and stays shut for the rest of the visit once it has been closed.
Under the hood
The whole page is written by hand and checked by measurement. Here is what the numbers say about the speed, the scene, the phone and the weight of the file.
Particles and scene
Ten thousand particles in one mesh
The field is one instanced mesh: ten thousand cube outlines drawn from a single geometry, with a second layer of larger particles in front of them.
The shapes are computed before the page is published
Working out where ten thousand points go in four shapes takes about forty seconds, and at first the browser was doing it on every visit — half a minute of waiting.
The phone is a separate piece of engineering
On the first phone we tried, the field was simply not there.
Speed and quality
93 for speed on a page that runs a 3D scene
Lighthouse measures the desktop page at 93 for performance: the first screen is painted in 1.1 seconds, blocking time is 10 milliseconds and layout shift is 0.003.
95 for accessibility, 96 for practices
Lighthouse gives the page 95 for accessibility and 96 for best practices.
One file, and one request that leaves it
The site is a single HTML file of 848 KB with the 3D engine, the shaders, the shapes and the styles inside it. Open the live page
Honesty
The figure on the page is sourced
The two weeks an attacker spends inside a network is not a number we made up for the layout: it is the global median from the Mandiant M-Trends 2026 report, and the page prints the source under the figure.
The demo says that it is a demo
Nocta is a brand we invented for the portfolio, and the foot of the page says so in plain words next to the studio credit.
On a phone
What came out of it
- Ten thousand particles hold 61 frames a second on a desktop machine.
- Lighthouse on desktop: 93 for speed, 95 for accessibility, 96 for practices.
- The first screen is up in 1.1 seconds, and layout shift is 0.003.
- The whole site is one file: page, engine and shapes together.
The page proves the product the only way a security product can be proved on a website: the reader finds the one event that does not belong, among ten thousand, and watches it get shut in. Everything else on the page — the number, the source, the offer — stands around that minute.
