Pure HTML · CSS · JS

UI Microinteractions
Playground

A handcrafted collection of modern UI components, built without frameworks.

32Components
7Sections
0Dependencies
01

Buttons

Interactive button components with hover, active, loading, and ripple microinteractions.

Primary Button

Main call-to-action with ripple effect and glow on hover.

Ghost Button

Outlined style with border glow on hover and fill-in animation.

Loading State

Button transitions to a spinner loading state on click.

Icon Buttons

Compact icon-only buttons in primary, ghost, and danger variants.

Gradient Button

Animated gradient background with glow shadow effect.

Button Group

Segmented control with sliding active indicator animation.

02

Toggles & Switches

Animated toggles with elastic movement, color transitions, and satisfying tactile feedback.

Classic Toggle

Smooth sliding toggle with elastic spring animation and color transition.

Icon Toggle

Toggle with contextual icons that fade between states.

Custom Checkbox

Animated checkmark with draw-on SVG path and ripple focus effect.

Radio Buttons

Custom radio buttons with animated fill dot and ring effect.

03

Loaders & Spinners

Pure CSS loading animations — no JavaScript required. Smooth, accessible, and visually polished.

Loading…

Ring Spinner

Classic ring spinner with smooth rotation and gradient fade.

Loading…

Bouncing Dots

Three dots with staggered bounce animation, like a typing indicator.

Loading…

Wave Bars

Audio equalizer-style wave animation with staggered heights.

Loading…

Pulse Ring

Concentric rings expanding outward like a radar sonar pulse.

65%

Progress Bar

Determinate progress bar with shimmer animation and label.

04

Cards

Interactive cards with 3D tilt, hover lift, glassmorphism, and expand/collapse effects.

✦

3D Tilt Card

Move your cursor over this card to see the 3D perspective tilt effect in action.

Interactive 3D

3D Tilt Card

Perspective tilt that follows the mouse cursor using requestAnimationFrame.

PRO

Glassmorphism

Frosted glass effect using backdrop-filter with blur and transparency.

99%Uptime
4msLatency

Glass Card

Frosted glass card using backdrop-filter blur and semi-transparent background.

Expandable Card

Click the arrow to reveal more content with a smooth height animation.

This content smoothly expands and collapses using CSS max-height transitions with overflow hidden — no JavaScript height calculation needed!

CSS Smooth Accessible

Expandable Card

Accordion-style card that smoothly expands to reveal extra content.

Total Revenue +12.5%
$84,250

vs $74,870 last month

Stats Card

Dashboard-style metric card with inline SVG sparkline chart.

05

Inputs & Forms

Form elements with floating labels, animated focus states, and inline validation feedback.

Floating Label

Label floats up on focus with an animated underline bar.

Min 3 characters required

Validation States

Success and error states with animated icons and helper messages.

Strength

Password Field

Password input with visibility toggle and animated strength meter.

Search Field

Expandable search input with animated icon and clear button.

75

Range Slider

Custom styled range slider with dynamic fill track and live value display.

07

Feedback

Toast notifications, alert banners, badges, and tooltips with smooth entrance animations.

Toast Notifications

Animated slide-in notifications that auto-dismiss with a progress bar.

Alert Banners

Dismissable alert banners in info, warning, success, and error variants.

Primary Success Warning Error Outline Live

Badges & Tags

Status badges in multiple variants including an animated live dot.

Tooltips

CSS-powered tooltips that fade and slide in from any direction.