Brand identity · 12 weeks
View the case study
Northwind rebrand
A new wordmark, palette and signage system for a grocer of forty stores, rolled out without closing a single one.
<bmx-carousel>
A strip of slides the reader moves through.
Editorial design · 64 pages
View the case study
Contoso annual report
Five years of results told in charts a shareholder can read at a glance, in print and as an accessible web edition.
Product launch · iOS and Android
View the case study
Fabrikam launch
An app, a waitlist and a launch-day site that took 120,000 sign-ups before the first download.
Try it without the mouse. Tab into the strip once, then use the arrows —
Home and End jump to the ends. Then Tab again: the focus goes to the dots and
not through the slides you cannot see. A carousel of six slides each holding a link normally costs a
keyboard user six invisible tab stops; everything off screen here is
inert.
It is a
scroll-snap container, not a transform. So the flick physics on a phone are the ones that
phone already has — momentum, the rubber-band at the ends, and what happens when a drag is interrupted —
and none of it is imitated here. The cost is that the component cannot know where the strip is and has to ask:
every decision it makes comes from a measured scroll offset rather than from an index it keeps.
Desk lamp
Headphones
Plant pot
Wall clock
Notebook set
Stoneware mug
per-view is the only sizing property; the slides take an equal share of the viewport, so the layout
is one number rather than a media query per breakpoint. Set it from your own breakpoints when you want a different
count on a phone.
Autoplay never runs under
prefers-reduced-motion, and no property overrides that:
it is a statement about what makes somebody unwell rather than a preference about animation. It also stops while a
pointer is over the carousel, while the focus is inside it, while the tab is in the background, and whenever the
reader presses pause — and each of those is reported by name on bmxAutoplayChange, so your page
can say why it is still. While the clock is running the live region is off; the moment the
reader takes control it becomes polite.
Every property, event and method: https://docs.binarymission.co.uk/webcomponents/bmx/bmx-carousel.html