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 "Split-flap" stat counter card, like an old train station departure board, used to display a live number (e.g. "Followers 12,480"). One self-contained HTML file, no libraries. The component: a matte black card with 6 split-flap digit modules in a row, each module a real two-part flap (top half and bottom half) with a thin center hinge line, soft inner shadows and slight plastic sheen. When the value changes, each digit flips through intermediate characters one by one with a true 3D fold (CSS 3D or canvas), the falling flap shading darker as it rotates, with tiny random delays per digit so they settle in a cascade. A small label above in uppercase mono "FOLLOWERS", a green status dot that pulses. Buttons below: "+1", "+128", "Random" to change the value; hover on the card tilts it slightly toward the cursor with a moving specular highlight. Craft: realistic lighting, soft floor shadow, physically believable easing, no linear tweens. Dark backdrop with a subtle warm halo behind the card and fine grain. Typography: Switzer (fontshare) for UI, JetBrains Mono for the digits and small uppercase caption bottom-left "SPLIT-FLAP · STAT COUNTER". Accessible: aria-live polite announcement of the value, keyboard-usable buttons, 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.
