Ballet National de Marseille: Kinetic Web Design & CSS Type

Dissecting the Ballet National de Marseille web design on Hover States, featuring sticky viewport panels, bold grotesk type, and 3D CSS loops.

Most performing arts sites play it safe with rigid ticketing templates. This one doesn't. Crafted by Tristan Bagot, Antoine Elsensohn, and Goodthing Studio for Ballet National de Marseille, this web design treats the browser viewport like a rehearsal stage. Since 2019, the collective (LA)HORDE — Marine Brutti, Jonathan Debrouwer, and Arthur Harel, has directed the company with a focus on contemporary movement and rave culture. That physical urgency carries straight into the digital layout. A fixed left-hand navigation stack (News, Activités, Artistes, Agenda, Search) anchors the screen in oversized black grotesk type. On the right, dashed-border content cards scroll and stack in sticky layers. The type does the heavy lifting here.

Choreographing the Browser Through Kinetic Web Design

Contrast drives the entire typographic hierarchy. Tightly tracked, monumental sans-serif headlines for works like Age of Content and Room With A View sit right above crisp monospace body copy and underlined inline links. Nothing in the grid feels forced. Live text thumbnails use 3D CSS transforms to bend titles into circular, looping rings that spin on hover without bogging down frame rates. In the repertoire and artist directories, rounded-corner stage photography and multi-layered dancer collages break up the stark black-and-white geometry. Pill-shaped filter buttons and dashed index dividers keep the editorial slideshows sharp and legible.

Even the touring calendar refuses to look like a spreadsheet. Each performance date for Après moi, le déluge or Crossover locks into a full-width horizontal row bordered by thin 1px hairlines, pairing monospace timestamps with venue metadata across Europe. It's a smart balance of brutalist Swiss grid discipline and fluid CSS motion. When cultural institutions ditch generic box-office layouts, the browser becomes part of the performance itself. This web design proves that experimental code and clear programme utility aren't mutually exclusive.

Explore the full project and design credits on Hover States.