# All Stageshow examples

The bundled catalog contains 72 entries across scenes, product studies, kit specimens, and teaching comparisons.

## Scenes

- [Static card](https://github.com/benjitaylor/skills/tree/main/stageshow/examples/static-card) — Quiet hierarchy, a hard crop, one satellite, real words only on the selected customer, its neighbors and the total.
- [Dark card](https://github.com/benjitaylor/skills/tree/main/stageshow/examples/dark-bento) — One signal said once; album art keeps it a music app.
- [Hero demo](https://github.com/benjitaylor/skills/tree/main/stageshow/examples/hero-demo) — Five beats, named targets, an annotation, a terminal coming forward.
- [Payout flow](https://github.com/benjitaylor/skills/tree/main/stageshow/examples/payout-flow) — Slow overlapping arrivals, reading time, a payoff that holds.
- [Changing markets](https://github.com/benjitaylor/skills/tree/main/stageshow/examples/choreography) — Retained tracks, soft masks, dependent timing.
- [AI answer](https://github.com/benjitaylor/skills/tree/main/stageshow/examples/ai-chat) — The question sent, Thinking, the answer streaming in with its height, sources last; no sparkles, no purple.
- [AI with cards](https://github.com/benjitaylor/skills/tree/main/stageshow/examples/ai-cards) — A multiple-choice card answered and kept as the record, a card of options opening in the thread, booked from its own button.
- [Form validation](https://github.com/benjitaylor/skills/tree/main/stageshow/examples/form-error) — An error on the field that caused it, cleared by fixing it, then the button confirms on itself.
- [Drag to reorder](https://github.com/benjitaylor/skills/tree/main/stageshow/examples/reorder) — A row lifted by its grip, the others making room, dropped into place.
- [Chart scrub](https://github.com/benjitaylor/skills/tree/main/stageshow/examples/chart-scrub) — A hairline and dot that follow the pointer, the headline value rolling to the day under it.
- [Edit in a table](https://github.com/benjitaylor/skills/tree/main/stageshow/examples/table-edit) — A cell edited in place, then the total it feeds rolls a beat later.
- [Loading to content](https://github.com/benjitaylor/skills/tree/main/stageshow/examples/loading) — A skeleton at the content's own geometry, rows resolving top to bottom, real chrome throughout.
- [Dark hero](https://github.com/benjitaylor/skills/tree/main/stageshow/examples/dark-hero) — Depth from surface steps on black, one lit color, a status that changes on its own pill.
- [Live collaborators](https://github.com/benjitaylor/skills/tree/main/stageshow/examples/presence) — Each person one color everywhere, names riding their cursors, work shown in the doc's own marks.
- [Subscription handoff](https://github.com/benjitaylor/skills/tree/main/stageshow/examples/subscriptions) — A chip flies into a row, MRR rolls, a second scene is the reset.
- [Close-up](https://github.com/benjitaylor/skills/tree/main/stageshow/examples/close-up) — One control at 1.4x with its window's chrome, the row whole, a large cursor to match.
- [Many of one](https://github.com/benjitaylor/skills/tree/main/stageshow/examples/many-of-one) — A grid of one thing off every edge, one tile in focus by depth, the only one with words.
- [Fade crop](https://github.com/benjitaylor/skills/tree/main/stageshow/examples/fade-crop) — A window fading out at its foot, over filler, instead of running off an edge.
- [Panel over product](https://github.com/benjitaylor/skills/tree/main/stageshow/examples/panel-annotation) — A settings panel over the product's margin, one leader from the setting to what it changed.
- [Overlapping windows](https://github.com/benjitaylor/skills/tree/main/stageshow/examples/overlap) — A card in front of a window, its edge on the window's sidebar line.
- [Stacked cards](https://github.com/benjitaylor/skills/tree/main/stageshow/examples/stacked-cards) — Two components at one width, a small gap, the lower one off the bottom.
- [Opposite corners](https://github.com/benjitaylor/skills/tree/main/stageshow/examples/opposite-corners) — A bento tile: copy bottom-left, the product hung from the top-right corner.
- [Tilted stack](https://github.com/benjitaylor/skills/tree/main/stageshow/examples/tilted-stack) — A loose pile of paper, small alternating angles, only the top card has words.
- [Corner chip](https://github.com/benjitaylor/skills/tree/main/stageshow/examples/corner-chip) — A small chip centered on a window's corner, half outside.
- [Monochrome](https://github.com/benjitaylor/skills/tree/main/stageshow/examples/monochrome) — Other companies' products in a row, grayscale, faded at the foot.
- [Row of windows](https://github.com/benjitaylor/skills/tree/main/stageshow/examples/window-row) — Sessions side by side at one height: focus by depth, neighbors cut by the stage, only filler cropped.
- [Window and phone](https://github.com/benjitaylor/skills/tree/main/stageshow/examples/device-pair) — A dashboard and a lock screen telling one event; the phone straddles over margin, never over the figure.
- [Invoice story](https://github.com/benjitaylor/skills/tree/main/stageshow/examples/story) — An invoice, a plan, a connector, rolling totals.
- [Calendar drag](https://github.com/benjitaylor/skills/tree/main/stageshow/examples/calendar) — A populated week, one focal event, a measured pickup.
- [Drag and drop](https://github.com/benjitaylor/skills/tree/main/stageshow/examples/freeform-drag) — Grab offset, a measured grid, a drop slot that snaps.
- [Card expansion](https://github.com/benjitaylor/skills/tree/main/stageshow/examples/phone-touch) — A card opens into its screen as one object, and the loop folds back.
- [Dynamic Island](https://github.com/benjitaylor/skills/tree/main/stageshow/examples/dynamic-island) — One black shape, its content a separate layer.
- [Messages](https://github.com/benjitaylor/skills/tree/main/stageshow/examples/messages) — Composer, typing, receipts, a bubble's lifetime.
- [Cursor kinds](https://github.com/benjitaylor/skills/tree/main/stageshow/examples/cursors) — Cursor kinds and direct feedback across common interactions.
- [Cursor morph](https://github.com/benjitaylor/skills/tree/main/stageshow/examples/cursor-morph) — One outline becomes four cursor styles. Position, press feedback, and shape share the same stage.
- [Resize cursors](https://github.com/benjitaylor/skills/tree/main/stageshow/examples/cursor-resize) — Resize edges and corners, the cursor changing kind as it crosses them.
- [Annotations and lines](https://github.com/benjitaylor/skills/tree/main/stageshow/examples/annotations) — Leaders, dimensions, flows and a moving target.
- [Feature grid](https://github.com/benjitaylor/skills/tree/main/stageshow/examples/bento) — One hero, one window, a stat, an object, a diagram.
- [Technical grid](https://github.com/benjitaylor/skills/tree/main/stageshow/examples/ruled-bento) — Shared rules and technical imagery.
- [Consumer grid](https://github.com/benjitaylor/skills/tree/main/stageshow/examples/staggered-bento) — Offset tiles, graphic art, physical objects.
- [Hero grid](https://github.com/benjitaylor/skills/tree/main/stageshow/examples/hero-grid) — Different grounds and materials composed as one picture.
- [Upload](https://github.com/benjitaylor/skills/tree/main/stageshow/examples/upload) — A file dragged in from the desktop, an upload row with progress that settles as a file row.
- [Share](https://github.com/benjitaylor/skills/tree/main/stageshow/examples/share) — A share popover over a document: an email becomes a chip, a role menu, a person added to the list.
- [Swipe](https://github.com/benjitaylor/skills/tree/main/stageshow/examples/swipe) — A phone swipe to archive: press, swipe, a throw at the finger's speed, the gap closes.

## Real products

- [Figma](https://github.com/benjitaylor/skills/tree/main/stageshow/examples/figma) — Canvas selection, a color picker, a second cursor.
- [Linear](https://github.com/benjitaylor/skills/tree/main/stageshow/examples/linear) — Command menu and assignment.
- [Slack](https://github.com/benjitaylor/skills/tree/main/stageshow/examples/slack) — Messages, a reaction, a thread reply.
- [Raycast](https://github.com/benjitaylor/skills/tree/main/stageshow/examples/raycast) — Search and clipboard history over a blurred desktop.
- [Finder](https://github.com/benjitaylor/skills/tree/main/stageshow/examples/finder) — Quick Look over a file list; a file moved into a folder; the same window in frosted glass.
- [Finder · glass](https://github.com/benjitaylor/skills/tree/main/stageshow/examples/finder-glass) — Quick Look over a file list; a file moved into a folder; the same window in frosted glass.
- [Spotify](https://github.com/benjitaylor/skills/tree/main/stageshow/examples/spotify) — A dark desktop app with album art.
- [Notion](https://github.com/benjitaylor/skills/tree/main/stageshow/examples/notion) — A slash command; a comment and its reply.
- [Google Docs](https://github.com/benjitaylor/skills/tree/main/stageshow/examples/google-docs) — A slash command; a comment and its reply.
- [Gmail](https://github.com/benjitaylor/skills/tree/main/stageshow/examples/gmail) — Hover actions, archive, an undo toast.
- [Google Calendar](https://github.com/benjitaylor/skills/tree/main/stageshow/examples/google-calendar) — Drag to create an event, the quick-create popup.
- [PowerPoint](https://github.com/benjitaylor/skills/tree/main/stageshow/examples/powerpoint) — Slide editing; AutoSum and a chart.
- [Excel](https://github.com/benjitaylor/skills/tree/main/stageshow/examples/excel) — Slide editing; AutoSum and a chart.
- [Wikipedia](https://github.com/benjitaylor/skills/tree/main/stageshow/examples/wikipedia) — Search suggestions in a browser.
- [Telegram](https://github.com/benjitaylor/skills/tree/main/stageshow/examples/telegram) — Native chat apps on an iPhone.
- [iMessage](https://github.com/benjitaylor/skills/tree/main/stageshow/examples/imessage) — Native chat apps on an iPhone.

## Kit

- [Backgrounds](https://github.com/benjitaylor/skills/tree/main/stageshow/examples/backgrounds) — One interface over twenty grounds: colorful gradients, light, linework and material.
- [Visual styles](https://github.com/benjitaylor/skills/tree/main/stageshow/examples/looks) — Type, shape and color working together. Treat the kit defaults as a starting point.
- [Brand marks](https://github.com/benjitaylor/skills/tree/main/stageshow/examples/brand-marks) — Common payment, app, bank and crypto marks, with original artwork on light and dark surfaces.
- [Window chrome](https://github.com/benjitaylor/skills/tree/main/stageshow/examples/chrome) — Twelve window frames, including glass with an inset page, card, hairline and native browser variants.
- [Phones](https://github.com/benjitaylor/skills/tree/main/stageshow/examples/phones) — Every phone frame in the kit.
- [Controls](https://github.com/benjitaylor/skills/tree/main/stageshow/examples/controls) — Field, Segmented, Toggle, Tabs, Code, Chart, Slot, Scroll and a Camera push-in.
- [Parts](https://github.com/benjitaylor/skills/tree/main/stageshow/examples/parts) — States, Check, Meter, Stream, Connector arrows, Popover and Menu, the satellite lock screen.
- [Buttons](https://github.com/benjitaylor/skills/tree/main/stageshow/examples/buttons) — Every Button variant and size, labels that change width beside neighbors, an icon that arrives later.
- [Cards](https://github.com/benjitaylor/skills/tree/main/stageshow/examples/cards) — Card padding and nested radius, Divider in a card and a toolbar, Kbd shortcuts.
- [Kit extras](https://github.com/benjitaylor/skills/tree/main/stageshow/examples/kit-extras) — Chip, Swap, Avatar rings, Meter tones, Menu hover, Expand, solid glyphs, BrandMark.
- [Glass](https://github.com/benjitaylor/skills/tree/main/stageshow/examples/glass) — The glass theme on a window, a chip and a popover.

## Comparisons

- [Comparisons](https://github.com/benjitaylor/skills/tree/main/stageshow/teaching/contrasts.tsx) — Paired studies of motion, framing, hierarchy and restraint. Choose a principle to inspect.