Internal reference

Block library. Batch two.

The rest of Dave's fifteen. Six rebuilt properly here, and four that we already have working equivalents for — listed at the foot rather than cloned, because two versions of the same component is how a design system starts to rot. Same rules as batch one: this page carries its own styles and script, and touches nothing else.

06 · Scroll-reveal statement
07 · Card scroll rail
08 · Sticky split, reversed
09 · Quote rotator
10 · Wave carousel
11 · Counter-split slides
12–15 · Already built

← Back to batch one

06 Scroll-reveal statement New to us Words light up as the statement crosses the viewport. Dave's version listens to every scroll event; this one uses one IntersectionObserver per word, which the browser handles off the main thread. Under reduced motion the whole thing is simply legible from the start. Keep it to one sentence — it is a full stop, not a paragraph.

What we are for

We are a small senior team who write, design, film and build — so the idea that gets agreed is the one that reaches the screen.

07 Card scroll rail New to us A horizontal rail of cards. Dave pins the section and converts vertical scroll into horizontal travel, which hijacks the scrollbar and is awkward on a trackpad. This version is a plain overflow rail with scroll snapping — drag it, flick it, use the arrow keys, or scroll sideways. Same effect, no hijack, and it works on a phone without any JavaScript at all.

What we do

Websites

Brochure sites, shops and platforms — built to be found, fast to load, and straightforward for your team to keep up to date.

Film

Scripted, shot and cut in-house, so the idea that got approved is the one that reaches the screen.

Photography

Proper commercial photography of your people, your premises and your products. Not a stock library.

Search

Being found on purpose rather than by luck — and increasingly, being recommended rather than just ranked.

Editorial

Words that sound like you and say something. Annual reports, customer magazines, and the awkward pages nobody wants to write.

Brand and design

Identity, campaign creative and the design system underneath, so it still looks like you two years later.

08 Sticky split, reversed New to us The same pattern as block 04 with the sides swapped, so consecutive sticky sections alternate rather than marching down one edge. Uses order rather than a second set of rules, and the order is dropped below 761px so the copy still comes before its list on a phone. Same two fixes as block 04: overflow:clip and a stretched column wrapper.

Why it lasts

Built to hand over.

A site you cannot edit is a site that goes stale. Everything we build is meant to be handed back.

Plain documentation

Written for the person who has to use it, not for another developer.

No lock-in

We host most of what we build because it makes support quick. If you would rather it sat elsewhere, it goes, properly.

One place to change things

The menu, the phone number and the address each live in one file. Change it once and the whole site follows.

Still here afterwards

Most agencies take days to answer an email. We don't.

09 Quote rotator New to us Dave's version pins the section for several screens of scroll and drives the quotes from scroll position, with a canvas starfield behind. That costs a lot of page for three sentences, so this one advances on a timer with real dot controls, pauses on hover and on focus, and stops entirely under reduced motion. Quotes below are placeholders — real client words would need asking for.

What clients say

They got the brief in one go, and the film came back better than the script.

Placeholder quoteMarketing manager, manufacturing

We stopped chasing an agency for answers. That on its own was worth the move.

Placeholder quoteOperations director, logistics

The enquiries went up, but more to the point they were the right enquiries.

Placeholder quoteOwner, hospitality

01 / 03

10 Wave carousel New to us Cards arced around a centred one, the outer cards dimmed and scaled back. Handsome, and the block I would think hardest about before using: only the middle card is properly readable, so five services become one service and four hints. Better suited to work than to a services list. Arrow keys work, and the off-centre cards are hidden from screen readers rather than read out as a jumble.

Pick a lane, or take the lot

Brand filmsScripted, shot and cut in-house

WebsitesFast, accessible, easy to keep up

Search and visibilityFound on purpose, not by luck

Brand and designDecided once, reused everywhere

MarketingJoined up, not disconnected wee tactics

11 Counter-split slides New to us Two-up slides where the media and the copy swap sides each time, so the change of subject registers. Dave animates the halves past each other in opposite directions; that reads as a glitch at small sizes, so this crossfades and lets the side-swap do the work. Two slides is about right — it is a comparison device, not a gallery.

Two halves of the same job

Made to be watched.

One idea, filmed properly, cut for every place it needs to live — the website, the pitch, the social post that has six seconds to work.

Made to be used.

The same care applied to the screens people actually click. Fast, legible, and built so your own team can keep it moving after we hand it over.

12–15 The four we already have Not rebuilt These four exist on the site already and work. Rebuilding them here would mean maintaining two versions of the same component, which is how a design system rots. Listed instead with where ours lives and what Dave's does differently, so the comparison is still on one page.

Already on the site

Pinned hero sequence

Already ours — this is the hero we transplanted from Dave, three stages, markup and script intact. His newer version adds a canvas starfield behind it: 1,100 particles, ten animation loops, no reduced motion handling. I would not take that part.

See the homepage →

Stacking panels

Ours is .cat-sec, used for the six service categories and again for Proud / Bold / Confident. Dave's is the same idea with a shadow on the top edge of each panel so the overlap reads as depth — a small detail worth stealing on its own.

See the About page →

Filterable gallery

Ours is .proj plus the .lb lightbox. His filters the same way but opens items in place rather than in an overlay. Worth noting block 05 on batch one is the quieter cousin — a list rather than a grid, for a full archive.

See the index list →

Contact footer

We have both a footer and a contact page already. His combines them into one full-screen closing section with the form inline. A fair idea for a landing page, but it would duplicate the contact page and split the enquiry tracking across two URLs.

See the contact page →