Ballet National de Marseille: A High-Energy Showcase of Web Design and Dynamic CSS Typography Most performing arts websites play it safe with rigid, boxy ticketing layouts, but the Ballet National de Marseille site completely breaks the mold. Designed by Tristan Bagot, Antoine Elsensohn, and Goodthing Studio, this web experience turns the browser window into a full-on rehearsal stage. The raw energy of contemporary movement meets rave culture—curated by the collective (LA)HORDE (Marine Brutti, Jonathan Debrouwer, and Arthur Harel) since 2019—bringing pure vitality straight into the digital layout. Over on the left, a fixed navigation bar featuring News, Activités, Artistes, Agenda, and Search grounds the page with bold, oversized black grotesk typography. Meanwhile, content cards with dashed borders slide smoothly on the right, stacking up as sticky layers during scrolling.
Contrast takes center stage in defining the typographic hierarchy. Bold, tightly-tracked sans-serif headlines for shows like Age of Content or Room With A View sit right above clean monospace body text paired with underlined inline links. Even cooler, live-text thumbnails use 3D CSS transforms to warp titles into spinning circular paths on hover without dropping a single frame. Across the portfolio and artist rosters, rounded stage photography and layered dancer cutouts soften the sharp edge of the stark black-and-white color palette. Pill-shaped filter buttons and subtle dashed dividers keep every showcase page crisp and super easy to navigate.
Even the tour schedule avoids looking like a dull spreadsheet. Tour dates for productions like Après moi, le déluge and Crossover span horizontally across the screen in full-width rows separated by hairline 1px rules, blending monospace timestamps with venue info from across Europe. It is a masterful balance of brutalist Swiss grid principles and dynamic CSS fluidity. When a cultural powerhouse dares to toss out traditional box-office tropes, the browser itself becomes part of the performance. This project proves that creative code experimentation and smooth usability can seamlessly go hand in hand.
Full project details and the creative team behind it can be found at www.hoverstat.es/features/ballet-national-de-marseille.
Ballet National de Marseille: Màn trình diễn thiết kế web đầy động lực và chữ CSS
Phần lớn các trang web trình diễn nghệ thuật hiện nay đều chọn giải pháp an toàn với giao diện bán vé có phần cứng nhắc. Nhưng dự án của Ballet National de Marseille thì hoàn toàn khác. Được thiết kế bởi Tristan Bagot, Antoine Elsensohn và Goodthing Studio, trang web này biến giao diện trình duyệt thành một sân khấu tập luyện thực sự. Tinh thần chuyển động đương đại kết hợp cùng văn hóa rave mà nhóm nghệ sĩ (LA)HORDE (Marine Brutti, Jonathan Debrouwer và Arthur Harel) định hình từ năm 2019 đã truyền thẳng năng lượng vào bố cục số. Thanh điều hướng cố định nằm bên trái với các mục News, Activités, Artistes, Agenda và Search tạo điểm tựa bằng kiểu chữ grotesk màu đen khổ lớn. Ở bên phải, các thẻ nội dung với đường viền nét đứt trượt và xếp chồng lên nhau theo dạng sticky layers khi cuộn.
Sự tương phản đóng vai trò chủ đạo trong việc định hình hệ thống phân cấp chữ. Những dòng tiêu đề sans-serif lớn, thu hẹp khoảng cách chữ dành cho các tác phẩm như Age of Content hay Room With A View nằm ngay trên phần thân bài dùng kiểu chữ monospace gọn gàng và các đường link gạch chân inline. Thú vị ở chỗ, các thumbnail chứa chữ sống áp dụng hiệu ứng 3D CSS transform để uốn tiêu đề thành các vòng tròn xoay tròn khi rê chuột (hover) mà không làm ảnh hưởng đến tốc độ khung hình. Trong phần danh mục tác phẩm và nghệ sĩ, hình ảnh sân khấu bo góc cùng hiệu ứng cắt dán vũ công nhiều lớp giúp làm mềm đi sự góc cạnh của hai tông màu đen trắng. Các nút lọc dạng viên thuốc (pill-shaped) và đường phân cách nét đứt giúp các trang trình diễn duy trì sự rõ ràng, dễ theo dõi.
Ngay cả lịch tour diễn cũng không bị biến thành một bảng dữ liệu đơn điệu. Mỗi ngày diễn của Après moi, le déluge hay Crossover được đặt gọn trong một hàng ngang tràn màn hình với đường kẻ mảnh 1px, kết hợp mốc thời gian dạng monospace và thông tin địa điểm tổ chức khắp châu Âu. Đây là sự cân bằng khéo léo giữa tư duy lưới (grid) Thụy Sĩ mang phong cách brutalist và sự chuyển động linh hoạt của CSS. Khi một tổ chức văn hóa dám gạt bỏ kiểu bố cục phòng vé quen thuộc, chính trình duyệt web cũng trở thành một phần của buổi biểu diễn. Dự án chứng minh rằng những thử nghiệm mã nguồn sáng tạo và tính tiện dụng của một trang web hoàn toàn có thể đi đôi với nhau.
Bạn có thể xem đầy đủ thông tin về dự án và các cá nhân thực hiện tại www.hoverstat.es/features/ballet-national-de-marseille.
