Examples
Live, interactive demos. Real code running in your browser.
None of these are client work. They’re small, focused components that demonstrate the kinds of things we ship every week — data viz, calculators, audio, animation, real-time UI. Tap them. They’re live.
An interactive map of the UK.
Click any city to bind a side panel to it. The same pattern powers any geographic dashboard — assets, deliveries, support cases, customers — all selectable and bound to live data.
Tap a city. Stylised silhouette; population figures are rounded ONS mid-2021 estimates and illustrative.
Cambridge
- Population
- ~146,000
- Notable sectors
- Tech, biotech, research
An automation ROI calculator.
Three sliders, real-time output, sensible defaults. The maths every operations director runs in their head — visible, scrubable, and honest about its limitations.
Same maths every operations director runs in their head. Slide the values to see the year-on-year cost of leaving a task manual.
Rough estimate. Actual savings depend on what’s automated, how often it runs, and what your team already spends on it. We quote against a real audit, not a slider.
A 16-pad synthesiser.
Pentatonic, so any tap order sounds musical. No samples, no audio files — every note is synthesised in the browser via the Web Audio API. Triangle wave, low-pass filter, bell-shape envelope.
Pure Web Audio API — no samples, no audio files. Each tap synthesises a triangle wave through a low-pass filter with a short bell envelope. The same primitives power any in-browser audio tool we’d build for a client.
A live UK stock ticker.
Five LSE-listed companies on a simulated tick stream. Sparklines redraw on every push; up/down direction tinted accent or red. The same render path drops onto a real WebSocket feed without changing the UI.
- BPBP plc482.00p+0.00%
- HSBAHSBC Holdings905.00p+0.00%
- VODVodafone Group75.00p+0.00%
- TSCOTesco351.00p+0.00%
- LSEGLondon Stock Exchange Grp11,420.00p+0.00%
Demo data — random walk client-side from illustrative starting prices. The pattern (subscribe · push · re-render · update sparkline) is the same one we’d wire to a real WebSocket feed.
Memory match.
Eight pairs, no library, all state in pure React. Selection · resolve · win-check is the same shape every booking flow, shopping cart, and form wizard runs.
State held in pure React. The same pattern (selection · resolve · win check) underpins booking flows, shopping carts, and form wizards.
Snake.
Classic. Keyboard arrows or WASD, swipe gestures on touch, plus an on-screen D-pad. Queued-direction buffer to stop you reversing into yourself. A tight loop is a tight loop — the same shape powers any real-time dashboard.
Press a key, swipe, or tap a direction to start
Arrows / WASD on desktop · swipe or D-pad on touch
SVG renderer + a 130 ms tick loop + a queued-direction buffer to prevent reverse-into-self. Same loop pattern works for any real-time UI — dashboards, telemetry, anything that needs to repaint on a clock.
Kanban board.
Three columns, click-to-move chevrons on each card, add/remove tasks. The same column-and-card model under the hood of every helpdesk pipeline, sales board, and content workflow.
Audit Salesforce integration
Replace stock spreadsheet
Set up booking page
Migrate forms to Zod
Wire RingCentral webhook
Deploy v1 to staging
Set up monitoring
Per-card chevron buttons work on every device, no drag-drop library. The same column-and-card model underpins helpdesk pipelines, sales boards, content workflows, and editorial calendars.
Sortable, filterable customer table.
Ten rows of fictional UK-themed customers, click any column header to sort, type in the search box to filter. Memoised pipeline so re-renders stay cheap as the dataset grows.
Beeston Trading team@beeston.example | Scale | £3,200 | active | 3 Nov 24 |
Carlisle Motors service@carlisle.example | Starter | £420 | trial | 1 Mar 26 |
Falmouth Maritime ops@falmouth.example | Scale | £2,800 | active | 14 Aug 24 |
Harlow Print hello@harlow.example | Starter | £380 | lapsed | 8 Jun 24 |
Hereford Bakers hi@hereford.example | Starter | £350 | lapsed | 9 Apr 24 |
Northgate Logistics ops@northgate.example | Studio | £1,200 | active | 12 Sept 25 |
Penrith Property lettings@penrith.example | Scale | £3,450 | active | 17 Dec 24 |
Thornbury Studio studio@thornbury.example | Studio | £1,100 | active | 19 Feb 25 |
Westby Clinic admin@westby.example | Starter | £450 | trial | 22 Apr 26 |
Whitby Foods orders@whitby.example | Studio | £980 | active | 30 May 25 |
Demo data — fictional UK-themed customer names. Sort, filter, and the same memoised pipeline drive any back-office list view we’d build.
Pomodoro timer.
25 / 5 cycle, SVG ring driven by stroke-dashoffset, mm:ss display, auto-switching phases. The same primitives power onboarding wizards, file uploads, and any multi-step progress UI.
SVG ring driven by stroke-dashoffset, single combined state object, plain JS interval. Same primitives power any progress UI — onboarding wizards, file uploads, deployment status, multi-step forms.