Component Guide
Cyclorama
Slides are mapped onto the inner surface of a cylinder that surrounds the camera. Navigating reads as turning your head inside a 360° room rather than spinning an object in front of you. Everything below is live — drag, scroll or hover any example on this page.
Getting started
1 — Place it
Drag Cyclorama onto the canvas from the assets panel. Give it a full-width frame and a height between 480 and 720px; it fills whatever box you give it.
2 — Add your panels
Open the Panels array in the properties panel. Each entry takes an image and an optional caption. Eight to sixteen panels works best — the wall is built from however many you add.
3 — Pick a preset
Preset is the first control. It sets radius, perspective, panel height, horizon, indicator and motion in one move. Start there, then tune.
4 — Tune anything
Every style control is optional. Leave it unset to follow the preset, or set it to override just that value. Presets never lock a control.
Six presets
The same cylinder, re-optioned. Radius, perspective, panel height and horizon change what the room feels like from the inside. A preset sets starting values — every control stays editable afterwards.
Gallery Room
The default. A seamless wall at a comfortable distance, slow drift, hairline progress bar.
Observation Deck
Wide radius and tall panels with a slight downward tilt. Gentle falloff, dot indicator.
Museum
Floating panels instead of a seamless wall. Drift off, snap on, numeric index.
Vertigo
Tight radius, shallow perspective, depth blur and a fast drift. The walls lean in.
Kiosk
Small rounded panels at a wide horizon. Drift off, snap on — built for choosing.
Cathedral
Very tall panels tilted down, so the wall rises past the top of the frame.
Two layouts
Seamless Wall derives each panel’s width from the radius so neighbours meet edge to edge — a continuous room. Floating Panels uses a fixed panel width instead, leaving air between them.
Seamless Wall
Panel width is computed from radius and panel count. No seams.
Floating Panels
Fixed panel width, set with the Panel Width control. Gaps scale with radius.
Four indicators
Positional feedback, or none at all. Dots are clickable — they jog the room to that panel by the shortest path.
Progress Bar
A hairline bar across the base, filling once per full turn.
Dots
One dot per panel, active dot scaled up. Click to jump.
Index
Monospace count of the panel you are facing.
None
No chrome at all — just the room.
Seven cursor styles
Hover any tile below to see its cursor. The native cursor is hidden inside the component, and the custom one hides again over the control panel. Touch devices never see it.
Label Pill
Glass pill carrying your Cursor Label text.
Dot
A 12px dot. Minimal, stays out of the picture.
Ring
Hollow ring with a centre dot — a viewfinder.
Compass
Live bearing readout of the direction you face.
Arrows
Chevrons either side of the label, no plate.
Crosshair
Four ticks with an open centre.
Invert
A circle that inverts whatever is under it.
The in-canvas control panel
Turn Overlay on to give visitors a live control panel. It is a curated demo surface, not a copy of the properties panel: seven rows, no scrolling. Each row group can be switched off per instance, and Box Position moves the panel to any corner.
Overlay enabled
Open the panel, upload your own image, switch preset, drag Radius, Field of View or Tilt, toggle Auto Drift.
Every control
Content
Preset
Custom, or one of the six rooms. Sets starting values for everything below.
Panels
Array of image + caption. Add as many as you like; the wall is built from the count.
Captions
Show or hide the caption strip on each panel.
Caption Font
Full typography control for the caption text.
Geometry
Layout
Seamless Wall or Floating Panels.
Radius
400–2600px. How far the wall stands from you. The core inside-out feel.
Perspective
300–2000px. Lens length. Clamped to 90% of radius so the camera stays inside the room.
Panel Height
160–1200px. Taller than the frame makes the wall rise past the edges.
Panel Width
160–900px. Floating Panels only.
Seam Gap
0–12°. Seamless Wall only — opens a reveal between panels.
Field Of View
40–88°. How wide the room reads. Capped short of 90° where panels would cross the camera plane.
Tilt
−30 to 30°. Look up or down.
Corner
0–40px panel corner radius.
Depth
Falloff
0–1. How much panels darken toward the horizon.
Depth Blur
0–12px blur at the horizon. Off by default.
Vignette
Fades the room edges into the background colour.
Motion
Auto Drift
Slow continuous rotation. Pauses while you hover the artwork, not the panel.
Drift
0–30°/s drift speed.
Snap
Settle to the nearest panel after a throw. Ignored while Auto Drift is on.
Drag Speed
0.04–0.6 degrees of rotation per pixel dragged.
Wheel
Let the wheel and trackpad pan the room.
Chrome
Indicator
None, Dots, Progress Bar or Index.
Room / Frame / Text
Background, panel border and caption colours.
Custom Cursor
On by default. Seven styles.
Cursor Label
Text for the Label Pill and Arrows styles.
Overlay
The in-canvas control panel, plus Box Position and one switch per row group.
Interaction, access and performance
Drag
Grab the wall — the room follows your pointer, so dragging right brings the panel on your left into view. Release throws it with momentum.
Wheel and trackpad
Both axes pan the room. The component captures the gesture, so the page does not scroll underneath.
Keyboard
The component is focusable. Arrow keys step exactly one panel in either direction.
Reduced motion
Auto Drift and snap easing are disabled for visitors who ask for reduced motion; the room jumps instead of gliding.
Off-screen
The animation loop stops entirely when the component scrolls out of view, and an idle instance does not touch the DOM at all.
Touch
Drag works; the custom cursor is suppressed, since there is no pointer to follow.
Cyclorama — component guide
Inside-out cylinder gallery