lukia lab

React island · motion

Three treatments

The same words, three times, in three different design languages. Pick one and the sample below re-renders — type, colour, density and the rhythm of the motion all change together, because those are the things that actually constitute a direction.

This exists because the slowest part of starting a project is agreeing what it should feel like, and prose is a bad medium for that. Three things to look at settles in a minute what a paragraph describing “clean and modern” does not settle at all.

Visual direction

Large type, generous rhythm, almost no colour. Reads as considered and a little expensive. The motion is slow and only ever supports the reading order.

Best for Studios, consultancies, anyone selling judgement rather than throughput.

Halyard

Bookings that stop eating your morning.

A scheduling tool for small studios. Clients book against your real availability, deposits are taken up front, and the reminders go out without you touching anything.

  • Real availability

    Reads the calendar you already keep, so a slot that is gone is gone. No double bookings to apologise for.

  • Deposits up front

    Card held at booking, released on arrival. No-shows drop because the client has already committed something.

  • Reminders that land

    A message the day before and an hour before, on the channel the client actually reads. Nobody chases anybody.

Fourteen days, no card. — sample content, the button does nothing.

How it is built

The switcher is a native radio group. A tab list with rovingtabindex was the alternative and it is the fussier-looking one, but arrow-key navigation, group semantics and the announced position all come free and correct from the platform — and choosing a rendering of one piece of content is genuinely a radio choice, not a tab. There is one panel here, not three.

The radio inputs are hidden with clip geometry rather thandisplay: none, which would have taken the keyboard behaviour with them, and the focus ring is put back by hand on the label — the element receiving focus is not the element you can see.

Reduced motion removes the travel rather than shortening it.The setting is a vestibular accommodation, so a 44px slide compressed into 60ms is worse for the person asking, not better. What survives is opacity, which carries no motion. The scroll rail drops its spring for the same reason: a spring overshoots and settles, and that is movement nobody asked for. That decision is a pure function with tests over it, rather than a media query somebody has to remember.