Thumbnail expand to detail: Free Demo and Code

Element · Vanilla JS + CSSUpdated November 6, 2026

3DElementVanilla JS + CSS

Live preview needs JavaScript. The code below works without any dependencies.

Prompt for your AI assistant

Paste this into Claude, Cursor or ChatGPT. The settings update as you move the controls above.

Build "Thumbnail expand to detail" for my site using the Enrichr Library element at https://enrichr.dev/elements/thumb-expand-detail.html.

Read the machine-readable spec and source at https://enrichr.dev/elements/thumb-expand-detail.json (markup, CSS, JavaScript, parameters).
Requirements: vanilla JavaScript and CSS, no new dependencies; keep the behaviour of the source unchanged; respect prefers-reduced-motion; work on touch screens; keep it accessible.

Settings:
- accent: #e6ff55
- thumbWidth: 34
- hoverScale: 1.2
- duration: 1100
- title: The quiet architecture of small things

Verify: reduced motion shows no movement, it works at 375px wide, there are no console errors, and scrolling stays smooth.

The same spec as JSON, for tools that read it directly: /elements/thumb-expand-detail.json.

Code

Mount it on an element that contains the markup. It returns an object with update(options) and destroy().

HTML

<div class="ef-tfd">
  <svg class="ef-tfd__defs" width="0" height="0" aria-hidden="true" focusable="false">
    <symbol id="ef-tfd-pz1" viewBox="1513.7 1453.9 322.3 322.3"><path fill="currentColor" d="M1821 1761.2h-292.3v-111.6c0-8 6.5-14.5 14.5-14.5 4.2 0 8.2 1.9 11 5.1 7.8 8.6 19.7 13.6 32.7 11.9 16.8-2.3 30.1-16 32-32.7 2.5-22.6-15.1-41.6-37.1-41.6-11 0-20.9 4.7-27.7 12.3-2.8 3.1-6.7 4.9-10.9 4.9-8 0-14.5-6.4-14.5-14.4v-111.7h292.3v111.7c0 8-6.4 14.4-14.5 14.4-4.2 0-8.1-1.8-10.9-5-7.9-8.6-19.7-13.6-32.7-11.9-16.8 2.2-30.1 15.9-32 32.7-2.5 22.6 15.1 41.6 37.1 41.6 11 0 20.8-4.8 27.7-12.3 2.8-3.1 6.7-5 10.8-5 8.1 0 14.5 6.5 14.5 14.5z"/></symbol>
    <symbol id="ef-tfd-pz4" viewBox="1423.36 860.8 503.07 322.3"><path fill="currentColor" d="M1821 875.8v111.6c0 8 6.5 14.5 14.5 14.5 4.2 0 8.1-1.9 10.9-5 6.8-7.5 16.7-12.3 27.7-12.3 22 0 39.6 19 37.1 41.6-1.9 16.7-15.2 30.5-32 32.7-13 1.7-24.8-3.3-32.7-11.9-2.8-3.2-6.8-5-11-5-8 0-14.5 6.4-14.5 14.4v111.7h-111.6c-8 0-14.5-6.5-14.5-14.5 0-4.2 1.9-8.2 5-11 8.7-7.9 13.7-19.7 12-32.7-2.3-16.8-16-30.1-32.8-32-22.5-2.5-41.5 15.1-41.5 37.1 0 11 4.7 20.9 12.3 27.7 3.1 2.8 4.9 6.7 4.9 10.8v0.1c0 8-6.4 14.5-14.5 14.5h-111.6v-111.7c0-8-6.4-14.4-14.5-14.4-4.1 0-8 1.8-10.8 4.9-6.9 7.6-16.7 12.3-27.7 12.3-22 0-39.6-19-37.1-41.6 1.9-16.7 15.2-30.4 32-32.7 13-1.7 24.8 3.3 32.7 11.9 2.8 3.2 6.7 5.1 10.9 5.1 8.1 0 14.5-6.5 14.5-14.5v-111.6z"/></symbol>
    <symbol id="ef-tfd-pz8" viewBox="1513.7 166.86 322.3 503.06"><path fill="currentColor" d="M1528.7 564.5v-111.6c0-8 6.5-14.5 14.5-14.5 4.2 0 8.2 1.9 11 5 7.8 8.7 19.7 13.7 32.7 11.9 16.8-2.2 30.1-15.9 32-32.7 2.5-22.5-15.1-41.5-37.1-41.5-11 0-20.9 4.7-27.7 12.3-2.8 3.1-6.7 4.9-10.9 4.9-8 0-14.5-6.5-14.5-14.5v-111.6h111.6c8.1 0 14.5-6.5 14.5-14.5 0-4.1-1.8-8.1-4.9-10.9-7.6-6.8-12.3-16.6-12.3-27.6 0-22 19-39.6 41.5-37.1 16.8 1.8 30.5 15.2 32.8 32 1.7 12.9-3.3 24.8-12 32.7-3.1 2.8-5 6.7-5 10.9 0 8 6.5 14.5 14.5 14.5h111.6v111.6c0 8-6.4 14.5-14.5 14.5-4.2 0-8.1-1.9-10.9-5-7.9-8.7-19.7-13.6-32.7-11.9-16.8 2.2-30.1 15.9-32 32.7-2.5 22.5 15.1 41.6 37.1 41.6 11 0 20.8-4.8 27.7-12.3 2.8-3.1 6.7-5 10.8-5 8.1 0 14.5 6.5 14.5 14.5v111.6h-111.6c-8 0-14.5 6.5-14.5 14.5 0 4.2 1.9 8.1 5 10.9 7.5 6.8 12.3 16.7 12.3 27.7 0 22-19 39.5-41.6 37.1-16.8-1.9-30.5-15.3-32.7-32-1.7-13 3.3-24.9 11.9-32.7 3.1-2.9 5-6.8 5-11 0-8-6.4-14.5-14.5-14.5z"/></symbol>
  </svg>
  <div class="ef-tfd__stage">
    <div class="ef-tfd__thumbs" aria-hidden="true">
      <div class="ef-tfd__side ef-tfd__side--l"><svg class="ef-tfd__pz"><use href="#ef-tfd-pz8"/></svg></div>
      <div class="ef-tfd__side ef-tfd__side--r"><svg class="ef-tfd__pz"><use href="#ef-tfd-pz1"/></svg></div>
    </div>
    <div class="ef-tfd__cap" aria-hidden="true"><span class="ef-tfd__capn">03</span><span class="ef-tfd__capt">Field notes</span></div>
    <div class="ef-tfd__hero" aria-hidden="true">
      <div class="ef-tfd__art">
        <svg class="ef-tfd__pz ef-tfd__pz--a"><use href="#ef-tfd-pz4"/></svg>
        <svg class="ef-tfd__pz ef-tfd__pz--b"><use href="#ef-tfd-pz1"/></svg>
        <svg class="ef-tfd__pz ef-tfd__pz--c"><use href="#ef-tfd-pz8"/></svg>
      </div>
    </div>
    <button class="ef-tfd__hit" type="button" aria-label="Open the story"></button>
    <div class="ef-tfd__detail" inert>
      <div class="ef-tfd__intro">
        <p class="ef-tfd__kick">Chapter three</p>
        <h3 class="ef-tfd__title"><span class="ef-tfd__blk"></span></h3>
        <p class="ef-tfd__sub"><span class="ef-tfd__blk">Field notes from the studio floor</span></p>
      </div>
      <div class="ef-tfd__body">
        <p>Every project starts as a pile of small shapes that do not quite fit. The work is mostly patience: turning each piece until the edge you need faces the edge it has to meet.</p>
        <div class="ef-tfd__plate"><svg class="ef-tfd__pz"><use href="#ef-tfd-pz4"/></svg></div>
        <p>This panel scrolls on its own, inside the stage, so it behaves the same in a full page or in a small embedded frame. Wheel and touch scrolling only act on it while you are over it.</p>
        <p>When the thumbnail grows, the title and subtitle rise out of a mask one after the other, and the neighbouring thumbnails swing away so nothing competes for attention.</p>
        <div class="ef-tfd__plate ef-tfd__plate--alt"><svg class="ef-tfd__pz"><use href="#ef-tfd-pz1"/></svg></div>
        <p>Press Escape or use the Close button to shrink it back into the row.</p>
      </div>
    </div>
    <button class="ef-tfd__close" type="button" tabindex="-1" aria-label="Close the story">Close</button>
  </div>
</div>

CSS

/* Enrichr Library · https://enrichr.dev */
/* Adapted from https://github.com/codrops/ThumbFullTransition (MIT) — Copyright (c) 2009 - 2020 [Codrops](https://tympanus.net/codrops) */
.ef-tfd { --ef-acc: #e6ff55; position: relative; width: 100%; height: 100%; min-height: 26rem; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: #fbf8f1; }
.ef-tfd__defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.ef-tfd__stage { position: absolute; inset: 0; overflow: hidden; background: radial-gradient(ellipse at 50% 40%, #0a6b46 -40%, #0c1e18 70%); }
.ef-tfd__thumbs { position: absolute; inset: 0; perspective: 900px; }
.ef-tfd__side { position: absolute; left: 0; top: 0; border-radius: 14px; overflow: hidden; background: linear-gradient(160deg, #2f7d5b, #005236 60%, #0c1e18); color: var(--ef-acc); will-change: transform, opacity; }
.ef-tfd__side--r { background: linear-gradient(200deg, #c6f26b -30%, #2f7d5b 40%, #005236); color: #0c1e18; }
.ef-tfd__side .ef-tfd__pz { position: absolute; left: 50%; top: 50%; width: 70%; height: 70%; transform: translate(-50%, -50%) rotate(-8deg); }
.ef-tfd__cap { position: absolute; left: 0; top: 0; display: flex; gap: 0.6rem; align-items: baseline; font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; white-space: nowrap; will-change: transform, opacity; }
.ef-tfd__capn { color: var(--ef-acc); font-weight: 700; }
.ef-tfd__capt { opacity: 0.8; }
.ef-tfd__hero { position: absolute; inset: 0; will-change: clip-path; clip-path: inset(30% 30% 30% 30% round 14px); }
.ef-tfd__art { position: absolute; inset: 0; background: radial-gradient(circle at 78% 22%, rgba(230, 255, 85, 0.35), transparent 38%), linear-gradient(155deg, #0a6b46 0%, #005236 45%, #0c1e18 100%); transform-origin: 50% 50%; will-change: transform; }
.ef-tfd__pz { display: block; color: var(--ef-acc); }
.ef-tfd__pz--a, .ef-tfd__pz--b, .ef-tfd__pz--c { position: absolute; }
.ef-tfd__pz--a { left: 8%; top: 22%; width: 52%; height: 36%; transform: rotate(-9deg); }
.ef-tfd__pz--b { right: 8%; bottom: 10%; width: 30%; height: 30%; color: #c6f26b; transform: rotate(14deg); }
.ef-tfd__pz--c { right: 22%; top: 6%; width: 14%; height: 26%; color: #fbf8f1; opacity: 0.85; transform: rotate(6deg); }
.ef-tfd__hit { position: absolute; left: 0; top: 0; margin: 0; padding: 0; border: 0; border-radius: 14px; background: transparent; cursor: pointer; outline: none; }
.ef-tfd__hit:focus-visible { box-shadow: 0 0 0 3px var(--ef-acc); }
.ef-tfd__detail { position: absolute; inset: 0; overflow: hidden; visibility: hidden; opacity: 0; pointer-events: none; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: #2f7d5b transparent; }
.ef-tfd.is-active .ef-tfd__detail { visibility: visible; opacity: 1; }
.ef-tfd.is-open .ef-tfd__detail { overflow-y: auto; pointer-events: auto; }
.ef-tfd__detail:focus-visible { outline: 2px solid var(--ef-acc); outline-offset: -4px; }
.ef-tfd__intro { box-sizing: border-box; min-height: 100%; padding: 1.6rem 1.6rem 1.8rem; display: flex; flex-direction: column; justify-content: flex-end; background: linear-gradient(0deg, rgba(12, 30, 24, 0.82), rgba(12, 30, 24, 0) 62%); }
.ef-tfd__kick { margin: 0 0 0.5rem; font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ef-acc); }
.ef-tfd__title { margin: 0; font-size: clamp(1.7rem, 7vw, 2.8rem); line-height: 1.02; letter-spacing: -0.02em; font-weight: 800; max-width: 16ch; overflow: hidden; padding-bottom: 0.08em; }
.ef-tfd__sub { margin: 0.5rem 0 0; font-size: 0.95rem; opacity: 0.9; overflow: hidden; }
.ef-tfd__blk { display: block; transform-origin: 0 100%; will-change: transform; }
.ef-tfd__body { position: relative; padding: 1.6rem; background: #fbf8f1; color: #0c1e18; font-size: 0.95rem; line-height: 1.6; }
.ef-tfd__body p { margin: 0 0 1.1rem; max-width: 46ch; }
.ef-tfd__plate { height: 9rem; margin: 0 0 1.2rem; border-radius: 12px; position: relative; overflow: hidden; background: linear-gradient(150deg, #0a6b46, #005236 55%, #0c1e18); }
.ef-tfd__plate .ef-tfd__pz { position: absolute; left: 50%; top: 50%; width: 46%; height: 70%; transform: translate(-50%, -50%) rotate(-6deg); }
.ef-tfd__plate--alt { background: linear-gradient(200deg, #c6f26b -20%, #2f7d5b 50%, #005236); }
.ef-tfd__plate--alt .ef-tfd__pz { color: #0c1e18; width: 36%; }
.ef-tfd__close { position: absolute; top: 0.9rem; right: 0.9rem; z-index: 3; padding: 0.45rem 0.9rem; border-radius: 999px; border: 1px solid rgba(251, 248, 241, 0.5); background: rgba(12, 30, 24, 0.55); color: #fbf8f1; font: inherit; font-size: 0.78rem; letter-spacing: 0.06em; cursor: pointer; opacity: 0; visibility: hidden; transition: background 200ms, color 200ms; }
.ef-tfd.is-open .ef-tfd__close { opacity: 1; visibility: visible; }
.ef-tfd__close:hover { background: var(--ef-acc); color: #0c1e18; }
.ef-tfd__close:focus-visible { outline: 2px solid var(--ef-acc); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .ef-tfd__close { transition: none; } }

JavaScript

// Enrichr Library · https://enrichr.dev
// Adapted from https://github.com/codrops/ThumbFullTransition (MIT) — Copyright (c) 2009 - 2020 [Codrops](https://tympanus.net/codrops)
// Thumb expand detail: a centred thumbnail between two neighbours. Hover swells it and swings the neighbours away; click (or Enter)
// grows it to fill the stage with an expo in-out, the title and subtitle rise out of masks, then a detail panel scrolls on its own.
// Vanilla port: one rAF loop drives an open progress (0 to 1) and a hover spring; the thumbnail is a clip-path inset plus a scaled art layer.
// mount(root, { accent, thumbWidth (% of stage), hoverScale (1-1.4), duration (ms), title })
function mount(root, o) {
  var mq = window.matchMedia("(prefers-reduced-motion: reduce)");
  var stage = root.querySelector(".ef-tfd__stage");
  var hero = root.querySelector(".ef-tfd__hero");
  var art = root.querySelector(".ef-tfd__art");
  var hit = root.querySelector(".ef-tfd__hit");
  var detail = root.querySelector(".ef-tfd__detail");
  var closeBtn = root.querySelector(".ef-tfd__close");
  var sideL = root.querySelector(".ef-tfd__side--l");
  var sideR = root.querySelector(".ef-tfd__side--r");
  var cap = root.querySelector(".ef-tfd__cap");
  var titleBlk = root.querySelector(".ef-tfd__title .ef-tfd__blk");
  var subBlk = root.querySelector(".ef-tfd__sub .ef-tfd__blk");
  var opts = {}, W = 0, H = 0, tw = 0, th = 0, top0 = 0, p = 0, h = 0, hT = 0;
  var anim = null, raf = 0, last = 0, isOpen = false, ro = null, offs = [];

  function clamp(v) { return v < 0 ? 0 : v > 1 ? 1 : v; }
  function lerp(a, b, t) { return a + (b - a) * t; }
  function inOutExpo(u) { return u <= 0 ? 0 : u >= 1 ? 1 : u < 0.5 ? Math.pow(2, 20 * u - 10) / 2 : (2 - Math.pow(2, -20 * u + 10)) / 2; }
  function outExpo(u) { return u >= 1 ? 1 : 1 - Math.pow(2, -10 * u); }

  function measure() {
    W = stage.clientWidth; H = stage.clientHeight;
    tw = Math.round(W * opts.thumbWidth / 100);
    th = Math.round(tw * 1.25);
    if (th > H * 0.62) { th = Math.round(H * 0.62); tw = Math.round(th / 1.25); }
    top0 = Math.round(H * 0.46 - th / 2);
    var base = "left:" + Math.round((W - tw) / 2) + "px;top:" + top0 + "px;width:" + tw + "px;height:" + th + "px";
    hit.style.cssText = base;
    sideL.style.cssText = base; sideR.style.cssText = base;
    cap.style.left = Math.round((W - tw) / 2) + "px";
    render();
  }

  function render() {
    var reduce = mq.matches;
    var il = ((W - tw) / 2) * (1 - p), it = top0 * (1 - p), ib = (H - top0 - th) * (1 - p);
    var rad = 14 * (1 - p);
    hero.style.clipPath = "inset(" + it.toFixed(1) + "px " + il.toFixed(1) + "px " + ib.toFixed(1) + "px " + il.toFixed(1) + "px round " + rad.toFixed(1) + "px)";
    var s0 = Math.max(tw / W, th / H);
    var hh = reduce ? 0 : h;
    var s = lerp(s0 * (1 + (opts.hoverScale - 1) * hh), 1, p);
    var cy0 = top0 + th / 2;
    art.style.transform = "translate3d(0," + ((cy0 - H / 2) * (1 - p)).toFixed(1) + "px,0) scale(" + s.toFixed(4) + ")";
    // neighbours: drift outward and tilt on hover, swing far away while opening
    var gap = Math.max(10, tw * 0.1);
    var fade = 1 - clamp(p * 1.6);
    [[sideL, -1], [sideR, 1]].forEach(function (a) {
      var dir = a[1];
      var x = dir * (tw + gap + tw * 0.25 * hh + tw * 1.5 * p);
      var ry = -dir * (15 * hh + 30 * p);
      var z = 40 * hh + 160 * p;
      a[0].style.transform = "translate3d(" + x.toFixed(1) + "px,0," + z.toFixed(1) + "px) rotateY(" + ry.toFixed(1) + "deg)";
      a[0].style.opacity = String(((1 - 0.2 * hh) * fade).toFixed(3));
    });
    cap.style.transform = "translate3d(0," + (top0 + th + 14).toFixed(0) + "px,0)";
    cap.style.opacity = String(clamp(1 - p * 1.8).toFixed(3));
    // title + subtitle rise out of their masks once the image is mostly grown
    var tt = outExpo(clamp((p - 0.35) / 0.65)), st = outExpo(clamp((p - 0.5) / 0.5));
    titleBlk.style.transform = "translate3d(0," + ((1 - tt) * 110).toFixed(1) + "%,0) rotate(" + ((1 - tt) * 3).toFixed(2) + "deg)";
    subBlk.style.transform = "translate3d(0," + ((1 - st) * 110).toFixed(1) + "%,0) rotate(" + ((1 - st) * 3).toFixed(2) + "deg)";
    hit.style.visibility = (p === 0 && !anim) ? "visible" : "hidden";
    root.classList.toggle("is-active", p > 0);
  }

  function tick(now) {
    raf = 0;
    var dt = last ? Math.min(64, now - last) : 16;
    last = now;
    var busy = false;
    if (anim) {
      var u = clamp((now - anim.t0) / anim.dur);
      p = lerp(anim.from, anim.to, inOutExpo(u));
      if (u >= 1) { p = anim.to; var d = anim.done; anim = null; render(); if (d) d(); } else busy = true;
    }
    var dh = hT - h;
    if (Math.abs(dh) > 0.002) { h += dh * (1 - Math.exp(-dt / 150)); busy = true; } else h = hT;
    render();
    if (busy) raf = requestAnimationFrame(tick); else last = 0;
  }
  function kick() { if (!raf) raf = requestAnimationFrame(tick); }

  function go(to, done) {
    var dur = mq.matches ? 0 : opts.duration;
    if (dur <= 0) { anim = null; p = to; render(); if (done) done(); return; }
    anim = { from: p, to: to, t0: performance.now(), dur: dur * (Math.abs(to - p)), done: done };
    if (anim.dur < 1) { anim = null; p = to; render(); if (done) done(); return; }
    kick();
  }

  function openIt() {
    if (isOpen || anim) return;
    isOpen = true; hT = 0;
    go(1, function () {
      root.classList.add("is-open");
      detail.removeAttribute("inert");
      detail.tabIndex = 0;
      closeBtn.tabIndex = 0;
      closeBtn.focus();
    });
  }
  function closeIt() {
    if (!isOpen || anim) return;
    root.classList.remove("is-open");
    detail.setAttribute("inert", "");
    detail.removeAttribute("tabindex");
    closeBtn.tabIndex = -1;
    detail.scrollTop = 0;
    isOpen = false;
    go(0, function () { hit.focus(); });
  }

  function onEnter() { if (!isOpen && !anim) { hT = 1; kick(); } }
  function onLeave() { hT = 0; kick(); }
  function onKey(e) { if (e.key === "Escape" && isOpen) { e.preventDefault(); closeIt(); } }
  function on(el, ev, fn) { el.addEventListener(ev, fn); offs.push(function () { el.removeEventListener(ev, fn); }); }
  on(hit, "pointerenter", onEnter);
  on(hit, "pointerleave", onLeave);
  on(hit, "focus", onEnter);
  on(hit, "blur", onLeave);
  on(hit, "click", openIt);
  on(closeBtn, "click", closeIt);
  on(root, "keydown", onKey);
  if (typeof ResizeObserver !== "undefined") { ro = new ResizeObserver(function () { measure(); }); ro.observe(stage); }

  function update(next) {
    opts = Object.assign({ accent: "#e6ff55", thumbWidth: 34, hoverScale: 1.2, duration: 1100, title: "The quiet architecture of small things" }, opts, next || {});
    opts.thumbWidth = Math.max(20, Math.min(50, +opts.thumbWidth));
    opts.hoverScale = Math.max(1, Math.min(1.5, +opts.hoverScale));
    opts.duration = Math.max(0, +opts.duration);
    stage.style.setProperty("--ef-acc", opts.accent);
    if (titleBlk.textContent !== opts.title) titleBlk.textContent = opts.title;
    measure();
  }
  update(o);
  function destroy() {
    offs.forEach(function (f) { f(); }); offs = [];
    if (ro) { ro.disconnect(); ro = null; }
    if (raf) cancelAnimationFrame(raf);
    raf = 0; anim = null;
  }
  return { update: update, destroy: destroy };
}

// Usage
var fx = mount(document.querySelector("#my-root"), {"accent":"#e6ff55","thumbWidth":34,"hoverScale":1.2,"duration":1100,"title":"The quiet architecture of small things"});

How it works

This is a vanilla port of the Codrops thumbnail-to-fullscreen idea, with no GSAP or scroll library. One requestAnimationFrame loop drives an open progress value from 0 to 1 with an expo in-out curve, and a hover value that eases toward 0 or 1. The thumbnail is a full-stage art layer revealed through a clip-path inset: at 0 the inset is the thumbnail rectangle and the art is scaled down to fit it, at 1 the inset is zero and the art is at full size, so the image grows without distortion. The two neighbours slide outward, tilt on the Y axis and fade as the value rises. Title and subtitle are translated out of overflow-hidden masks with a small rotation, starting once the image is mostly grown. When the open state completes, the detail panel becomes its own scroll container.

The thumbnail is a real button with a visible focus ring, and keyboard focus gives the same swell as hover. After opening, focus moves to the Close button, Escape closes, and focus returns to the thumbnail. The detail panel is inert until it is open, and is focusable so the keyboard can scroll it. With prefers-reduced-motion the expand is instant and the hover swell is off.

Per frame it writes one clip-path, a few transforms and opacity values on five elements. Nothing triggers layout while animating; sizes are measured only on resize through a ResizeObserver. The loop stops as soon as the open progress and hover value settle.

Section	Gallery
Techniques	Pointer interaction, Reveal and intro, CSS 3D
Stack	Vanilla JS, CSS
Works with	React, Next.js, Vanilla
Dependencies	None
Status	tested
On CodePen	Open the live pen on our CodePen account; fork it to experiment.
Inspired by	Thumbnail to Fullscreen Transition by Codrops on github.com. Original code, written from scratch.

Find this technique on a real site

Want to see this technique in the wild? Check any site with the free tools, then build your own version from this page.

Check which animation library a site uses · Extract a site's design tokens · Browse site breakdowns

Licence and provenance

Free to use in personal and client projects during the preview. Final licence terms will be published here before any paid tier starts; ask before reselling the code as a collection.

This is original code. The technique is a common one that we studied by measuring award-winning sites with Enrichr; no third-party code, shaders, fonts or images are used.

Serif motion study heroA starlit green hero whose serif headline blurs into place with hand-drawn underlines, then opens onto an endless curved wall of cards you can drag through. 3D ring carouselCards on a CSS 3D ring that rotates one step at a time, with buttons, arrow keys and autoplay. Card hover tilt with glareA grid of cards that tilt in 3D toward the pointer with a moving glare highlight and a lifted shadow, all driven by CSS variables.

FAQ

Why a clip-path instead of scaling the element?

Scaling a wrapper and counter-scaling the image needs two transforms that must stay in sync. A clip-path over a single scaled art layer gives the same result with one value, and the corners can round off as it opens.

Does the detail scroll move the page behind it?

No. The panel is its own scroll container with overscroll-behavior contained, so it works inside an overflow-hidden frame and only reacts while the pointer is over it.

Can I use a photo instead of the gradient art?

Yes. Put an img or a background-image on the art layer with the same size as the stage, and the clip and scale will work the same way.