Interaction
Browse the motion catalog categories in a single level. Hover shows the nearest name; click directly selects a category without adding rows. Arrow keys and Home/End move focus within the same level. Leaving smoothly retracts marks and fades the label while retaining selection. The detail toolbar plays both sides from initial to final and back once; loading effects follow their loop setting. Pause holds the current display and resumes from the same progress.
States
Single-level categories. Maximum navigation reach 38 px. Overall size 100% applies at rest and while expanded, including marks, spacing and the label.
Timing
Demonstration and retraction duration 400 ms; trigger delay 0 ms; cubic-bezier(0.4, 0, 0.2, 1). Hover expansion uses a fixed-response analytical critically damped spring. Duration and easing configure demonstration tracks and leave retraction.
Enter and exit
Browse the motion catalog categories in a single level. Hover shows the nearest name; click directly selects a category without adding rows. Arrow keys and Home/End move focus within the same level. Leaving smoothly retracts marks and fades the label while retaining selection.
Repeated input and interruption
Pointer, focus and selection are transient and excluded from JSON. The reach setting scales line lengths; overall size scales the entire single-level navigation at rest and while expanded. One continuous field clock preserves velocity when the pointer changes direction; leaving returns from the current frame using the configured duration and curve.
Reduced motion
Follow prefers-reduced-motion: skip delay, loops and animation and show the target state immediately. Preview speed is observation state and is never saved in the configuration.
Default configuration
These values come from the maintained default configuration. Editor drafts and exported changes can differ.
{
"schemaVersion": 2,
"recipeId": "mini-sidebar",
"durationMs": 400,
"delayMs": 0,
"easing": [
0.4,
0,
0.2,
1
],
"offsetX": 0,
"offsetY": 0,
"scale": 1,
"loop": false,
"interruption": "retarget",
"tracks": [
{
"part": "item0",
"property": "y",
"values": [
-10.5,
-18
],
"times": [
0,
1
],
"start": 0,
"span": 1
},
{
"part": "item1",
"property": "y",
"values": [
-3.5,
-6
],
"times": [
0,
1
],
"start": 0,
"span": 1
},
{
"part": "item2",
"property": "y",
"values": [
3.5,
6
],
"times": [
0,
1
],
"start": 0,
"span": 1
},
{
"part": "item3",
"property": "y",
"values": [
10.5,
18
],
"times": [
0,
1
],
"start": 0,
"span": 1
},
{
"part": "line0",
"property": "width",
"values": [
8,
13.457852349679698
],
"times": [
0,
1
],
"start": 0,
"span": 1
},
{
"part": "line0",
"property": "opacity",
"values": [
0.2,
0.34554272932479196
],
"times": [
0,
1
],
"start": 0,
"span": 1
},
{
"part": "line0",
"property": "scaleY",
"values": [
0.76,
0.8182170917299167
],
"times": [
0,
1
],
"start": 0,
"span": 1
},
{
"part": "line1",
"property": "width",
"values": [
18,
31.061863099396838
],
"times": [
0,
1
],
"start": 0,
"span": 1
},
{
"part": "line1",
"property": "opacity",
"values": [
0.96,
0.96
],
"times": [
0,
1
],
"start": 0,
"span": 1
},
{
"part": "line1",
"property": "scaleY",
"values": [
0.76,
0.9689898095903494
],
"times": [
0,
1
],
"start": 0,
"span": 1
},
{
"part": "line2",
"property": "width",
"values": [
8,
38
],
"times": [
0,
1
],
"start": 0,
"span": 1
},
{
"part": "line2",
"property": "opacity",
"values": [
0.2,
1
],
"times": [
0,
1
],
"start": 0,
"span": 1
},
{
"part": "line2",
"property": "scaleY",
"values": [
0.76,
1.08
],
"times": [
0,
1
],
"start": 0,
"span": 1
},
{
"part": "line3",
"property": "width",
"values": [
8,
27.59279464909526
],
"times": [
0,
1
],
"start": 0,
"span": 1
},
{
"part": "line3",
"property": "opacity",
"values": [
0.2,
0.7224745239758736
],
"times": [
0,
1
],
"start": 0,
"span": 1
},
{
"part": "line3",
"property": "scaleY",
"values": [
0.76,
0.9689898095903494
],
"times": [
0,
1
],
"start": 0,
"span": 1
},
{
"part": "panel",
"property": "x",
"values": [
-8,
0
],
"times": [
0,
1
],
"start": 0,
"span": 0.8461538461538461
},
{
"part": "panel",
"property": "y",
"values": [
6,
6
],
"times": [
0,
1
],
"start": 0,
"span": 1
},
{
"part": "panel",
"property": "scale",
"values": [
0.96,
1
],
"times": [
0,
1
],
"start": 0,
"span": 0.8461538461538461
},
{
"part": "panel",
"property": "opacity",
"values": [
0,
1
],
"times": [
0,
1
],
"start": 0,
"span": 0.5384615384615384
}
]
}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: Ariadne. Third-party examples retain their own license and attribution; all current effect renderers are public; the full editor is maintained separately.