Experiences
Reference products
Sixteen working pages built from the public API, grouped by what you are trying to build. Each one names the components it uses, runs on deterministic local data, and is driven by a real browser test rather than a screenshot.
What these pages are for
A component gallery proves a control works. A product proves the controls compose. These pages exist to find the second kind of failure — the spacing that only breaks when four components meet, the focus that is lost when an overlay opens over a table, the empty state nobody wrote because the demo data was never empty.
General-purpose products
Marketing, software, publishing and community. Four different products, one component set, and no finance vocabulary anywhere in them.
- General-purposeMeridianMarketing siteA landing page that has to sell something: hero, feature storytelling, pricing, an FAQ that opens, and a lead form that validates before it thanks you.AppShellButtonCardAccordionFieldInput
- General-purposeLedgerlineSaaS consoleThe application shell a working tool lives in — sidebar, a filterable table, an invite dialog that really adds a row, and a settings sheet.AppShellDataTableDialogSheetSelectToast
- General-purposeField notesPublishing platformAn article index you can search and filter by topic, a reading view with editorial typography, and a share control that copies a real link.SearchInputTagCardAvatarToastBreadcrumbs
- General-purposeCommon roomCommunity productA feed with a composer, reactions, comments and a moderation flow — including the confirmation step before anything is deleted.CardAvatarTextareaAlertDialogBadgeToast
Personal websites
Personal sites are a first-class product direction, not a smaller marketing page. These four are deliberately different from each other — a career, a bibliography, a portfolio and a garden — because one template with a different accent colour serves none of them.
- Personal siteAda OkonkwoCareer profileA professional site that reads like a career rather than a résumé: identity, a timeline of roles, selected work, and an honest print action.ProfileHeroSocialLinksExperienceTimelineProjectShowcase
- Personal siteR. SilvaAcademic profileA research page where the bibliography is the product: publications narrowed by year, type and topic, with DOI links that appear only when there is one.ProfileHeroPublicationListTimelineBadgeCard
- Personal siteStudio KestrelCreative portfolioThe expressive one: a display-scale hero, a project grid that opens in place, and spatial motion that answers the pointer instead of performing for it.ProjectShowcaseParallaxSceneMarqueeLightboxKineticHeadline
- Personal siteField notebookJournal & digital gardenAn exploratory personal site: a now block with a date on it, a reading shelf with real progress, tagged notes, and topics that filter the whole page.NowSectionReadingShelfTagCardSearchInputSegmentedControl
Vertical journeys
One convincing flow each, rather than eight half-finished applications. Every one of them is a user journey with a beginning, an action and a result.
- VerticalCopilot deskAI workspaceA provider-neutral agent session: a message list, a response that streams, a tool-call timeline that reports durations, and a prompt composer that holds its state.MessageListStreamingTextToolCallTimelinePromptComposerAgentActivity
- VerticalBenchResearch benchA measurement instrument: parameters drive the chart, the distribution and the contour update together, and every number on screen is supplied rather than derived.SliderSegmentedControlHistogramChartContourChartDataTable
- VerticalDeskQuantitative analyticsA time-range control over a candle chart, an underwater curve on a real date axis, factor exposure, and an inspector bound to the selected row.SegmentedControlCandlestickChartDrawdownChartDataTableInspectorPane
- VerticalNorthlightCommerce flowA product page with variants that change the price and the stock line, a cart that counts what is in it, and a three-step checkout that can go back.CarouselBadgeRadioGroupStepperButtonToast
- VerticalCourseLearning moduleLesson navigation, a checked quiz that scores itself and explains each answer, and progress that survives moving between lessons.SidebarRadioGroupProgressCalloutButton
- VerticalReelCreator studioA media library with a gallery, a lightbox that keeps its place, a collection that can be reordered, and metadata that can be edited and saved.ImageGalleryLightboxSortableListFieldTextareaRating
- VerticalPlannerProductivity boardA board you can actually move work on — pointer or keyboard — with a status roll-up, bulk selection and a resizable workspace beside it.KanbanBoardSortableListCheckboxWorkspaceProgressToast
- VerticalSignalDiscussion forumA topic list, a threaded discussion, reaction counts that update, and a report flow whose destructive step is confirmed rather than instant.CardTextareaAvatarAlertDialogTimelineBadge
How to read these pages
Every experience states the components it uses and the journey its browser test drives. The state is local and deterministic; the appearance pinned at the top of each page is part of the demonstration, not a requirement.
Change the palette, type voice or spatial depth in the appearance controls and the whole page follows, because nothing here is styled by hand — the same attributes that restyle the component gallery restyle a product.
Two things are intentionally absent: real checkout, and real model calls. Both are represented by local state with the same shape as the real interaction.