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 "Matchbox" theme toggle (light/dark switch). One self-contained HTML file, no libraries. The component: a small realistic matchbox lying on a soft warm-grey textured backdrop with a soft floor shadow. The drawer slides out on hover to show three matches. Click (or press Space) to strike: a match is dragged along the brown striker strip with tiny sparks, it flares, then burns with a living flame (canvas or WebGL, flickering, slightly blown by cursor movement, warm glow lighting the box and the backdrop). While the match burns the page is in "dark mode": backdrop goes deep charcoal, the flame is the only light, the box casts a moving shadow. Click again to blow it out: a thin curl of smoke rises and the page returns to light mode. Matches left decrease 3→2→1, then the drawer refills. Craft: printed paper label with fine grain and slight wear, embossed type "SAFETY MATCHES · No. 07", accurate perspective and lighting, physically believable motion (spring easing, no linear tweens). Typography: Switzer (fontshare) for UI, JetBrains Mono small uppercase caption bottom-left "MATCHBOX · THEME TOGGLE". Accessible: real button with role="switch" and aria-checked, keyboard support, 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.
