Four prospects. Four briefs. Four one-page mockups.
Each mockup starts the way a studio brief would: a prospect, their existing site, a goal. Each ships as its own live link. The companies are fictional and the photography is AI-generated; the layouts, motion and code are real.
01 · B2B SaaS · treasury and cash forecasting
Tallyra
The brief
- Prospect
- Tallyra, cash forecasting software for mid-market finance teams
- Who buys
- CFOs, controllers and treasurers at $50M–$1B companies
- Existing site
- A 2014 template: stock slider, clip-art icons, no product shown. Open it
- Goal
- Look like the category leader and get more demo calls
- Must feel
- Precise, fast, quietly confident
Palette and type
Geist · Geist Mono
Drag the divider, or focus it and use the arrow keys.
Motion and interaction
- WebGL dot-grid hero that follows the pointer
- The product as the hero: a live dashboard drawn in code
- Dashboard tilts flat as you scroll toward it
- Pinned three-step story that snaps to each step
- Scenario slider that redraws the forecast
- Bento tiles with a pointer-tracking border light
- Logo marquee that speeds up with your scroll
- Customer stories with a countdown ring
- Magnetic buttons, masked line reveals, scrubbed manifesto
02 · Manufacturing · precision machining
Corvane Industrial
The brief
- Prospect
- Corvane, a 68-machine contract machining shop since 1987
- Who buys
- Sourcing and engineering leads at aerospace, energy and medical OEMs
- Existing site
- A 2009 site: visitor counter, equipment table, red quote button. Open it
- Goal
- Win bigger programmes; make capability and quality obvious in 10 seconds
- Must feel
- Heavy, exact, industrial, proud
Palette and type
Archivo (condensed and regular width) · JetBrains Mono
Drag the divider, or focus it and use the arrow keys.
Motion and interaction
- Preloader counter that hands over to an opening hero photo
- Giant type rows that skew with scroll velocity
- Odometer stats rolling digit by digit
- Pinned horizontal capability tour, with a snapping native fallback
- A technical drawing that draws itself with the process steps
- Industry cards that stack and recede
- Difference-blend navigation over light and dark
- Quote request with a drawing drop zone
03 · Professional services · architecture
Aldine & Moss
The brief
- Prospect
- Aldine & Moss, a 24-person architecture practice in London and Lisbon
- Who buys
- Private clients, developers and cultural institutions
- Existing site
- A 2015 theme: Trajan headings, slideshow, gold rules. Open it
- Goal
- Attract better-fit private and cultural commissions
- Must feel
- Calm, considered, material, unhurried
Palette and type
Instrument Serif · Instrument Sans
Drag the divider, or focus it and use the arrow keys.
Motion and interaction
- Curtain intro with the name, then a slow headline settle
- Hero photograph that opens from a window to full bleed
- Philosophy paragraph that brightens word by word
- Project index with a pointer-following, speed-leaning preview
- Detail gallery you can throw sideways (Draggable + Inertia)
- Clip reveals with a slow zoom-out inside each frame
- Staggered approach columns with gentle parallax
- Intro-call request in the brand's own voice
04 · Manufacturing automation · collaborative robots
Torvik Robotics
The brief
- Prospect
- Torvik, maker of a six-axis collaborative arm taught by hand
- Who buys
- Plant managers and automation engineers at mid-size manufacturers
- Existing site
- A 2011 site: chrome logo, Flash banner, brochure download. Open it
- Goal
- Show the arm moving and make 'running by the afternoon' believable
- Must feel
- Precise, friendly, engineered, calm
Palette and type
Space Grotesk · IBM Plex Mono
Drag the divider, or focus it and use the arrow keys.
Motion and interaction
- A six-axis arm modelled in code (React Three Fiber), no 3D files to load
- Hero arm that turns its wrist toward the pointer and breathes
- Scroll tour joint by joint: each axis moves as its card arrives, its ring lights up
- Palletizing cell that grows in and runs real pick-and-place (inverse kinematics)
- Camera framings that hand over between hero, tour and cell
- Rendered still for no-JS, no-WebGL and before three.js loads
- Frosted panels over the scene, counters, marquee, magnetic CTA
How each one was made
- 01
Brief
Prospect, audience, goal and the existing site. I read the current site for what to keep: names, numbers, the real offer.
- 02
Direction
One visual reference, a type pairing, a palette and a short list of motion moves that suit the brand.
- 03
Build
Next.js and a shared GSAP + Lenis motion kit. Sections are plain markup; motion is declared with data attributes.
- 04
Ship
Static export to a private Vercel link, checked on desktop, tablet and phone, with reduced-motion and no-JS fallbacks.