Reveal mosaic hero

Ce qui est inclus

Un hero pleine page dont la photo est cachée sous une mosaïque de carrés, 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.

Le <canvas> ne contient jamais la photo. Il contient ce qui la cache, et l’image se voit partout où un carré manque. C’est ce qui rend l’effet peu coûteux : un rectangle plein par cellule, jamais de traitement d’image. Le pointeur efface les carrés sous un pinceau rond, et une traînée se referme derrière lui.

Fonctionnalités

• Une mosaïque toujours identique — sa forme vient d’un générateur à graine fixe, donc elle est la même à chaque chargement, sur chaque machine et dans chaque navigateur. Changez la graine, changez tout le dessin.
• Le coin du titre reste lisible — une zone protégée y garde tous ses carrés, avec un bord dentelé pour qu’on n’y voie pas un rectangle blanc collé sur la photo.
• Marche sans JavaScript — le canvas reste vide, un voile dégradé prend le relais, et le hero garde son titre, son lien et sa mise en page.
• Une variable pour l’échelle — titre, marges, filet, taille des carrés et rayon du pinceau dérivent tous du corps du texte et suivent ensemble.
• Réglable au clavier — en option, la poignée blanche devient un vrai curseur ARIA : flèches, Page haut, Page bas, Origine et Fin règlent le rayon du pinceau.
• Deux variantes — une échelle compacte pour un encart, et une mosaïque sombre pour texte clair.

Le poser dans une page

Deux fichiers à charger, puis le balisage :

<link rel="stylesheet" href="reveal-mosaic-hero.css">
<script src="reveal-mosaic-hero.js" defer></script>

<section class="reveal-mosaic-hero">
  <span class="reveal-mosaic-hero__sonde" aria-hidden="true"></span>
  <div class="reveal-mosaic-hero__photo" role="img" aria-label="…"></div>
  <canvas class="reveal-mosaic-hero__voile" aria-hidden="true"></canvas>
  <div class="reveal-mosaic-hero__repli" aria-hidden="true"></div>

  <div class="reveal-mosaic-hero__pointeur">
    <div class="reveal-mosaic-hero__cercle" aria-hidden="true"></div>
    <div class="reveal-mosaic-hero__poignee"></div>
  </div>

  <div class="reveal-mosaic-hero__contenu">
    <div class="reveal-mosaic-hero__bloc">
      <h1 class="reveal-mosaic-hero__titre">Creative Space</h1>
      <p class="reveal-mosaic-hero__pied">
        <a class="reveal-mosaic-hero__lien" href="#">…</a>
        <span class="reveal-mosaic-hero__filet" aria-hidden="true"></span>
      </p>
    </div>
  </div>
</section>

Le script s’amorce seul, y compris pour un composant inséré après coup. Changez la photo avec --ph-photo, l’échelle avec --ph-font-size, et le dessin de la mosaïque avec data-ph-densite et data-ph-graine.

Ce qu’il faut savoir

• L’effet est décoratif, et il le reste. Il ne cache aucune information : le canvas porte aria-hidden, et le titre comme le lien sont complets sans jamais toucher au pinceau. La poignée de rayon n’est atteignable au clavier que si vous le demandez, avec data-ph-reglable, et elle est alors un vrai curseur ARIA — jamais un élément focusable perdu dans un sous-arbre masqué.
• Le mouvement se coupe, la mosaïque reste. Sous prefers-reduced-motion, l’animation d’entrée, la traînée, l’inertie du pinceau et les délais tombent à zéro. La mosaïque, elle, est une image et non un mouvement : elle ne bouge pas.
• Aucun style ni script en ligne. Le composant respecte la politique de sécurité stricte du site et n’utilise jamais innerHTML. C’est vérifié en servant le dossier en HTTP avec l’en-tête, pas supposé.
• Le dessin vient d’ailleurs. Les proportions et l’algorithme de la mosaïque reprennent ceux d’un hero Framer, relevés sur le site vivant puis vérifiés cellule par cellule contre son canvas — 100 % de concordance à trois tailles. Le code, lui, est écrit ici. Deux choix s’écartent de l’original, et le mode d’emploi dit lesquels : la clairière est proportionnelle au lieu d’être figée sur 1200 × 800, et le titre cesse de se faire rogner en dessous de 390 px.