Bombastic
Build.
Ship.
Dominate.
For brands that arrive loudly.
Bombastic hero
Full-bleed gradient, oversized type, parallax glow, animated kicker. For brands that want to announce themselves.
Web Design — Showroom
Everything a modern website
can do — in one scroll.
A living catalogue of design patterns, motion techniques, layout systems and interactive components. Pick what fits your brand — each tile is a live demo, ready to be customised for your project.
Hero variants
First impression.
The above-the-fold deal — bombastic, calm or playful. Same content, different mood, different conversion.
Build.
Calm
A site that respects the reader.
Whitespace, restrained type, no surprises. Trust as a design value.
Read more
Minimalist hero
Generous whitespace, single accent line, calm typography. For consultancies, studios, finance.
Hello there
Make it warm .
For shops, makers, agencies with personality. Hover the headline.
Playful hero
Hand-drawn underline, emoji-free but warm. For shops, creators, agencies with personality.
Vol. 04 — Issue 12 Hamburg · 2026
Engineering
as a craft.
Software built like a leather-bound book — every page on purpose.
by stuf.rocks ∙ continued p. 24
Editorial hero
Magazine layout — drop-cap, serif headline, paper grain, italic kicker. For premium craft, publishing, atelier brands.
stefan@stuf.rocks ─ zsh
$ whoami
stefan_koellner // engineer · hamburg
$ cat ./mission.txt
ship.code.that_works
$ uptime
30+ years · load avg: 0.04 · all systems nominal
$ _
Terminal hero
CLI window with blinking caret, scanlines, mono prompt. For dev-tools, infra, SaaS with hacker roots.
Aether · CPH LDAC
Sound,
transparent.
42 mm Be · 48 h
© 2026 aether-audio copenhagen ↗
Glassmorphism hero
Frosted-glass cards on an aurora-gradient background. For premium consumer tech, fintech, audio brands.
№ 026
NO
SOFT—
FORM.
SS26 SHIBUYA
EST. 2019
Brutalist hero
Bone white, hard black borders, asymmetric grid, oversized type. For streetwear, fashion, agencies with attitude.
— Marquesa · MMXXVI —
A ship is a
private theatre.
Monaco · La Spezia
Cinematic dark-lux hero
Full-bleed video, letterbox bars, gold accent, slow fades. For luxury, yachting, hospitality, art galleries.
Verda Spa Baden-Baden
Stillness,
brewed slowly.
Tea is poured at 11, 14, 17.
by stuf.rocks est. 2017
Botanical hero
Sage and cream palette, organic blob shapes, soft serif. For spas, wellness, herbal brands, gardens.
⚡ EST. 2019 · BERLIN ⚡
PIXEL
PLAZA
★ press start ★
Y2K chrome hero
Conic chrome gradient, sparkle stars, pixel-art type, bevel buttons. For indie games, music labels, kids brands.
— Available · Q3 2026 —
№ 01
Light,
held still.
Luca Méndez · Lisbon
Photographic hero
Pure black, full-bleed editorial photo, Inter Tight display. For photographers, galleries, slow journalism, art books.
Vault & Co.
FINMA · CHF
Money, made
boring.
€842k
avg. AUM
0.12%
fee
256-b
crypt
FinTech precision hero
Navy + mint accent, 8px geometric grid, monospace numerics, KPI stack. For banks, wealth-tech, treasury, FX, audit-tech.
Solene Travels
EST. 2014
Where the
slow days are.
Lyon · Sicily · Marrakech
Travel magazine hero
Cream + warm brown palette, sepia-tinted photo, Fraunces italic. For boutique travel, slow tourism, magazines, hospitality.
Praxis Lindgren
München
Medizin
mit Zeit.
Allgemeinmedizin · Vorsorge · Reisemedizin
Medical / clinical hero
Soft blue + clean white, generous whitespace, dezent iconography. For physicians, clinics, privatpraxis, dental, health-tech.
Crest Properties
Wien · MMXXVI
Quietly
extraordinary.
Innere Stadt · By appointment
Real Estate premium hero
Deep black + gold + cream cards, Cormorant serif, gold hairline frame. For premium brokers, real-estate funds, heritage estates.
3D & WebGL
Depth on demand.
Three.js scenes, Spline embeds, CSS-3D, tilt — fast enough to ship, scoped so it never wrecks the budget.
card / 01
Hover to tilt
Mouse-driven 3D parallax
Tilt card (3D parallax)
Mouse-driven 3D tilt with depth layers. Hover and watch the card respond.
Tech
Vanilla JSCSS 3D transformsNo deps
CSS-3D rotating cube
Pure CSS 3D cube — no WebGL needed. Auto-rotates, pauses on hover.
Tech
CSS 3D0 KB JSPure CSS
loading three.js…
drag · scroll
three.js scene (lazy)
Interactive 3D scene loaded only when scrolled into view. Drag to rotate.
Tech
three.jsLazy importWebGL
Next step
Let's talk about your project.
Tell me the task in two paragraphs. If a package fits, link it. Reply usually within 1–2 working days.