The Experiment Page Grows Up — Closer to What Clients Actually Need

When I built the Experiment page, the question behind it was simple: what is possible in a browser today? A hand-written WebGL shader, a reactive particle field, an ambient flow field, 3D tilt cards, kinetic type, frosted glass. It was fun to build, and it still shows what modern web code can do.

But the people I build websites for don't ask what is possible. A Schlosser, a Schreiner or a small Mittelstand company asks something much more practical: what helps me win the next job? This update moves the page towards that question.

Two effects out

The reactive particle field and the ambient flow field are gone. Both were beautiful, and both were pure decoration. Neither tells a visitor anything about a business, both keep the processor busy, and I couldn't think of a single client site where I would honestly recommend them. The flow field's own "when I'd use this" note already admitted it: a splash page or a 404, never a contact form. If I wouldn't ship it, it doesn't need to lead the page.

One effect in: the before/after slider

The new first demo is a before/after slider. The example is a typical job for a metalwork shop: an old, rusty balcony railing made of painted steel, replaced with a new one in brushed stainless steel. You drag the handle, and the photo wipes from Vorher to Nachher.

This is the kind of effect a craft business would actually book. A renovation is hard to describe in words and easy to show in two photos. It works for railings, stairs, gates, kitchens, facades — anywhere the result speaks for itself.

And it's cheap, which matters just as much:

• Two images and a few lines of CSS. The top photo is cropped with clip-path, driven by one CSS variable. No video, no plugin, no library.
• A real slider underneath. The handle is a native range input, so it works with the keyboard and with screen readers without any extra code. Mouse, touch and pen all drag it too.
• Light on data. On a phone, both photos together come to about 33 KB as AVIF, with WebP and JPG fallbacks for older browsers. They only load when you scroll near them, and the box is reserved in advance, so nothing jumps around.
• Quiet by default. It plays one short hint sweep the first time it appears, so it's obvious you can drag it — and skips even that if your system asks for reduced motion.

The two photos are AI-generated sample images, not a real client project, and the page says so right under the slider. The "after" photo was generated first; the "before" photo is an edit of it, so the camera, the house and the flower pot stay exactly the same and only the railing changes.

The page didn't get slower

Before and after the change I ran Lighthouse in mobile mode several times. The scores stayed the same: 77 for performance, 96 for accessibility, 96 for best practices, 100 for SEO. Removing two canvas animations and adding two lazy-loaded photos is, for a visitor's phone, a good trade.

Why this direction

The page still opens with the shader, and the tilt cards, the kinetic type and the glass panel are still there — they're good demonstrations, and the Lab/Werkstatt switch still shows the calmer version I'd hand to a client. But the balance has shifted. The question for every section is no longer "is this impressive?" but "would a real customer need this on their website?"

The before/after slider is the first answer to that question. I expect it won't be the last.

Try it on the Experiment page.