Interaction

Detail auto-starts; hover the catalog preview to play. Click a card to open the arc; click the centered card again to enlarge it, then click again to restore. Click blank space, All cards or Escape to return to the ring.

States

Initial view ring; 18 cards repeat six original artworks in whole sets. The ring is centered; the arc apex sits at 42% of the canvas height.

Timing

View changes and snapping take 700 ms with cubic ease-out. Ring speed 8°/s; arc autoplay interval 3.5s. Observation speed affects the runtime clock only.

Enter and exit

Card hover and keyboard focus hold automatic motion. Drag the ring or drag the arc sideways; release to snap to a card. Buttons and arrow keys navigate. Vertical scroll stays with the page; horizontal or Shift-wheel navigates.

Repeated input and interruption

Rapid actions retarget the current position without queuing. Pause freezes rotation, flips and transitions; Play resumes. Repeat automatic motion. Current view, selection, drag and observation speed are not serialized.

Reduced motion

Disable automatic spin, autoplay and flips; manual view changes and navigation settle instantly.

Reel settings

Count 18; spin 8; interval 3.5; arc 1; aspect 0.8; radius 0.07; gap 0.18; autoplay true; tilt true; flip wave true; pause on hover true; back #171717; background #F1F1F1.

Default configuration

These values come from the maintained default configuration. Editor drafts and exported changes can differ.

{
  "schemaVersion": 2,
  "recipeId": "orbit-reel",
  "durationMs": 700,
  "delayMs": 0,
  "easing": [
    0,
    0,
    1,
    1
  ],
  "offsetX": 0,
  "offsetY": 0,
  "scale": 1,
  "loop": true,
  "interruption": "retarget",
  "tracks": [],
  "orbit": {
    "defaultView": "ring",
    "count": 18,
    "spin": 8,
    "interval": 3.5,
    "arc": 1,
    "aspect": 0.8,
    "radius": 0.07,
    "gap": 0.18,
    "autoplay": true,
    "tilt": true,
    "flipWave": true,
    "pauseOnHover": true,
    "accentColor": "#171717",
    "backgroundColor": "#F1F1F1"
  }
}

Source code and reuse

The corresponding GitHub example contains the public renderer, default configuration and runnable entry point. Read the interaction notes and preserve the included third-party and font notices when reusing it. The complete website editor is maintained separately.

Using it in your own project

Open the editor to run the actual preview and compare changes. This document does not run a separate imitation. Recheck content, input, focus and layout after integrating an export.

Catalog provenance label: Original implementation. Third-party examples retain their own license and attribution; all current effect renderers are public; the full editor is maintained separately.