Image Reveal Intro

Image Reveal Intro

A small image opens into a full product photograph. The aperture grows a centered square into a wide window, then fills the stage. Faint white guide lines track the opening at 20% opacity. The default composition has no text or boxed controls. Its sequence holds the small cycling image for 2.5 seconds, widens to a fixed 720×390px window that clips within narrow stages, then expands with a long settling tail over 6.2 seconds.

React

Use the catalogue installation command, then import the installed entry. The entry imports its own CSS and local images.

import { ImageRevealIntro } from './components/image-reveal-intro';

export default function Opening() {
  return (
    <div style={{ height: 640 }}>
      <ImageRevealIntro
        title="See where it leads."
        description="A field guide to our next chapter."
        cropX={60}
        duration={4200}
        hold={1800}
        showGuides
        showContent
        showReplay
        showSkip
      />
    </div>
  );
}

All manifest settings are props. className, style and paused are also supported. paused freezes the current active playback time. Unrelated React renders preserve the current opening. Text and image changes apply through the controller. Changing a motion or frame setting restarts the sequence so its effect is visible.

HTML

Download the configured HTML package. Keep component.html, component.js, component.css and its assets together and serve them through a web server, including from a subdirectory. The supplied HTML contains meaningful static content; with JavaScript disabled the final image remains visible, together with text when showContent is enabled. To embed the package on another page:

<link rel="stylesheet" href="./component.css">
<div data-arclen-ui="image-reveal-intro"
  style="height:640px"
  data-settings='{"title":"Room to explore.","hold":1400,"duration":4000,"showReplay":true,"showSkip":true,"showContent":true}'>
  <section aria-label="Room to explore"><h2>Room to explore.</h2></section>
</div>
<script src="./component.js" defer></script>

Vanilla

In a bundler that handles TypeScript and image imports:

import { mount } from './components/image-reveal-intro/src/core';
import './components/image-reveal-intro/src/styles.css';

const host = document.querySelector<HTMLElement>('#opening');
if (!host) throw new Error('Missing opening host');
const opening = mount(host, { sizing: 'fixed', height: 640 });
opening.pause();
opening.resume();
opening.update({ title: 'A wider perspective.' });
// Updating with identical settings replays the opening.
opening.update({ title: 'A wider perspective.' });
// Restore the host’s previous children and release owned resources.
opening.destroy();

The core exports defaults, resolveSettings, render and mount. update merges a partial configuration with the current one; use update(defaults) to restore defaults. pause, resume and destroy are idempotent. Each mount owns only its host children, listeners, observers, load timeout and active animation frame. Multiple instances are independent.

Sizing and content

Enable showContent to display the optional eyebrow, headline and description. showReplay and showSkip independently enable native buttons. lineOpacity controls the guide strength, with a default of 0.2; lineColor controls their color. guideInset controls the space around the opening image; the four lines track the expanding frame and leave the stage with it. backdropOpacity controls previous-image brightness outside Aperture’s moving guide rectangle, with a default of 0.03. Inside that rectangle the enlarged previous image stays at full brightness, visible in the border around the current image. This moving matte keeps the rest of the stage almost black. The finished hero has no backdrop layer or guides. revealWidth and revealHeight control Aperture’s intermediate window independently of container size. A phone stage clips the wider image during widening, then the window contracts horizontally while expanding vertically to the final stage bounds. The component clips its own image without adding document overflow.

Fill mode occupies a parent with a defined height and never adds horizontal margins. Fixed mode uses height instead. The component is at least 240px tall. fontFamily selects sans serif, serif or monospace system fonts without loading an external font. titleSize sets the headline’s upper size; the receiving width scales it down for compact compositions. Typography, insets and image geometry respond to the receiving container. The headline wraps; use shorter copy for compact cards. Large custom copy may need a taller parent.

firstImage and secondImage appear during the opening; heroImage is the final image and remains the same throughout expansion. cropX and cropY choose its focal position. Images accept bundled paths, relative paths, HTTPS, browser blob URLs and base64 PNG/JPEG/WebP/GIF. Empty images leave a tonal background. Invalid executable, protocol-relative and SVG data URLs are rejected. Supply artwork you have permission to use. Remote custom images make a network request; defaults are bundled.

Motion and accessibility

duration includes the small-frame hold. The effective hold is capped at duration minus 600ms. The active playback clock freezes in hidden tabs, offscreen, or during an explicit pause. Initial media loading waits at most 2.2 seconds. A timeout reveals useful final content; failed or timed-out hero images reveal the fallback headline even when optional hero text is disabled. Late loads cannot restart an expired opening. Replay starts from the opening frame; Skip intro immediately shows the final composition. A resize retains current progress and recalculates geometry for the new container.

Reduced motion shows the final hero immediately, including after replay and when the preference changes mid-sequence. Static server output also shows that final state. Replay and Skip intro are native keyboard buttons with visible focus. Skip returns focus to Replay when it completes, or to the region when Replay is hidden. Decorative guide lines are hidden from assistive technology. Configured text is available to assistive technology when showContent is enabled. The region and final image retain the configured hero description when text is hidden.

The package includes three AI-generated blue headphone studio images and no fonts or runtime libraries. Artwork origin and byte hashes are in PROVENANCE.md; product rights are in NOTICE.md. The catalogue generates the settings table from the authoritative manifest.