← TravauxN° 03 / 16

Ohtaka

Une machine qui s'ouvre à mesure qu'on descend.

PlateformeWebTypeExpérienceAu studioConçue et développée par Bloomwise Studio.
OhtakaDesktop · en direct
ohtaka.vercel.app

Le vrai site, dans le cadre : faites-le défiler pour le visiter.

Bloomwise
Le projet

Ohtaka D-900 est une page produit d'un seul tenant, portée par le défilement. Un enregistreur à cassette tourne, s'ouvre et se démonte pièce par pièce, du capot avant au moteur, puis la page reprend la voix d'un catalogue hi-fi : les détails, les caractéristiques, le bon de commande.

Points forts
  • 01

    Deux séquences scrubées, une seule toile

    238 vues de rotation en 1600 x 900 et 180 vues d'éclaté en 896 x 1200, toutes détourées, appelées par la position de défilement et peintes sur un même canvas. Au repos, la souris fait pivoter l'appareil de plus ou moins 24 images, soit un tiers de tour, sur une séquence qui boucle.

  • 02

    Chargement en deux temps

    Une image sur six d'abord, avec son compteur, et la page devient utilisable ; le reste suit par paquets de huit. La séquence d'éclaté n'est demandée qu'à 45 % de la première piste, jamais avant.

  • 03

    Aucune attente à l'image près

    Si l'image exacte n'est pas encore chargée, la plus proche disponible est peinte à sa place. Le défilement ne bloque jamais, il se précise à mesure.

  • 04

    La mise en page se mesure sur l'objet

    Les plaques sont des cadres presque vides : seul le canal alpha dit où l'appareil commence et finit. Son emprise réelle est relevée une fois, en fractions, et c'est elle qui commande le cadrage à toutes les tailles d'écran.

  • 05

    Le lettrage rejoint la barre sans toucher à la mise en page

    Position de départ calculée sur le cadre, position d'arrivée relevée dans la barre, interpolation entre les deux en transformations seules. La hauteur de la barre ne bouge pas d'un pixel pendant le voyage.

  • 06

    Un seul document

    Le HTML, le CSS et le script tiennent dans le même fichier. Aucune bibliothèque, aucune étape de compilation, et les réglages de composition se font en direct avec `?reglage=1` avant d'être figés dans le code.

Questions
D'où vient le style ?

D'une charte dessinée pour le site : toile crème, grotesque à axe de largeur, filets d'un pixel, un seul accent ambre.

En quelle langue est le site ?

En anglais.

Le site se consulte-t-il au téléphone ?

Oui, la mise en page s'y adapte. L'aperçu de cette page, lui, ne se charge qu'à partir d'un écran d'ordinateur : un site de bureau réduit sur un téléphone ne se lirait plus.

Stack technique
HTMLCSSJavaScriptVercel