Brand Story Hero

Brand Story Hero

A scroll-driven brand introduction that moves from an opening photograph through a portrait collection, an isolated product moment and a closing statement, then releases into three photographic principles.

Choose **Photo story** for a centered photographic wall or **Editorial chapters** for asymmetric type and an unframed product beside the copy. Both share the continuous portrait wall; Editorial stacks its headline above the photograph on narrow containers.

import { BrandStoryHero } from './brand-story-hero/src/react';

export default function Story() {
  return <div style={{ height: '100svh' }}>
    <BrandStoryHero variant="photo" brand="RIME" />
  </div>;
}

The React export also has a Component alias. It accepts settings directly plus className, style and paused.

Container and scrolling

fill uses the height of its parent and scrolls inside that region. Give the parent an explicit height. The region can receive keyboard focus, then native arrow keys and Page Down move the story. It does not intercept wheel or touch events.

standalone uses the document's native scrolling. stageHeight caps the sticky stage height to the viewport. In animated mode, storyLength controls the narrative's length in stage heights; its default is 6.5. productRotation controls the animated turn only; static and reduced-motion output ignores rotation and story length. The photographic principles follow the pinned track in normal flow, so the component continues beyond those 6.5 stage heights. Put additional page sections before or after it normally.

import { mount } from './brand-story-hero/src/core';
import './brand-story-hero/src/styles.css';

const story = mount(document.querySelector('#story')!, {
  sizing: 'standalone',
  variant: 'editorial',
  heading: 'A softer start.',
});
story.update({ closingTitle: 'Small rituals. Lasting care.' });
// Call story.destroy() when the host is removed.

The HTML delivery includes its styles and assets. The vanilla delivery exposes the same core controller. update merges partial settings. pause freezes scroll-linked transforms and the closing letter reveal; resume synchronizes the scene with the current scroll position and continues the letters. destroy releases owned listeners, observers and pending animation frames and clears the owned host.

Images and text

images accepts up to 15 bundled names, explicit HTTPS URLs, or raster base64 data URLs. The thirteen bundled photos use names beginning with rime-, including rime-hero, rime-window-portrait, rime-cream-ritual, rime-water, rime-jar-on-ice, rime-out-the-door, rime-skin-detail, rime-hands, rime-cabinet, rime-mirror-grey, rime-water-jar, rime-morning and rime-still-life. Local art needs no network request. Supply imageAlts in matching order. The first image owns the opening and center tile; the remaining images populate the wall without duplicating the opening image. With only one configured image, the wall reuses that image.

The photographic principles reuse the next three configured images and display the benefits and benefitDescriptions lists as bottom overlays. All text is escaped. Empty ctaUrl hides the action; configured actions require HTTPS. List settings are copied so callers cannot mutate defaults. Invalid settings, unknown keys, off-step numbers, invalid colours and unsupported URL schemes throw TypeError before changing the mounted story.

The RIME demonstration includes campaign photography and a transparent jar packshot. Product media, descriptions, brand and narrative copy are configurable through Content settings. Photo story keeps product copy available to assistive technology during the animated product chapter; static output displays it beside the product. Noto Serif and Inter are bundled under the SIL Open Font License.

Accessibility and motion

The initial server-rendered and no-JavaScript document includes the complete narrative. With reduced motion, content appears as a static sequence and the action remains available. The preference is observed live. Decorative portrait repetitions are hidden from assistive technology. The scene follows native scrolling and has no progress counters or motion buttons. Its closing statement reveals letter by letter with a brief fade and blur once the closing chapter is reached. Scrolling back before that chapter resets the letters. The scroll-linked scene renders only after scroll, resize or a relevant lifecycle change. Native document hiding, offscreen state and explicit pause cancel pending scene work and pause the letter animation. Reduced motion shows the complete closing statement immediately.

The controls below are generated from the component manifest.