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 "Thermostat knob" range control. Do NOT wrap it in a card or add a title; show only the component on the backdrop. The component: a large round knob of machined aluminium (concentric brushed rings that catch a moving specular highlight), seated in a dark recessed bezel with 40 fine tick marks around it. Drag in a circle (pointer and touch) or use the mouse wheel / arrow keys to turn it between 10°C and 30°C; each degree snaps with a tiny detent kick. An arc of light around the bezel fills from cool blue (low) through white to warm orange (high), glowing onto the surrounding surface; the big centered temperature number (tabular figures) rolls digit by digit when it changes, with a small label "Heating" / "Cooling" / "Idle" that crossfades. The backdrop gently tints warmer or cooler with the value. Craft: realistic lighting, soft floor shadow, inner shadows, spring physics on release, no linear tweens. Soft light warm-grey textured backdrop. Switzer (fontshare) for UI, JetBrains Mono small uppercase caption bottom-left "THERMOSTAT · RANGE KNOB". role="slider" with aria-valuenow/min/max, keyboard support, 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.
