This high-performance UI component replicates the iconic iPhone alarm clock picker with pixel-perfect precision. Engineered for a native feel, it uses a 3D cylindrical projection and CSS preserve-3d to create a realistic rolling effect.
preserve-3d
The component features a custom Inertia Engine that tracks touch velocity, allowing users to "flick" the wheel and watch it spin naturally before it smoothly decelerates. A sophisticated Snap-to-Grid algorithm ensures the wheel always aligns perfectly with the horizontal selection line, preventing values from being left off-center.
Built with performance in mind, it utilizes GPU-accelerated transformations (will-change) and passive event listeners to maintain a fluid 60 FPS on mobile devices. It includes built-in Haptic Feedback (vibration) for tactile confirmation during scrolling and is fully customizable via Input Parameters, making it the ultimate reusable asset for high-end mobile UX.
will-change