The seam is the whole idea

Bothmade means both made — web and native, made by the same team. We could have said that in a sentence and moved on. Instead the homepage hero is a single line you can physically drag: pull it right and you're looking at the web world, pull it left and you're in the native one, and the wordmark itself morphs letter by letter as the line crosses it. The name of the studio is a description of what the interaction does.

It'snotananimationthatplays.It'savalueyoucontrol,withyourhand,thateverythingelseonscreenreactsto.

That's the actual mechanic from the homepage, scaled down: a target position, a spring that chases it, and a CSS clip-path that reveals the left world up to wherever the spring currently sits. Nothing about the two worlds underneath ever moves — only the boundary between them does, and everything downstream (the label opacity, the wordmark treatment) reads its position off that one number.

typescript
const target = useMotionValue(50);           // where you're dragging to
const seam = useSpring(target, {              // where the line actually is
  stiffness: 340,
  damping: 34,
  mass: 0.6,
});

const clipPath = useMotionTemplate`inset(0 ${
  useTransform(seam, (v) => 100 - v)
}% 0 0)`;

Setting the clip-path straight from the pointer's x-coordinate would work, but it would feel like dragging a window shade — dead, mechanical, exactly as fast as your hand and no faster or slower. Routing the pointer through a spring instead gives the line weight: it chases your finger with a slight, physical lag, and when you let go it settles rather than stopping dead. That half-second of settling is doing almost all of the emotional work — it's the difference between moving a slider and pushing a real object.

A drag-only interaction that's also the site's primary way of expressing what the studio does can't be mouse-exclusive — that would hide the entire pitch from keyboard and switch-control users. The real handle carries role="slider" with aria-valuenow, aria-valuemin, and aria-valuemax, and left/right arrow keys nudge the same target value the pointer drags. Screen readers announce it as what it structurally is — a slider — not as a mystery line in the middle of the screen.