Kreativstudio: Studio-Bühne

Kreativstudio, Digitalagentur, Agentur-Portfolio

Viel Lautstärke durch riesige Typo, Showreel-Video und harten Schwarz-Weiß-Kontrast, aber eine einzige, konsequente Bewegungskurve. Die drei Referenzen setzen alle auf eine neutrale Schweizer Grotesk (Suisse Intl, Lausanne). Den Charakter tragen Größe, Schnitt und Video, Deko-Effekte braucht es nicht. Award-nah, aber gebaut wie ein Produkt: Lenis, GSAP, View Transitions, kein Fake-Loader.

Bauplan tokens.css Alle Techniken Beispielseite

Schrift

Studio-Bühne

Viel Lautstärke durch riesige Typo, Showreel-Video und harten Schwarz-Weiß-Kontrast, aber eine einzige, konsequente Bewegungskurve.

Kreativstudio, Digitalagentur, Agentur-Portfolio

Headline: TikTok Sans
Text: TikTok Sans
Akzent: DM Mono

Farbe

#0b0b0b
#f2f2f2
#ffffff
#8a8a8a
#ff5a1f
#6B6B6B

Bewegung

cubic-bezier(0.16, 1, 0.3, 1)

Stil: Animationsstil „Editorial langsam“
Stil für UI: Animationsstil „Asymmetrisch auf/zu“ (schnell zu, langsam auf)
Dauer: Reveals und Bildmasken 750–1200, Seitenübergang 800–1000, Hover/UI 200–400, Fades 350

Aufbau der Seite

SignaturAbschluss-Footer mit großem CTA und Riesen-Wortmarke Text-Roll beim Hover (doppelte Zeile rollt durch)

HeroÜbergroßer Schrift-Hero (randlos eingepasste Wortmarke) · Wortmarke Kinoreifer Vollbild-Video-Hero

Showreel direkt nach dem HeroMedien-Expansion beim Scrollen (Bild/Video wächst zum Vollbild)Eigener Videoplayer · Showreel
Leistungen (3–4 Felder)Sections, die übereinander gleiten (Vorhang-Übergang)
Kunden-Logos (nur mit Freigabe und mindestens etwa 5 bekannten Kunden; Band mit Pause-Knopf)Logo-Wand / Social-Proof-Band · Kundenlogos als Laufband
Ausgewählte ArbeitenProjektindex als Liste mit Hover-Bildvorschau Case-Study-Gerüst auf Award-Niveau Lesereihenfolge im Raster · Broken Grid
Haltung / Warum wirWort-für-Wort-Aufhellen beim Scrollen
FAQAkkordeon mit Höhenanimation auf auto · FAQ Fahrschule
Abschluss-CTA / Kontakt (Einladung als Satz, kurzes Anfrageformular oder Mail mit Kopier-Feedback; Studio-Adresse mit Karte per 2-Klick, wenn Besuch vorgesehen)Abschluss-Footer mit großem CTA und Riesen-Wortmarke Kontakt- und Anfrageformular als eigene Sektion Karte per 2-Klick (Anfahrt ohne vorab geladene Karte) · Kartenbild

Seitenwechsel: Clip-Path-Reveal der neuen Seite (Inset, Kreis, Polygon)Vorschaubild wird zur Hero (Shared-Element-Morph)
Intro: Intro ohne Wartezeit (LCP-sicheres Eröffnungsballett)Intro nur beim ersten Besuch (Session-Gedächtnis)
Navigation: Vollbild-Overlay-Menü mit Riesentypo und Bildvorschau Menü-Button-Morph: Burger zu X und Label-Tausch „Menu/Close“Header verschwindet beim Runterscrollen, kehrt beim Hochscrollen zurück
Scroll: Smooth Scroll mit Lenis Bild-Reveal per Clip-Path/Maske Sections, die übereinander gleiten (Vorhang-Übergang)
Schrift: Maskierte Zeilen-/Wort-Enthüllung (SplitText mit Maske)Text-Roll beim Hover (doppelte Zeile rollt durch)Marquee-Laufband (optional scroll-gekoppelt)
Hover: Magnetische Buttons und Elemente Bild-Zoom in der Maske · Basis
Cursor: Kontextueller Cursor (wächst, dockt an, zeigt Label)
Mikroanimation: Druck-Feedback (Press/Tap)Icon-Squash-and-Stretch (Pfeil dehnt sich)
Galerie: Video-Vorschau bei Hover / im Viewport Drag-Slider mit Trägheit und Endlosschleife
Footer: Abschluss-Footer mit großem CTA und Riesen-Wortmarke Studio-Visitenkarte im Footer (Standorte, Kontakt-Tabs, Ortszeit) · Studio-Bühne Kolophon: Schriften, Bildnachweis, Stand, Gewicht
Buttons: Pfeil-Icon-Button · Kreis wird Fläche Text-Roll beim Hover (doppelte Zeile rollt durch)

Nicht verwenden

Nachzieh-Cursor (Lerp-Follower) Cuberto nutzt einen kontextuellen Cursor mit Icons, keinen nachziehenden Punkt; der Lerp-Follower gilt im Katalog als 2020er-Award-Look
Prozent-Zähler-Preloader (0 bis 100) Fake-Ladezeit vor dem Showreel verschlechtert LCP; keine der drei Seiten hat einen
Aurora-/Glow-Hintergrund (Anti-Muster) – liest sich als KI-Template, passt nicht zum Schwarz-Weiß-Kontrast
Verzerrung nach Scrollgeschwindigkeit (Skew/Stretch) und webgl-bildverzerrung auf Case-Bildern – verfälscht Kundenarbeit, die verkauft werden soll
Manrope als Textschrift – Cuberto nutzt sie zwar, sie steht aber auf der Claude-Verbotsliste (SaaS-Standard)
Mehr als eine Signalfarbe oder mehrere Easing-Kurven parallel – bricht die Konsequenz, die alle drei Referenzen auszeichnet

Regeln

h1 mindestens 9vw auf Desktop; nie mehr als 3–4 Wörter pro Zeile; line-height 0.9–0.95, letter-spacing -0.02 bis -0.04em.
Showreel als stumm geloopte Video-Vorschau direkt nach dem Hero (autoplay muted playsinline loop), Ton nur per Klick im Vollbild.
Eine Easing-Kurve, eine Signalfarbe, eine Schriftfamilie in zwei Breiten: Konsequenz statt Vielfalt.
Arbeiten als Index mit Hover-Vorschau auf Desktop; auf Touch immer sichtbare Thumbnails.
Seite endet mit großem Kontakt-CTA als Satz (Cuberto: „Have a product to build or rethink?“, Fantasy: „Let's talk.“) und einer Riesen-Wortmarke.
Cursor zeigt nur Kontext (Pfeil, Play, Schließen), ersetzt nie den System-Cursor auf Formularen und Texten.
Leistungen höchstens 3–4 Felder, jedes mit eigener Vollbild-Sektion statt Icon-Raster.
marquee-laufband höchstens einmal pro Seite und nur mit echtem Inhalt (Kunden, Leistungen), mit Pause-Knopf; nie als reine Deko (wann_nicht: Template-Klischee 2026).
Pflichtangaben und Recht (Leitfaden 8a): Kundenlogos, Arbeiten und Case Studies nur mit Freigabe der Kunden (Nutzungsrecht, ggf. NDA); Showreel-Musik lizenziert; fotorealistische KI-Bilder, die echt wirken könnten, kennzeichnen (Art. 50 KI-VO); Impressum, Datenschutz – vom Kunden prüfen lassen.

Bild und Ton

Licht: Hart und kontrastreich, Kundenarbeit in Originalfarbe; Showreel-Stills scharf.
Ausschnitt: Case-Bilder formatfüllend, Details der Arbeit, Plakate und Screens im Anschnitt.
Personen: Team als Porträtreihe im gleichen Licht; kein Teamfoto mit Laptops.
Formate: 16:9, 4:5, 3:2
Nicht: Keine Mockup-Laptops mit Stock-UI, keine Aurora- oder Glow-Hintergründe, keine verzerrten oder gewellten Case-Bilder, kein Stockvideo.
Anrede: du
Sätze: Sehr kurz, oft ein Satz pro Zeile, drei bis vier Wörter in der Headline. Cases mit Aufgabe, Idee, Ergebnis.
Haltung: Selbstbewusst und präzise, Haltung statt Leistungskatalog.
Tonproben: Wir machen Marken laut., Hast du etwas, das wir bauen sollen?
Nicht schreiben: „Wir sind Ihr Partner für digitale Lösungen“, „360°“, „ganzheitlich“, „Full-Service“, Buzzword-Ketten.

Hero, Raum und Form

Hero-Raster: Wie im Starter: 12 Spalten über die volle Breite; oben eine Label-Zeile (Spalte 1–4, 5–7, 8–9, 10–12), unten rechts ein Satz Haltung, ganz unten die Wortmarke randbündig (schrift-hero-viewportbreit, Variante basis).
Hero-Bild: Kein Bild im Hero; das Showreel 16:9 folgt direkt danach als stumme Vorschau. cinematic-video-hero nur mit eigenem Showreel.
Überschrift: clamp(3.5rem, 10vw, 11rem), mindestens 9vw, TikTok Sans wdth 75 / 800, über die volle Breite, Grundlinie an der Unterkante.
Handlung: Kein CTA-Paar im Hero; „Kontakt“ im Kopf, der große Kontakt-Satz und die Riesen-Wortmarke am Seitenende (footer-cta-riesen-wortmarke).
Zusatz: Label-Zeile in DM Mono 0.75rem Versal (Studio, Disziplin, Ort, Status); Haltungssatz höchstens 22ch.
Sektionsabstand: clamp(88px, 12vw, 176px)
Dichte: mittel
Raum: Werte wie im Starter (starter/kreativstudio-buehne/tokens.css: --abschnitt, --rand, --spalte). Große Sektionssprünge, aber enge Spalten und Label-Zeilen mit 6 px Zeilenabstand.
Spalten: 12
Maximale Breite: none
Raster: Volle Breite mit Rand, kein zentrierter Container. Leistungen als eigene Vollbild-Sektionen, Arbeiten als Index; Anfrage 6/6.
Radius klein: 4px
Radius groß: 12px
Schatten: nur die Hover-Vorschau im Index (Starter: 0 24px 60px -20px rgb(0 0 0 / .6)), sonst keiner
Form: Bilder und Showreel 4 px, Anfrage-Panel 12 px, Knöpfe als Pille (Starter --knopf-radius 999px; pfeil-icon-button, Variante kreis-expand).

Vorbilder