Case Study Gallery

Case Study Gallery

A project collection with three compositions: A · Immersive cases, B · Paper journal and C · Studio collection. Each includes the same editable project sequence.

React

import {CaseStudyGallery} from './components/case-study-gallery/src/react';

export default function Portfolio() {
  return <div style={{height: 900}}>
    <CaseStudyGallery
      variant="A"
      heading="Selected work."
      titles={['A different perspective', 'Built for tomorrow']}
      clients={['NORTH', 'COMMON']}
      images={['project-01', 'project-02']}
      links={['https://example.com/north', 'https://example.com/common']}
    />
  </div>;
}

The package uses React 19 and React DOM 19 with no additional runtime dependency. Inter is included under the SIL Open Font License 1.1.

Vanilla and HTML

import {mount, defaults} from './components/case-study-gallery/src/core';
import './components/case-study-gallery/src/styles.css';

const host = document.querySelector<HTMLElement>('#portfolio')!;
const gallery = mount(host, {variant: 'B'});
gallery.update({heading: 'Our latest work', paperBackground: '#f7f4ed'});
gallery.pause();
gallery.resume();
gallery.update({...defaults});
// Before removing the host:
gallery.destroy();

render(settings, id) returns semantic HTML with all projects, titles and destinations. Supply a unique ID for every server-rendered instance. The React adapter supplies its own ID. mount owns the host's children; destroy it before removing the host. Partial updates merge with current settings. Invalid values throw a TypeError before the instance changes. Defaults come from the manifest, and returned arrays are independent copies.

Project content

The optional eyebrow collection label is blank by default, so no label or accent dot appears above the heading or in the footer. Enter text in Tweaks to show the collection label.

Use bundled artwork keys project-01 through project-04, complete HTTPS image URLs without credentials, or raster image data URLs. Empty image lists restore the bundled collection. Up to twelve projects are supported. Companion lists align by position; missing captions use the corresponding built-in content and missing links produce no destination. Empty individual links also omit a project link. Replace sample content with your own project details.

Layout

The default sizing="fill" fills a parent with an explicit height and scrolls its collection internally. sizing="standalone" places the complete collection in native document flow; stageHeight sets its minimum height. Vertical touch and wheel remain native. At a scroll boundary the outer page can continue scrolling.

A uses full-width media over blurred atmosphere, three metadata columns on wide containers and two on narrower containers. A’s media occupies 65% of the viewport height and 45% on phones, preserving its scale on tablets. B uses large serif titles above inset images and a narrow service rail; paperBackground and paperTextColor set its surface. C uses a staggered pair of image plates with compact captions, stacked on phones. Row height is a minimum, so long content can extend a project. titleSize is the small editorial caption size in A; B and C scale that value for their larger project heading. headingSize caps the section heading. gutter, row spacing, image radius and content width apply across layouts.

Motion and access

The heading can drift continuously in A. The in-component pause button is hidden by default; set showPause={true} or enable “Show pause button” in Tweaks to display it. This button pauses the heading and scroll parallax together. movingHeading disables the drift, and parallax={0} disables image travel. Paper journal has a static serif heading. The background follows the nearest project and crossfades over 700ms. Image travel is capped at 30% of the media height to keep custom values bounded. Phone frames use 10% of that travel; B and C on wider containers use 35%. A 10% horizontal overscan and a vertical buffer twice the travel keep image edges outside the visible frame. The top focal point preserves the bundled portrait subjects. There is no continuous JavaScript animation loop; scroll updates coalesce into one frame. Hidden tabs, offscreen sections, manual pause and reduced motion stop visual motion. A user pause survives hide/show and setting updates. Reduced motion leaves the full collection legible. On hover-capable pointers, client names appear over the image. They also appear when a project link receives keyboard focus. Every project destination is a standard named link with visible focus. The entire collection remains readable without JavaScript.

Settings

The settings table is generated from the component manifest.