PIKS-L
Chargement en cours...
← Toutes les réalisations
Album · fusion × chiptune2026Site livré

AlterNative bits

Une page-disque pour un album de 2016 : sept titres, une pochette qui tourne, et un lecteur chiptune synthétisé dans le navigateur — sans un seul fichier audio.

alternative-bits.piks-l.com
Page d'accueil du site AlterNative bits
Secteur
Album · fusion × chiptune
Année
2026
État
Site livré
Pages
1 page
Délai
1 journée
Mise en ligne
2026
01

Le brief

Yoann Turpin voulait redonner une adresse à AlterNative bits, son album fusion × chiptune sorti chez DETUNE en 2016. Une seule page, en anglais, fidèle à la maquette : la pochette au cube ailé, la tracklist, les crédits — et le son des puces des années 80, présent dès l'ouverture.

02

Ce que nous avons fait

01

Une page unique portée à l'identique — héros, bandeau défilant, tracklist, à-propos, crédits — mesurée au banc : 0 pixel d'écart.

02

Le lecteur chiptune en Web Audio et ses trois toiles (l'anneau de la pochette, les formes d'onde, la frise) conservés tels quels.

03

La tracklist, écrite en dur par le script d'origine, rendue dans le balisage : titres et durées éditables, frise et total recalculés.

04

Polices auto-hébergées, données structurées MusicAlbum, aperçu Open Graph « music.album », manifeste et plan du site.

03

La palette et les typographies

#ECEBE8#EE9A30#26231F#9A5200#D6D3CD

Cinq couleurs relevées sur la page, telles qu'elles sortent du rendu : le papier, l'orange de la pochette, l'encre

Titres
AlterNative bits
Bricolage Grotesquegraisse 800 · titres et accroches
Aa Bb Cc 0123456789
Texte courant
Le même texte, dans la police qui porte les paragraphes du site : c'est elle qu'on lit vraiment, ligne après ligne.
Figtreegraisse 400 · paragraphes et libellés
Aa Bb Cc 0123456789
04

La carte de visite

Une proposition imaginée à partir de la charte du site : mêmes couleurs, mêmes polices, recto et verso. Maquette non contractuelle — les coordonnées sont des exemples.

A
AlterNative bits
Yoann Turpin · fusion × chiptune
DETUNE · 2016 · 7 titres · 42:12
Recto
AlterNative bits
Bandcamp · SoundCloud
Yoann Turpin · clavierscontact@alternative-bits.piks-l.comalternative-bits.piks-l.com
Verso
05

Des pages, en vrai

Plusieurs écrans du site, aux trois largeurs qui comptent : l'écran du bureau, la tablette et le téléphone.

Écran1 280 px de large
AlterNative bits — vue 1 en écran
AlterNative bits — vue 2 en écran
AlterNative bits — vue 3 en écran
Tablette834 px de large
AlterNative bits — vue 1 en tablette
AlterNative bits — vue 2 en tablette
AlterNative bits — vue 3 en tablette
Mobile390 px de large
AlterNative bits — vue 1 en téléphone
AlterNative bits — vue 2 en téléphone
AlterNative bits — vue 3 en téléphone
AlterNative bits — vue 4 en téléphone
AlterNative bits — vue 5 en téléphone
AlterNative bits — vue 6 en téléphone
06

Ce que ça change

01

Le disque a une adresse à lui, qui s'ouvre en moins d'une seconde, son compris.

02

Les titres et les durées se corrigent depuis la console, sans toucher au script.

03

Le son et les animations d'origine tiennent sans aucun service tiers.

07

Ce que le client gère lui-même

Depuis la console, sans toucher au code.

Les titres et les durées de la tracklist
Les textes : à-propos, crédits, l'artiste
Les liens Bandcamp et SoundCloud
La pochette de l'album
08

Les outils derrière ce site