Scatter Gallery
Install the component, then paste your configured usage. Your settings are included in the code below.
Pro source comes with Arclen UI Pro. See plans
| Property | Type | Default |
|---|---|---|
imagesImages Minimum 0 itemsMaximum 24 itemsUp to 2048 characters per item | string-list | ["glass-portrait","rose-cosmos","coastal-path","cyan-tram","violet-dancer","silver-reeds","rose-steps","blue-surf"] |
descriptionsImage descriptions Accessible image descriptions. These are not visible captions. Minimum 0 itemsMaximum 24 itemsUp to 140 characters per item | string-list | ["A woman in an ivory shirt under blue glass and warm reflected light","A pink cosmos flower with softly trailing petals against sage","A winding path through green coastal hills above a blue sea","A pale yellow tram crossing a cool glass city","A dancer in a lilac studio with gently moving fabric","Silver reeds backlit over an emerald lake","Rose stucco steps in ivory sunlight and blue shadow","Turquoise surf curling over pale golden sand"] |
linksImage links Minimum 0 itemsMaximum 24 itemsUp to 2048 characters per item | string-list | [] |
imageCountImage count 4–28Step 1 | number | 20 |
cardSizeImage size 80–260Step 1 | number | 140 |
spreadOpen field spread 0.6–1.5Step 0.05 | number | 1 |
radiusImage corners 0–40Step 1 | number | 0 |
opacityImage opacity 0.2–1Step 0.05 | number | 0.72 |
backgroundBackground | color | "transparent" |
textColorControl colour | color | "#767676" |
accentColorFocus colour | color | "#767676" |
autoMotionAmbient motion | boolean | true |
motionSpeedTravel speed 0.2–2Step 0.1 | number | 1 |
parallaxPointer depth 0–1.5Step 0.05 | number | 0.65 |
showPauseShow pause button | boolean | true |
sizingSizing Options: fill (Fill parent), standalone (Standalone height) | select | "fill" |
stageHeightStandalone height 480–1200Step 1 | number | 640 |
Scatter Gallery
An image-only field of photographs that travel outward through depth. Use it in a bounded container, or select standalone sizing for a fixed-height section.
Content
Eight original Light in Motion photographs are included. Supply bundled keys or complete HTTPS URLs through Images. Image descriptions become alt text and link labels; they never appear as captions. Optional links make the original images keyboard reachable. Repeated visual copies are hidden from the accessible tree. An empty image list produces an empty field.
Interaction
Ambient motion, speed, image count, card size, spread and pointer depth are adjustable. Hover emphasizes a photo. Keyboard focus pauses travel and brings a linked photo into view. The pause control is visible by default; when hiding it, provide a host pause control or disable ambient motion.
Accessibility and lifecycle
Reduced motion displays a stable field without pointer parallax. Animation stops offscreen, in hidden tabs, on focus or when paused. Update resets the field. Destroy removes observers, event listeners and animation frames. Static HTML contains positioned photographs before JavaScript starts.
Related block
Scatter Showcase remains the separate editorial block, with its heading, subtitle and authored travel imagery.
The preview runs the component’s own JavaScript. It respects reduced motion and pauses when off screen. The HTML bundle includes a poster fallback.
Every setting in this panel comes from the component manifest. Preview size, pause and replay stay in the inspector.