Examples Library
Choose a complete case study to view the result, modify the source, and run it in the browser.
Night Garden Spotlight Stage
Complete a spotlight stage scene in a night garden setting: includes real content, interactive controls, clear status feedback, and responsive layouts across sizes.
Open and runLearning Progress Gauge Chart
Create a dashboard graphic for a learning progress scenario: includes real content, interactive controls, clear state feedback, and cross-size layout.
Open and runPresentation Room Clipboard Demo
Complete a clipboard interaction demo for a presentation-room scenario: includes real content, interactive controls, clear status feedback, and cross-size layouts.
Open and runFocus Timer for Break Time
Complete the focus timer in the class break scenario: includes realistic content, actionable controls, clear status feedback, and a responsive layout across sizes.
Open and runReading mode filter chip group
Complete a filter chip group in a reading mode scenario: includes real content, actionable controls, clear status feedback, and a responsive layout across sizes.
Open and runCourse Registration Dynamic Field Group
Complete a dynamic field group in a course enrollment scenario: includes real content, actionable controls, clear status feedback, and responsive layout.
Open and runKnowledge Base Tree Navigation
Complete tree navigation in a knowledge base scenario: include real content, actionable controls, clear state feedback, and cross-size layouts.
Open and runTask Center Keyboard Tooltip
Complete the keyboard tooltip for a task center scenario: includes real content, actionable controls, clear status feedback, and cross-size layout.
Open and runDesign Task Story Carousel Cards
Complete the story carousel card in the design tasks scenario: include real content, interactive controls, clear state feedback, and responsive layouts across sizes.
Open and runSticky Table Header for Course Scores
Complete sticky table headers for a course grades scenario: includes real content, actionable controls, clear status feedback, and responsive layouts across sizes.
Open and runCommunity Portal Magazine Editorial Grid
Complete a magazine editorial grid in a community portal scenario: includes realistic content, interactive controls, clear status feedback, and responsive layouts across sizes.
Open and runCreative Festival Feature Tour Page
Complete the feature tour page in a creative-festival scenario: includes realistic content, actionable controls, clear status feedback, and responsive cross-size layouts.
Open and runClinic Scheduling Resource Usage Dashboard
Complete a resource usage panel for a clinic scheduling scenario: include real content, interactive controls, clear status feedback, and responsive layouts across sizes.
Open and runBike Rental Invoice Generator
Complete an invoice generator for a bike rental scenario: include real content, actionable controls, clear status feedback, and responsive layouts.
Open and runCity Magazine Text Mask Effect
Complete a text masking effect for a city magazine scenario: includes real content, interactive controls, clear status feedback, and responsive layouts.
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 runNight Garden Multi-Layer Wave Scene
Complete multi-layer wave scenes in a night garden setting: includes real content, interactive controls, clear status feedback, and responsive layouts across sizes.
Open and runLearning Progress Radar Chart
Complete the ability radar chart in a learning-progress scenario: includes realistic content, actionable controls, clear status feedback, and responsive cross-size layouts.
Open and runPresentation Room Full-Screen Stage Controls
Complete full-screen stage control in a presentation space scene: includes real content, interactive controls, clear state feedback, and cross-size layouts.
Open and runStudy Break Habit Check-in Board
Complete the habit check-in board in a break-between-classes scenario: includes real content, interactive controls, clear status feedback, and a responsive layout across sizes.
Open and runReading mode numeric stepper
Complete a numeric stepper for a reading-mode scenario: includes real content, actionable controls, clear status feedback, and responsive layouts.
Open and runCourse enrollment budget setup sheet
Complete the budget configuration form in a course enrollment scenario: includes real content, interactive controls, clear status feedback, and responsive layouts.
Open and runKnowledge Base Progress Navigation
Complete a process progress navigation in a knowledge base scenario: includes realistic content, interactive controls, clear state feedback, and responsive layouts across sizes.
Open and runTask Center Status Banner
Complete the status banner in the task center scenario: includes real content, actionable controls, clear state feedback, and responsive layouts.
Open and run