Interaction

Click to expand. Scroll, drag vertically or use arrow keys. Click an option or press Enter to confirm; Escape cancels, Home/End navigate to the first/last choice. Clicking outside confirms.

States

A single row expands to 280px wide with 48px rows, 24px corners and 16px text. Every row stays in one straight column.

Timing

Opening and snapping share an analytic spring; closing eases in and out over the same response window: 460 ms, bounce 0.12. Demo delay 0 ms. Wheel input snaps after 140ms of inactivity; drag release projects from velocity.

Enter and exit

The center remains crisp; distant rows use approximately 2.4px blur and 22% opacity. The list wraps and snaps after release.

Repeated input and interruption

Repeated input retargets the current motion. Manual input takes over from gallery demos. Leaving and blur smoothly close the panel, then stop. Re-entering during closing opens from the current pose. Offscreen and background states stop immediately. Live choices stay transient; inspector defaults are saved.

Reduced motion

Automatic demos and inertial animations are disabled. Selection settles immediately; pointer, wheel, touch and keyboard controls remain.

Sample coffee choices

Geisha — Panamanian Geisha is known for delicate floral, jasmine and peach-like aromas.

https://varieties.worldcoffeeresearch.org/varieties/geisha-panama

Bourbon — A foundational Arabica variety with very good quality potential at high altitude.

https://varieties.worldcoffeeresearch.org/varieties/bourbon

SL28 — A well-known African variety, commonly grown in Kenya, with exceptional high-altitude quality potential.

https://varieties.worldcoffeeresearch.org/varieties/sl28

Typica — A historically important Arabica variety; a useful companion to Bourbon for comparison.

https://varieties.worldcoffeeresearch.org/varieties/typica

Pacamara — A large-beaned Pacas × Maragogipe cross, primarily grown in El Salvador, with exceptional quality potential.

https://varieties.worldcoffeeresearch.org/varieties/pacamara

These are variety suggestions; actual flavor depends on origin, processing, roasting and the lot. Sources checked 2026-10-22.

Default configuration

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

{
  "schemaVersion": 2,
  "recipeId": "coffee-selector",
  "durationMs": 460,
  "delayMs": 0,
  "easing": [
    0.22,
    1,
    0.36,
    1
  ],
  "offsetX": 0,
  "offsetY": 0,
  "scale": 1,
  "loop": false,
  "interruption": "retarget",
  "tracks": [],
  "coffeeSelector": {
    "items": [
      "Geisha",
      "Bourbon",
      "SL28",
      "Typica",
      "Pacamara"
    ],
    "selectedIndex": 0,
    "width": 280,
    "rowHeight": 48,
    "radius": 24,
    "fontSize": 16,
    "blur": 2.4,
    "fade": 0.22,
    "bounce": 0.12,
    "disabled": false
  }
}

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: Independent implementation based on a user recording. Third-party examples retain their own license and attribution; all current effect renderers are public; the full editor is maintained separately.