Alle Referenzen
Festival / Musik Website besuchen Projektdauer: 5 Wochen

TEAL. Festival (Garrel & Kunde GmbH)

Festival-Website mit Next.js, Parallax-Effekten, interaktiver Karte und integriertem Ticket-Shop für Open-Air-Festival in Heilbronn.

Screenshot von TEAL. Festival (Garrel & Kunde GmbH)
Next.jsInteraktive Karte4 Ticket-Stufen16 FAQs

Projekteinblicke

TEAL. Festival (Garrel & Kunde GmbH) — Projekteinblick 1
TEAL. Festival (Garrel & Kunde GmbH) — Projekteinblick 2
01 — Ausgangslage

Die Herausforderung

Das erste TEAL. Open-Air-Festival am 1. August 2026 brauchte eine eigene Website. Anforderung: maximale Performance für Traffic-Spitzen bei Ticket-Drops und ein visuell beeindruckendes Erlebnis, das Festival-Feeling vermittelt.

02 — Lösung

Unsere Umsetzung

Next.js mit React, Tailwind CSS und Server-Side Rendering für maximale Performance. Parallax-Effekte und Countdown erzeugen Vorfreude. Leaflet-Karte zeigt Location und Anfahrt. Ditix-Ticketing mit 4 Kategorien direkt integriert. 16 FAQs und Partner-Showcase runden das Erlebnis ab.

03 — Ergebnis

Das Resultat

Performante, visuell beeindruckende Festival-Website mit Lighthouse-Score über 90. Die interaktive Karte reduziert Support-Anfragen zur Anfahrt deutlich. 4 Ticket-Stufen ermöglichen differenzierte Preisgestaltung.

Traffic-Spitzen beim Ticket-Drop als Auslegungsgröße

Eine Festival-Website hat ein ungewöhnliches Lastprofil: Über Monate liegt der Traffic niedrig, und dann treffen zum angekündigten Ticket-Verkaufsstart innerhalb weniger Minuten alle Interessierten gleichzeitig ein. Genau dieser Moment entscheidet über den Vorverkauf — eine Website, die dann langsam wird, kostet unmittelbar Umsatz. Die Wahl fiel deshalb auf Next.js mit Server-Side Rendering: Die Seiten werden vorgerendert ausgeliefert und lassen sich über einen Cache verteilen, statt bei jedem Aufruf neu berechnet zu werden.

Vorfreude als Gestaltungsziel

Ein Festival verkauft ein Versprechen auf einen Termin, der Monate in der Zukunft liegt — beim ersten TEAL. Open Air der 1. August 2026. Die Website muss diese Wartezeit überbrücken und dabei die Spannung halten, statt nur Informationen bereitzustellen. Umgesetzt ist das über Parallax-Effekte, die beim Scrollen Tiefe erzeugen, und einen Countdown, der den Termin permanent präsent hält. Beide Effekte respektieren die Systemeinstellung für reduzierte Bewegung, damit die Seite auch für Menschen mit vestibulären Beschwerden nutzbar bleibt.

Anfahrt und Ticketstufen als Support-Entlastung

Der größte Teil der Anfragen vor einem Open-Air-Festival betrifft zwei Themen: Wie komme ich hin, und welches Ticket brauche ich. Beides ist deshalb direkt auf der Website beantwortet statt in einer E-Mail-Schleife. Eine Leaflet-Karte zeigt die Location samt Anfahrt und Parkmöglichkeiten — Leaflet auf Basis von OpenStreetMap, weil eine eingebettete Google-Karte beim Seitenaufruf Nutzerdaten übertragen würde. Vier klar abgegrenzte Ticket-Stufen erlauben eine differenzierte Preisgestaltung, und 16 FAQs decken die wiederkehrenden Detailfragen zu Einlass, Camping und mitgebrachten Gegenständen ab.

Eingesetzte Technologien

Next.jsReactTailwind CSSLeafletDitixTypeScript

Zusammenarbeit

Fabio Godel

Design-Unterstützung

Ähnliches Projekt starten?

Wir entwickeln auch für Sie eine maßgeschneiderte Lösung.