Examples Library
Choose a complete case study to view the result, modify the source, and run it in the browser.
Night Garden Interactive Particle Field
Complete an interactive particle field in a night garden scene: includes real content, actionable controls, clear status feedback, and responsive layouts across sizes.
Open and runLearning Progress Interactive Bar Chart
Build an interactive bar chart for a learning-progress scenario: include real content, actionable controls, clear state feedback, and responsive layouts across sizes.
Open and runPresentation space viewport inspector
Complete the viewport information panel in a presentation-space scenario: includes real content, actionable controls, clear status feedback, and responsive layouts across sizes.
Open and runPortable Calculator for Study Breaks
Complete a portable calculator for break time scenarios: includes real content, interactive controls, clear state feedback, and responsive layouts across sizes.
Open and runReading Mode Preference Toggle Matrix
Complete the preference toggle matrix in the reading mode scenario: includes real content, actionable controls, clear state feedback, and responsive layouts.
Open and runCourse Registration Multi-step Form
Complete the step-by-step form flow in a course enrollment scenario: includes real content, interactive controls, clear status feedback, and responsive layouts across sizes.
Open and runKnowledge Base Breadcrumb Navigation
Complete a breadcrumb navigation in a knowledge base scenario: includes real content, actionable controls, clear state feedback, and responsive layouts across sizes.
Open and runTask Center Side Drawer
Complete a side drawer in a task center scenario: includes real content, interactive controls, clear status feedback, and responsive layouts across sizes.
Open and runDesign Task Kanban
Complete a task board in a design tasks scenario: includes real content, actionable controls, clear state feedback, and cross-size layout.
Open and runCourse grade composite filter table
A combined filtering table completed for a course grades scenario: real content, interactive controls, clear status feedback, and responsive layouts across sizes.
Open and runCommunity portal split-screen narrative layout
Complete a split-screen narrative layout for a community portal scenario: includes real content, interactive controls, clear status feedback, and a responsive multi-size layout.
Open and runCreative Festival Pricing Plans Page
Complete the pricing plan page for the Creative Festival scenario: includes real content, actionable controls, clear state feedback, and responsive layouts across sizes.
Open and runOutpatient scheduling trend analysis dashboard
Complete the trend analysis panel for an outpatient scheduling scenario: includes real content, actionable controls, clear status feedback, and responsive layouts across sizes.
Open and runBike rental checkout flow
Complete the checkout step flow in a bike rental scenario: includes real content, interactive controls, clear state feedback, and responsive layouts across sizes.
Open and runCity Magazine Font-Weight Hierarchy Experiment
In a city magazine scenario, complete a font-weight hierarchy experiment: includes realistic content, actionable controls, clear state 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 runOrganic fluid shapes for a Night Garden
Complete organic fluid shapes in a night garden scene: includes real content, interactive controls, clear state feedback, and responsive layout across sizes.
Open and runLine Chart of Learning Progress Trends
Complete a trend line chart in a learning progress scenario: includes real content, actionable controls, clear status feedback, and responsive layouts across sizes.
Open and runPresentation Room Media Query Observer
Complete the media query observer in a presentation space scenario: includes real content, interactive controls, clear state feedback, and responsive layouts across sizes.
Open and runQuick Quiz for the Study Break
Complete a rapid knowledge quiz for a break-between-classes scenario: includes realistic content, interactive controls, clear status feedback, and responsive layouts across sizes.
Open and runReading Mode Range Slider
Complete the range adjuster in the reading mode scenario: includes real content, interactive controls, clear status feedback, and layouts across sizes.
Open and runLocal suggestions input for course enrollment
Complete local suggestion input in a course enrollment scenario: includes real content, actionable controls, clear status feedback, and responsive layouts across sizes.
Open and runKnowledge Base Workspace Tabs
Complete workspace tabs in a knowledge base scenario: includes real content, actionable controls, clear status feedback, and layouts across sizes.
Open and runTask Center Notification Stack
Complete a toast stack for a task center scenario: includes real content, interactive controls, clear status feedback, and responsive layout across sizes.
Open and run