Outrospective
A brand agency's website, and the command centre that runs it.
Outrospective is a senior brand, campaign and digital agency in Cape Town and Scotland, led by Jim Faulds. We designed and built their website, from a real-time gold ring in the hero to a pinned portfolio of brand stories, and the private command centre the team uses to run it: pages, blog, media, newsletters, leads, analytics and who can do what.
8
command-centre modules, from leads to newsletters
- Client
- Outrospective
- Engagement
- Client project
- Our role
- Design, engineering and command centre
- Built with
- TanStack Start, Supabase, WebGL, Resend
An agency that sells perspective needs a site that shows it, and tools that keep it current.
Outrospective's work spans brands like Shell, Smirnoff, Johnnie Walker and Vodacom. The website had to feel at that level from the first second, tell those stories with confidence, and still make the next step obvious: start a project.
Behind the scenes, the team needed to publish without waiting on a developer. Rather than bolt on a generic CMS, we built a command centre around their own content, their leads and their newsletter, with access set per person.
What it had to do
- 01Make a first impression that matches the brands in the portfolio.
- 02Tell each brand story with its result, not just a logo.
- 03Let the team edit pages, publish articles and send newsletters themselves.
- 04Capture every enquiry and sign-up, and show what's working.
The site, top to bottom
Keep scrolling to walk the whole page.
A full-length capture of the live home page, exactly as a visitor sees it on a desktop.
outrospective.vercel.app(opens in a new tab)
A cinematic website and the command centre behind it.
Two parts designed together: the public site that wins the work, and the private tools that keep it running.
01
The website
Real-time gold ring
Liquid-gold particles gather into the Outrospective O, react to the cursor and, on scroll, travel into the next section and cool to the brand's ember orange.
Pinned portfolio
The work section holds still while five brand stories move past, each with its sector, the brief and what it achieved.
Editorial pages
Services, about, insights and a blog, with smooth scrolling, page transitions and a custom cursor that respect reduced-motion settings.
Lead and newsletter capture
Every enquiry and sign-up lands in the command centre, checked on the server before it is stored.
02
The command centre
Structured page editor
Pages are built from sections with their own SEO fields, and every save keeps a revision.
Blog and media
Articles with tags and excerpts, and a media library with alt text and private, signed storage.
Newsletters
Campaigns are written in the command centre and delivered through Resend to the subscriber list.
Leads and analytics
A pipeline from new to won or lost with notes, next to traffic, sources and devices for the last 30 days.
Command-centre modules
8 modules · one login
- 01Overview
- 02Analytics
- 03Pages
- 04Blog
- 05Media
- 06Newsletters
- 07Leads
- 08Team and roles
From the command centre to the live site, and back again.
The team publishes from one place; visitors' enquiries, sign-ups and visits flow straight back into it.
- 01
Visitors
Prospective clients
- Explore the work
- Read insights
- Enquire or subscribe
- 02
Website
TanStack Start · WebGL
- Gold ring hero
- Pinned portfolio
- Contact and newsletter forms
- 03
Command centre
Supabase · Postgres
- Pages and revisions
- Blog and media
- Leads and analytics
- 04
Delivery
Resend
- Newsletter campaigns
- Subscriber list
- Sends logged
An enquiry becoming a client
- Step 1
Enquiry
A visitor fills in the contact form. The server checks it and records it as a new lead.
- Step 2
Qualify
The team sees it in the command centre, adds notes and moves it to qualified.
- Step 3
Propose
Once a proposal is out, the lead moves to proposal, so the pipeline always shows what's in play.
- Step 4
Win
Marked won or lost, with the analytics alongside to show which pages and sources bring the best leads.
One system for the site and the business behind it.
What the team runs from a single login.
- 8command-centre modules
Pages, blog, media, newsletters, leads, analytics, team and an overview, in one place.
- 4access roles
Owners, editors, authors and viewers each see and change only what they should.
- 24kparticles in the hero ring
Drawn on the graphics card in real time, with a lighter fallback for devices that need it.
The decisions you don't see.
Security in the database
Every table has row-level rules, and public forms write through checked database functions, so the website can't read or change anything it shouldn't.
Motion with manners
The gold ring and page transitions are tuned for speed and switch to calmer versions for visitors who prefer reduced motion.
Nothing lost on save
Page edits keep a revision history, and the activity log shows who changed what and when.
Stack
- TanStack StartWebsite and command centre (React)
- SupabasePostgres, accounts, storage and access rules
- WebGLThe real-time gold ring
- ResendNewsletter delivery
- DrizzleDatabase schema and migrations
Services involved
Have a business that's outgrown its tools? Let's talk it through.
Tell us what you're running on today and where it hurts. We'll come back with a few questions and, if it's a good fit, a fixed proposal.
Fixed proposal before any work begins · You own the code