Examples Library
Choose a complete case study to view the result, modify the source, and run it in the browser.
Image Story Sticky Sidebar Layout
Complete a sticky sidebar layout in an image-story setting: includes real content, interactive controls, clear status feedback, and cross-size layouts.
Open and runLearning Camp Subscription Conversion Page
Completed the subscription conversion page in the learning camp scenario: includes real content, actionable controls, clear state feedback, and cross-size layout.
Open and runStudio Capacity Calendar Heatmap Panel
Complete a calendar heatmap panel for a studio capacity scenario: includes real content, actionable controls, clear status feedback, and cross-size layouts.
Open and runWorkshop Booking Order Progress Tracker
Complete order tracking in a workshop booking scenario: includes real content, actionable controls, clear status feedback, and responsive layouts across sizes.
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 runAurora Field Confetti Burst Effect
A confetti burst effect completed for the Aurora Field scenario: includes real content, actionable controls, clear status feedback, and responsive layouts across sizes.
Open and runGarden Growth Matrix Heatmap
Complete a matrix heatmap in a garden growth scenario: includes real content, actionable controls, clear status feedback, and responsive layout.
Open and runTravel Plan Option Cards Selection
Complete the option card selection for a travel plan scenario: includes real content, actionable controls, clear status feedback, and responsive layout across screen sizes.
Open and runService Request Conditional Survey
Complete a conditional survey for a service request scenario: includes real content, interactive controls, clear status feedback, and responsive layouts across sizes.
Open and runProject Space Section Spy Navigation
Complete chapter-location navigation in a project space scenario: include real content, interactive controls, clear status feedback, and layouts across sizes.
Open and runPhoto Library Context Actions
In the photo library scenario, complete a contextual actions sheet: including real content, actionable controls, clear state feedback, and responsive layouts across sizes.
Open and runLocal Events Masonry Notes
Complete a waterfall-style notes board in a local events scenario: includes real content, interactive controls, clear state feedback, and responsive layouts across sizes.
Open and runProject budget relational matrix table
Complete a relationship matrix table in a project-budget scenario: includes real content, interactive controls, clear state feedback, and cross-size layouts.
Open and runFull-Bleed Photo Essay Layout
Complete a full-bleed interleaved layout for an image-story scene: including real content, interactive controls, clear state feedback, and responsive layouts across sizes.
Open and runLearning Camp Event Agenda Page
Complete the event agenda page for the learning camp scenario: includes real content, actionable controls, clear status feedback, and a responsive layout across sizes.
Open and runStudio Capacity Incident Board
Complete an incident response board in the studio capacity scenario: includes real content, actionable controls, clear status feedback, and cross-size layouts.
Open and runWorkshop Booking Quote Builder
Complete a quote builder in a workshop booking scenario: includes real content, interactive controls, clear status feedback, and responsive layouts.
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 runAurora Field Kaleidoscope Pattern
Complete a kaleidoscope pattern in an aurora field scenario: includes real content, actionable controls, clear status feedback, and responsive layout across sizes.
Open and runGarden Growth Timeline Chart
Complete a timeline chart for the garden growth scenario: includes real content, interactive controls, clear status feedback, and responsive layouts across sizes.
Open and runTravel plan dual-value range control
Complete the dual-value range control in the travel planning scenario: includes realistic content, actionable controls, clear state feedback, and responsive layouts across sizes.
Open and runService Request Auto Draft Form
Complete an auto-draft form in a service request scenario: includes real content, actionable controls, clear status feedback, and a multi-size layout.
Open and runProject Space Page Navigation
Complete numbered-page navigation for a project space scenario: include real content, operable controls, clear state feedback, and a responsive layout across sizes.
Open and runLocal Events Bookmark Organizer
Complete a bookmark organizer for local event scenarios, featuring real content, actionable controls, clear status feedback, and cross-size layouts.
Open and run