Flow Wall

Flow Wall

Flow Wall arranges an image collection into independently moving columns on a receding plane. Six shape modes share the same field. Twelve editorial portraits ship with the package. Motion uses native CSS animation.

React

import { FlowWall } from './flow-wall/src/react';

export function Gallery() {
  return (
    <div style={{ height: 720 }}>
      <FlowWall shape="rounded" tileSize={160} speed={40} />
    </div>
  );
}

Use imageUrls and matching imageLabels for your own collection. Empty URLs use the included artwork. Custom URLs accept HTTPS or safe relative paths; no remote images are requested by default. Image fit, focal position and opacity are configurable. Images are creative artwork.

Shape and layout

tileSize sets the base width; density scales it relative to ten. Columns combine varied image heights and independent upward loops. gap sets separation, perspective the projection distance, depth the plane tilt and tilt the diagonal angle. tileRadius affects rounded tiles. Mixed combines rounded, arch, pill and circle tiles. Circle tiles have equal width and height before projection. Other modes retain varied heights.

sizing="fill" fills a parent with a defined height. Use sizing="fixed" and height for a self-contained stage. The semantic collection name, surfaces, control colours, control offset, image crop and animation speed are adjustable.

Vanilla and HTML

import { mount } from './flow-wall/src/core';
import './flow-wall/src/styles.css';

const host = document.querySelector<HTMLElement>('#gallery');
if (host) {
  const wall = mount(host, {
    sizing: 'fixed',
    height: 640,
    imageUrls: ['images/ceramic.webp', 'images/flower.webp'],
    imageLabels: ['Cream ceramic sculpture', 'A single calla lily'],
    imagePositionY: 45,
    pauseOnHover: true,
  });
  wall.update({ shape: 'circle' });
  wall.pause();
  wall.resume();
  // Call when removing the component:
  wall.destroy();
}

Setting updates rebuild the field and retain focus on the Pause/Play button when it was focused. Choose the silhouette through the shape setting in props or the tweaks panel. Pause/resume preserves animation phase. resolveSettings rejects unknown keys, unsafe image URLs and values outside the manifest bounds. The generated settings table is the complete API.

Accessibility and motion

Choose Image shape in the tweaks panel, or pass the shape prop in your application. Rounded is the default; all six shapes remain available. The stage has a keyboard- and touch-accessible Pause/Play button. The named Pause/Play button stops movement; pauseOnHover adds an optional pointer pause. Set motion={false} for a static field. With controls={false}, use the React paused prop or the lifecycle handle to control decorative motion.

Reduced motion disables continuous animation. Hidden and offscreen states pause it. Missing IntersectionObserver uses scroll/resize geometry checks; missing ResizeObserver uses resize events. Without JavaScript the static images and semantic image list remain, and inactive controls stay hidden. Repeated decorative tiles are hidden from assistive technology; custom descriptions are announced once.

The core exports defaults, resolveSettings, render and mount. React exports FlowWall and Component, with className, style and paused alongside settings. Each instance owns its listeners and observers; destroy removes its DOM and owned resources. No animation-frame loop or timer runs in this component.