Reveal mosaic hero

What's included

A full-page hero whose photo is hidden under a mosaic of squares, in two files: a stylesheet and a script. No dependencies, no build step, no external requests — you copy them into a project and it works.

Le <canvas> never holds the photo. It holds what hides it, and the image shows through wherever a square is missing. That's what makes the effect cheap: one solid rectangle per cell, never any image processing. The pointer wipes squares away under a round brush, and a trail closes up behind it.

Features

• A mosaic that never changes — its shape comes from a fixed-seed generator, so it's the same on every load, on every machine and in every browser. Change the seed, change the whole pattern.
• The heading's corner stays readable — a protected area keeps all its squares there, with a ragged edge so it doesn't read as a white rectangle stuck onto the photo.
• Works without JavaScript — the canvas stays empty, a gradient veil takes over, and the hero keeps its heading, its link and its layout.
• One variable for the scale — heading, spacing, rule, square size and brush radius all derive from the body text size and follow together.
• Adjustable from the keyboard — optionally, the white handle becomes a real ARIA slider: arrows, Page Up, Page Down, Home and End set the brush radius.
• Two variants — a compact scale for an inset, and a dark mosaic for light text.

Dropping it into a page

Two files to load, then the markup:

<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>

The script starts on its own, including for a component inserted later. Change the photo with --ph-photo, the scale with --ph-font-size, and the mosaic pattern with data-ph-densite et data-ph-graine.

What you should know

• The effect is decorative, and stays that way. It hides no information: the canvas carries aria-hidden, and both the heading and the link are complete without ever touching the brush. The radius handle is only reachable from the keyboard if you ask for it, with data-ph-reglable, and it is then a real ARIA slider — never a focusable element stranded in a hidden subtree.
• The motion switches off, the mosaic stays. Under prefers-reduced-motion, the entrance animation, the trail, the brush inertia and the delays all fall to zero. The mosaic itself is an image, not a movement: it doesn't move.
• No inline styles, no inline scripts. The component honours the site's strict security policy and never uses innerHTML. That's checked by serving the folder over HTTP with the header, not assumed.
• The design comes from elsewhere. The proportions and the mosaic algorithm follow those of a Framer hero, measured on the live site then checked cell by cell against its canvas — 100% agreement at three sizes. The code itself is written here. Two choices depart from the original, and the README says which: the clearing is proportional instead of being fixed at 1200 × 800, and the heading stops being cropped below 390 px.