The artists’ card index
The studio’s site about new-wave musicians. One card, one world: its own colour, typeface, layout and photo treatment. All of it is built from a single template.
The idea
Artist pages on a website usually all look the same. We wanted each page to look like the artist, without hand-building every one of them.
Theme as data
Each artist is one data file. The theme in it is data too: palette, typefaces, layout, colour or black-and-white photos. At build time the theme becomes CSS variables and a font set, so a new page appears as soon as the file is added.
The card index
The home page is a card index drawer in CSS 3D. Start typing a name and the cards leaf past. The right one rises, flips over already in the artist’s theme and opens to full screen; going back drops it into the drawer again.
Sound in numbers
The discography comes from Deezer’s open API: releases, tracks, cover art. Our TypeScript analyser reads the 30-second previews for tempo, loudness, bass, brightness and waveform. That feeds the Spectrum section and a sound map where every track is a point on tempo and loudness.
How a card becomes a page
A drawer of cards, a spring follower and a lifter. The card that matches rises and turns over: its theme is on the back, and the gauge beside it reads the track’s sound.
Screens
Under the hood
- 28 artists and 1,772 static pages: the artist, the releases and a page for every track.
- Astro and TypeScript with no CMS: an artist is a data file, a theme is CSS variables and fonts.
- A sync script for Deezer’s open API: releases, tracks, labels, features and cover art.
- Our own FFT in TypeScript: tempo from onset autocorrelation, loudness, bass share, brightness and a 96-point waveform.
- A CSS 3D card index driven by mouse, arrow keys and Enter, with an optional paper rustle in Web Audio.
Astro · TypeScript · CSS 3D · Deezer API · Web Audio