Examples Library
Choose a complete case study to view the result, modify the source, and run it in the browser.
Night Garden Confetti Burst Effect
Complete a confetti burst effect in a night garden scene: includes real content, interactive controls, clear state feedback, and responsive layouts.
Open and runLearning Progress Matrix Heatmap
Complete a matrix heatmap for the learning progress scenario: includes realistic content, interactive controls, clear state feedback, and responsive layouts across sizes.
Open and runDemo Space Page Visibility Notes
Complete a page visibility log in the presentation room scenario: includes real content, actionable controls, clear state feedback, and responsive layouts across sizes.
Open and runExpense Splitter for Study Breaks
Complete an expense splitter in a study-break scenario: includes real content, interactive controls, clear state feedback, and responsive layouts across sizes.
Open and runReading Mode Scheme Card Selection
Complete the card selection in a reading-mode scenario, with real content, interactive controls, clear status feedback, and responsive layouts.
Open and runCourse Registration Conditional Survey
Complete a conditional survey for a course enrollment scenario: include real content, actionable controls, clear status feedback, and responsive layouts across sizes.
Open and runKnowledge base section-scoped navigation
Complete section navigation in a knowledge base scenario: includes real content, actionable controls, clear state feedback, and responsive layouts.
Open and runTask Center Context Actions Form
Complete a contextual action sheet in the task center scenario: includes real content, actionable controls, clear status feedback, and layouts across sizes.
Open and runDesign Task Masonry Notes
Complete a masonry notes layout for design-task scenarios: real content, actionable controls, clear state feedback, and responsive layouts across sizes.
Open and runCourse grade relationship matrix table
Complete the relationship matrix table in a course grade scenario: include real content, actionable controls, clear status feedback, and responsive layouts across sizes.
Open and runCommunity Portal Full-bleed Layout
A full-bleed layout completed for a community portal scenario: includes real content, interactive controls, clear status feedback, and responsive layouts across sizes.
Open and runCreative Festival event agenda page
Complete the event agenda page in a creative festival scenario: includes real content, interactive controls, clear status feedback, and a responsive layout across sizes.
Open and runOutpatient Scheduling Incident Command Board
Complete the incident response board in an outpatient scheduling scenario: include real content, interactive controls, clear status feedback, and cross-size layout.
Open and runBike Rental Quote Builder
Complete the quote builder for a bike-rental scenario: includes realistic content, interactive controls, clear status feedback, and responsive layouts.
Open and runCity Magazine outlined title design
Complete an outlined title design for a city magazine scenario: includes real content, actionable controls, clear state 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 runNight garden kaleidoscope pattern
Complete a kaleidoscope pattern in a night garden scenario: include real content, interactive controls, clear state feedback, and responsive layouts.
Open and runLearning progress timeline chart
Complete a timeline chart in a learning-progress scenario: with real content, actionable controls, clear status feedback, and responsive layouts across sizes.
Open and runPresentation Room Pointer Capability Check
Complete pointer capability checks in a demo-space scenario: includes real content, interactive controls, clear status feedback, and responsive layouts across sizes.
Open and runClass Break Pomodoro Timer
Complete a Pomodoro timer in a class-break scenario: includes real content, interactive controls, clear state feedback, and cross-size layouts.
Open and runReading Mode Dual Range Control
Complete a dual-value range control in a reading-mode scenario: includes real content, interactive controls, clear state feedback, and cross-size layouts.
Open and runCourse enrollment auto-draft form
Create an automatic draft form for course registration: includes realistic content, interactive controls, clear state feedback, and responsive layouts across sizes.
Open and runKnowledge Base Pagination Navigation
Complete page navigation in a knowledge base scenario: includes real content, interactive controls, clear status feedback, and responsive layout across sizes.
Open and runTask Center Bottom Action Panel
In the task center scenario, complete a bottom action sheet: includes real content, actionable controls, clear status feedback, and cross-size layout.
Open and run