How it works

From repository to production in four steps

No config files to write and no servers to babysit. Click through the flow to see each screen.

Import a repository

acme/storefrontNext.js · 2h agoImport

acme/docsAstro · yesterdaySelect

acme/api-gatewayNode · 3d agoSelect

acme/design-tokensVite · 1w agoSelect

Stepper With Screens

A how it works section with a vertical stepper beside a mock app window. Each step swaps the screen with a blur and slide, and the steps advance on their own with a progress bar.

↗

How it works

A finished room in three weeks, not three months

One designer, one plan and one delivery date. You stay in charge of every decision.

Book a free call

1

Tell us about your space

Answer six quick questions about rooms, light and the way you live.

3 minutes

2

Meet your designer

A video call with one of our 140 interior designers, matched to your style.

Within 48 hours

3

Review two concepts

Moodboards, floor plans and a shoppable list you can tweak line by line.

Day 7

4

Everything arrives

We order, track and coordinate delivery. You unpack and enjoy the room.

Week 3

Dashed Path Steps

Four numbered cards on paper, joined by a marching dashed route. A dot travels the path and each card lights up as the dot reaches it; on narrow screens the route turns vertical.

↗

How Relay works

From a connection string to a live pipeline in four moves

Every step is wired to the next. Click any stage to jump there, or let the signal run on its own.

02 / 04Map the fields

Relay proposes types and joins from the schema. Accept them, or rename and cast columns before anything moves.

orders.total -> numeric(12,2)users.email -> lowercase, unique3 columns dropped · pii.ssn masked

Steps CircuitNew

Steps drawn as chips on a dotted board, joined by rounded circuit traces that fill up to the current step while a signal pulse travels the route. Below, a panel explains the step with a typed terminal log.

↗

Steps Story TabsNew

A light process section with story-style progress bars as tabs. Each chapter brings its own animated illustration: a floor plan drawing itself, palettes fanning out, an isometric room rising, a cart filling.

↗

Onboarding plan

Sixty days from signed to settled

Every customer gets the same measured plan, with a named owner for each stage. Scroll to follow it.

Day 1 · step 1 of 6Kickoff and access

Day 1Solutions lead
Kickoff and access
A 45 minute call to agree on scope, then SSO, roles and a sandbox workspace set up before you hang up.
SSO liveSandbox
Week 1Migration engineer
Import your history
We move three years of tickets, contacts and attachments from your current tool, with a field map you sign off.
Field mapTest import
Week 2Workflow specialist
Rebuild the workflows
Routing rules, SLAs and macros recreated and tested against last month's real tickets, not demo data.
31 rulesSLA report
Week 3Enablement
Train the team
Two live sessions per shift plus a recorded walkthrough. Agents work a shadow queue for three days.
4 sessionsShadow queue
Week 4Solutions lead
Go live
We switch the inbound address at the quietest hour you choose and stay on a shared channel for the first week.
CutoverHypercare
Day 60Account manager
Review and tune
A report on response times before and after, with the five changes we would make next, in priority order.
Impact report

Steps Scroll RulerNew

A vertical plan along a measuring ruler whose ticks light up as you scroll, next to a sticky meter where the percentage rolls like an odometer. Cards brighten as the playhead reaches them.

↗

How it works

From first commit to production in four steps

Relay plugs into the tools your team already uses. Most teams ship their first preview before lunch.

Step 12 min
Connect your repo
Install the GitHub app and pick the repositories Relay should watch. No YAML to write.
Step 25 min
Set your rules
Choose which checks run on every pull request and who gets pinged when one fails.
Step 3Every push
Ship a preview
Every branch gets its own URL with seeded data, so reviewers click instead of pulling.
Step 4Always on
Watch it live
Error rates, p95 latency and deploy health stream into one timeline the team shares.

Read the setup guideAverage setup time: 11 minutes

How It Works: Steps Line

Four numbered step cards joined by a line that fills from start to end when the section scrolls into view. Each card carries a small looping illustration.

↗

How Tandem works

Support that sorts itself, from first message to resolved

Three steps replace the morning triage meeting. Scroll to see each one in the product.

app.tandem.so/inbox

All requests Receiving

MCMaya ChenCan't export invoices to CSVnow

OHOmar HaddadSSO login loops back to start2m

LFLena FischerHow do I add a teammate?6m

DRDiego RamosUpgrade to annual plan11m

How It Works: Sticky Scroll

Step descriptions on the left and a sticky product mockup on the right that switches screens as each step reaches the middle of the viewport. Steps are also clickable.

↗

The process

Five weeks from first call to launch

A fixed schedule with a named lead at every stage. You always know what happens this week and what lands next.

01Nov 3 to Nov 7
Week 1Nov 3 to Nov 7
Discovery call
A ninety-minute session with your founders and leads to map goals, constraints and what success looks like in numbers.
- Project brief
- Success metrics
PRLed by Priya Raman, Strategy lead
02Nov 10 to Nov 14
Week 2Nov 10 to Nov 14
Research sprint
Twelve customer interviews and a pass through your analytics. We come back with the three problems worth solving first.
- Interview notes
- Opportunity map
TVLed by Tomás Varga, Research
03Nov 17 to Nov 28
Weeks 3 and 4Nov 17 to Nov 28
Prototype and test
Clickable prototypes go in front of real customers every Thursday. What fails gets cut, what works gets sharper.
- Interactive prototype
- Test reports
IOLed by Ines Okafor, Product design
04Dec 1 to Dec 5
Week 5Dec 1 to Dec 5
Launch and handoff
Production-ready files, a component library and a recorded walkthrough, so your team owns every decision we made.
- Design system
- Handoff video
PRLed by Priya Raman, Strategy lead

Book a discovery callFixed price from $24,000

How It Works: Vertical Timeline

A light, editorial timeline with serif titles and cards that alternate sides. The line fills and the current dot pulses as you scroll; on narrow screens every card sits on the right.

↗

Under the hood

Every invoice takes the same four-stop route

Ledgerline reads, matches and routes bills on its own. People only see the few that need a decision.

1,284 invoices processed today

Auto-approved 82%Sent back 3%

02 · Process

Extract

Line items are read, coded to the right GL account and matched against open purchase orders.

Fields read: 42 per invoice
PO match rate: 98.7%
Time per invoice: 8 seconds

How It Works: Flow Diagram

Four connected nodes for input, process, review and output, with packets traveling along the paths, a skip route and a loop back. Hovering or focusing a node shows its details below.

↗