Services Coverflow

Services Coverflow

An editorial service collection with a spatial portrait deck. Choose A · Quiet practice for an editorial split or C · Field index for a fanned deck and numbered service index.

React

Copy the component folder into your project. React 19 and React DOM 19 are peer requirements; the component has no additional runtime dependencies. Inter and Noto Serif are bundled under the SIL Open Font License 1.1; complete notices are included in assets/fonts.

import {ServicesCoverflow} from './components/services-coverflow/src/react';

export default function Services() {
  return <ServicesCoverflow
    variant="A"
    heading="A considered way of living"
    ctaLabel="Meet the studio"
    ctaUrl="https://example.com/studio"
    titles={['Material studies', 'Living landscapes', 'Quiet interiors']}
    links={['https://example.com/materials', 'https://example.com/gardens', 'https://example.com/interiors']}
  />;
}

JavaScript

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

const host = document.querySelector<HTMLElement>('#services')!;
const collection = mount(host, {variant: 'C'});
collection.update({radius: 18, showNumbers: false});
collection.pause();
collection.resume();
collection.update({...defaults});
// Before removing the host:
collection.destroy();

render(settings, id) supplies initial HTML for a server template. mount owns the host's children. Give each server-rendered instance a unique ID. The React wrapper provides its own instance ID. update merges partial values with current settings; passing defaults resets all settings. Invalid types, unknown keys, unsafe links and values outside declared bounds throw TypeError before changing the instance.

Content and layout

The three bundled artwork keys are architecture-01, architecture-02 and architecture-03. You can also supply complete HTTPS image URLs without credentials. Lists support up to twelve items. Empty lists restore the built-in content. Missing companion titles, descriptions, categories and links use the corresponding built-in entry, so a shorter list remains usable. Use empty individual links to omit a card destination. Replace the example.com destinations with your own public pages.

The default sizing="fill" fills its parent and scrolls internally when the content is taller. Vertical touch can reach the outer page when the inner surface has no overflow or reaches its boundary. Give the parent a definite height. Use sizing="standalone" and stageHeight for a section with an explicit minimum height. The component measures its own container. Narrow layouts place the introduction above the cards; edge cards crop intentionally while the active card and controls stay visible. Portrait width and height control the deck geometry. Quiet practice uses a 400px copy column, a 48px gap and a 320px minimum deck; its default wrap point follows the available inner width. The active portrait width clamps to its deck on small containers. Quiet practice tags show up to two lines, with the full text retained in the DOM. Long card captions scroll within their reserved area so their project link remains reachable, then return vertical scrolling to the containing page at their boundary. Field index uses a fanned arrangement. Typography controls affect the introduction and captions; each direction retains its own hierarchy. Very long copy increases the section height. Quiet practice keeps its default navigation arrangement for up to eight services. With nine or more, arrows sit beside the wrapping selectors to keep each target separate.

Navigation and motion

Previous/next, the service selectors, left/right arrows and Home/End change the active service. Drag horizontally or tap a neighboring card. Vertical touch movement remains available to the page. Each active card has a separate destination link. Selection wraps at either end. Focus is visible; the current service and position are announced through a polite live region.

Motion is manual. Quiet practice uses a 500ms damped deck transition. Its title, body and link enter in order after 600ms, 700ms and 800ms delays, each over 400ms; outgoing copy fades in 120ms. The image enters its active crop in 120ms and returns over 700ms. Native browser animations retarget from the current pose with a bounded new duration during reversal and cancel pending caption entries. CSS transitions provide a functional fallback when the Web Animations API is unavailable. Field index retains its 620ms card transition. There is no autoplay, repeating timer or JavaScript animation-frame loop. pause, offscreen observation and reduced motion remove transitions and pointer parallax; selection remains available. resume restores motion without changing the selection. The React paused prop has the same effect. Missing browser observation APIs leave navigation functional. Failed custom images switch once to the first bundled artwork while preserving the card's dimensions. The static server markup shows the first service and working destination links; interactive selection requires JavaScript.

Settings

The settings table is generated from the component manifest.