Interaction

Detail autoplays; the gallery runs on hover. Click a side sleeve to center it. Hover the center sleeve to peek at its record; click it or the spin button to pull the record out. Click again or Escape to return it.

States

Logical canvas 640 × 420 with 12 covers. Height fraction 0.62; aspect 1; spread 0.58; stack 0.5; fan 6°; turn 22°; depth 0.5; 3 neighbours per side; radius 14 px.

Timing

Snap and extraction response basis 650 ms, using separately calibrated analytical springs: slight overshoot for snapping/extraction and a faster critical return. Preserve the current velocity. At this setting, 90% travel takes about 448 ms for switching, 310 ms for extraction and 272 ms for return. Counterclockwise record speed 33 rpm (198°/s); autoplay interval 4s.

Enter and exit

Hover reveals a narrow record rim without moving the fan. Playback exposes about half the record while the fan moves left smoothly. The label spins at the configured rpm beneath stable groove lighting; autoplay waits while a record is out. Arrow keys, Home / End, navigation buttons and the draggable ruler browse covers. Horizontal drags snap with momentum. Mouse wheel over the rail browses covers; vertical touch gestures keep native page scrolling.

Repeated input and interruption

Switching retracts the old record while the fan returns continuously; title and artist fade completely around the midpoint before the incoming caption slides in. Rapid actions retarget the current position and velocity without queuing. Toolbar pause freezes snapping, extraction, spin and autoplay age; Play resumes. Hover, keyboard focus and dragging hold autoplay. Wrap at the ends. Current album, record angle, drag and preview speed remain transient.

Reduced motion

Disable autoplay, spin and hover peeking. Click and keyboard still navigate and extract records; changes settle instantly.

Album settings

Vinyl true; autoplay true; album accent true; fixed accent #5227ff; background #f1f1f1. Neighbour dimming and soft shadows use fixed renderer defaults.

Cover content

Twelve original fictional TuneShape sleeves.

Default configuration

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

{
  "schemaVersion": 2,
  "recipeId": "album-rail",
  "durationMs": 650,
  "delayMs": 0,
  "easing": [
    0,
    0,
    1,
    1
  ],
  "offsetX": 0,
  "offsetY": 0,
  "scale": 1,
  "loop": true,
  "interruption": "retarget",
  "tracks": [],
  "album": {
    "aspect": 1,
    "size": 0.62,
    "spread": 0.58,
    "stack": 0.5,
    "fan": 6,
    "turn": 22,
    "depth": 0.5,
    "visible": 3,
    "radius": 14,
    "rpm": 33,
    "interval": 4,
    "vinyl": true,
    "autoplay": true,
    "albumAccent": true,
    "accentColor": "#5227ff",
    "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.