Le vrai site, dans le cadre : faites-le défiler pour le visiter.
Vinyle Stack range une playlist comme on range des vinyles : une file de pochettes serrées le long d'une même ligne, vues de trois quarts. Le curseur en sort une, la molette fait défiler la file sans fin, un clic écoute trente secondes. La façon de ranger le bac se change d'une touche : ordre de la playlist, couleur de la pochette, artiste, année.
- 01
Une file paramétrée, un défilement sans fin
Chaque boîtier est posé sur un chemin paramétré par abscisse curviligne : sa place multipliée par le pas, plus le défilement, modulo la longueur de la boucle. Un boîtier par album, donc le premier revient après le dernier sans doublon ni trou, et les deux extrémités du chemin tombent hors cadre. Le défilement ne fait que translater la file : le pas reste à 34 px au repos comme en plein mouvement.
- 02
Le curseur est projeté sur le fil, et le segment est relu
Pas de survol par élément, qui clignote sur des boîtiers qui se chevauchent : on projette le curseur sur la pile, et on relit tout le segment parcouru depuis l'image précédente, échantillonné tous les 7 px. Mesuré sur un balayage à pleine vitesse : 37 pochettes levées sur 37, contre 13 sur 37 auparavant, pour 0,17 ms par image sur un budget de 16,7.
- 03
Un ressort, pas un lissage
La sortie d'un boîtier est un oscillateur amorti : 0,28 s pour atteindre 90 %, 6,4 % de dépassement à l'aller comme au retour, stabilisé en 0,78 s. Ses voisins le suivent de 10 % puis de 5 %, latéralement, sans jamais toucher à l'espacement de la file.
- 04
La couleur est lue sur la pochette
Aucune API ne donne la teinte dominante d'un album : elle est calculée dans le navigateur par vote pondéré sur 36 secteurs de teinte, gris, noirs et blancs écartés. C'est ce qui permet le rangement par couleur, et ça ne dépend de personne.
- 05
Les données figées, les extraits rafraîchis
Un script Node fige la playlist Deezer avant publication : un boîtier par album, jaquettes en 500 x 500, plafond de 50 requêtes par 5 secondes respecté. Les URLs d'extraits, elles, sont signées et expirent en un quart d'heure : elles sont redemandées au moment de la lecture par un relais de dix lignes, avec un repli JSONP si le site est servi sans relais.
- 06
Au doigt, le mécanisme change de main
Sans survol, tout le dispositif tomberait à plat : la pile bascule donc en mode centre, où la pochette la plus proche du milieu sort en permanence. Un geste de moins de 10 px compte comme un appui, sinon chaque glissement lancerait un extrait, et sous 640 px la pile passe à 70 %.
Faut-il un compte pour écouter ?
Non. Les extraits de trente secondes sont publics : ni compte, ni connexion, ni abonnement.
Peut-on changer la playlist ?
Oui, en une commande : le studio refige une playlist Deezer, télécharge les pochettes et le site repart dessus. Il n'y a rien d'autre à toucher.
Pourquoi certains albums restent-ils muets ?
La disponibilité des extraits dépend du territoire. Ces albums gardent leur place et leur pochette dans le bac ; seul le bandeau signale que l'extrait n'est pas diffusable ici.
L'aperçu de cette page est-il le vrai site ?
Oui, c'est le site lui-même, rendu en direct. Dans la vignette du catalogue il est montré sans son texte et il tourne tout seul : la file défile et chaque pochette sort au passage.
Hors saison
