Focus Journal

Focus Journal

An illustration journal with a fixed reading column beside a vertical artwork sequence. Warm paper and ink are the defaults. The Charcoal preview uses the same composition with a dark neutral surface. 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 {FocusJournal} from './components/focus-journal/src/react';

export default function Projects() {
  return <FocusJournal
    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']}
  />;
}

<FocusJournal background="#242321" textColor="#f4f0e8" />

JavaScript

import {mount, defaults} from './components/focus-journal/src/core';
import './components/focus-journal/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 reading column contains the project number, title, caption and destination. Below 700px it moves beneath the artwork. The gallery fills a bounded parent and permits internal overflow if the content is taller. At the defaults, the nominal artwork is 340 × 228px and the focused artwork is 442 × 296.4px where space permits. The vertical stride is 284px. Narrow layouts clamp artwork width within the image column.

The default palette is warm paper (background="#f5f2eb") with ink (textColor="#282722"). For charcoal, set background="#242321" and textColor="#f4f0e8". Surface luminance switches image outlines and elevation automatically. Set background and text together when choosing a custom palette. Header and caption text use the bundled Inter font; the default title uses the system serif. Navigation has 44px targets and a separate selector row on narrow layouts.

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. 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 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.