Toggles and inputs that feel honest.
Six controls translated from the curated reference list to vanilla HTML, CSS, and GSAP. Flip the theme at the top right and watch every control reskin.
Shamayim Pattern Toggle
A tropical pattern track with a chunky gradient slider. The thumb glides, the icons swap states, the entire control feels like a polished tile.
When to use. Settings screens, preferences, mobile dashboards. Anywhere you want toggles to feel premium and tactile.
Why it works. The pattern track gives state without color alone, the grooved thumb reads as physical, and the slide is smooth in both directions.
Skeuomorphic Switch
A switch with depth. The cap rides on a recessed track, the label slides, and the cap turns to the active accent once the switch is on.
When to use. Onboarding screens, settings with personality, retro brand systems, hardware dashboards.
Why it works. The shadows and the accent cap broadcast state from across the room. There is no ambiguity, the switch reads at a glance.
Input with Animated Tags
Type a word, then comma, enter, or space. The chip flies in, the input clears, the focus stays put. Backspace on an empty input removes the last chip.
When to use. Filters, multi recipient pickers, keyword editors, content tags, audience targeting.
Why it works. The chip motion confirms the keystroke. The user never has to look away from the field to know the system listened.
Assisted Password Confirmation
A live rule list. As the user types, each rule turns from a dim bullet to a satisfied check. A strength bar fills in time with the rules satisfied.
- At least 10 characters
- One uppercase letter
- One number
- One symbol
When to use. Account creation, password reset, any compliance form where rules need to be transparent.
Why it works. Live feedback removes the guessing game. The strength bar gives the user a single, calm signal of progress.
Snappy Slider
Drag and the value pops above the thumb. The thumb scales up while active, and the fill streams with an accent gradient.
When to use. Volume, opacity, price ranges, slider filters, fitness goals, photo edit controls.
Why it works. The popover keeps your eye on the value, not the track. The active state gives precise control.
Popover
Click the anchor, a card slides up with a caret. Escape closes, click outside closes, focus moves to the close button for keyboard users.
Pro plan includes
Unlimited scenes, brand asset hosting, weekly motion review, and priority Slack support.
When to use. Pricing detail, helper text, small forms, definitions, filters that need a secondary surface without leaving the page.
Why it works. The card animates in, anchors to the trigger, and the close button gives keyboard and screen reader users a path out.