Skip to content
Malerwerk Sulejmani

Cinematic craft for a Swiss painting workshop

A cinematic one-pager for a Swiss painting and plastering business — a WebGL film hero, editorial typography, and craft you can feel in the scroll.

Malerwerk Sulejmani | Cinematic craft for a Swiss painting workshop project screenshot

The challenge

Malerwerk Sulejmani is the painting and plastering workshop of Minir Sulejmani in Spreitenbach, Aargau — interior painting, facades, wallpapering, plastering, and lacquer work for private and commercial clients across Switzerland. The brief: a presence as precise as the craft itself. Premium and cinematic, but Swiss-sober — no template look, no noise.

Our approach

We designed a single-page editorial site in Next.js 16 around light, gallery-white surfaces with the Swiss-red accent from the logo. The hero runs the workshop’s film through a Three.js noise-displacement shader on desktop — paint that ripples as it moves — and falls back to a tuned plain video on mobile. Below it, the whole business unfolds in one scroll: five service pillars, a four-step process from binding quote to guaranteed handover, tagged reference projects, and a contact section with hours and a map link. All copy and facts live in one content file, so the site is edited like a document.

What we delivered

WebGL film hero — the brand video pushed through a Three.js noise-displacement shader, with a lightweight video fallback on touch devices
Editorial serif typography with split-letter headline reveals and a paint-drip section edge
Five service pillars: interior painting & wall design, facades, wallpapering, plastering, and lacquer & floor coatings
Four-step process from consultation and binding quote to handover with guarantee
Tagged reference-project showcase
Custom cursor, magnetic buttons, Lenis smooth scrolling, and a side section index
Branded preloader tied to genuine asset readiness
Quote requests one tap away — phone, email, clickable address, and opening hours

Tech highlights

Next.js 16 App Router with React 19, TypeScript strict, and TurbopackThree.js / react-three-fiber hero with SSR-safe reduced-motion and touch guardsThe entire site edits from one content file, site.tsHero film mastered from 4K and shipped as tuned 1080p/720p variants with a 64 KB poster for instant first paintTailwind CSS v4 design tokens and consent-gated GA4Docker standalone behind Traefik with automatic TLS
The site feels like our work: clean edges, no shortcuts. Customers mention it when they call — they have already seen how we work before we ever meet.

Minir Sulejmani

Malerwerk Sulejmani

Like what you see?

Let's build something just as good, or better, for you.

Start a project