Bombastic
Build.
Ship.
Dominate.
For brands that arrive loudly.
Bombastischer Hero
Vollflächiger Gradient, übergroße Typografie, Parallax-Glow, animierter Kicker. Für Marken, die sich ankündigen wollen.
Web-Design — Showroom
Alles, was eine moderne Webseite
können kann — in einem Scroll.
Ein lebendiger Katalog an Design-Patterns, Motion-Techniken, Layout-Systemen und interaktiven Komponenten. Suchen Sie sich aus, was zur Marke passt — jede Kachel ist eine Live-Demo, bereit zur Anpassung an Ihr Projekt.
Hero-Varianten
Erster Eindruck.
Above-the-fold-Geschäft — bombastisch, ruhig oder verspielt. Selber Inhalt, andere Stimmung, andere Conversion.
Build.
Calm
A site that respects the reader.
Whitespace, restrained type, no surprises. Trust as a design value.
Read more
Minimalistischer Hero
Großzügiger Weißraum, einzelne Akzentlinie, ruhige Typografie. Für Beratungen, Studios, Finanzwesen.
Hello there
Make it warm .
For shops, makers, agencies with personality. Hover the headline.
Verspielter Hero
Handgezeichnete Unterstreichung, emoji-frei aber warm. Für Shops, Creator, Agenturen mit Persönlichkeit.
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
Magazin-Layout — Drop-Cap, Serifen-Headline, Papier-Grain, kursiver Kicker. Für Premium-Handwerk, Verlage, Atelier-Marken.
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-Fenster mit blinkendem Caret, Scanlines, Mono-Prompt. Für Dev-Tools, Infra, SaaS mit Hacker-Wurzeln.
Aether · CPH LDAC
Sound,
transparent.
42 mm Be · 48 h
© 2026 aether-audio copenhagen ↗
Glassmorphism-Hero
Frosted-Glass-Cards auf Aurora-Gradient. Für Premium-Consumer-Tech, Fintech, Audio-Marken.
№ 026
NO
SOFT—
FORM.
SS26 SHIBUYA
EST. 2019
Brutalist-Hero
Knochenweiß, harte schwarze Borders, asymmetrisches Grid, übergroße Typo. Für Streetwear, Mode, Agenturen mit Haltung.
— Marquesa · MMXXVI —
A ship is a
private theatre.
Monaco · La Spezia
Cinematic Dark-Lux-Hero
Vollflächiges Video, Letterbox-Bars, Goldakzent, langsame Fades. Für Luxus, Yachting, Hotellerie, Galerien.
Verda Spa Baden-Baden
Stillness,
brewed slowly.
Tea is poured at 11, 14, 17.
by stuf.rocks est. 2017
Botanical-Hero
Salbei- und Cremepalette, organische Blob-Shapes, sanftes Serif. Für Spas, Wellness, Kräutermarken, Gärten.
⚡ EST. 2019 · BERLIN ⚡
PIXEL
PLAZA
★ press start ★
Y2K-Chrome-Hero
Konischer Chrom-Gradient, Sparkle-Sterne, Pixel-Art-Typo, Bevel-Buttons. Für Indie-Games, Musiklabels, Kindermarken.
— Available · Q3 2026 —
№ 01
Light,
held still.
Luca Méndez · Lisbon
Fotografischer Hero
Reines Schwarz, vollflächiges Editorial-Foto, Inter-Tight-Display. Für Fotografen, Galerien, Slow-Journalismus, Bildbände.
Vault & Co.
FINMA · CHF
Money, made
boring.
€842k
avg. AUM
0.12%
fee
256-b
crypt
FinTech-Präzisions-Hero
Navy + Mint-Akzent, 8px-Raster, Monospace-Numerik, KPI-Stack. Für Banken, Wealth-Tech, Treasury, FX, Audit-Tech.
Solene Travels
EST. 2014
Where the
slow days are.
Lyon · Sicily · Marrakech
Travel-Magazin-Hero
Cream + warmes Braun, sepia-getöntes Foto, Fraunces-Italic. Für Boutique-Travel, Slow-Tourismus, Magazine, Hotellerie.
Praxis Lindgren
München
Medizin
mit Zeit.
Allgemeinmedizin · Vorsorge · Reisemedizin
Medizinischer / klinischer Hero
Sanftes Blau + cleanes Weiß, viel Weißraum, dezente Iconography. Für Ärzte, Kliniken, Privatpraxis, Dental, Health-Tech.
Crest Properties
Wien · MMXXVI
Quietly
extraordinary.
Innere Stadt · By appointment
Real-Estate-Premium-Hero
Tiefes Schwarz + Gold + Cream-Cards, Cormorant-Serif, Gold-Hairline-Rahmen. Für Premium-Makler, Real-Estate-Fonds, Heritage-Estates.
3D & WebGL
Tiefe bei Bedarf.
Three.js-Szenen, Spline-Embeds, CSS-3D, Tilt — schnell genug zum Ausliefern, gezielt genug fürs Budget.
card / 01
Hover to tilt
Mouse-driven 3D parallax
Tilt-Karte (3D-Parallax)
Mausgesteuerter 3D-Tilt mit Tiefen-Layern. Mit der Maus drüber — Karte reagiert.
Technik
Vanilla JSCSS-3D-TransformsOhne Deps
CSS-3D rotierender Würfel
Reiner CSS-3D-Würfel — kein WebGL nötig. Rotiert automatisch, pausiert beim Hover.
Technik
CSS 3D0 KB JSPure CSS
loading three.js…
drag · scroll
three.js-Szene (lazy)
Interaktive 3D-Szene, geladen erst beim Scrollen ins Bild. Ziehen zum Drehen.
Technik
three.jsLazy importWebGL
Nächster Schritt
Sprechen wir über Ihr Projekt.
Beschreiben Sie die Aufgabe in zwei Absätzen. Wenn ein Paket passt, gerne verlinken. Antwort meist innerhalb von 1–2 Werktagen.