Animation & Microinteractions
Loading, progress, state transitions, and detail feedback.
Tab switcher
A tab component with arrow-key navigation and content-switching animations.
Open and runCreative Loading Animation
Pure visual effects of orbital pulses and loading progress made with CSS.
Open and runRotating Taiji Animation
A yin-yang taiji diagram drawn and rotated using only the CSS graphic.
Open and runMulti-Stage Loader for File Upload
Complete a multi-stage loader in a file upload scene: includes real content, actionable controls, clear status feedback, and responsive layouts across sizes.
Open and runFile upload button morph transition
Complete the button morph transition in a file upload scenario: includes real content, actionable controls, clear status feedback, and layouts across sizes.
Open and runCircular File Upload Progress Feedback
Complete ring progress feedback in a file upload scenario: includes real content, actionable controls, clear status feedback, and cross-size layouts.
Open and runFile Upload Skeleton Screen Transition
Skeleton screen transition for file upload scenarios: includes real content, interactive controls, clear state feedback, and responsive layouts.
Open and runFile upload list staggered entry
Complete a staggered list entrance for a file upload scenario: includes real content, actionable controls, clear status feedback, and responsive layouts across sizes.
Open and runFile upload page-turn state transition
A page-turning state transition in a file-upload scenario: real content, interactive controls, clear state feedback, and responsive layouts across sizes.
Open and runFile upload elastic control feedback
Complete elastic control feedback in file upload scenarios: includes real content, actionable controls, clear status feedback, and cross-size layouts.
Open and runFile Upload Notification Pop Feedback
Complete notification pop-up feedback for file upload scenarios: includes real content, interactive controls, clear status feedback, and responsive layouts.
Open and runFile Upload Content Reveal Animation
Reveal animation for a file upload scenario: includes real content, actionable controls, clear status feedback, and responsive layouts.
Open and runFile Upload Orbit Status Animation
Complete the orbital status animation in a file upload scenario: includes real content, actionable controls, clear status feedback, and responsive layouts across sizes.
Open and runMulti-stage Loader for Focus Tool
Complete a multi-stage loader in the focus tool scenario: includes real content, actionable controls, clear status feedback, and cross-size layouts.
Open and runFocus Tool Button Morph Transition
Complete a button morph transition in a focus-tool scenario: includes real content, interactive controls, clear state feedback, and responsive layouts across sizes.
Open and runFocus Tool Ring Progress Feedback
Complete the circular progress feedback in a focus tool scenario: includes real content, actionable controls, clear status feedback, and a responsive layout across sizes.
Open and runFocus Tool Skeleton Screen Transition
Complete the skeleton screen transition in a focus tool scenario: includes real content, actionable controls, clear status feedback, and layouts across sizes.
Open and runStaggered Entry for the Focus Tools List
Complete staggered list entrance in a focus tool scenario: includes real content, actionable controls, clear state feedback, and responsive layouts.
Open and runFocused Tool Page Transition State
Complete the page-flip state transition in a focus tool scenario: includes real content, interactive controls, clear state feedback, and responsive layouts across sizes.
Open and runFocus Tool Elastic Control Feedback
Complete the elastic control feedback in a focus tool scenario: includes realistic content, actionable controls, clear status feedback, and responsive layouts across sizes.
Open and runFocus Tool Notification Pop Feedback
Deliver notification pop-up feedback in a focus-tool scenario: include realistic content, actionable controls, clear state feedback, and responsive layouts across sizes.
Open and runFocus tool content reveal animation
Complete a content reveal animation in the focus tool scenario: it includes realistic content, actionable controls, clear status feedback, and a responsive layout across sizes.
Open and runFocus tool orbit status animation
In a focus tool scenario, complete an orbital status animation: including real content, interactive controls, clear state feedback, and responsive layouts across sizes.
Open and runMusic Player Multi-stage Loader
Complete a multi-stage loader for a music player scenario: includes real content, interactive controls, clear status feedback, and responsive layouts across sizes.
Open and runMusic Player Button Morph Transition
Complete the button morph transition for a music player scenario: includes real content, actionable controls, clear status feedback, and responsive layouts across sizes.
Open and runMusic Player Circular Progress Feedback
Complete ring progress feedback in a music player scenario: includes real content, actionable controls, clear state feedback, and multi-size layout.
Open and runMusic Player Skeleton Screen Transition
Complete a skeleton-screen transition for a music player scenario: include real content, interactive controls, clear status feedback, and layouts across sizes.
Open and runStaggered entrance for music player list
Complete staggered list entrance in a music player scenario: includes real content, actionable controls, clear state feedback, and a responsive layout.
Open and runMusic player flip-state transition
Complete the page-flip state transition in the music player scenario: with real content, interactive controls, clear status feedback, and cross-size layouts.
Open and runMusic Player Springy Control Feedback
Complete springy control feedback for a music player scenario: includes real content, interactive controls, clear state feedback, and layouts across sizes.
Open and runMusic Player Notification Pop Feedback
Complete the notification pop-up feedback in the music player scene: includes real content, interactive controls, clear status feedback, and responsive layouts across sizes.
Open and runMusic Player Content Reveal Animation
Complete a content reveal animation in the music player scenario: includes real content, actionable controls, clear status feedback, and cross-size layouts.
Open and runMusic Player Track Status Animation
Complete orbital status animation in a music player scenario: includes real content, interactive controls, clear status feedback, and responsive layouts across sizes.
Open and runMulti-Stage Loader for Order Status
Build a multi-stage loader for order status scenarios: includes real content, interactive controls, clear status feedback, and layouts across sizes.
Open and runOrder Status Button Morph Transition
Complete a button morph transition for an order status scenario: includes realistic content, interactive controls, clear status feedback, and responsive layout across sizes.
Open and runOrder status ring progress feedback
In an order status scenario, create ring-shaped progress feedback: includes real content, interactive controls, clear status feedback, and responsive layout.
Open and runOrder Status Skeleton Transition
Complete a skeleton-screen transition in an order-status scenario: includes real content, actionable controls, clear status feedback, and responsive layouts across sizes.
Open and runOrder Status List Staggered Entry
Complete staggered list entry for an order-status scenario: includes real content, interactive controls, clear status feedback, and responsive layouts.
Open and runOrder Status Flip Transition
Complete the page-flip state transition in an order status scenario: includes real content, actionable controls, clear state feedback, and responsive layouts.
Open and runOrder status spring control feedback
Create elastic control feedback in an order-status scenario: include real content, actionable controls, clear state feedback, and responsive layouts across sizes.
Open and runOrder Status Notification Pop-up Feedback
Complete notification pop-up feedback for an order status scenario: includes real content, actionable controls, clear status feedback, and responsive layouts across sizes.
Open and runOrder Status Content Reveal Animation
Complete the content reveal animation in an order-status scenario: includes realistic content, actionable controls, clear status feedback, and responsive layouts across sizes.
Open and runOrder Status Orbital Status Animation
Complete an orbital status animation for the order-status scenario: includes real content, actionable controls, clear status feedback, and responsive layouts.
Open and runArchive Sync Button Morph Transition
Complete the button morph transition in an archive sync scenario: includes real content, actionable controls, clear status feedback, and layouts across sizes.
Open and runMulti-stage Audio Wave Loader
Complete a multi-stage loader in a sound-wave scenario: includes real content, actionable controls, clear status feedback, and responsive layouts across sizes.
Open and runCatalog Alert Flip State Transition
Complete the page-flip state transition in a catalog reminder scenario: includes real content, actionable controls, clear state feedback, and responsive layouts across sizes.
Open and runCatalog Check-in Notification Pop Feedback
Complete the notification pop feedback for a catalog check-in scenario: includes realistic content, actionable controls, clear status feedback, and responsive layouts across sizes.
Open and runOrbital status animation catalog loop
Complete an orbital status animation in a catalog loop scene: includes real content, actionable controls, clear status feedback, and responsive layouts across sizes.
Open and runCatalog Pulse Ring Progress Feedback
Complete circular progress feedback in a catalog pulse scenario: includes real content, actionable controls, clear status feedback, and cross-size layouts.
Open and runCatalog signal content reveal animation
Create a content reveal animation in a catalog signal scenario: includes real content, actionable controls, clear state feedback, and cross-size layouts.
Open and runCatalog Sync Skeleton Screen Transition
Complete the skeleton screen transition in a catalog synchronization scenario: includes real content, actionable controls, clear status feedback, and responsive layouts across sizes.
Open and runCatalog tracker spring control feedback
Complete elastic control feedback in a catalog-tracker scenario: includes realistic content, actionable controls, clear status feedback, and responsive cross-size layouts.
Open and runCatalog trigger list staggered entry
Complete staggered entry for the catalog trigger scenario: includes real content, interactive controls, clear status feedback, and responsive layouts across sizes.
Open and runCourse progress button morph transition
Complete a button morph transition in a course progress scenario: includes realistic content, actionable controls, clear status feedback, and responsive layouts.
Open and runOutpatient Reminder Multi-Stage Loader
Complete a multi-stage loader for an outpatient reminder scenario: include real content, interactive controls, clear state feedback, and cross-size layouts.
Open and runOutpatient Check-in Flip Transition
Complete a page-turn state transition for a clinic check-in scenario: includes real content, actionable controls, clear status feedback, and responsive layouts across sizes.
Open and runOutpatient Cycle Notification Pop-up Feedback
Complete notification pop-up feedback in an outpatient loop scenario: includes real content, actionable controls, clear state feedback, and responsive layouts.
Open and runOutpatient Pulse Orbital Status Animation
Complete an orbital status animation in an outpatient pulse scenario: includes real content, interactive controls, clear state feedback, and responsive layouts.
Open and runClinic signal ring progress feedback
Completed ring progress feedback in the outpatient signal scenario: includes real content, actionable controls, clear status feedback, and responsive layouts across sizes.
Open and runClinic Stage Content Reveal Animation
Complete content reveal animations in outpatient stage scenarios: includes real content, actionable controls, clear state feedback, and cross-size layouts.
Open and runOutpatient sync skeleton screen transition
Complete the skeleton screen transition in a clinic synchronization scenario: includes real content, actionable controls, clear status feedback, and responsive layouts across sizes.
Open and runOutpatient tracker spring control feedback
Create elastic control feedback in the clinic tracker scenario: includes real content, actionable controls, clear state feedback, and responsive layouts across sizes.
Open and runOutpatient Trigger List Staggered Entry
Complete the staggered list entry flow in a clinic trigger scenario: includes real content, actionable controls, clear state feedback, and responsive layouts.
Open and runDonation Flow Button Morph
Complete button morph transitions for donation-flow scenarios: includes real content, actionable controls, clear status feedback, and responsive layouts across sizes.
Open and run