TheCourt Padel
Vier Indoor-Courts in Schwäbisch Gmünd. Mit einem Court, der sich im Einstieg selbst zeichnet, und einem Ballwechsel, der das Spiel erklärt.
- TheCourt Padel
- Schwäbisch Gmünd
- Neue Website für eine Padel-Halle
- 2026
- Astro, Canvas, GSAP
- Fertig entwickelt und getestet, Umstellung der Domain steht aus
Ausgangslage und Ziel
Die bisherige Seite lief auf einem Website-Baukasten.
Padel ist für viele neu. Die Website muss das Spiel erklären, bevor jemand einen Court bucht.
Konzept
Farben und Formen kommen aus der Halle: Nachtblau, das Kobalt des Courts, das Gelbgrün des Balls, sehr breite Schrift.
Eine Seite, ein Ziel: Court buchen. Die Buchung ist von überall erreichbar, mobil als feste Schaltfläche.
Ein Court, der sich selbst zeichnet
Boden, Linien, Netz, Glaswände und Zaun entstehen nacheinander, dann läuft ein Ballwechsel. Beim Scrollen hebt sich die Kamera bis zur Draufsicht.
Vom Court zum Hallenplan
Scrollt man weiter, zieht die Kamera zurück und zeigt die ganze Halle: zwei Double- und zwei Single-Courts.
Padel in sechs Schritten
Vom Aufschlag bis zum Punkt: Der Ball läuft die Wege ab, Aufsprünge hinterlassen Ringe, am Ende springt der Spielstand um. Läuft beim Scrollen mit, lässt sich aber auch anklicken.
Bewusst ohne WebGL
Der Court ist auf einer 2D-Zeichenfläche mit eigener Perspektivrechnung umgesetzt. Das spart eine ganze 3D-Bibliothek.
- Animierter Court mit eigener Perspektive
- Padel in sechs Schritten als Ballwechsel erklärt
- Bewusst ohne WebGL: 289 KiB Startseite
Technik
- Astro 7 als statische Website, kein Server nötig
- Eigene Perspektiv-Projektion auf Canvas statt einer 3D-Bibliothek
- GSAP mit ScrollTrigger, erst im Leerlauf geladen
- Deutsch und Englisch
- Buchung verlinkt auf Playtomic, Kontaktformular funktioniert ohne JavaScript
- Prüfläufe in Chromium, Firefox und WebKit bei 390, 820 und 1440 Pixeln
Gemessen
- Performance Startseite
- 97
- Barrierefreiheit
- 100
- SEO
- 100
- Seitengewicht Startseite
- 289 KiB