Laptop 3D

Ce qui est inclus

Un portable construit en CSS 3D, dans deux fichiers : une feuille de style et un script. Aucune dépendance, aucune étape de build, aucune requête externe — on les copie dans un projet et ça marche.

L’écran n’est pas une image : c’est un bloc HTML ordinaire, posé en perspective sur la dalle. Le texte y reste sélectionnable, les liens cliquables et focusables, et la page s’y dessine à l’échelle d’une maquette de 1440 px. On y met son vrai site, pas une capture.

La géométrie ne vient pas d’un dessin à l’estime. La perspective, l’inclinaison de la caméra, l’angle du capot et les cotes du châssis sont relevés au pixel sur une scène WebGL, remontés en volumes par inversion de projection, puis vérifiés par superposition : l’écart maximal est de 1,90 px sur un portable large de 1077.

Fonctionnalités

• Une variable pour l’échelle — --l3d-largeur commande tout, perspective comprise. L’agrandissement est homothétique : la scène ne se déforme pas, du hero plein écran à la vignette.
• Le capot s’ouvre au défilement — l’attribut data-l3d-scroll fait suivre l’angle à la position du composant dans la fenêtre, et la caméra se redresse sur la course. Sans lui, le capot se déplie d’un coup à l’entrée dans le champ. Le script n’écrit qu’un nombre, --l3d-progression : la course et la fenêtre se règlent en CSS.
• On l’attrape et on le fait tourner — au pointeur, au doigt ou aux flèches du clavier, avec un débattement borné et un retour élastique. La saisie ne part jamais de la dalle, pour que le texte de l’écran reste sélectionnable et ses liens cliquables.
• Suivi du pointeur — au survol, la scène s’incline doucement vers le curseur. Le débattement se règle en CSS, le script n’écrit que deux variables.
• Marche sans JavaScript — le portable s’affiche ouvert, écran allumé, à l’angle mesuré. C’est l’état utile par défaut, jamais un état dégradé.
• Un contenu qui suit l’échelle — la dalle vaut 90 em de large quelle que soit la taille du mockup. On écrit sa page en em comme on l’écrirait en px sur une maquette de 1440.
• Mouvement réduit, contrastes forcés — l’ouverture, le suivi et jusqu’aux délais sont neutralisés sous prefers-reduced-motion ; sous forced-colors, les pièces reprennent des arêtes au trait.

Le poser dans une page

Deux fichiers à charger, puis le balisage :

<link rel="stylesheet" href="laptop-3d.css">
<script src="laptop-3d.js" defer></script>

<div class="l3d">
  <div class="l3d__monde">
    <div class="l3d__piece l3d__sol" aria-hidden="true"></div>
    <div class="l3d__piece l3d__plateau" aria-hidden="true">
      <div class="l3d__clavier">…</div>
      <div class="l3d__trackpad"></div>
    </div>
    <div class="l3d__piece l3d__tranche" aria-hidden="true">
      <span class="l3d__encoche"></span>
    </div>
    <div class="l3d__piece l3d__capot">
      <div class="l3d__dalle">
        <div class="l3d__ecran">
          <!-- votre page, ici -->
        </div>
      </div>
    </div>
  </div>
</div>

Une seule déclaration le dimensionne : .l3d { --l3d-largeur: min(760px, 88vw); }. Il faut une longueur absolue, ou une fonction qui en donne une — un pourcentage seul ne se divise pas.

Ce qu’il faut savoir

• Le contenu de l’écran s’écrit en em. Le composant règle la taille du texte de la dalle pour qu’elle vaille 90 em de large. Un contenu écrit en pixels garderait sa taille absolue pendant que le portable rétrécit : sur une vignette de 700 px, un titre de 54 px déborde.
• Les pièces restent plates. Chaque pièce est un plan, et ses détails sont peints dedans. Lui donner transform-style: preserve-3d ferait trier la dalle séparément du capot, et le bezel disparaîtrait sur son tiers inférieur — un piège coûteux à diagnostiquer.
• Pas de rendu physique de la lumière. L’original est un modèle 3D éclairé en WebGL ; ici le châssis est peint en dégradés relevés sur ce rendu. La géométrie est reproduite, les reflets sont approchés.
• Aucun style ni script en ligne. Le composant respecte la politique de sécurité stricte du site — vérifié en servant le dossier en HTTP avec l’en-tête, y compris pour le suivi du pointeur — et n’utilise jamais innerHTML.
• Le dessin vient d’ailleurs. Les proportions reprennent celles d’un composant Framer commercial, mesurées sur son rendu. Le code, lui, est original : rien n’a été repris de son implémentation, et le modèle 3D d’origine n’est pas utilisé.