Depth Showcase

Depth Showcase

A collection of projects arranged in real CSS perspective. The Vertical composition travels toward the viewer; hovering separates a card, turns it toward the camera and opens space between its neighbors. Diagonal offers a second composition.

React

import { DepthShowcase } from './depth-showcase/src/react';

export function Portfolio() {
  return <DepthShowcase layout="A" height={800} accent="#3454f1" />;
}

Import the package's styles once. The component renders its initial content on the server. className, style and paused apply to the wrapper or lifecycle; all manifest settings are ordinary flat props.

<DepthShowcase
  layout="B"
  heading="Our latest work"
  showHeading
  background="#f2f0e9"
  autoplay={false}
  images={["https://example.com/project-one.webp", "https://example.com/project-two.webp"]}
  titles={["Project one", "Project two"]}
  captions={["Architecture and interiors", "Culture and publishing"]}
  links={["https://example.com/one", "https://example.com/two"]}
/>

Vanilla and HTML

import { mount, render } from './depth-showcase/src/core';
import './depth-showcase/src/styles.css';

const controller = mount(document.querySelector('#projects'), {
  layout: 'B',
  autoplay: true,
  radius: 12,
});
controller.pause();
controller.update({ accent: '#235c48' });
controller.resume();
// Before removing the host:
controller.destroy();

render(settings, id) returns server HTML without browser access. mount owns its host's children. Exported defaults and resolveSettings use component.json. Partial settings merge with current values on update. Invalid types, unknown keys, out-of-range numbers, invalid color values and unsafe URLs throw before the displayed content changes. Destroy is idempotent. A destroyed controller ignores subsequent calls.

Content and layout

The six default images are hero frames from the bundled Asterfold, Oryn, Caldrin, Strataen, Avenrow and Odd Practice page walkthroughs. Use hero-asterfold, hero-oryn, hero-caldrin, hero-strataen, hero-avenrow and hero-odd-practice, or complete HTTPS image URLs. Earlier Nera, Signal Jam and Tor hero keys remain available as still images. The earlier template-* showcase keys and project-01 through project-08 remain supported. An empty image list restores the default set. Titles, descriptions and destinations align by index; empty destinations disable navigation.

hoverVideo enables one muted, inline page-scroll video on the lifted tile. The six default hero keys select their matching recorded page tours automatically. Oryn uses the existing Site Studio hero recording, with its forward-and-reverse sequence pre-encoded at 30 fps and a matching opening still. Asterfold, Caldrin, Strataen and Avenrow retain 30 fps recordings; Odd Practice retains its 20 fps browser frame sequence and captured scroll effects. Its older master pauses continuous CSS animation. The four-second static lead-in is omitted, so recorded page scrolling begins on hover. Earlier hero keys without a recorded tour remain still. Set videos to a list of bundled scroll-* keys or complete HTTPS video URLs to supply your own clips. Empty entries keep individual tiles still; an empty list restores automatic matching for bundled heroes only. Custom images never inherit unrelated default videos. Clips are requested only when selected. The hero stays visible until playback starts and remains the fallback if loading or autoplay fails. Leaving the tile unloads the clip. Pause, hidden tabs, offscreen suspension and reduced motion stop playback. Keyboard selections also support playback; no extra media controls, progress bars or counters are added.

The default artwork uses Arclen template hero captures. A landscape image matching the configured card aspect ratio gives the most legible result. All layouts use object-fit: cover; Diagonal fills its folder outline without an inset. The default card ratio matches the bundled 1200 × 750 stills and videos, preserving their full width. For custom media, match cardWidth and cardHeight to its aspect ratio to avoid cropping. The built-in keys select website artwork for both compositions. Custom image URLs are used unchanged.

- **Vertical:** eighteen bounded planes converge toward the upper center. Card width intentionally continues beyond narrow container edges near the camera; this preserves the central perspective rather than shrinking it to a phone list. Vertical spacing, depth, perspective and tilt affect this stream directly. - **Diagonal:** oblique cards carry tab silhouettes. Depth controls recession; the camera yaw and tab shape are part of this composition. Near folders become almost edge-on as the procession recedes across the stage. Selection unfolds the folder at its own depth and horizontal position.

The default sizing="fill" fills a parent with a definite height. Use sizing="standalone" with the height setting when the parent has no fixed height; the standalone canvas defaults to 900 px. Choose Vertical or Diagonal from Composition in the Tweaks panel. Both keep the canvas free of bottom project captions and navigation controls. Heading, subtitle, typeface, title size, palette, corner radius, card aspect, travel speed, hover lift, active scale and motion options are configurable.

Input and motion

Scroll to scrub through the stream without preventing page scrolling. Grab and drag horizontally or swipe to move the collection. Arrow keys select projects; Home/End select the first/last. Position announcements are available to screen readers; no visible counters or progress markers are rendered. Enter opens the selected project when the canvas is focused. Touch users can tap a card to open its link. Hovering with a fine pointer brakes travel and exposes the round View affordance. A click opens that project's destination; dragging suppresses the click.

On first mount, Vertical broadens from a narrow stream and Diagonal brings a distant folder procession forward. Settings updates, resizing and resuming do not replay the entrance. Autoplay, wheel input and drag release share continuous travel; changing the hovered project lets the outgoing card return while the incoming card unfolds. Vertical unfolds near its position in the stream. Diagonal fits the selected folder inside the canvas and keeps it above neighboring cards until its return completes. The frosted glass View affordance trails the pointer and uses the configured background and text colors.

Space while the canvas is focused stops or resumes owned animation. The inspector also has its own preview pause button. Programmatic pause() is also preserved across updates, hidden tabs and offscreen suspension. resume() releases only the programmatic pause. A pause chosen using the keyboard remains in force until the user resumes. Travel restarts when autoplay is enabled and neither pause is active. Movement pauses when the document is hidden or the canvas leaves the viewport, and resumes without elapsed-time catch-up. Reduced motion skips the entrance, stops automatic travel and makes manual selections immediate. All listeners, observers, animation jobs and pointer captures are instance-owned and released by destroy().

Without JavaScript, the initial perspective composition and an accessible list of project links remain available. Failed custom images display an artwork-unavailable surface; the title and destination remain available. The package's poster is a browser capture of its default composition.

Settings

The inspector and generated settings table use component.json, including exact bounds and defaults. Numeric values must be finite; integer controls accept integers only. Colors accept six- or eight-digit hex values or transparent. Content lists accept up to twelve items. No browser or framework runtime is required by the core beyond standard DOM APIs.