Interaction

Hover or drag horizontally to magnify. Click a slice to open; click it again to close. Arrow keys and Home / End browse; Escape closes. Swipe an open image to switch. Vertical scrolling stays with the page.

States

Logical canvas 640 × 400 with 8 original artworks. Rest width 44 px; height fraction 0.5; gap 10 px; radius 12 px. Magnification 2.4×; influence 200 px; open height fraction 0.72; aspect 1. Neighbouring bars compress to fit.

Timing

Spring response basis 800 ms; elasticity 0.35. Autoplay sweep; sweep 1.4 bars/s; cycle interval 4 s; repeat continuously.

Enter and exit

Bars grow from their centre. Opening blurs other bars by 2.5 px and dims them by 45%; hovering sharpens them. Detail autoplays; gallery runs on hover. Pointer hover and keyboard focus pause autoplay.

Repeated input and interruption

Retarget from current geometry and velocity. Pause preserves spring positions, sweep position and cycle time; Play resumes. With autoplay off, hover and click remain available. Preview speed, selected image, focus and spring velocity are transient.

Reduced motion

Disable autoplay and hover magnification; click and keyboard navigation switch immediately to the target state.

Version notes

Current version: magnification and open-size edits demonstrate the corresponding interaction.

Default configuration

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

{
  "schemaVersion": 2,
  "recipeId": "elastic-reel",
  "durationMs": 800,
  "delayMs": 0,
  "easing": [
    0,
    0,
    1,
    1
  ],
  "offsetX": 0,
  "offsetY": 0,
  "scale": 1,
  "loop": true,
  "interruption": "retarget",
  "tracks": [],
  "reel": {
    "barWidth": 44,
    "barHeight": 0.5,
    "gap": 10,
    "radius": 12,
    "magnify": 2.4,
    "influence": 200,
    "openSize": 0.72,
    "openAspect": 1,
    "elasticity": 0.35,
    "align": "center",
    "autoplay": "sweep",
    "speed": 1.4,
    "interval": 4
  }
}

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.