Focus Filmstrip

Focus Filmstrip

A horizontal artwork sequence with one image in focus and editorial captions underneath. Scroll, swipe or drag along the filmstrip to bring another project into view. 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 {FocusFilmstrip} from './components/focus-filmstrip/src/react';

export default function Projects() {
  return <FocusFilmstrip
    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-filmstrip/src/core';
import './components/focus-filmstrip/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.

The filmstrip uses horizontal native scrolling and places its title and caption below the media. The gallery fills a bounded parent and permits internal overflow if the content is taller. At the defaults, the nominal artwork is 300 × 200px and the focused artwork is 390 × 260px where space permits. Narrow layouts clamp artwork width and stack the caption groups. Vertical swipes scroll the reading area when it overflows, then chain to the page at its boundary. When the whole reading area fits, vertical swipes reach the page directly without changing the selected artwork.

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. Long text may increase the caption area. 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. Left/right 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 scale and opacity interpolate directly with actual scroll position. Browser smooth scrolling handles intentional navigation. There are no separate image or caption animation timelines.

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.