Code · Claude Sonnet 5.5
A single, original, premium UI component on its own page
A single, original, premium UI component on its own page: a "Zipper" slide-to-unlock control. One self-contained HTML file, no libraries. The component: a horizontal strip of dark denim-like fabric (subtle woven texture, stitched borders with thread detail) closed by a metal zipper running left to right. The pull tab is a brushed-brass slider that the user drags (pointer and touch). As it moves, the interlocking teeth separate one by one behind it and the two fabric halves part in a soft V, revealing a warm glowing layer underneath with the text "Unlocked". Teeth are drawn individually with tiny highlights; the pull tab swings slightly on its hinge with the drag velocity (spring physics). Release before the end and it zips back with a quick rattle animation. Reach the end: a satisfying snap, a tiny bounce, the label inside fades in. Click "Done" to zip it closed again. Craft: realistic lighting from top-left, soft floor shadow, metal specular that moves with the tab, no linear tweens. Soft light warm-grey textured backdrop. Typography: Switzer (fontshare) for UI, JetBrains Mono small uppercase caption bottom-left "ZIPPER · SLIDE TO UNLOCK". Accessible: role="slider" with aria-valuenow, keyboard arrows/Home/End, prefers-reduced-motion respected. Centered, responsive, looks 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.
