Wipe Slider Hero

Wipe Slider Hero

A full-width project hero with directional image wipes. A · Open frame uses an expansive image, large top title and a quiet central control. B · Studio journal pairs a paper column with a framed photograph. C · After hours pairs a full-bleed photograph with a large lower title and compact metadata.

React

Copy this component folder into your application. React and React DOM 19 are peer requirements. Inter is bundled under the SIL Open Font License 1.1. No additional runtime dependencies are required.

import {WipeSliderHero} from './components/wipe-slider-hero/src/react';

export default function Projects() {
  return <div style={{height: '100svh', minHeight: 680}}>
    <WipeSliderHero
      variant="A"
      titles={['Dune', 'Cove', 'Sola']}
      links={['https://example.com/dune', 'https://example.com/cove', 'https://example.com/sola']}
      showLink
      radius={20}
    />
  </div>;
}

The named export and Component are the same React component. Ordinary flat settings, className, style and paused are supported. Initial HTML is rendered on the server; browser lifecycle belongs to the same framework-neutral core.

JavaScript

import {mount, defaults, render} from './components/wipe-slider-hero/src/core';
import './components/wipe-slider-hero/src/styles.css';

const host = document.querySelector<HTMLElement>('#projects')!;
const slider = mount(host, {variant: 'C', showLink: true});
slider.update({overlay: 0.45, titleSize: 96});
slider.pause();
slider.resume();
slider.update({...defaults});
// Before removing the host:
slider.destroy();

// For a server template, assign a unique ID to each instance:
const html = render({variant: 'A'}, 'homepage-projects');

mount owns the host's children. update merges partial changes with the current configuration. Invalid types, unknown settings, unsafe URLs and out-of-range values throw TypeError before changing the live instance. Reset by passing defaults. Destroy is safe to call more than once. After destruction, controller operations are harmless.

Content and layout

The three original coastal architecture images depict fictional projects: Dune, Cove and Sola. Landscape masters are delivered as 2400 × 1797 WebP images, preserving detail through the incoming zoom. The bundled image keys are architecture-01, architecture-02 and architecture-03. Complete HTTPS image URLs without credentials are also supported. Supply up to twelve images. Titles, categories, descriptions, years, URLs and image focal points align by index. Empty images restores the three bundled artworks. Other empty lists stay empty: a missing title becomes Untitled project; other missing metadata and links are omitted. A focal point is two percentages, for example 50% 44%. Replace the example.com project destinations before publishing.

Default sizing fills a parent with a definite height. The hero has a 580px minimum to keep the composition legible. Use sizing="standalone" with stageHeight for a standalone section. A deliberately retains large title typography on narrow screens, while metadata stacks underneath. B moves its paper introduction above the photograph on narrow screens. C keeps its lower title, while the category and year sit above the description. Long titles wrap; short project names and concise descriptions work best for the cinematic layout. Text stays selectable and project links stay separate from selection controls.

Title and body size, gutters, radius, image shade, colors, focal points, control visibility and motion are configurable. fontFamily="direction" uses Inter for A/C and the system serif for B; choose another font option to apply it across all directions. B uses warm paper and ink when the surface colors remain at their default values. Supplying custom background or text colors replaces those direction defaults. The accent colors focus outlines and the project-link arrow. B uses its text color for this accent while the setting remains at its default. showLink reveals the project destination independently from metadata. showControls hides the arrow controls; keyboard navigation and swipes remain available.

Navigation and motion

Use previous/next buttons, left/right arrows, Home/End, or a horizontal swipe. Selection wraps. Vertical touch movement continues to the page. Keyboard handling is scoped to this component and does not intercept form fields. Current project changes use a polite live region. Focus remains visible.

A uses a 600ms shared image boundary with an accelerating curve, a 550ms text crossfade and an 1100ms image fade and zoom settle. The outgoing and incoming image masks meet at the same boundary. B adds a restrained 12px text rise over 480ms; C uses 22px over 650ms. Wipe timing, image settling, incoming zoom, axis and easing are separate controls. A reversal during a wipe reverses the image masks, image settling and text animation from their current positions. The current glass caption resizes to the project title. A third destination waits as one pending selection, then follows the active wipe; repeated requests replace that pending selection. There are never more than two image layers during a transition.

Autoplay is off by default. When enabled, the interval starts again after a project selection; hover and keyboard focus suspend automatic advance. A visible Pause/Play button provides persistent user control. pause, page hiding, actual offscreen state and reduced motion stop owned timers and animations and settle the current requested project. Explicit pause remains effective after visibility changes and configuration updates. Resume starts a fresh interval without catch-up. There is no animation-frame loop. Manual navigation remains usable while paused and with reduced motion, using immediate changes.

The no-JavaScript HTML displays the first image, title, metadata and optional project link. Interactive selection needs JavaScript. Failed custom images fall back once to the first bundled artwork without changing the composition. Without browser animation support, navigation is immediate. Missing observation support leaves manual navigation available; document visibility and explicit pause still apply.

Settings

The settings table is generated from the component manifest.

Project progress

Open frame includes a thin segmented progress track by default. Each segment represents one project. Completed and selected projects fill with the text color; later projects retain a muted track. The fill follows the wipe duration when selecting a project. It shows project position and does not count down autoplay time. Set showProgress={false} or disable “Show progress bar” in Tweaks to hide it. Studio journal and After hours omit it, and a single-project collection has no track. The track uses the existing gutter and text color settings. It is decorative; the live status continues to announce the selected project. Paused and reduced-motion navigation updates it immediately.