Insights7 min read

Immersive web experiences for marketing: what WebGL actually buys a brand, measured on vorluno.dev

WebGLMotionCraftMarketing

IMMERSIVE.// WEBGL · 60 FPS · MEASURED
The word IMMERSIVE set in dots of the Vorluno spectrum, with a tunnel of rings behind it

Every agency now sells «immersive». Few can tell you what it costs in frames, seconds and layout shifts — or what a brand gets back. We built vorluno.dev as the test bench and measured every part of it. This is the honest version.

You have seen the pitch. A site that «feels alive», a hero that reacts to the cursor, 3D that «tells your story». And you have seen the other side of it: a laptop fan spinning up, a phone that scrolls like it is under water, a marketing page that scores 30 on Lighthouse and loses the visitor before the first word loads. Both are real. The difference between them is not the technology — it is whether anyone measured.

At Vorluno we build immersive web experiences for marketing the way we build software: as a route, measured to the frame. This piece walks through what «immersive» actually means on the web in 2026, where WebGL earns its place, what it costs, and what a brand gets back — using our own site, vorluno.dev, as the worked example, because it is the one we can show you numbers for.

What an immersive web experience is — and what it is not

An immersive experience is a page where the visitor is inside something instead of reading about it. The camera moves; the content has depth; the scroll is a journey with stops, not a stack of sections. On the web that means three ingredients working together: a real 3D or 2D renderer running in the browser (WebGL, or WebGPU where it is available), a scroll model that turns the wheel into travel instead of jumps, and copy written for the route — a sentence per stop, not a paragraph per screen.

It is not a video background. It is not a parallax plugin on a template. And it is not «3D» as decoration: a spinning object that has nothing to do with what the brand sells is the fastest way to look expensive and say nothing. The test we use is simple — cover the effect with your thumb. If the page reads the same, the effect was noise.

vorluno.dev — the hero stack and the WebGL tunnel, recorded as it ships. Every letter is a water surface reacting to the cursor.

Where WebGL earns its place

WebGL is a way to draw with the graphics card from a web page. It earns its place when the thing you want to show cannot be drawn any other way at 60 frames per second: thousands of moving points, a surface that deforms under the cursor, a camera travelling through depth. On vorluno.dev the second section is a tunnel of letters made of water — the words are the interface, and they ripple where the visitor points. There is no 3D library behind it. We wrote the renderer in plain WebGL2 because the effect needed exactly one thing done well, and a general engine would have shipped a hundred things we did not need.

Where it does not earn its place: text, forms, navigation, anything the visitor has to read or fill in. Those stay in the DOM — real HTML that search engines index, screen readers announce and phones render without a GPU. The rule on every Vorluno build is that the decorative layer is `aria-hidden` and the real content is server-rendered underneath it. If the WebGL never loads, the page still says everything it needs to say.

59.9average fps with the camera travelling through the tunnel (p5 59.5)
59.9average fps with the cursor on the water letters (p5 59.2)
0layout shift on the whole page

The three things a brand actually gets

Time on the page. A route has stops, and stops are where people read. On vorluno.dev the third section is five rooms — one camera, five stops, one sentence each — and the visitor cannot skim past a stop the way they skim past a section. That is the honest mechanism behind «engagement»: not a trick, a pace.

Memory. People remember what they did, not what they saw. A visitor who moved the letters, who travelled through the rooms, who watched a case play under their scroll, remembers the brand as something they touched. The click-through on a static page is a decision; the same click on an immersive page is a continuation.

A standard. The site is the first deliverable a prospect sees from an agency, and it is the only one they can judge before paying. If it runs at 60 frames per second on their phone, the brand has already proven the one thing that matters in software: it survives production. That is why we measure our own site harder than any client's.

Room 03 of vorluno.dev. The camera arrives, the wall turns dark, a real case plays. One camera, five rooms, one sentence each.

What it costs — the part nobody publishes

Immersive has a price, and it is paid in three currencies: frames, seconds and bytes. Frames are what the GPU can draw per second; below 60 the motion stutters and the whole promise collapses. Seconds are what the visitor waits before the first meaningful paint; on a marketing page that is the difference between a lead and a bounce. Bytes are what the phone has to download before any of it runs — a 3D scene can weigh more than the rest of the site combined.

vorluno.dev pays those prices on purpose and we publish the bill. The hero stack, the tunnel and the rooms all hold 60 frames per second on a real GPU. The cursor answers in 350 milliseconds. Layout shift is zero: nothing jumps, ever. And the mobile Lighthouse performance score is 78 — not 95 — because the largest paint is the hero itself, and we decided the hero was worth 4.3 seconds on a slow phone. That is a design decision, written down, not an accident we hope you will not notice.

60 fpsin the stack, the tunnel and the rooms (real GPU)
350 mscursor latency on the water letters
78Lighthouse performance on mobile — with a 4.3 s LCP that is a design decision
0Cumulative Layout Shift

How Vorluno builds one

  • Surface first. Before any code, the route: how many stops, what each one says, what the camera does between them. A page with no stops does not need WebGL; it needs a writer.
  • A prototype the client can scroll, not a mockup. Motion cannot be approved from a still. We build the throwaway version in a day and measure it on a phone before we build the real one.
  • The renderer written for the effect, not imported. On vorluno.dev that meant plain WebGL2 for the tunnel and a single shared camera for the rooms. Fewer bytes, fewer surprises, and every line of it is ours to fix.
  • Real content underneath. Server-rendered HTML, headings that mean something, alt text on every image, the decorative layer hidden from assistive technology. The immersive page is also the accessible page and the indexable page, or it does not ship.
  • Measured before «done». Frames per second on a real GPU at every stop, cursor latency, layout shift, Lighthouse on mobile — and the numbers go in the case. If a number is bad on purpose, the reason is written next to it.

Should your brand do this?

Do it if your product is something people need to feel before they understand it — a space, a material, a tool that moves, a brand whose whole promise is craft. Do it if the site is the product demo, because nothing else you ship will be seen by more prospects. Do not do it to look modern. Modern is what the template sellers are selling; in a year it will look like a template.

And whoever builds it for you — ask for the numbers. Frames per second on a phone, the largest paint in seconds, the layout shift. If the agency cannot show you those for their own site, they have not measured yours either. Ours are on this page, and on every case we publish.

Immersive is not an effect you add. It is a route you design, then measure until it holds.

José González, Vorluno

// Experience itScroll through vorluno.dev