Triptych hero

What's included

An editorial hero with three photographs, in two files: a stylesheet and a script. No dependencies, no build step, no external requests — fonts, photographs and watercolours are all in the folder, you copy it into a project and it works.

The three plates drift as you scroll: the two on the sides move out and tilt, the middle one rises, the photographs grow, the two watercolours rotate. All of it is driven by a single number, --th-p, which the script takes from 0 to 1. The stylesheet handles the rest: there's no per-element JavaScript, and no second description of the layout that could drift away from the CSS.

Features

• Works without JavaScript — without the script, --th-p keeps its initial value and the composition appears complete, framed, tilted. Only the drift is missing.
• A follower, not a jump — the progress doesn't stick to the wheel, it catches up with 360 ms of lag. That's what gives the plates their glide rather than a movement glued to the finger.
• One variable for the scale — every measurement derives from the text size: heading, rules, spacing and plate all follow together. The collage itself is in percentages of the plate, so identical at 320 px and at 1600 px.
• Never overflows onto the page — the plates leave the frame, that's the effect itself; the component clips its own overflow instead of forcing an overflow-x: hidden onto the host site.
• Reduced motion respected — under prefers-reduced-motion, the script unplugs itself and the composition freezes halfway through. The design stays, the movement stops.
• Costs nothing off screen — un IntersectionObserver unplugs the follower as soon as the block leaves the screen; several heroes on a page cost no more than one.

Dropping it into a page

Two files to load, then the markup:

<link rel="stylesheet" href="triptych-hero.css">
<script src="triptych-hero.js" defer></script>
<section class="triptych-hero">
  <span class="triptych-hero__sonde" aria-hidden="true"></span>
  <div class="triptych-hero__contenu">
    <header class="triptych-hero__intro">
      <h1 class="triptych-hero__titre">Your heading</h1>
      <a class="triptych-hero__lien" href="#">Your link</a>
    </header>
    <div class="triptych-hero__scene">
      <div class="triptych-hero__pile">
        <div class="triptych-hero__volet triptych-hero__volet--gauche">
          <img class="triptych-hero__photo" src="…" alt="">
        </div>
        <div class="triptych-hero__volet triptych-hero__volet--droite">…</div>
        <div class="triptych-hero__volet triptych-hero__volet--centre">…</div>
      </div>
    </div>
  </div>
</section>

Nothing to call: the script installs itself on load, and on blocks inserted later too. To change the scale of the whole thing, a single line is enough — --th-font-size: 22px.

What you should know

• It needs a page to travel through. The progress is worked out from the block's travel across the window: on a page that fits entirely on screen, nothing scrolls, so nothing drifts. The hero then stays at its first keyframe — complete, but motionless.
• The vertical drift is in vh. That's what the original does, and it ties the movement to the window. In a box that isn't the window — a frame, an iframe — redefine --th-course with a length of your own; that's what the preview page does.
• No inline styles, no inline scripts. The component honours the site's strict security policy and never uses innerHTML: the values go through the CSSOM, which the CSP allows where it forbids injecting a <style>.
• The design comes from elsewhere, the images don't. The proportions and the keyframes follow those of a commercial Webflow template, measured on the live page and in its interaction data. The code is original, and the six visuals have been remade: the originals weren't redistributable and three of them showed identifiable people.