Wheel Time Picker

• index.html: the demo page and the markup to copy

• assets/style.css: component styles, plain CSS custom properties for colours

• assets/script.js: readable, commented source with an onReady guard

• Three columns as 3D cylinders: each row is rotated on the X axis with perspective and fades as it turns away from the centre

• Drag, flick, mouse wheel and trackpad; a flick coasts at the speed it was thrown and lands on a whole value

• Hours and minutes loop with no seam; AM/PM rubber-bands at its two ends

• A tap on a row above or below the band rolls it to the centre

• The readout rolls only the characters that changed, in the direction their wheel turned

• 12 or 24 hour clock and 1, 5 or 15 minute steps, read live from data attributes

• A native <input type="time"> carries the value into your form and is the whole picker when JavaScript is off

• Roles: group around the columns, spinbutton per column, status for announcements

1. Add to your <head>:

In your downloadThe working code for this step, in index.html.

The one-line has-js script hides the native fallback field before the first paint, so the page never shows it for a frame. The component script adds the class too, so it is optional if you can live with that frame.

2. Add before the closing </body> tag:

In your downloadThe working code for this step, in index.html.

3. Copy the component markup from index.html into your page:

In your downloadThe working code for this step, in index.html.

The script looks for every [data-wheel-time] on the page and builds the columns inside its [data-wtp-wheels]. Only that container is required. The readout, the native input, the status line and the two buttons are each optional: leave one out and the picker simply does without it. The .wtp-* classes are styling only; the script reads the data- hooks.

The toolbar strip and the grey ground in index.html are demo furniture, not part of the component; leave them behind.

data-format and data-minute-step are watched: set either at any time and the columns rebuild around the current time.

Each column is in the tab order and behaves as a spinbutton:

• Roles: the columns sit in a role="group" labelled by the field label; each column is role="spinbutton" with aria-valuemin, aria-valuemax, aria-valuenow and aria-valuetext ("7 o'clock", "30 minutes", "PM"). The rows themselves are aria-hidden.
• Announcements: keyboard changes are spoken through the spinbutton's own value text. Pointer and wheel changes are announced once, through the role="status" line, after the wheel settles ("7:45 AM selected"), so a long flick is not read out row by row.
• The visible readout is aria-hidden once the script runs, because the spinbuttons already carry the value.
• Pointer: touch-action: none on the columns, so a vertical drag turns the wheel and never scrolls the page. Wheel and trackpad events over a column are prevented and stopped there, which also keeps Lenis or any other smooth scroller on window still. No data-lenis-prevent is needed.
• prefers-reduced-motion: reduce: the drums become a flat list, a release snaps straight to the nearest value with no coasting, the wheel steps one row per gesture and the readout swaps digits without rolling. Every input still works. Changing the preference while the page is open rebuilds the picker and keeps the time.
• No JavaScript: the native time input is shown instead of the wheels and submits the same HH:MM value.

Two themes on one set of custom properties, chosen by data-variant:

In your downloadThe working code for this step, in index.html.

The attribute also works on the component root (<div class="wtp" data-variant="dark" ...>) if your page sets its own theme elsewhere. The demo's toggle and the ?variant=dark URL parameter only set that attribute; nothing in the script reads it.

The tokens, set in both body[data-variant="light"] and body[data-variant="dark"] in assets/style.css:

To fit your brand, re-value --accent and, if your surfaces differ, --raised and --band in both blocks. Keep text colours solid (no rgba on --ink-*), so contrast stays measurable. --ground and --ground-2 only colour the demo page.

The drum. Each column keeps one number, how many rows it has turned. Eleven recycled row elements are placed around it every frame, each with rotateX by its distance from the centre and translateZ out to the cylinder's radius, and the drum sits back by that radius so the centre row renders at its true size. The radius is derived from --wtp-item, so the rows always meet edge to edge. Looping columns read their label with a modulo, so there is no duplicated list and no seam. GSAP tweens only that number; it never owns a row's transform, so no CSS transform can fight it.

Flick and settle. During a drag the last 100ms of pointer movement is kept. On release it becomes a speed in rows per second; the column projects where it would coast, rounds to a whole row and gsap.tos there with power3.out, whose duration is chosen so its starting speed matches the throw. A finger held still before letting go has no speed and just settles. Wheel input eases towards an accumulating target and snaps to a row 120ms after the last event.

The readout. The time is split into one clipped slot per character. When a column settles, only the slots whose character changed roll: the new glyph enters from the side the wheel turned towards, the old one leaves the other way, minutes before hours.

Teardown. Everything runs inside gsap.matchMedia(). Reverting it (or a motion-preference change) removes every listener, kills the tweens and empties the wheels, leaving the readout as plain text and the native input holding the last value.

• Row height: --wtp-item on .wtp (36px). The cylinder radius follows it.
• Visible height: --wtp-rows on .wtp (5.5 rows).
• Curvature: ITEM_ANGLE at the top of assets/script.js (20 degrees between rows). Smaller is a flatter, larger drum.
• Throw: FLING_TIME (how far a release coasts) and MAX_FLING_ROWS (the cap on one flick).
• Wheel sensitivity: WHEEL_ROWS_PER_PX (about one row per 100px mouse notch).
• Large steps for PageUp/PageDown: largeStep() in assets/script.js.
• Colours live in assets/style.css as custom properties per theme.

• GSAP 3.12+ (core only, no plugins)
• No build step, no framework