1. 01 · Übersicht
  2. 02 · Look & Feel
  3. 03 · Mobil
  4. 04 · Hebel
  5. 05 · Tempo
  6. 06 · Weitere
Case Study · 2026

Sunset
Open Air.

Eine Sommer-Nacht über den Dächern von Plauen — House, Disco und Live-Sounds auf den Schlossterrassen der Dualen Hochschule, präsentiert von den Stadtwerken Strom Plauen. Die Microsite trägt das Plakat-Gefühl ins Web: Editorial Plakat-Layout, animierte Disco-Kugel als Brand-Anker und Sharing-Ready in jedem Messenger.

Live Open Air · Event Microsite Editorial Custom Animation
sunset.stadtwerke-strom-plauen.de

Plakat. Bühne. Sommer.

Ein Open Air ist kein Restaurant — und keine klassische Event-Site. Es geht ums Gefühl: über den Dächern, beim Sonnenuntergang, die Stadt im Rücken. Die Microsite ist Editorial Plakat-Layout statt Karussell: SUNSET groß, DJ-Trio zentral, Disco-Kugel als Brand-Anker.

Startseite Sunset Open Air Plauen im Browser — Hero mit DJ-Trio, Disco-Kugel, Datum, Event-Bar

Hero-Komposition · Eigenes Layering Trio · Disco · Sunset-Gradient · mkul

Im Bus zur Hochschule schon drin.

Wer abends in den Sunset will, checkt die Adresse meistens unterwegs — im Bus, auf dem Weg vom Postplatz. Deshalb wurde Mobile zuerst gedacht: SUNSET füllt den Hero ohne Verkrampfung, die Disco-Kugel sitzt dort wo sie hingehört, Datum und Schlossterrassen sind sofort lesbar.

iOS-spezifischer Hero-„Streckt-sich"-Bug beim URL-Bar-Hide gefixt (`svh` statt `dvh`), der Eintritt-Frei-Sticker rutscht im unteren Drittel ohne die DJs zu überdecken, der Claim „Neu. Anders. Über den Dächern der Stadt." passt auf eine Zeile. Plus: pulsierender QR-Code-Button rechts unten für „Adresse schnell teilen".

Mobil-Ansicht der Sunset Open Air Plauen Microsite: Hero mit DJ-Trio, Disco-Kugel, Event-Bar

Drei Hebel, die den Unterschied machen.

Drei Sachen, die ein Plakat im Web meistens nicht hinbekommt — und auf der Microsite trotzdem ohne Workaround sitzen.

01 · Editorial

Plakat-Layout statt Karussell.

Bricolage Grotesque + Manrope, SUNSET in maximaler Größe, DJ-Trio zentral, Disco-Kugel als Brand-Anker rechts oben. Kein Slider, kein Hero-Video — eine starke Komposition, die direkt vom Plakat ins Web übersetzt wurde und auf jedem Viewport ihre Hierarchie hält.

02 · Animation

Custom-APNG-Pipeline für die Disco-Kugel.

Animierte Disco-Kugel mit echtem Alpha — kein WebGL-Theater, kein Chroma-Key. ProRes-4444-Master aus DaVinci → PNG-Sequenz via ffmpeg → pngquant → apngasm, plus Binary-Patch der fcTL-Chunks für mathematisch exaktes 1/12-Sekunden-Frame-Timing. Loop-Drift weg, native Browser-Support, 3 MB Asset.

03 · Sharing-Ready

Vom Plakat zum Messenger.

Open-Graph- und Twitter-Card-Tags + dediziertes 1200×630-OG-Image (Hero-Komposition mit DJ-Trio, Disco-Kugel und Datum) — sobald der Link auf WhatsApp oder LinkedIn geteilt wird, zeigt der Messenger das Event-Bild. Plus gedruckter QR-Code mit Sunset-Brand-Center und Favicon-Set für Tab + Apple-Touch-Icon.

Static HTML Vercel Bricolage · Manrope Responsive WebP APNG · fcTL-Patch GSAP-Choreografie Open Graph QR-Code · Print-Ready Cookie-clean

Vom Briefing zur Bühne.

Microsite gebaut, iteriert und Demo-ready in zwei Tagen. Kompakt, gemessen.

Iterationen
80+
v1 → v17.81 in 2 Tagen
Single-File HTML
105 KB
Inkl. CSS & JS inline
Asset-Diet
228 → 3,2 MB
cwebp q84 Pipeline
Tracking · Cookies
0
Kein Banner nötig
Build · sunset.stadtwerke-strom-plauen.de
Über den Dächern der Stadt.
Seite besuchen
sunset.stadtwerke-strom-plauen.de