Scatter Showcase

Scatter Showcase

An ambient image field in two compositions. Open field places outward-moving images behind a centered headline. Night atlas uses diagonal travel and a compact masthead.

React

import { ScatterShowcase } from './scatter-showcase/src/react';

export default function Page() {
  return <div style={{ height: '100svh', minHeight: 480 }}>
    <ScatterShowcase heading="Space to explore" subtitle="A collection of possibilities" />
  </div>;
}

Set sizing="standalone" and stageHeight={900} for an independent section. Fill sizing occupies the parent’s set height, with a 320px minimum. The layout adapts to its own container width.

Vanilla and HTML

import { mount, render } from './scatter-showcase/src/core';
import './scatter-showcase/src/styles.css';

const controller = mount(document.querySelector('#showcase'), {
  variant: 'B', imageCount: 9, cardSize: 200, showCaptions: true,
});
controller.update({ heading: 'Collected places' });
controller.pause();
controller.resume();
// Call when removing the host:
controller.destroy();

// Server output uses the same settings and core:
const html = render({ heading: 'Collected places' }, 'my-showcase');

The HTML download includes styles, bundled artwork, fonts and a no-JavaScript composition. No service or external runtime is required. Supply a distinct ID when rendering multiple static instances. mount creates a unique ID when omitted.

Images and links

images accepts the 12 bundled keys travel-01 through travel-12, or complete HTTPS image addresses. captions and optional links align by image index. Images repeat to reach imageCount; repeated copies are decorative to assistive technology, and repeated links are removed from keyboard order. Missing captions use “Untitled space”. Missing or blank links produce plain images. An empty image list shows an empty state while preserving the headline. Invalid addresses, invalid values and unknown settings throw a TypeError; valid partial input merges manifest defaults. Input arrays are copied.

For a self-contained export, use bundled artwork. External HTTPS images depend on their server and your asset rights. Image crops use object-fit: cover; choose portrait images for the 3:4 frames. The included travel archive contains 12 original AI-generated creative photographs, not verified documentary records. Poolside architecture, a beach umbrella, a traveler, furniture, linen, coastlines, sculptural balconies, citrus, palm shadows, a swimming cove and a seaside hotel share an editorial treatment. The production WebPs are proportional 800 × 1068 derivatives; generation used the 4K tier and returned 2480 × 3312 masters. No source was enlarged. Detailed rights and hashes are in assets/ARTWORK-PROVENANCE.md.

Layout controls

The Composition selector offers Open field and Night atlas. The preset previews also demonstrate tailored image counts and sizes. A uses 20 images at 140px; B uses 9 at 200px with captions. Night atlas keeps a clear masthead beside separated diagonal lanes of photos. Images automatically fit the available lane spacing and count, including rotated edges, hover growth and optional captions. The image size control sets the maximum size. These are editable examples. cardSize is the unscaled frame width; each plane applies depth scaling, with a smaller scale on phones. spread changes Open field extent; Night atlas keeps its fitted lane spacing. Wide spreads intentionally clip edge images.

palette="direction" chooses each composition’s colors. Choose palette="custom" to apply background and textColor. accentColor always controls editorial labels and focus rings. Headline font can use composition defaults, Inter or Noto Serif. Open field defaults to Inter; Night atlas pairs a Noto Serif display headline with Inter labels and body text on warm charcoal. Choose an explicit font or custom palette to change that treatment. Desktop headline sizing is responsive and capped by headingSize; phone sizing uses mobileHeadingSize. B applies its own headline ratio. eyebrow appears in B; A keeps its centered title and subtitle clear. Subtitle scale has a responsive phone minimum. Captions are optional in every direction.

Motion and accessibility

A moves images away from the center and fades them before recycling. B uses evenly spaced diagonal lanes. Hover increases a photograph’s opacity and scale; keyboard focus stops travel and keeps linked media readable. motionSpeed controls travel rate, parallax controls pointer depth, and autoMotion switches ambient travel off. The component pause button is hidden by default. Set showPause={true} to display it, or provide an accessible pause control through pause() / resume(). You can also disable ambient motion.

Reduced-motion preferences show a stable field without pointer response. Offscreen and hidden instances suspend their animation work. Resume continues from its previous point without catch-up. Explicit pauses and the user’s pause-button state survive hide/show; resume() releases the external pause without changing the user’s button choice. Focused image links suspend motion so keyboard activation stays stable. Real links keep native keyboard/touch behavior, and the component never takes over page scrolling. Duplicate images do not repeat their descriptions to screen readers.

The React paused prop controls the external pause. Props also accept className and style. Each instance owns its resources; unmount or destroy() removes listeners, observers and pending animation frames.

Settings

The component inspector and configured downloads use the settings and bounds in component.json. Reset restores those exact defaults. Image count is 4–28, speed 0.2–2, spread 0.6–1.5 and pointer depth 0–1.5. Open field permits intentional overlap at large sizes and dense counts. Night atlas fits photo sizes and lane spacing automatically to keep its images separate.

| Setting | Type | Default | Bounds / choices | | --- | --- | --- | --- | | variant | select | A | A / B | | heading | text | Space to explore | | | subtitle | text | A collection of possibilities | | | eyebrow | text | ARCLEN / SPACES | | | images | string-list | travel-01 through travel-12 | 24 items | | captions | string-list | 12 matching travel descriptions | 24 items | | links | string-list | | 24 items | | imageCount | number | 20 | 4–28 | | cardSize | number | 140 | 80–260 | | spread | number | 1 | 0.6–1.5 | | radius | number | 0 | 0–40 | | opacity | number | 0.72 | 0.2–1 | | showCaptions | boolean | false | | | palette | select | direction | direction / custom | | background | color | #f4f4f4 | | | textColor | color | #171717 | | | accentColor | color | #a34c2b | | | headingSize | number | 120 | 48–160 | | mobileHeadingSize | number | 40 | 24–64 | | subtitleSize | number | 31 | 14–40 | | fontFamily | select | direction | direction / sans / serif | | autoMotion | boolean | true | | | motionSpeed | number | 1 | 0.2–2 | | parallax | number | 0.65 | 0–1.5 | | showPause | boolean | false | | | sizing | select | fill | fill / standalone | | stageHeight | number | 900 | 480–1200 |