Image Columns

Image Columns

Original Arclen architecture artwork in continuously moving strips. The package includes upright columns, diagonal ribbons and a framed diptych. The upright composition is the default.

Installation

Download the React or HTML package from this component's menu. For React, keep src, assets and component.json together; the wrapper imports the standalone stylesheet. The core has no runtime dependency. The wrapper uses your application's React installation and does not request a font.

React

import { ImageColumns } from './image-columns/src/react';

export default function Scene() {
  return <ImageColumns sizing="standalone" height={720} />;
}

The default sizing="fill" fills a parent with an explicit height. Use sizing="standalone" to apply the bounded height setting. className and style apply to the outer wrapper. The only interactive element inside the scene is its pause button.

Included compositions

All three compositions use the same artwork sequence. Switching layout retains your geometry and surface values. The configured examples in the component menu include their complete settings.

- **Night columns:** five fixed 180 × 260 tiles, 16px gaps and corners, alternating vertical travel and a dark wash. Narrow containers crop the outer strips while retaining tile dimensions. - **Diagonal passage:** three horizontal ribbons tilted by 13 degrees, broad 360 × 220 tiles and a lighter wash. Use ribbonAngle to change their tilt. - **Gallery diptych:** two 300 × 390 columns with 36px gutters, frame rules and slower vertical travel. Tile width shrinks in narrow containers, and height follows the configured aspect ratio.

This complete React example configures diagonal ribbons:

import { ImageColumns } from './image-columns/src/react';

export default function Passage() {
  return (
    <ImageColumns
      sizing="standalone"
      height={720}
      layout="ribbons"
      columnCount={3}
      tileWidth={360}
      tileHeight={220}
      gap={24}
      ribbonAngle={-13}
      speed={44}
      radius={8}
      imageOpacity={1}
      brightness={1}
      tint={14}
      tintColor="#151716"
      edgeFade={12}
      backgroundColor="#151716"
    />
  );
}

Artwork and surfaces

images accepts 1–24 entries: bundled artwork keys, HTTPS image URLs you control, or PNG/JPEG/WebP/GIF/AVIF base64 data URLs. Bundled keys are architecture-01 through architecture-08. Each entry is limited to two million characters; HTTPS URLs are limited to 2,048. Raster data URLs are useful for self-contained custom artwork. SVG, insecure HTTP, credentials in URLs and arbitrary local paths are rejected.

Bundled artwork is embedded in standalone delivery builds. Defaults need no external image requests. Your own HTTPS URLs make normal browser image requests, and you are responsible for their availability and permission to use them.

imageFit="cover" crops artwork to fill each tile. imageFit="contain" shows the complete image with the tile surface around it. imagePosition selects the crop anchor. Strip opacity, brightness, tint, stage color and edge fade can be adjusted separately. vignette controls radial shading in upright columns; ribbons and diptych use their own edge treatment. Colors accept six- or eight-digit hex and transparent.

The artwork is one accessible image group. label names the collection; bundled images also supply their specific architectural descriptions. Repeated visual tiles stay hidden from assistive technology to avoid duplicate announcements. Use a content gallery when individual images need captions or navigation.

Diptych captions

caption, captionDetail, captionFont, captionSize and captionColor apply to the framed diptych. Fonts use local system sans, serif or monospace families. These captions are decorative collection labels; use label for the accessible description and regular page content for essential information.

Empty captions are omitted. Long captions truncate within the frame. The second caption is hidden on screens up to 480px wide. On those screens, caption text is one pixel smaller, with an 8px minimum.

Motion and controls

A 44px pause button supports pointer, touch, Enter and Space. It appears when browser motion enhancement mounts. paused and controller pause() stop at the current position; resume() continues from that position. React props may be updated normally. Removing a prop restores its manifest default. Core update() merges a partial settings object into the current settings.

Motion pauses when the document is hidden or the component leaves the viewport. Reduced motion displays still artwork and hides the motion button. If Web Animations, media queries or IntersectionObserver are unavailable, the component keeps a still composition. A missing ResizeObserver uses the window resize event.

Server-rendered and no-JavaScript output is populated artwork with no nonfunctional pause button. Tile geometry reserves space while images load. Artwork, composition or strip-count changes rebuild the strips; other settings retain their tile elements.

The first strip uses the configured speed. Successive upright columns run more slowly; ribbons and diptych use their own independent ratios. Forward means up in vertical layouts and left in ribbons. Reverse means down or right. Resize preserves travel displacement and adds repeated tiles as needed for coverage. No hover behavior resets or retimes the scene.

Vanilla

Create a host in your HTML:

<div id="artwork"></div>

Mount the component from your application module:

import { mount } from './image-columns/src/core';
import './image-columns/src/styles.css';

const host = document.querySelector<HTMLElement>('#artwork');
if (!host) throw new Error('Missing artwork host');

const scene = mount(host, { sizing: 'standalone', height: 720, speed: 40 });

// Later, when your application needs these actions:
// scene.pause();
// scene.resume();
// scene.update({ tint: 30 });
// scene.destroy();

The framework-neutral core also exports defaults, resolveSettings and render. Invalid numbers, unknown settings, unsupported images and blank accessible labels are rejected. Instances own their host independently. destroy() cancels animations, removes listeners, disconnects observers and removes the rendered scene.

Artwork rights

The bundled images are original Arclen artwork. Generation identity, image byte hashes and applicable notices are included in PROVENANCE.md, NOTICE.md and the artwork records under assets. No bundled font or third-party animation engine is included.