Tide v0.1 draft
29Court design system

Tide. Calm, warm, and decided in one swipe.

Sun-bleached sand, sea-glass panes, late-afternoon light. Every piece below is live, works with touch, mouse and keys, and has a Tune knob.

SessionSimulated

Every demo, live

35 demos on this page and its showpieces. Every one runs — nothing here is a picture of a component. Jump in anywhere.

Components

Scenes

Showpieces

Swipe deck

→ approve · ← dismiss · ↑ snooze · ↓ comment. Far enough or fast enough commits. Arrow keys and buttons do the same. One gesture shows one action: the deck locks onto a direction and floods the edge it vacates — muted while it's a suggestion, solid when letting go would commit.

Purchase
Weekend restock
$184.00
Nine items, delivered Saturday morning.
Needs approvalSample data
Draft reply
Reply to the landscaper about Tuesday
“Tuesday at 9 works. Please use the side gate.”
Ready to sendSample data
Renewal
Domain renews in 9 days
Auto-renew is on. Approve to keep it, dismiss to let it lapse.
Low stakesSample data

Approve: slide to confirm

Only the end of the track commits. The handle unfurls into the answer. Keyboard: focus the handle, Enter.

Dismiss with undo · toasts

Reversible actions act at once and offer Undo. Toasts stack by depth; hover to fan them; swipe one away.

Newsletter from a surf shop

Snooze picker

Four presets, or drag the tide ruler: it coasts and settles on the nearest 15 minutes. Arrow keys step.

Progress island · c29-progress

The long-operation home. One spring carries width, height and corner; one progress value drives the pill percent, the detail line and the bar. Tap the pill to expand it. Under reduced motion the same swap is instant.

Long operationSimulatedProgress is simulated for this demo

Islands at work. Three operations at once — an upload, a call, a deploy. Each island keeps its own value and its own pause. Simulated values, real component.

Range · the slosh fill

The .t-range family. The handle rides your finger 1:1; the fill chases it on a softer second spring, surges past on a fast drag, and rings back to rest. Arrow keys step, PgUp and PgDn stride, Home and End jump.

45 minpick a length
03060902 hrs

The same fill over a native input: the input keeps focus, keyboard and screen reader semantics, and the drawn handle and fill are its picture.

Kitchen speaker volume: 30%

Type in motion

Page titles enter word by word, rising out of a soft blur on a 70ms stagger. The pattern is one attribute, data-rise, plus Tide.rise() to replay. Under reduced motion the words are simply there.

Front door · headline

Your house, run by talking to it.

One assistant that knows the rules of your house, and every app moves the way this sentence just did.

Comment & feedback

One bar that changes shape. Thumbs down asks why. The comment composer grows from a pill.

Give an instruction

The talk-to-Hark composer. Mic when empty, send when there's text. Effort chips under the box.

Decision inbox

The pile is a live count. Press it to open the rows.

  •

    The empty state. The same inbox with nothing in it:

    Buy button

    Idle → processing → paid, one shape the whole way. Signed out? It asks you to sign in first. Checkout is Stripe-hosted, simulated here.

    Beach day kit
    Sample product
    $24
    Beach day kit — sold out
    The disabled state: same shape, no press

    Upgrade · lapsed · reset

    One opportunity per screen, over a soft preview of what's behind it.

    Weekly insights

    Spend fell 12% this week; three errands ran themselves.
    Errand history

    41 errands since spring. Restock, dry cleaning, court bookings.

    Account

    Signed out shows Sign in; signed in shows the avatar menu. Pages can show or hide blocks with .c29-if-member / .c29-if-anon.

    Live element:

    You're browsing as a guest. Free use works right away.

    Welcome back. Your errands and settings are saved.

    Connect integrations

    Connect runs OAuth on the account site (simulated). The bar climbs while it syncs.

    One-time code · copy field

    Six cells, one real input: paste and autofill just work. Copy draws its own check.

    Try 123456 (closes into a capsule) or 000000 (shakes).

    Sheet · loaders · basics

    Native <dialog> sheet you can drag down. Shimmer like sunlight on water.

    Gathering this week…

    Agent run trace

    Steps arrive; the header shimmers while working, then folds to one line.

  • Read the pantry list9 items
  • Compared two storesPicked the cheaper basket

    • Sweep board · c29-sweep

    The Tuesday update presentation from the First-Name pages: dated entries, provenance line, date states computed live (past fades with a Done tag, today gets the coral edge, an all-past board declares itself stale). Rev 4 rebuilt it as a timeline board — date medallions on a rail, facts as a spec sheet — and the steer box below pins instructions for the next round above the board.

    An easy out-and-back while the light lasts. Costumed paddleboarders everywhere; cantina after-party. First week of persimmons.

    Rainy day backup: the backup plan lives in the note slot, like Mason's card.

    Steer the next round

    Pin an instruction and it rides above the board until you unpin it. Pins live on this device, in this browser.

    Ctrl/⌘ + Enter pins it

    Nothing pinned yet. The next round runs on its standing instructions.

    Run the next round
    The steer box, closed loop: the round takes your newest pin and applies it.

    Present · c29-gift

    The pals' gift mechanic unified: one component, two modes (this inline box, or an announce bar that opens the drawer sheet), one seen-store. The payload is slotted content; the toys stay page costume. Tap the present: the lid flies, Tide confetti bursts, and the payload rises in — under reduced motion it simply opens, settled.

    I'm here for you. Inside every present is a letter, a list, or a little machine, carried as light-DOM children:

    • Wrapped, waiting, opening, opened: one state vocabulary
    • Seen-store key tide_gift_seen_<id>; opened gifts stay open on revisit in inline mode
    • Announce mode docks a bar and opens this same box inside Tide.sheet

    Same present, the ceremony opening. The payload waits under a wrapping face, and the corner drag drives the one --gp progress: the lid flies as you peel, the confetti bursts at the same .42 mark, and past the fold's mark the face sweeps off on its own.

    • Drag the corner: past the mark it finishes itself; short of it, or flicked shut, it falls flat
    • Under reduced motion the corner is a plain toggle: instant reveal, no curl, no confetti
    • Wrap it back up re-covers the payload under a fresh corner

    Peel · c29-peel

    Ceremony class. The page peel lives only where a moment is allowed theatre: the gift opening, the front door, a pricing card. Never in approvals, decks, sheets or settings: those stay calm, and no work-surface component may host a peel. One flourish per surface. Drag the corner: the face folds along a real diagonal, the flap is the corner's paper back, and what waits underneath sits clear of the fold at rest. Under the motion gate the corner is a plain toggle.

    Team plan

    Shared rule books for the whole crew, one school for every assistant on the team.

    $49/mo

    Under the corner

    No setup fee.Cancel in one tap.Rule book exportswith you.

    Player · c29-player

    The chaptered bottom player from the pals pages, with its hard-law fixes: no autoplay ever (explicit play taps only, auto-advance is opt-in), one playback bar docked in the reserved slot publishing <html data-player>, a real range-input seek, and dismiss split from stop: hiding the bar never pauses; the square button is the only stop. Scroll away while it plays to meet the mini. Rev 4 dressed it to the pals' standard: an artwork stage, a seek bar that fills as it plays, chapter time chips.

    Tonight's queue & the sleep timer. The queue rows drive the one player above (selecting never autoplays). Set the sleep timer a few minutes out on the ruler and it will pause the episode when it lands.

    No sleep timer set.

    Scenes — whole stories

    Components earn their keep in compositions. Each scene below is a small story you can play through end to end, at phone width, from pieces you have already met. Sample content throughout; the interactions are real.

    Scene · Pricing, with ceremony

    A pricing page is a ceremony surface, so the peel is legal here. Set a budget with the slosh range; the plan that fits lights up, and the buy button follows it. The founding note hides under a corner.

    Pick the plan that fits the house.

    $30per month, tops
    $0$60
    Starter $12 /mo

    Concierge for one part of the house

    10 errands a month

    Email summaries

    House $29 /mo Most houses

    The whole house, every room

    Unlimited errands

    Flows Watchers included

    Whole Estate $54 /mo

    Everything in House

    Guest passes for the pals

    The priority line

    First fifty houses keep their starting price for good. No renewal games, no creeping tiers: the price you start at is the price you keep.

    Scene · Approve, end to end

    A real story in four beats: an invoice waits, a sheet opens, only a full slide commits, and the card keeps the stamp. Undo lives in the toast, like everywhere in Tide.

    Invoice #1042Waiting

    Harbor Cantina — crew lunch, Friday

    Tacos al pastor × 12$96.00
    Aguas frescas × 12$48.00
    Delivery$40.00
    Total$184.00

    Not yet approved.

    Scene · The Morning Paper

    The paper Dillo would print: one top story, a handful of briefs, a filter that works, and a mark-all-read that means it. Fixed sample edition — the date on it is real, the news is a stand-in.

    Sunday, October 18, 2026 · Sample edition

    The harbor is flat calm till noon.

    Ferry board adds a sunrise sailing

    The harbor board voted Thursday to add a 6:40 AM sailing for the winter. Early crews get the bay to themselves; the coffee cart at the pier opens twenty minutes earlier to meet it.

    Persimmons land at the farmers market tomorrow

    First of the season. The Hachiya need another week; the Fuyu are ready now.

    House
    Quiet hours start at ten

    The street agreed at Tuesday's meeting. The one exception: the last game of the series.

    House
    Southwest swell builds late Sunday

    Small craft should check the advisory before heading out after dark.

    Harbor
    The Witches Paddle returns on the 25th

    Costumed paddleboarders at King Harbor, cantina after-party, free to watch.

    Harbor

    Scene · The two-minute quiz

    Three questions, a real progress island keeping score, and no auto-advance anywhere: the next question waits for your tap, like everything in Tide.

    Scene · Checkout — Flows Watchers

    The Watchers pilot the way a buyer meets it: price, pay button, the island while it provisions, then the receipt. Simulated checkout, like the buy button's.

    Flows Watchers90-day pilot

    A watcher reads the sources you name — agendas, filings, inboxes — and briefs you before anything moves.

    $1,500one-time pilot · then $500/mo if it earns its keep