Code · Claude Sonnet 5.5
A single, original, premium
A single, original, premium, fully functional and animated UI component on its own page, in one self-contained HTML file (no libraries): a "Rotary dial" PIN code input. Do NOT wrap it in a card or add a title; show only the component on the backdrop. The component: a vintage telephone rotary dial in glossy cream bakelite with a brushed-metal finger stop, ten finger holes with digits 1-9 and 0 printed on the plate beneath. The user puts the pointer in a hole and drags clockwise to the finger stop (pointer and touch), the wheel follows the drag with a soft resistance, then on release it spins back on its own with a ratchet rhythm (click-like micro steps, ease) and enters that digit. Above, 4 PIN dots fill one by one with a little drop-in animation. After 4 digits, if the PIN is 2580 the dots turn green and a "Unlocked" label slides in; otherwise the dots shake and clear. A small "Clear" text button resets. Craft: canvas or SVG with realistic lighting (specular on bakelite, inner shadows in holes, metal stop), soft floor shadow, physically believable motion, no linear tweens. Dark backdrop with subtle warm halo and grain. Switzer (fontshare) for UI, JetBrains Mono small uppercase caption bottom-left "ROTARY DIAL · PIN INPUT" and a tiny hint "Try 2580". Keyboard fallback: typing digits works; aria-live announcements; prefers-reduced-motion respected. Centered, responsive, great at 1280×800.
Sourasith Phomhome@sourasithp- Model
- Claude Sonnet 5.5
- Made by
- Sourasith Phomhome
- Shared
- Likes
- 0
Use its prompt, turn it into a video or a 3D model, or find more like it in Fil. Fil is invite-only for now: without an invitation, Open in Fil shows the waitlist.
