Examples Library
Choose a complete case study to view the result, modify the source, and run it in the browser.
Night Garden Pointer Trail Effect
Complete the pointer trail effect in a night garden scene: include real content, interactive controls, clear status feedback, and a responsive layout across sizes.
Open and runLearning Progress Waveform Plotter
Complete the waveform visualizer for a learning progress scenario: include real content, operable controls, clear state feedback, and a responsive layout across sizes.
Open and runPresentation Space Language Time Zone Panel
Complete a language and time zone panel in a presentation-space scenario: include real content, interactive controls, clear state feedback, and cross-size layouts.
Open and runRandom Picker for Break Time
Complete a random picker in a class-break scenario: includes real content, actionable controls, clear status feedback, and responsive layouts.
Open and runTravel Plan Segmented Selector
Complete the segmented selector in a travel planning scenario: includes real content, interactive controls, clear status feedback, and responsive layouts across sizes.
Open and runService request live validation form
Complete a live-validation form in a service request scenario: includes real content, actionable controls, clear state feedback, and cross-size layouts.
Open and runProject space responsive main menu
Complete a responsive primary menu for a project space scenario: include realistic content, actionable controls, clear status feedback, and cross-size layout.
Open and runPhoto Library Confirmation Dialog
Create a confirmation dialog for a photo library scenario: include real content, operable controls, clear status feedback, and a responsive layout across sizes.
Open and runLocal events filterable card wall
Complete a filterable card wall in a local events scenario: include real content, actionable controls, clear status feedback, and a responsive layout across sizes.
Open and runProject Budget Multi-Column Sortable Table
Complete a multi-column sortable table in a project budget scenario: includes real content, actionable controls, clear status feedback, and responsive layouts across sizes.
Open and runVisual Story Bento Grid Layout
Complete a bento-style grid layout in an image-story scenario: include real content, interactive controls, clear state feedback, and responsive layouts across sizes.
Open and runLearning Camp Narrative Hero
Complete the narrative hero section for a learning camp scenario: includes real content, actionable controls, clear status feedback, and responsive layouts across sizes.
Open and runStudio Capacity Key Metrics Overview
Complete a KPI overview in a studio capacity scenario: includes real content, interactive controls, clear state feedback, and responsive layouts.
Open and runWorkshop Booking Cart Calculator
Complete the shopping cart calculator in a workshop booking scenario: includes real content, interactive controls, clear status feedback, and responsive layouts.
Open and runResponsive Type Scale for Exhibition Notes
Complete a responsive type scale in an exhibition caption scenario: includes real content, actionable controls, clear state feedback, and multi-size layout.
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 runAurora Field interactive particle field
Complete an interactive particle field in an aurora meadow scene: real content, actionable controls, clear state feedback, and layouts that adapt across sizes.
Open and runGarden Growth Interactive Bar Chart
Interactive bar chart completed in the garden growth scenario: includes real content, actionable controls, clear state feedback, and responsive layouts across sizes.
Open and runPortable Team Ritual Calculator
Create a portable calculator in the team ritual scenario: includes real content, actionable controls, clear state feedback, and responsive layouts across sizes.
Open and runTravel Plan Preference Toggle Matrix
Complete the preference toggle matrix for a travel planning scenario: includes real content, interactive controls, clear state feedback, and responsive layouts.
Open and runService Request Multi-Step Form
Complete the step-by-step form flow in a service request scenario: includes realistic content, interactive controls, clear status feedback, and responsive layouts across sizes.
Open and runProject Space Breadcrumb Navigation
Complete breadcrumb navigation in a project space scenario: includes real content, interactive controls, clear status feedback, and cross-size layouts.
Open and runPhoto Library Side Drawer
Complete the side drawer scenario for the photo library, including real content, interactive controls, clear status feedback, and responsive layouts across sizes.
Open and runLocal Events Task Board
Build a task board for a local events scenario: includes real content, actionable controls, clear state feedback, and cross-size layouts.
Open and run