Interaction

Click to select. Hover or Tab to another item to show the neutral hook without changing selection. Arrow keys and Home / End move focus; Enter / Space select.

States

Group label “TuneShape” (blank hides it); 7 items: Controls / Navigation / Containers / Text / Images / Indicators / Backgrounds. Initially “Controls”. Minimum row height 32px; type 14px.

Timing

Hook response basis 360 ms, with an analytical critically damped spring retaining current position and velocity. Neutral-rail visibility response is capped at 200 ms. This controls spring response rather than an exact settling deadline.

Enter and exit

The #fc4c01 rail runs from list top to the selected row center. Below selection, the neutral rail extends from the selected row; above selection, only its hook is shown, avoiding overlap. Dashed rails; light theme. Row centers are remeasured after text wraps.

Repeated input and interruption

Rapid changes retarget the current pose. Leaving both pointer and focus fades the neutral rail while retaining selection. Pause, background and inactive previews freeze the clock and resume in place. Play demonstrates one finite out-and-back. Content and appearance edits update immediately. Live selection, hover, focus and observation speed are not serialized.

Reduced motion

Selection and focus rails settle instantly, with timed demonstrations disabled. Click and keyboard interaction remain available.

Default configuration

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

{
  "schemaVersion": 2,
  "recipeId": "hook-sidebar",
  "durationMs": 360,
  "delayMs": 0,
  "easing": [
    0,
    0,
    1,
    1
  ],
  "offsetX": 0,
  "offsetY": 0,
  "scale": 1,
  "loop": false,
  "interruption": "retarget",
  "tracks": [],
  "hookSidebar": {
    "label": "TuneShape",
    "items": [
      "Controls",
      "Navigation",
      "Containers",
      "Text",
      "Images",
      "Indicators",
      "Backgrounds"
    ],
    "initialIndex": 0,
    "rowHeight": 32,
    "fontSize": 14,
    "accentColor": "#fc4c01",
    "dashed": true,
    "theme": "light"
  }
}

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.