Lab

Drag row with a live readout

The 7 services as cards. Drag the row, flick it, and it snaps to the nearest card while the numbers behind the motion update beneath it.

Cost: No canvas and no WebGL. Works with touch, mouse and keyboard, and vertical scrolling still works on touch.

  • 01Full-Stack Web Apps
  • 02AI Inside Your Product
  • 03Automation That Runs Itself
  • 04AI Video At Scale
  • 05Design And Prototypes
  • 06Fixing Live Systems
  • 07Custom Shopify Builds
x
0.0
velocity
0
progress
0.000
snapped
0
direction
idle

How it works

  • Framer Motion drives one motion value for the row. The readout listens to that value and writes text straight into the page, so nothing re-renders per frame. The x value is in pixels and the velocity in pixels per second.
  • Letting go projects your flick a short way ahead, then springs to the nearest card. With reduced motion on, there is no projection and no spring: it snaps in place.
  • Arrow keys, Home and End step through the cards, and so do the two buttons, for anyone who does not want to drag.