Thunderstruck
Back to all work

Thunderstruck

A case study you can actually press.

This is the only case study you can actually try, not just read about. You are standing inside it. Everything below is genuinely running here, not a picture of it and not a second copy.

  • Marketing Website
  • Our own project
  • 2026

Live tour

01

Procedural lightning

The lightning is not a video or a sprite. It is drawn to a canvas point by point, and any click on the page fires one, except clicks that land on a button or a link, which the storm ignores on purpose so it never flashes under your finger while you are aiming at something. This button is therefore the exception: it calls that same function directly.

0 strikes since you arrived

The counter listens to the same event that lights the hero orb.

02

WebGL orb

The same canvas and the same shader as the hero, at a smaller size. Where a device cannot run WebGL the component falls back to a still on its own. That is the plan, not a failure.

0°

Try it yourself. This is the same shader, opened up for tuning. Only this orb changes; the hero on every other page stays exactly as it was.

The same PlasmaCore instance the hero renders.

03

Scroll-driven storm

Across the site the storm gets heavier the deeper into a page you are. Here it is in your hands: scroll the runway on the right and the storm behind this text moves with your fingers. The figures are not an animation, they are read straight off the running layer.

Intensity0 %
CalmFull force

Scroll the runway. All the way down the storm runs at full power; leave the page and scrolling takes the wheel back.

Bolts on canvas
Mode

Read live from the running layer, not from a copy.

04

Deterministic service finder

The quiz on the services page calls no model, five categories are separated by two questions, so it is a decision table. Instant, and with nothing to fail. It lives in one place and stays there.

One instance, one piece of state, hence a link, not a copy.

05

Interactive calculator

The same calculator as the pricing page, with the same logic. Pick more than one category and the figure adds up. Nothing is sent anywhere.

What you need
1

Indicative range

1,000 – 1,400 €

This estimate is indicative and non-binding. The real figure comes out of the scope we go through together.

Get an exact quote

The imported PriceEstimator, not a second version of it.

Our role

We built it ourselves, no client, no approval loop, and no budget that stopped us anywhere.

On client projects we write “we contributed to” and we mean it: we are part of a larger team. Not here. This is Thunderstruck with nothing holding it back. Every decision, every effect and every compromise is ours.

Technical approach

WebGL and its fallback

The orb runs on a fragment shader of its own. Not every device can run WebGL, so the component tests the context and drops to a still when it fails. The page never waits for graphics that are not coming.

Transition choreography

Page transitions run on the View Transitions API. The stars, the storm, the header and the chat carry names of their own so they hold still through a transition instead of blinking. The page underneath is what changes.

Quiz architecture

The service finder started as a call to a language model. With five categories that is unnecessary: two questions separate them completely. We rewrote it as a decision table. Instant, no call, no rate limit, and no invented sixth category.

One taxonomy across the system

The five service categories are written in one place and everything else reads them from there, service cards, pricing, the calculator, the contact form and the project tags. They used to be four independent lists, and they drifted.

Where we are today

The site is under active development and will have changed again by the time you finish reading this.

We have no traffic or conversion numbers for it. It has not been running long enough, and inventing them would contradict everything else on this page. The one metric we can stand behind is performance, and you can check it yourself.

(09) Start a project

Got a project in mind? Let's make it happen.

The more you tell us about the project, the more precisely we can answer. Every enquiry gets a reply within two working days.

hello@thunderstruck.studio

Currently taking on new projects.