Coverflow 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 artwork keys or complete HTTPS image URLs. An empty list restores the included collection. Minimum 0 itemsMaximum 12 itemsUp to 2048 characters per item | string-list | ["city-portrait","apricot-iris","sage-hills"] |
titlesImage descriptions Accessible image descriptions, not visible captions. Minimum 0 itemsMaximum 12 itemsUp to 160 characters per item | string-list | ["A woman beside a blue glass shelter in warm afternoon light","An apricot iris with translucent petals","A lone hiker on a sunlit path through sage hills"] |
parallaxPointer parallax | boolean | true |
radiusCorner radius 0–64Step 1 | number | 0 |
cardWidthPortrait width 180–360Step 1 | number | 280 |
cardHeightPortrait height 280–540Step 1 | number | 420 |
spacingDeck spacing 100–260Step 0.1 | number | 173.6 |
backgroundBackground | color | "transparent" |
textColorControl colour | color | "#f4f4f4" |
sizingSizing Options: fill (Fill parent), standalone (Standalone height) | select | "fill" |
stageHeightStandalone minimum height Minimum height in standalone mode. A bounded fill parent scales the deck to fit. 360–1200Step 1 | number | 640 |
Coverflow Gallery
A centred image deck with no visible copy. Use Services Coverflow when you want an editorial section with headings and captions.
import { CoverflowGallery } from './components/coverflow-gallery/src/react';
<CoverflowGallery sizing="standalone" stageHeight={640} />Fill mode takes the parent height. Give its parent a height of at least 260px. Standalone mode uses stageHeight. The deck crops symmetrically at narrow widths, keeping the active image centred.
Set images to bundled keys (city-portrait, apricot-iris, sage-hills) or complete HTTPS URLs. Set titles to matching accessible descriptions. They are not visible captions. Empty lists restore the included collection; shorter descriptions fall back to an image number. Remote images require a host that allows browser requests.
Choose a side image, use the arrow buttons or dots, swipe horizontally, or focus the gallery and use Left, Right, Home and End. Vertical touch scrolling remains available. Reduced motion disables transitions and parallax. Pause and offscreen states suspend movement; manual selection stays available.
The default background is transparent. Set textColor to keep the controls legible on your surface. The Arclen preview supplies matching light and dark colours.
The framework-neutral core exports defaults, resolveSettings, render and mount. The mounted controller supports update, pause, resume and destroy. Unmount before reusing the same host. The shared engine is included in standalone downloads.
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.