Published: October 27, 2026 Author: Alex Source/Feature: Hover States Main Facts: A Digital Stage Built on Motion and Brutalism In an era where digital spaces for performing arts organizations retreat into predictable safety—relying on rigid ticketing templates, cookie-cutter layouts, and sterile corporate white space—the Ballet National de Marseille (BNM) has chosen a radically different path. The company’s digital platform defies convention, treating the browser viewport not merely as an informational portal, but as an extension of the rehearsal stage itself. Crafted through the collaborative vision of designers Tristan Bagot, Antoine Elsensohn, and Goodthing Studio, the newly analyzed web design mirrors the ethos of the company’s artistic direction. Since 2019, the directorial collective (LA)HORDE—comprising Marine Brutti, Jonathan Debrouwer, and Arthur Harel—has steered the renowned French ballet company with a distinct, uncompromising focus on contemporary physical movement, intersectional performance art, and rave culture. That visceral, physical urgency carries straight into the digital layout, transforming passive website browsing into an active, kinetic encounter. The structural foundation of the site relies on an asymmetrical grid. A fixed left-hand navigation stack anchors the screen, utilizing oversized black grotesk typography to house core directories like News (Actualités), Activities (Activités), Artists (Artistes), Agenda, and Search. Meanwhile, on the right side of the viewport, dashed-border content cards scroll and stack in sticky layers. Rather than relying on static images or generic templates, the interface uses dynamic text, 3D CSS transforms, and ruthless typographic hierarchies. The result is a masterclass in kinetic web design, proving that experimental code and clear programme utility do not have to be mutually exclusive. Chronology: The Evolution of BNM’s Artistic and Digital Identity To understand the audacity of the Ballet National de Marseille’s web design, it is essential to trace how the institution’s physical and digital identities have converged over recent years. 2019: The Arrival of (LA)HORDE The turning point for the institution occurred when the collective (LA)HORDE (Marine Brutti, Jonathan Debrouwer, and Arthur Harel) assumed leadership of the Ballet National de Marseille. Known for breaking down the barriers between classical ballet, contemporary dance, and electronic music subcultures, (LA)HORDE immediately shifted the company’s repertoire toward high-energy, socially conscious, and boundary-pushing works such as Age of Content and Room With A View. The physical performances demanded a new visual language—one that abandoned dusty traditionalism in favor of raw, industrial aesthetics. Pre-2026: The Digital Status Quo in Performing Arts For decades, cultural institutions across Europe fell into a digital homogeneity. Box-office software dictated web architectures, forcing avant-garde dance companies, symphony orchestras, and theaters into identical grid systems. Ticketing software integration routinely triumphed over brand identity, leaving digital platforms feeling like third-party booking agents rather than creative flagships. October 2026: The Hover States Feature and Digital Unveiling The cutting-edge design for the BNM web platform captured international attention when it was comprehensively dissected and featured by design archive Hover States. Highlighting the site’s unorthodox architecture, the feature brought wider industry acclaim to creators Tristan Bagot, Antoine Elsensohn, and Goodthing Studio. The launch marked a watershed moment for how cultural institutions conceptualize their digital outposts, demonstrating that websites can serve as living art installations rather than simple schedule boards. Supporting Data: Dissecting the Architecture and Kinetic Design System A closer look at the technical mechanics of the Ballet National de Marseille’s website reveals a deliberate, highly calculated design system. The site avoids gratuitous animations that slow down performance, opting instead for calculated CSS interactions that enhance editorial narrative. Typographic Hierarchy and Contrast Typography does the heavy lifting throughout the user journey. The design relies on stark contrasts: Headlines: Monumental, tightly tracked sans-serif headers for major productions (Age of Content, Room With A View, Après moi, le déluge, and Crossover) dominate the visual field. Body Copy: Crisp, highly legible monospace fonts provide an industrial, utilitarian counterweight to the massive display type. Navigation & Links: Underlined inline links and pill-shaped filter buttons maintain a clean editorial cadence, preventing the dense layouts from feeling cluttered. Kinetic Typography and 3D CSS Loops One of the most technically impressive features of the site is its live text thumbnails. Utilizing advanced 3D CSS transforms, the designers engineered titles that bend into circular, looping rings. These geometric typography loops spin dynamically on hover. Crucially, the code is optimized to prevent heavy graphics processing unit (GPU) loads, ensuring that frame rates remain buttery-smooth even on lower-end consumer devices. Photographic Integration and Spatial Layouts The stark black-and-white geometry of the digital grid is softened and complicated by rounded-corner stage photography and multi-layered dancer collages. These visual inclusions bridge the gap between abstract design and human movement. Dashed index dividers and pill-shaped filters keep the editorial slideshows sharp, functional, and exceptionally legible. The Touring Calendar Redesign Perhaps the most practical triumph of the design is how it handles the performance schedule. Touring calendars typically default to dry, spreadsheet-like tables. The BNM platform reimagines this entirely: Each performance date locks into a full-width horizontal row. Rows are cleanly delineated by thin 1-pixel hairlines. Monospace timestamps are paired directly with venue metadata spanning venues across Europe. This layout balances the uncompromising discipline of the brutalist Swiss grid style with fluid, responsive CSS motion. Official Responses and Creative Intent The collaboration behind the platform represents a rare alignment between a cultural institution’s artistic direction and its digital consultants. While traditional arts organizations often outsource their web design to corporate agencies looking for safe, accessible user experiences, (LA)HORDE deliberately sought out designers who understood contemporary visual culture. In statements accompanying the design release, the collective emphasized that the physical urgency of their choreography—grounded heavily in youth culture, club scenes, and digital-age anxieties—could not be accurately represented by a conventional, polite website. Designers Tristan Bagot and Antoine Elsensohn, working alongside Goodthing Studio, approached the project with the mindset that a website is a primary cultural venue. Because physical attendance at a ballet in Marseille is restricted by geography, the website serves as the primary touchpoint for a global audience. Consequently, the digital experience had to carry the same emotional and aesthetic weight as sitting in a theater watching Room With A View. By treating the browser as a rehearsal stage, the creators ensured that the digital interface communicates the company’s ethos before a user even clicks on a video or reads a synopsis. The design speaks a modern visual language that resonates natively with digital natives, electronic music enthusiasts, and contemporary art collectors alike. Implications: What This Means for the Future of Cultural Web Design The acclaim surrounding the Ballet National de Marseille web design signals a broader, much-needed shift in digital curation for the arts and culture sector. 1. Breaking Free from Software-Dictated Templates For too long, cultural institutions have allowed white-label ticketing software and rigid content management systems to dictate their online presence. The BNM project proves that organizations can build bespoke, highly expressive frontend experiences while still integrating necessary backend utility (such as ticketing, scheduling, and archiving). It challenges web developers and arts administrators to demand more from their digital partners. 2. The Rise of Brutalism and Kinetic Typography in Public Institutions Brutalist web design—traditionally associated with indie fashion labels, underground music collectives, and tech startups—is finding a legitimate home in high culture. By embracing raw grotesk typography, harsh 1px hairlines, and exposed grid structures, institutions like the BNM are signaling that they are contemporary, fearless, and culturally relevant. 3. The Browser as an Immersive Stage As internet speeds increase and CSS capabilities expand (including advanced 3D transforms, container queries, and sophisticated scroll-driven animations), the boundary between static reading and immersive viewing continues to blur. The BNM website demonstrates that web design can be performance art. When cultural institutions abandon generic box-office layouts, the browser ceases to be a window looking at art and becomes the medium through which the art is experienced. Conclusion The Ballet National de Marseille’s web platform—meticulously documented by Hover States and brought to life by Tristan Bagot, Antoine Elsensohn, Goodthing Studio, and (LA)HORDE—is more than just a well-coded website. It is a blueprint for how cultural institutions can leverage modern web technologies to express their core identities. By merging brutalist structural discipline with kinetic, dance-inspired motion, the project sets a new benchmark for digital design in the performing arts. Post navigation The Art of Time: Mastering SVG Animation with SMIL
