Focus Showcase

Focus Showcase

A vertical artwork stack with one image in focus. Desktop titles flank the focused image; narrow layouts place the active caption beneath it. Titles, captions and navigation follow the image nearest the center.

React

Copy this complete component directory into your project. React 19 and React DOM 19 are peer requirements. No additional runtime packages are needed. Inter is bundled under the SIL Open Font License 1.1; complete notices are in assets/fonts.

import {FocusShowcase} from './components/focus-showcase/src/react';

export default function Projects() {
  return <FocusShowcase
    titles={['Paper Garden', 'The Sunroom', 'Blue Days']}
    captions={['An oversized world in bloom', 'A quiet corner in colour', 'A small pause beside the pool']}
    images={['illustration-01', 'illustration-02', 'illustration-03']}
    links={['https://example.com/paper-garden', 'https://example.com/the-sunroom', 'https://example.com/blue-days']}
  />;
}

JavaScript

import {mount, defaults} from './components/focus-showcase/src/core';
import './components/focus-showcase/src/styles.css';

const host = document.querySelector<HTMLElement>('#projects')!;
const gallery = mount(host, {radius: 6});
gallery.update({gap: 80, titleSize: 48});
gallery.pause();
gallery.resume();
gallery.update({...defaults});
// Before removing the host:
gallery.destroy();

render(settings, id) returns server HTML with the first focused state populated. mount owns its host’s children. Use a unique ID per server-rendered instance; the React adapter handles IDs automatically. update merges partial values, and passing defaults restores all manifest defaults. Invalid types, unknown keys, unsafe URLs and values outside bounds throw TypeError before modifying the instance.

Artwork and layout

Bundled artwork keys are illustration-01 through illustration-06. Custom artwork and destinations must use complete HTTPS URLs without credentials. Lists support twelve items. Empty lists restore local defaults. Short companion lists use the corresponding built-in entries. An empty individual link hides the project link. Replace example.com destinations before publishing.

Below 768px, items shrink to their image’s natural width at the configured height, capped by imageWidth. The active caption can enlarge that item. Each picture is 32px narrower than its item. Wider layouts retain the configured nominal image width. At the defaults, the desktop vertical stride is 250px; focused media is 390 × 260px on a sufficiently wide screen.

The gallery fills a bounded parent. Its first item has a deliberate offset below the scroll viewport midpoint. Desktop captions stay at the midpoint; narrow screens place the active caption below its image. Navigation and a small destination link appear on hover or keyboard focus.

imageWidth and imageHeight are nominal dimensions before scaling. gap separates nominal item boxes. focusScale, inactiveScale and inactiveOpacity control the focused and neighboring states. height sets the scroll viewport with proportional adjustments on narrow layouts. Below 1024px, the inline title and subtitle each display at most two lines, with overflow clipped, so long copy cannot displace the selected project. Full titles remain in the artwork’s accessible name and live announcement; full subtitle text remains in the markup. Edge cropping of neighboring artwork is deliberate.

Navigation and motion

Scroll or swipe over the artwork; mouse dragging also changes the sequence. Previous/next and project selectors navigate to an image. Up/down arrows, Page Up/Page Down and Home/End work while focus is inside the gallery. Destination links retain normal keyboard activation. Navigation stops at the first and last project. A polite live region announces the active title, and keyboard focus is visible.

Image states ease over 400ms and respond to mouse hover at 1.05×. Captions enter over 300ms: desktop text approaches from opposite 20px horizontal offsets, while narrow captions rise 10px. Native animations restart from the visible pose and cancel during updates, pause or destruction.

Motion is manual and event driven, with no autoplay or idle animation loop. One animation-frame callback batches each scroll update. Pause, offscreen observation and reduced motion stop smooth navigation and make subsequent button navigation immediate. Direct manual scrolling remains usable; resume keeps the current position. The React paused prop applies the same policy. Destroy removes owned listeners, observers and pending callbacks. Failed custom images switch once to bundled artwork. Without JavaScript the first image and project link remain available, and native scrolling displays the sequence.

Settings

The settings table is generated from the component manifest.