TheCourt Padel
Four indoor courts in Schwäbisch Gmünd, with a court that draws itself in the opening section and a rally that explains the game.
- TheCourt Padel
- Schwäbisch Gmünd, Germany
- New website for a padel hall
- 2026
- Astro, Canvas, GSAP
- Fully developed and tested, domain switch pending
Starting point and goal
The previous site ran on a website builder.
Padel is new to many people. The website has to explain the game before anyone books a court.
Concept
Colours and shapes come from the hall: night blue, the cobalt of the court, the yellow-green of the ball, very wide type.
One page, one goal: book a court. Booking is reachable from anywhere, on mobile as a fixed button.
A court that draws itself
Floor, lines, net, glass walls and fence appear one after another, then a rally begins. As you scroll, the camera rises to a top-down view.
From the court to the hall plan
Scroll further and the camera pulls back to show the whole hall: two double courts and two single courts.
Padel in six steps
From serve to point: the ball traces the paths, bounces leave rings, and at the end the score changes. It follows the scroll but can also be clicked.
Deliberately without WebGL
The court is drawn on a 2D canvas with its own perspective calculation. That saves an entire 3D library.
- Animated court with its own perspective
- Padel explained as a rally in six steps
- Deliberately without WebGL: 289 KiB home page
Stack
- Astro 7 as a static website, no server required
- Its own perspective projection on canvas instead of a 3D library
- GSAP with ScrollTrigger, loaded only when idle
- German and English
- Booking links out to Playtomic, the contact form works without JavaScript
- Test runs in Chromium, Firefox and WebKit at 390, 820 and 1440 pixels
Measured
- Performance, home page
- 97
- Accessibility
- 100
- SEO
- 100
- Page weight, home page
- 289 KiB