Focus 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 |
|---|---|---|
imagesArtwork Bundled illustration-01 through illustration-06 keys or complete HTTPS image URLs. Empty restores the included collection. Minimum 0 itemsMaximum 12 itemsUp to 2048 characters per item | string-list | ["illustration-01","illustration-02","illustration-03","illustration-04","illustration-05","illustration-06"] |
titlesImage descriptions Minimum 0 itemsMaximum 12 itemsUp to 160 characters per item | string-list | ["A figure in blue crosses a diagonal band of sunlight in a limestone passage.","A walker above an emerald sea, pale cliffs and sunlit coastal grass.","A small walker crosses blush sand dunes beneath a lavender dawn sky.","Fine seed heads catch golden rim light against a softly blurred sage field.","A cyclist in an apricot jacket crosses a cyan city plaza with gentle horizontal motion.","A small walker in golden light crosses rolling sage-green hills."] |
imageWidthNominal image width 200–440Step 1 | number | 340 |
imageHeightNominal image height 140–320Step 1 | number | 228 |
gapItem gap 20–120Step 1 | number | 56 |
focusScaleFocused scale 1.05–1.5Step 0.05 | number | 1.3 |
inactiveScaleNeighbor scale 0.4–0.95Step 0.05 | number | 0.7 |
inactiveOpacityNeighbor opacity 0.15–0.8Step 0.05 | number | 0.4 |
radiusCorner radius 0–64Step 1 | number | 6 |
heightScroll viewport height 360–900Step 1 | number | 640 |
backgroundBackground | color | "transparent" |
textColorText color | color | "#f4f4f4" |
Focus Gallery
A scroll-focused image rail. Supply images and matching image descriptions in titles. The component has no editorial heading, CTA or story column. Its outer canvas is transparent; set --focus-gallery-background when a local surface is needed.
Use arrow keys, Home/End, native touch scrolling or mouse drag to change focus. A bubbling focuschange CustomEvent reports detail.index. Pause/resume and reduced motion stop animated settling. Destroy removes listeners and observers.
Focus Journal and Focus Showcase use this package’s selection engine with their own composition and caption adapters. Showcase retains its discrete hover scale and Journal its continuous focus scale.
Still image collection
Bundled still images use original Arclen Light in Motion photography generated through Codex. The available tool did not expose a model name or quality tier. Exports use centre cover crops in the existing delivery dimensions and WebP quality 82. Some large derivatives are interpolated from smaller masters; these are not native 4K files. Per-file source dimensions, crop choices and export details are in assets/light-in-motion.json. Retained prompts and attached-reference records remain in the private generation archive. Exact historical prompts are unavailable for three reused pilot images. Public image keys are retained for compatibility. Generated scenes are creative artwork rather than verified documentary locations.
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.