Option Wheel
Option Wheel is a scroll animation in the UI HUB scroll animations collection. A curved option picker wheel. Options arc around a tilt axis with rotation, blur, and fade as they recede from the center row. Direct manipulation via wheel, touchpad, or pointer drag, plus keyboard arrows and click-to-select, all eased with frame-rate-independent exponential smoothing.
The component is driven by 20 documented props (items, defaultSelected, onChange, textColor, activeColor, side and 14 more), so colours, intensity, timing and density can be tuned from the call site instead of being hard-coded.
Implementation notes: requestAnimationFrame; exponential smoothing; pointer events and pointer capture.
Preview the scroll animation in the browser above, copy the source, and paste it into your project. Scroll Animations components in UI HUB are grouped by category so you can compare effects side by side before choosing one.
What is Option Wheel?
Scrollable curved option wheel with smoothed motion, blur/fade depth cueing, pointer drag, keyboard navigation, optional looping, and an optional selection tick sound.
Option Wheel at a glance
- Category
- Scroll Animations
- Pricing
- Free to use
- Libraries
- React
- Language
- TypeScript
- Styling
- Tailwind CSS
- Configurable props
- 20
- AI prompts
- Ready for Advance, Antigravity, Claude Code, Cursor, Lovable
How Option Wheel works
A curved option picker wheel. Options arc around a tilt axis with rotation, blur, and fade as they recede from the center row. Direct manipulation via wheel, touchpad, or pointer drag, plus keyboard arrows and click-to-select, all eased with frame-rate-independent exponential smoothing.
Technical information for Option Wheel
| Category | Scroll Animations |
|---|---|
| Libraries | React |
| Styling | Tailwind CSS |
| Language | TypeScript |
| Rendering | CSS filters, requestAnimationFrame |
| State change | neutral stacked options to selected centered option with optional tick sound |
| Props | 20 configurable |
| Usage example | Included on this page |
What Option Wheel requires
- requestAnimationFrame
- exponential smoothing
- pointer events and pointer capture
- non-passive wheel listener
- keyboard navigation
- aria listbox roles
How to use Option Wheel
- Install React if your project does not already use it.
- Copy the usage example from the Source section of this page. It shows the import path and the props the component expects.
- Render <OptionWheel /> in your page using that import path.
- Pass any of the 20 documented props to change colours, density, speed or behaviour.
Option Wheel questions
What is Option Wheel?
Scrollable curved option wheel with smoothed motion, blur/fade depth cueing, pointer drag, keyboard navigation, optional looping, and an optional selection tick sound.
How does Option Wheel work?
A curved option picker wheel. Options arc around a tilt axis with rotation, blur, and fade as they recede from the center row. Direct manipulation via wheel, touchpad, or pointer drag, plus keyboard arrows and click-to-select, all eased with frame-rate-independent exponential smoothing.
Which category does Option Wheel belong to?
Option Wheel is listed under Scroll Animations in the UI HUB catalog. Scroll-linked animation components: parallax layers, pinned and sticky sections, scroll-triggered reveals, expanding scroll panels and 3D scroll transitions. Each one documents whether it uses native scroll timelines or a motion library, which matters for performance on long pages. Load them per section rather than across a whole route.
What does the items prop do in Option Wheel?
Array of option labels rendered on the wheel. It defaults to DEFAULT_ITEMS.
What does the defaultSelected prop do in Option Wheel?
Index of the option selected on mount. It defaults to 3.
Is Option Wheel free to use?
Option Wheel is a free component on UI HUB. You can preview it in the browser and read the full props table on the component page.
Which libraries does Option Wheel use?
Option Wheel uses React and is styled with Tailwind CSS.
What does Option Wheel need to run?
Option Wheel needs requestAnimationFrame, exponential smoothing, pointer events and pointer capture and non-passive wheel listener.