The complete creative and engineering record behind MotionFlow’s thirteen sector experiences — strategy, art direction, copywriting, motion design, architecture, QA and deployment. Read it as a working example: this is the process a client build goes through.
- 13 sector systems
- 8 shared sections · 1 registry
- 3 iteration passes
- Reduced-motion safe throughout
Why sector-specific beats generic.
Generic pitches convert nobody. Each of the thirteen systems argues in its sector's own economics — what an enquiry is worth, where it leaks, and what that sector will never let a machine say.
Speak the sector's language
An estate agent books valuations. A dentist protects a diary. A solicitor triages matters. Scripts, qualifying questions and page copy use each trade's own vocabulary — because nothing says cheap chatbot faster than copy that could sit on any website.
Price the missed enquiry
Every page opens with the cost of the problem, not the cleverness of the fix. A missed valuation call is a lost instruction. A missed emergency callout is a job for the next number on the list. Concrete money makes the case for you.
Respect the compliance boundary
Legal intake is never legal advice. Pharmacy support is never medical advice. Care-home pages lead with dignity, not pressure. Each sector's boundary is written into both the page copy and the call scripts — and it never blurs.
Thirteen accents. Thirteen directions.
Accent, creative direction, signature visual and motion recipe for every system live in one registry file. This matrix is rendered straight from it — the same data the production pages read.
source: app/lib/sectors.js — one file, thirteen systemsSee each direction executed
Copy that talks money, not tech.
Every page follows the same copy contract: UK English, short sentences, the cost of the problem before the shape of the solution — and a standing ban list no page may breach.
Struck on sight
If a phrase could sit on any agency’s homepage, it doesn’t get to sit on these. The ban list is enforced across all thirteen builds:
- Unlock your potential
- Transform your business
- Innovative solutions
- Next-generation platform
- Seamless experience
- Empowering growth
- Revolutionary AI
Shipped instead
Concrete, costed, sector-literate. Lines like these carry the pages:
- Capture the enquiry before another firm calls them back.
- Turn after-hours calls into booked consultations by morning.
- Fill diary gaps with automated follow-up instead of manual chasing.
- Every call answered in seconds. Every conversation logged.
UK English, short sentences
Written the way owners actually speak — no transatlantic gloss, no jargon padding.
Money and time, not tech
The cost of the missed enquiry leads. The feature list follows, if it appears at all.
Factual properties only
24/7 answering, seconds to respond, every call logged. System facts — nothing invented.
No testimonials, no fake numbers
No conjured percentages, client counts or named endorsements. Anywhere. Ever.
One illustration set — and the card that had to be conjured.
The thirteen sector cards share one visual family: soft clay-render 3D scenes, lit the same way, built on the brand palette. Twelve illustrations existed. Care homes didn't.
Rather than let one card drift off-style, the missing artwork was AI-generated using reference-image conditioning — the existing set supplied as the visual reference, so palette, materials and lighting carried straight over — then optimised like every other asset before ship.
same palette · same materials · same lighting
Seven primitives. One easing curve.
The motion vocabulary is deliberately small — seven shared primitives plus one bespoke hero simulation per sector. Three of them are running live below.
One easing curve, everywhere
cubic-bezier(0.22, 1, 0.36, 1)Fast out of the gate, long soft landing. Every reveal, stagger and headline across all thirteen pages rides this curve — it’s what makes different layouts feel like one hand built them.
the curve, live — fast start, soft landing
Reduced motion, respected
Every primitive checks prefers-reduced-motion and renders a complete static layout instead — same content, same hierarchy, no empty gaps. This page does it too: switch the setting and reload.
CountUp · live
0systems
Counts up in view — reserved for factual values only: sector counts, 24/7 cover, seconds to answer.
Typewriter · live
Types simulated call and SMS transcripts in view — the workhorse of the sector demos.
TiltCard · live
Go on — move your pointer.
Fine pointers get 3D tilt and glare. Touch gets a plain card. Reduced motion gets exactly this layout, still complete.
- Reveal — fade + rise
- Stagger — cascading lists
- KineticHeadline — word-mask rise
- CountUp — factual counters
- Parallax — scroll depth
- TiltCard — pointer tilt + glare
- Typewriter — typed transcripts
- + a bespoke hero simulation for every sector
One registry feeds everything.
lib/sectors.js holds the slugs, accents, SEO and art direction. SectorShell turns each accent into CSS variables; eight shared sections consume them; thirteen PageClients add a bespoke hero and demo on top.
Change once, ripple everywhere
A new accent, SEO line or art direction edit in the registry updates every surface that reads it — pages, showcase, footer, sitemap.
Shared sections carry the spine
Problem, capabilities, use cases, outcomes, FAQ, booking — engineered once, styled by accent variables, reused thirteen times.
Bespoke layers carry the personality
Every sector keeps its own hero and demo simulation, so no two pages open — or move — the same way.
Three passes. No first draft shipped.
Every route ran the same gauntlet three times before launch. The polish notes below are lifted from the actual build — before and after, verbatim.
Foundation & clarity
Routes, navigation and lead capture wired first. The message had to survive a phone screen before any decoration arrived — headline, cost of the problem, one obvious next step.
Polish note — verbatim
cards linked to placeholder anchorsreal routes with visible focus states
Creative enhancement
The differentiation pass. Heroes rebuilt around each sector's own visual world, demo simulations deepened, motion added only where it earns attention. Sameness treated as a bug.
Polish note — verbatim
three sectors opened on near-identical dashboardsa signature simulation per sector
Fine-tooth polish
Spacing rhythm, contrast ratios, keyboard focus, reduced-motion fallbacks — and a 375px sweep of every route, hunting for horizontal scroll.
Polish note — verbatim
decorative glows spilling past the viewportclipped inside overflow-hidden parents
Every route opened, screenshotted, criticised.
Code review catches bugs. It doesn't catch a hero that reads wrong at 375px. So before launch, every page faced the browser — twice — before it faced the world.
Open every route
All thirteen sector pages plus the showcase and this guide, run locally in a real browser at desktop and mobile widths.
Screenshot both widths
Desktop and 375px captures for every route — the phone view is where layouts confess.
Critique against the direction
Each capture judged against the sector's stated art direction in the registry. Drift becomes a fix, not a shrug.
Fix, re-check, gate
Fixes re-screenshotted until clean — and nothing ships unless the production build passes.
Ship gate: the production build must pass. No exceptions.
From repository to motionflow.uk.
No hand-uploads, no snowflake servers, no credentials floating in client code. The route to production is short, boring and repeatable — exactly as it should be.
Push to GitHub
The repository is the single source of truth. Every change lands as a commit — nothing edited live on a server.
Vercel builds it
Each push triggers a fresh Next.js 16 production build on Vercel. A failing build simply never deploys.
Live on motionflow.uk
All routes served on the production domain, with static assets cached immutably at the edge.
Secrets stay server-side
The lead API's credentials live as environment variables in Vercel — never in client code, never in the repository.
immutable asset caching · secrets held server-side · every deploy a full build
This guide doubles as the brochure.
Everything documented above — sector strategy, copywriting, art direction, motion design, engineering, QA and deployment — is the same process MotionFlow runs when it builds for a client. The pages you can browse are the proof.
Commission a system like this for your business.
Book a strategy call. We'll map where your enquiries leak, then run the exact process on this page — strategy, copy, motion, build and deployment — for your sector.
- A focused strategy call with a UK-based team
- A build plan covering strategy, copy, motion and deployment
- No obligation — you keep the thinking either way