Interaction
Click or use arrow keys and Space to select Silver, Gold or Platinum. Selecting the current option does not replay. Hover does not switch. The toolbar demonstrates Silver → Gold → Platinum → Silver, with pause and resume preserving progress. 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
[data-part="glider"] / x: 0% → 100%; [data-part="finish0"] / opacity: 1 → 0; [data-part="finish1"] / opacity: 0 → 1; [data-part="finish2"] / opacity: 0 → 0; [data-part="label0"] / color: #303640 → #68717d; [data-part="label1"] / color: #68717d → #303640; [data-part="label2"] / color: #68717d → #68717d; [data-part="root"] / x: 0 → 0; [data-part="root"] / y: 0 → 0; [data-part="root"] / scale: 1 → 1.
Timing
Glider duration 500 ms; trigger delay 0 ms; Spring; bounce 0.24. Duration controls pacing, not an exact settling time. Finish crossfade 400 ms and label colors 300 ms, both with ease-in-out.
Enter and exit
Move the glider to the selected segment while metallic finish layers crossfade and labels change color. Retain the selected finish after completion. Selecting the current option does not replay; selection never loops automatically.
Repeated input and interruption
Use native radio inputs with unique names and IDs for each preview. Selection and focus are transient state and are excluded from JSON. Rapid changes stop old controllers and retarget from current displayed values to the latest selection without queuing. The toolbar pauses and resumes the current clocks.
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": "glass-radio",
"durationMs": 500,
"delayMs": 0,
"easing": [
0.37,
1.95,
0.66,
0.56
],
"offsetX": 0,
"offsetY": 0,
"scale": 1,
"loop": false,
"interruption": "retarget",
"tracks": [
{
"part": "glider",
"property": "x",
"values": [
"0%",
"100%"
],
"times": [
0,
1
],
"start": 0,
"span": 1
},
{
"part": "finish0",
"property": "opacity",
"values": [
1,
0
],
"times": [
0,
1
],
"start": 0,
"span": 0.8
},
{
"part": "finish1",
"property": "opacity",
"values": [
0,
1
],
"times": [
0,
1
],
"start": 0,
"span": 0.8
},
{
"part": "finish2",
"property": "opacity",
"values": [
0,
0
],
"times": [
0,
1
],
"start": 0,
"span": 0.8
},
{
"part": "label0",
"property": "color",
"values": [
"#303640",
"#68717d"
],
"times": [
0,
1
],
"start": 0,
"span": 0.6
},
{
"part": "label1",
"property": "color",
"values": [
"#68717d",
"#303640"
],
"times": [
0,
1
],
"start": 0,
"span": 0.6
},
{
"part": "label2",
"property": "color",
"values": [
"#68717d",
"#68717d"
],
"times": [
0,
1
],
"start": 0,
"span": 0.6
}
],
"glass": {
"theme": "light",
"motion": "spring",
"bounce": 0.24
}
}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: Uiverse.io · chase2k25. Third-party examples retain their own license and attribution; all current effect renderers are public; the full editor is maintained separately.