look · 66 scenes follow it · sm1.0430000202002
Outline
Outlined illustration: an ink outline on everything, hard offset shadows, round corners, friendly sentence-case labels and a little bounce.
- line
- ink
- elevation
- tinted
- corners
- round
- texture
- none
- glow
- none
- colour
- categorical
- labels
- sans-sentence
- type
- standard
- easing
- expressive
- tempo
- steady
- stagger
- even
- motif
- dot-grid
The set, in Outline
your brand · this look
Quality against cost
Quality and cost blocks land on three pan balances; the rivals sag toward cost while ours tips to quality and settles, each tilt computed from the scores.
Bead views
One record stays still as a bead while its string re-threads the world around it: a calendar, a board, a street map and a timeline.
Branch your database like a cell
A database cell called main buds two branch cells; one is changed and fuses back, the other dissolves, and main carries the change.
One message, turned into done work
A chat message's key phrases lift off and snap into a structured card, then the actions run and a reply comes back.
Crate discrepancy
Trays lift out of a delivery crate one by one and tick off their line on the packing slip; the one that came up short glows amber and floats up with its note.
Summarisation: the page dehydrator
A whole web page is laid on a dehydrator tray; everything but the key sentences evaporates, the token counter falls by nine tenths, and a crisp excerpt slides out of the side.
Gear tiers
Three plans drawn as camping kit in one ink line, a tent, a campsite and a basecamp, each item drawing on as its feature ticks in; a Monthly/Annual toggle rolls the prices on their wooden signs.
Inbox triage
Incoming requests are tagged and routed into team queues with SLA timers, and one urgent item jumps to the front of its line.
Your brand, everywhere at once
A paint chip is lifted from a fan and pressed onto a line-drawn app and phone; a circular wave from the touch point repaints everything in that brand's colours.
Type it, and it runs
Each phrase of a prompt drops a part instead of a letter; the parts settle into a small machine, and on Run a ball rolls through it and lights the output.
Contributions, counted
Contributions land on rows, points count up and the rows re-sort.
Live room
Named cursors, a proposal, a vote that passes and a change that ships, live.
Pipeline board
Cards advance column by column on a kanban board while counts and totals follow them, until one lands in the final stage.
Press QA
Builds roll off a press and under an inspector; an arm flicks the one with a failing test down a chute, back to the plate, and it passes on the second run.
Traffic, by channel
Traffic is a river on a contour map, split into one branch per channel as wide as its share; a campaign surge widens one branch while its neighbours narrow.
The year on one rail
A Today marker walks a roadmap's time axis; shipped milestones fill in and the key launch opens into a card.
Know the delay first
A coin scratches the foil off a boarding pass to reveal the predicted delay, long before the airport board prints the same time.
Before and after, one sweep
A before / after divider sweeps across scattered manual work, and every fragment snaps into its row in one product surface.
How it works, step by step
A token travels a rail of numbered steps; each card opens on what its step produced, and the last one lands the result.
Tennis correction
Seen from above, a wrong answer is lobbed back over the accent net with the fix written on it, and the next serve on that topic lands in.
Every request, checked in rings
Requests pass concentric control rings around the data; the unauthorised one is stopped as its ring closes, and every decision is logged.
Zip merge
Two cursors pull a zip closed from opposite ends; every tooth is one person's keystroke, and the seam reads as one line with no conflicts.
Account health
A health table replays the month: one account slips to at risk, a playbook fires at the low point, and it recovers.
An agent run, traced
One agent run as a vertical trace: thinking, tool calls and results on a shared time axis, resolving into the answer.
Spend that sorts itself
Every card swipe drops its paperwork on the table, and a line of ants carries each crumb down its own pheromone trail to the right ledger slot.
Deploy liftoff
Each build-log line inflates a hot-air balloon by its share; when the health check passes it lifts off flying an online pennant.
One trigger, every step
One trigger tips a chain of dominoes; each step lights as the wave reaches it.
Smart routing
Payments drop through a pegboard; a rule flips the switch and the flow moves to the processors that say yes.
Everything lands in one place
Work items from everywhere fall into one tray with real physics while a counter tallies them.
Workflow in bloom
An event runs through a workflow graph and each step blooms into generative flowers.
Edge inference
Isometric blocks with live data on their faces rise over a tiled floor.
The stack, in 2.5D
Real HTML layers lift apart in 2.5D while a request drops through the stack.
Expenses on autopilot
A feature list drives a product card through its states, removing a step each time.
The number, made of the work
Grains of real events pour into the digits of the total, then sort themselves into one bar per source.
Order where you see noise
A lens drifts over a dithered field of maybes; inside it, every blob is classified, outlined and labelled.
Coverage map
A dot-matrix world map where every region glows with live traffic, and a new region comes online with a ripple across the continents.
Where every email lands
A broadcast blown like a dandelion clock: each seed is a batch of emails that drifts to the meadow, the bounce fence or the spam puddle, and every tally is counted from where the seeds land.
Search as you type
Every keystroke swirls a prospector's pan and washes part of the catalogue over the rim, until three results are left glinting.
Every tool, one keystroke away
Every integration is a key on one isometric macro pad; a workflow is played as a chord, keys pressing in turn while a run log types each step.
Revenue, four ways
Four KPI tiles read from one set of numbers; a highlighted period sweeps across them and the headline lands as the line reaches its last point.
One string, every language
Speech bubbles in eight scripts float up and pack under a ceiling, then each locale's words glide into a greeting card as one sentence, right to left for Arabic.
Ledger stamp
Payments are checked, stamped, signed and sealed on an indexed belt; one over the limit is held for a second approver.
Woven together
Each tool is a band of warp threads, woven into one fabric that rolls onto your product's beam.
Margin rails
A memo writes itself on pleading paper while passages carried forward from past matters slide in on margin rails that name their source; every § commits from pending to verified.
Migration: moving boxes
A hand truck moves labelled boxes from a cramped old office into a clean new building, where each one is unpacked into the right room.
Where users actually stop
Visitors walk a gallery of product features and stop where they care; their dwell warms a heatmap and ranks the features beside it.
Changelog scroll
A parchment scroll unrolls from its roller one release at a time; each row is inked wet, settles, and ages as newer releases arrive.
Permission chessboard
Role pieces take turns on a board of resources by actions; the squares each role may use glow in accent, the rest lock, and a sentence spells out what it can do.
Messy in, structured out
Documents feed a slot and a receipt prints every extracted field with its confidence.
Pigeonhole wall
Documents travel from an intake tray into labelled pigeonholes; a request pulls the three it needs, each source mark commits from pending to verified, and they return to the wall.
Plan ladder
A real pricing table that fills itself in: ticks climb plan by plan so each tier carries the last one's features, the recommended plan lifts with its full set, and billing flips to yearly once.
PII redaction: pebbles
A squeegee sweeps down a support email and every personal detail it passes sets into a grey pebble the width of the words, while the sentences stay readable.
Projector sheets
Production, staging and a pull request stack as acetate sheets on a projector; lift the PR sheet off and the wall snaps back to staging.
Autoscaling pufferfish
Traffic rolls in as waves on the sea's surface; a pufferfish inflates to match each one while a rigid boxfish with fixed capacity gets tossed and throws a 502.
Every run on the scope
Every running job is a blip on a radar scope; one starts failing, and a cursor reaches in and pauses it until its retry.
Redline front
A review front sweeps down a contract; clauses commit as tracked changes, margin comments and verified authorities, and the file returns as a finished redline.
Before and after
A receipt marble crawls through five contraptions of the old process and jams after four days, then drops down one smooth chute into Done in a second.
A run, as a score
A multi-agent run written as a musical score; each stave vibrates while its agent works.
Signal from noise
Noisy strands pass a gate and leave as clean, ordered lanes.
Early detection
A shaking sieve lets a panel of markers fall through to a calm normal pile, while the few too big for the mesh catch, glow amber and lift out into a flagged-early list.
Payroll that follows the sun
A sunrise sweeps along one long office facade in UTC order; each city's windows light at its 9 am and a payslip slides to every person inside.
Weathering the storm
A storm builds over one region of a status map; traffic reroutes and nothing fails.
Agent in every tool
App windows over a painted backdrop while an agent does the steps in every tool.
Year in review: tree rings
A log slice grows one ring per year, each as thick as that year's orders; notches mark the firsts and the plaque at the heart adds them up.
Conversion funnel
Riders slide down one ramp per funnel stage; at each lip some splash into that stage's pool, and the last pool fills with paying customers.
The one number that matters
A crowded dashboard dissolves upward into rising fog bands that settle into the page, leaving one sentence and the one number that survived.
Use this look on your site
site-motion.jsonOne file holds the look
init writes site-motion.json with Outline in it. Every add, build and make reads it, and so does the MCP server.
Every scene follows
node bin/site-motion.mjs init --style outline node bin/site-motion.mjs add balance-scale node bin/site-motion.mjs add account-health # follows Outline too
Restyle the whole site
Switch every scene you added at once. Your scene code and copy are left alone.
node bin/site-motion.mjs style set soft-ui node bin/site-motion.mjs sync