Scroll Gallery

Led Zeppelin

Controls

Code

ScrollgalleryDemo.jsx
"use client";

import { useEffect, useLayoutEffect, useRef, useState } from 'react';
import { Check } from '@phosphor-icons/react';
import { usePrefersReducedMotion } from './usePrefersReducedMotion';
import './ScrollgalleryDemo.css';
/* Owner-selected albums. Seven approved higher-resolution source files;
   Wish You Were Here and Animals retain the supplied artwork and framing. */
const COVERS = [
    {
        "id": "wish-you-were-here",
        "title": "Wish You Were Here",
        "releaseYear": 1975,
        "artist": "Pink Floyd",
        "cover": "/assets/vault/scroll-gallery/wish-you-were-here.webp"
    },
    {
        "id": "fragile",
        "title": "Fragile",
        "releaseYear": 1971,
        "artist": "Yes",
        "cover": "/assets/vault/scroll-gallery/fragile.jpg"
    },
    {
        "id": "invaders-must-die",
        "title": "Invaders Must Die",
        "releaseYear": 2009,
        "artist": "The Prodigy",
        "cover": "/assets/vault/scroll-gallery/invaders-must-die.jpg"
    },
    {
        "id": "boston",
        "title": "Boston",
        "releaseYear": 1976,
        "artist": "Boston",
        "cover": "/assets/vault/scroll-gallery/boston.jpg"
    },
    {
        "id": "led-zeppelin",
        "title": "Led Zeppelin",
        "releaseYear": 1969,
        "artist": "Led Zeppelin",
        "cover": "/assets/vault/scroll-gallery/led-zeppelin.jpg"
    },
    {
        "id": "balloonerism",
        "title": "Balloonerism",
        "releaseYear": 2025,
        "artist": "Mac Miller",
        "cover": "/assets/vault/scroll-gallery/balloonerism.jpg"
    },
    {
        "id": "pink-moon",
        "title": "Pink Moon",
        "releaseYear": 1972,
        "artist": "Nick Drake",
        "cover": "/assets/vault/scroll-gallery/pink-moon.jpg"
    },
    {
        "id": "flower-boy",
        "title": "Flower Boy",
        "releaseYear": 2017,
        "artist": "Tyler, the Creator",
        "cover": "/assets/vault/scroll-gallery/flower-boy.jpg"
    },
    {
        "id": "animals",
        "title": "Animals",
        "releaseYear": 1977,
        "artist": "Pink Floyd",
        "cover": "/assets/vault/scroll-gallery/animals.jpg"
    }
];
const DEFAULT_ID = 'led-zeppelin';
function relativeIndex(index, active, length) {
    let relative = index - active;
    if (relative > length / 2)
        relative -= length;
    if (relative < -length / 2)
        relative += length;
    return relative;
}
export function ScrollgalleryDemo({ compact = false, thumbnail = false, interactive = !compact, controls, sessionRef, resumeAutoplayOnIdle = false, reducedMotion: reducedMotionOverride = false, }) {
    const prefersReducedMotion = usePrefersReducedMotion();
    const shouldReduceMotion = reducedMotionOverride || prefersReducedMotion;
    const keyboardInteractive = interactive || thumbnail;
    const idleAutoplay = resumeAutoplayOnIdle && compact && thumbnail && !interactive;
    const [activeId, setActiveId] = useState(() => sessionRef?.current?.activeId ?? DEFAULT_ID);
    const [theme, setTheme] = useState(() => sessionRef?.current?.theme ?? 'light');
    const [menuOpen, setMenuOpen] = useState(false);
    const shellRef = useRef(null);
    const menuRef = useRef(null);
    const stageRef = useRef(null);
    const coverRefs = useRef([]);
    const dragStart = useRef(null);
    const dragging = useRef(false);
    const suppressCoverClick = useRef(false);
    /* Batch 24: `focus` is the continuous coverflow position (activeIndex +
       fractional drag progress). -1 = uninitialized (snaps on first layout). */
    const focus = useRef({ value: -1, raf: 0 });
    const steps = useRef([217.16, 395.16, 573.16]);
    const cardSize = useRef(300);
    /* Manual input retires autoplay by default. The Playground thumbnail can
       opt into resuming after 3.6 seconds without an active gesture. */
    const [autoAdvance, setAutoAdvance] = useState(() => sessionRef?.current?.autoAdvance ?? true);
    const autoplayScheduler = useRef(null);
    const heldAutoplayPointer = useRef(null);
    const pauseAutoplayForInteraction = () => {
        setAutoAdvance(false);
        if (idleAutoplay) autoplayScheduler.current?.restart();
    };
    /* The portfolio remounts one engine when entering or leaving fullscreen. */
    useEffect(() => {
        if (sessionRef) sessionRef.current = { activeId, theme, autoAdvance };
    }, [sessionRef, activeId, theme, autoAdvance]);
    const ordered = COVERS;
    const activeIndex = Math.max(0, ordered.findIndex((cover) => cover.id === activeId));
    const active = ordered[activeIndex] ?? ordered[0];
    const select = (id) => setActiveId(id);
    const step = (direction) => {
        const next = (activeIndex + direction + ordered.length) % ordered.length;
        setActiveId(ordered[next].id);
    };
    const shuffle = () => {
        if (ordered.length < 2)
            return;
        let next = activeIndex;
        while (next === activeIndex)
            next = Math.floor(Math.random() * ordered.length);
        setActiveId(ordered[next].id);
    };
    const reset = () => {
        setActiveId(DEFAULT_ID);
        setTheme('light');
        setMenuOpen(false);
    };
    if (controls) {
        controls.reset = reset;
        controls.shuffle = shuffle;
        controls.openTheme = () => setMenuOpen((open) => !open);
    }
    useEffect(() => {
        if (menuOpen)
            menuRef.current?.querySelector('button')?.focus();
    }, [menuOpen]);
    useEffect(() => {
        if (!compact || interactive || (!autoAdvance && !idleAutoplay) || shouldReduceMotion)
            return;
        /* Keep the approved cadence and spring. Visibility and manual input
           only control when its next advance may begin. */
        const stage = stageRef.current;
        if (!stage)
            return;
        let id = 0;
        let visible = false;
        const stop = () => {
            if (id) window.clearTimeout(id);
            id = 0;
        };
        const canAdvance = () => visible && !document.hidden && (!idleAutoplay || heldAutoplayPointer.current === null);
        const restart = () => {
            stop();
            if (!canAdvance()) return;
            id = window.setTimeout(() => {
                id = 0;
                if (!canAdvance()) return;
                if (idleAutoplay) setAutoAdvance(true);
                step(1);
            }, 3600);
        };
        autoplayScheduler.current = { restart };
        const io = new IntersectionObserver(([entry]) => {
            visible = Boolean(entry?.isIntersecting);
            restart();
        });
        io.observe(stage);
        document.addEventListener('visibilitychange', restart);
        return () => {
            stop();
            io.disconnect();
            autoplayScheduler.current = null;
            document.removeEventListener('visibilitychange', restart);
        };
    }, [activeIndex, compact, interactive, autoAdvance, ordered, shouldReduceMotion, idleAutoplay]);
    const onKeyDown = (event) => {
        if (!keyboardInteractive)
            return;
        if (event.key === 'Escape' && menuOpen) {
            event.preventDefault();
            event.stopPropagation();
            setMenuOpen(false);
            event.currentTarget.focus({ preventScroll: true });
            return;
        }
        if (menuOpen)
            return;
        if (event.key === 'ArrowLeft') {
            event.preventDefault();
            pauseAutoplayForInteraction();
            step(-1);
        }
        if (event.key === 'ArrowRight') {
            event.preventDefault();
            pauseAutoplayForInteraction();
            step(1);
        }
    };
    /* Batch 24 — fractional coverflow. A single float `focus` (activeIndex +
       fractional drag progress) drives every cover's pose per frame: translateX,
       translateZ, scale, rotateY, cover/img opacity, depth, and pointer-events
       are interpolated between the integer keyframes that previously lived in
       the cki-position-* classes, so the incoming cover grows, un-rotates, and
       fades into the central pose continuously while dragging. Batch 64
       (apple-design skill): settles run on a velocity-aware SPRING (damping 1.0
       default / 0.82 with momentum, response ~0.4s) with Apple's momentum
       projection picking the release target and the release velocity handed off
       — mid-flight grabs and re-targets stay continuous. Reduced motion snaps
       instantly. */
    const DRAG_START_PX = 8;
    /* Batch 64 — apple-design skill (emilkowalski/skills): the release settle
       is now a REAL spring, not a fixed-duration bezier tween.
       · §4 damping+response parameterization (move/reposition 1.0/0.4;
         momentum 0.8/0.3–0.4)
       · §5 velocity handoff: the release velocity becomes the spring's
         initial velocity — no seam between drag and settle
       · §6 momentum projection uses Apple's exact function
         (v/1000)·d/(1−d), d = 0.992 (snappier), clamped ±4 cards
       · §3 interruptibility: re-targets keep the live spring velocity — no
         "brick wall" — and grabbing mid-flight re-tracks from the live
         on-screen float. */
    const SPRING_RESPONSE = 0.42; /* s — Apple move/reposition = 0.4 */
    const SPRING_RESPONSE_FLICK = 0.34;
    const SPRING_DAMPING = 1.0; /* critically damped default (skill §4) */
    const SPRING_DAMPING_FLICK = 0.82; /* bounce only when momentum preceded it */
    const DECEL_RATE = 0.992; /* Apple's projection decelerationRate (§6) */
    const MAX_PROJECT_CARDS = 4;
    const spring = useRef({ v: 0 }); /* focus units per second */
    const reducedMotion = () => shouldReduceMotion;
    /* Apple's momentum projection (Designing Fluid Interfaces sample code) —
       NOT the physics-textbook v²/2d form. */
    const projectMomentum = (velocityPxPerMs) => (velocityPxPerMs * 1000 / 1000) * DECEL_RATE / (1 - DECEL_RATE);
    const measureSteps = () => {
        const stage = stageRef.current;
        if (!stage)
            return;
        const style = window.getComputedStyle(stage);
        const read = (name, fallback) => {
            const value = parseFloat(style.getPropertyValue(name));
            return Number.isFinite(value) && value > 0 ? value : fallback;
        };
        steps.current = [
            read('--cki-step-1', steps.current[0]),
            read('--cki-step-2', steps.current[1]),
            read('--cki-step-3', steps.current[2]),
        ];
        cardSize.current = read('--cki-card-size', cardSize.current);
    };
    const writePoses = () => {
        const covers = coverRefs.current;
        const length = ordered.length;
        if (length === 0)
            return;
        const f = focus.current.value;
        const [s1, s2, s3] = steps.current;
        /* Integer keyframes, |relative| 0 → 4 (4 = parked offscreen pose). */
        const X = [0, s1, s2, s3, s3];
        /* Normalize the lens to the card, so desktop and phone share the same
           trapezoid. Side poses keep one outer-edge height instead of shrinking
           toward the panel edges. Preserve the original center magnification. */
        const perspective = cardSize.current * 1.8;
        const Z = [perspective * (120 / 1100), 0, 0, 0, 0];
        const SCALE = [1, 0.84, 0.84, 0.84, 0.84];
        const IMG_OPACITY = [1, 0.78, 0.56, 0.34, 0];
        const OPACITY = [1, 1, 1, 1, 0];
        for (let index = 0; index < length; index += 1) {
            const el = covers[index];
            if (!el)
                continue;
            // Spring targets retain their lap for seamless wraparound. Normalize
            // every pose across any number of laps so all six neighbors remain.
            const relative = ((index - f + length / 2) % length + length) % length - length / 2;
            const sign = relative < 0 ? -1 : 1;
            const amount = Math.min(4, Math.abs(relative));
            const lower = Math.floor(amount);
            const frac = amount - lower;
            const lerp = (table) => table[lower] + (table[Math.min(4, lower + 1)] - table[lower]) * frac;
            const x = sign * lerp(X);
            const z = lerp(Z);
            const scale = lerp(SCALE);
            const rotate = -sign * 52 * Math.min(1, amount);
            el.style.transform = `translateX(${x.toFixed(2)}px) perspective(${perspective.toFixed(2)}px) translateZ(${z.toFixed(2)}px) scale3d(${scale.toFixed(4)}, ${scale.toFixed(4)}, ${scale.toFixed(4)}) rotateY(${rotate.toFixed(2)}deg)`;
            el.style.opacity = lerp(OPACITY).toFixed(3);
            el.style.zIndex = String(Math.round(20 - amount));
            el.style.pointerEvents = amount < 3.5 ? 'auto' : 'none';
            el.style.setProperty('--cki-img-opacity', lerp(IMG_OPACITY).toFixed(3));
        }
    };
    const cancelFocusTween = () => {
        window.cancelAnimationFrame(focus.current.raf);
        focus.current.raf = 0;
    };
    /* Batch 64: spring settle. One semi-implicit Euler integrator on the focus
       float; velocity state PERSISTS across re-targets (skill §3 — a reversal
       blends velocity instead of hard-cutting it). `handoff` is the release
       velocity in focus units/s (skill §5); `momentum` picks the under-damped
       spring only when the gesture carried speed (skill §4). */
    const startFocusSpring = (targetIndex, { handoff, momentum = false } = {}) => {
        cancelFocusTween();
        const f = focus.current;
        const length = ordered.length;
        /* Wrap the target to whichever lap is closest to the current float, so a
           step across the first/last boundary scrubs one position, not the whole
           deck backwards. */
        const target = targetIndex + length * Math.round((f.value - targetIndex) / length);
        if ((Math.abs(target - f.value) < 0.0005 && Math.abs(spring.current.v) < 0.001 && !handoff) || reducedMotion()) {
            f.value = target;
            spring.current.v = 0;
            writePoses();
            return;
        }
        const response = momentum ? SPRING_RESPONSE_FLICK : SPRING_RESPONSE;
        const damping = momentum ? SPRING_DAMPING_FLICK : SPRING_DAMPING;
        const omega = (2 * Math.PI) / response;
        const k = omega * omega;
        const c = 2 * damping * omega;
        if (handoff !== undefined)
            spring.current.v = handoff;
        window.__ckiMotion = {
            engine: 'spring', damping, response,
            handoff: handoff ?? null, target, at: performance.now(),
        };
        let last = performance.now();
        const tick = (now) => {
            const dt = Math.min(0.032, Math.max(0.001, (now - last) / 1000));
            last = now;
            const x = f.value;
            const accel = -k * (x - target) - c * spring.current.v;
            spring.current.v += accel * dt;
            f.value = x + spring.current.v * dt;
            writePoses();
            if (Math.abs(f.value - target) < 0.0008 && Math.abs(spring.current.v) < 0.01) {
                f.value = target;
                spring.current.v = 0;
                writePoses();
                f.raf = 0;
            }
            else {
                f.raf = window.requestAnimationFrame(tick);
            }
        };
        f.raf = window.requestAnimationFrame(tick);
    };
    /* Every non-drag change of the active index (keyboard, cover click,
       shuffle/reset, auto-advance, release step) springs focus to it. A release
       that crosses cards hands its momentum through pendingMomentum (batch 64:
       the effect can't see endDrag's locals). */
    const pendingMomentum = useRef(false);
    useEffect(() => {
        if (focus.current.value < 0)
            focus.current.value = activeIndex;
        if (!dragging.current) {
            const momentum = pendingMomentum.current;
            pendingMomentum.current = false;
            startFocusSpring(activeIndex, { momentum });
        }
    }, [activeIndex, shouldReduceMotion]);
    /* Mount: measure the container-query step distances and snap the pose table
       to the fixed album order. Resize updates are handled by the observer. */
    useLayoutEffect(() => {
        measureSteps();
        if (focus.current.value < 0)
            focus.current.value = activeIndex;
        writePoses();
    }, []);
    useEffect(() => {
        const stage = stageRef.current;
        if (!stage)
            return;
        const observer = new ResizeObserver(() => {
            measureSteps();
            writePoses();
        });
        observer.observe(stage);
        /* Cold-load guard (batch 31): the first measurement can land before the
           shell's fonts settle; re-measure and rewrite poses once they're ready
           so the resting layout never reflects a pre-font geometry. */
        let cancelled = false;
        document.fonts?.ready.then(() => {
            if (cancelled)
                return;
            measureSteps();
            writePoses();
        }).catch(() => { });
        return () => { cancelled = true; observer.disconnect(); };
    }, []);
    useEffect(() => cancelFocusTween, []);
    const onPointerDown = (event) => {
        if ((!interactive && !thumbnail) || event.button !== 0)
            return;
        if (idleAutoplay) {
            heldAutoplayPointer.current = event.pointerId;
            pauseAutoplayForInteraction();
        }
        /* The thumbnail sits inside a draggable anchor — preventDefault keeps the
           browser from starting a native link drag (which would pointercancel us)
           without affecting the plain-click navigation path. */
        event.preventDefault();
        /* Interrupting a settle mid-flight normalizes the float to the nearest
           lap around the active index and keeps it as the drag base — no jump
           (skill §3: re-track from the live presentation value). The drag owns
           the motion now, so the spring velocity is zeroed here; pointermove
           re-measures velocity from the pointer itself. */
        cancelFocusTween();
        spring.current.v = 0;
        const f = focus.current;
        const length = ordered.length;
        let value = f.value;
        value = activeIndex + ((((value - activeIndex) % length) + length) % length);
        if (value - activeIndex > length / 2)
            value -= length;
        if (value - activeIndex < -length / 2)
            value += length;
        f.value = value;
        dragStart.current = { x: event.clientX, pointerId: event.pointerId, focusBase: value, lastX: event.clientX, lastT: event.timeStamp, vx: 0 };
        dragging.current = false;
    };
    const onPointerMove = (event) => {
        const start = dragStart.current;
        if (!start || start.pointerId !== event.pointerId)
            return;
        if (!dragging.current && Math.abs(event.clientX - start.x) > DRAG_START_PX) {
            dragging.current = true;
            suppressCoverClick.current = true;
            if (!interactive)
                pauseAutoplayForInteraction();
            event.currentTarget.setPointerCapture(event.pointerId);
        }
        if (!dragging.current)
            return;
        if (!reducedMotion()) {
            /* Batch 32 — multi-card drag: no clamp. focus follows the finger
               continuously across as many positions as the gesture covers; the
               wrapped fractional pose math in writePoses already renders arbitrary
               relative indexes, so covers stream past live. */
            focus.current.value = start.focusBase - (event.clientX - start.x) / steps.current[0];
            writePoses();
        }
        const dt = event.timeStamp - start.lastT;
        if (dt > 0) {
            const v = (event.clientX - start.lastX) / dt;
            start.vx = start.vx * 0.7 + v * 0.3;
            start.lastX = event.clientX;
            start.lastT = event.timeStamp;
        }
    };
    const endDrag = (event, cancelled) => {
        if (idleAutoplay && heldAutoplayPointer.current === event.pointerId) {
            heldAutoplayPointer.current = null;
            autoplayScheduler.current?.restart();
        }
        const start = dragStart.current;
        if (start === null)
            return;
        const velocity = start.vx;
        const didDrag = dragging.current && !cancelled;
        dragStart.current = null;
        dragging.current = false;
        if (event.currentTarget.hasPointerCapture(event.pointerId))
            event.currentTarget.releasePointerCapture(event.pointerId);
        if (didDrag) {
            /* Batch 64 (apple-design §5+§6): pick the target from Apple's momentum
               projection of the release point, then hand the spring the release
               velocity — the settle continues at the finger's exact speed, with a
               slight bounce (damping 0.82) ONLY when the gesture carried momentum.
               A slow drag projects ~0 → nearest integer + critically damped. */
            const length = ordered.length;
            const projectedPx = projectMomentum(velocity);
            const extra = Math.max(-MAX_PROJECT_CARDS, Math.min(MAX_PROJECT_CARDS, -projectedPx / steps.current[0]));
            const target = Math.round(focus.current.value + extra);
            const handoff = (-velocity * 1000) / steps.current[0]; /* focus units/s */
            const momentum = Math.abs(extra) > 0.15 || Math.abs(handoff) > 1.5;
            const nextIndex = ((target % length) + length) % length;
            window.__ckiRelease = {
                projectedPx, extra, handoff, momentum, target, at: performance.now(),
            };
            if (nextIndex !== activeIndex) {
                spring.current.v = handoff; /* carried into the effect's re-target */
                pendingMomentum.current = momentum;
                setActiveId(ordered[nextIndex].id);
            }
            else {
                startFocusSpring(activeIndex, { handoff, momentum });
            }
        }
        else {
            startFocusSpring(activeIndex);
        }
        window.setTimeout(() => { suppressCoverClick.current = false; }, 0);
    };
    const onPointerUp = (event) => endDrag(event, false);
    const onPointerCancel = (event) => endDrag(event, true);
    useEffect(() => {
        if (!idleAutoplay) return;
        /* A press can leave the stage before reaching the drag threshold.
           Route that release through cancellation so no stale drag survives. */
        const releaseOutsideStage = (event) => {
            if (heldAutoplayPointer.current !== event.pointerId || !stageRef.current) return;
            endDrag({ pointerId: event.pointerId, currentTarget: stageRef.current }, true);
        };
        window.addEventListener('pointerup', releaseOutsideStage);
        window.addEventListener('pointercancel', releaseOutsideStage);
        return () => {
            window.removeEventListener('pointerup', releaseOutsideStage);
            window.removeEventListener('pointercancel', releaseOutsideStage);
        };
    }, [idleAutoplay, activeIndex, ordered, shouldReduceMotion]);
    const chooseTheme = (mode) => {
        setTheme(mode);
        setMenuOpen(false);
        shellRef.current?.focus({ preventScroll: true });
    };
    /* After a drag, the trailing click must not bubble into the surrounding
       LinkCard (feed thumbnail) or fire a cover select (interactive views).
       Capturing and killing it here keeps plain clicks navigating as before. */
    const onClickCapture = (event) => {
        if (!suppressCoverClick.current)
            return;
        event.preventDefault();
        event.stopPropagation();
    };
    return (<div ref={shellRef} className={`cki-shell ${compact ? 'cki-compact' : ''} ${thumbnail ? 'cki-thumbnail' : ''} ${shouldReduceMotion ? 'cki-reduced-motion' : ''} cki-theme-${theme}`} tabIndex={keyboardInteractive ? 0 : undefined} onKeyDown={onKeyDown} onClickCapture={onClickCapture} aria-label={keyboardInteractive ? 'Album cover gallery. Use left and right arrow keys to browse.' : undefined}>
          <div className="cki-gallery">
            <div ref={stageRef} className="cki-stage" onPointerDown={onPointerDown} onPointerMove={onPointerMove} onPointerUp={onPointerUp} onPointerCancel={onPointerCancel}>
              <div className="cki-mask" aria-hidden="true"/>
              {ordered.map((cover, index) => {
                const relative = relativeIndex(index, activeIndex, ordered.length);
                const className = `cki-cover ${relative === 0 ? 'is-active' : ''}`;
                /* Batch 31: the artwork starts transparent (placeholder surface
                   shows from the first frame) and fades in on decode. The ref
                   check covers images that were already complete from cache. */
                const markLoaded = (img) => {
                    if (img?.complete && img.naturalWidth > 0)
                        img.style.setProperty('--cki-loaded', '1');
                };
                const setCoverRef = (el) => {
                    coverRefs.current[index] = el;
                    markLoaded(el?.querySelector('img') ?? null);
                };
                const onImgLoad = (event) => {
                    event.currentTarget.style.setProperty('--cki-loaded', '1');
                };
                if (!interactive) {
                    return (
                    /* Feed thumbnail (batch 22): covers select in place instead
                       of navigating — the click is stopped before it reaches the
                       wrapping LinkCard, and taking manual control also pauses
                       the auto-advance, same as a drag. Kept as a plain div
                       (aria-hidden) so no button nests inside the card anchor. */
                    <div key={cover.id} ref={setCoverRef} className={className} aria-hidden="true" onClick={thumbnail ? (event) => {
                            event.preventDefault();
                            event.stopPropagation();
                            if (suppressCoverClick.current)
                                return;
                            pauseAutoplayForInteraction();
                            select(cover.id);
                        } : undefined}>
                      <img src={cover.cover} alt="" draggable={false} onLoad={onImgLoad}/>
                      <span className="cki-cover-caption" aria-hidden="true"><strong>{cover.title}</strong><small>{cover.artist}</small></span>
                    </div>);
                }
                return (<button key={cover.id} ref={setCoverRef} type="button" className={className} data-cover-index={index} data-cover-id={cover.id} aria-current={relative === 0 ? 'true' : undefined} aria-label={cover.title} onClick={(event) => {
                        if (suppressCoverClick.current) {
                            event.preventDefault();
                            return;
                        }
                        select(cover.id);
                    }}>
                    <img src={cover.cover} alt="" draggable={false} onLoad={onImgLoad}/>
                    <span className="cki-cover-caption" aria-hidden="true"><strong>{cover.title}</strong><small>{cover.artist}</small></span>
                  </button>);
            })}
            </div>
          </div>

          {/* The cover carries the visible caption; announce selection without
                adding metadata or controls to the white canvas. */}
          {keyboardInteractive ? (<div className="cki-heading" aria-live={interactive || !autoAdvance ? 'polite' : 'off'}>
              <h2>{active.title}</h2>
              <p>{active.artist}</p>
            </div>) : null}
      {menuOpen && interactive ? (<div ref={menuRef} className="cki-menu" role="group" aria-label="Gallery theme">
          <button type="button" aria-pressed={theme === 'light'} onClick={() => chooseTheme('light')}>Light{theme === 'light' && <Check size={14}/>}</button>
          <button type="button" aria-pressed={theme === 'dark'} onClick={() => chooseTheme('dark')}>Dark{theme === 'dark' && <Check size={14}/>}</button>
        </div>) : null}
    </div>);
}
65% scale