Demonstration

Rotating drum

Scroll: the eight blades turn about a single hinge, from the moment they enter at the bottom to the moment they leave at the top. One blade faces you exactly when the scene is centred.

What we do

Four disciplines
one workshop

1. Framing


We start from what you already measure. Two weeks to settle the scope, the constraints and the first useful milestone — before a single line is written.

2. Design


Mockups that hold up at every size, not only at the one they are presented in. Every screen is delivered with its empty states, its errors and its keyboard path.

  • Framing
  • Measure
  • Drawing
  • Mockup
  • Code
  • Testing
  • Launch
  • Support

3. Build


HTML, CSS and the strict minimum of JavaScript. No dependency we could not take out, no build step you could not run on your own in two years' time.

4. Acceptance


Every delivery goes through a measured bench: overflow measured, full keyboard path, rendering without JavaScript, and a strict security policy verified in real conditions.

Second instance

No inertia
back faces hidden

data-ease = 0


The drum sticks to the scroll position, frame by frame, without the lag that softens the first instance.

Back faces


The blades that have turned to the other side disappear instead of showing their word mirrored.

  • One
  • Two
  • Three
  • Four
  • Five
  • Six
  • Seven
  • Eight

Two instances


Each one watches its own scene and its own attributes. Nothing is shared between them, not even a listener.

One stylesheet


The colours change through variables on the block; the component's CSS is written once.