loading code fetching the highlighted snippet
Ada
designs algorithms in her sleep
← nope · like →FIG-001/ GESTURE
swipe to decide.
A Tinder-style card stack — drag horizontally, watch the top card translate AND rotate (one source MotionValue drives both via useTransform), and a LIKE / NOPE badge fades in on the relevant side. Release past the 140px distance threshold OR with > 650 px/s velocity flings the card off screen and the stack springs forward. Anything weaker snaps back.
- One
useMotionValuefor the top card's horizontal offset, threeuseTransforms on top of it: rotation maps[-200, 0, 200]→[-18°, 0°, 18°], and the LIKE / NOPE badge opacities ramp in over the 40–140px gutter. One source, four visuals, can't desync. - The commit gate is distance OR velocity: 140px past origin or > 650 px/s in either direction fires the fly-off. The direction
is taken from
Math.sign(info.offset.x)withinfo.velocity.xas the fallback for fast flicks with sub-threshold distance. - The stack uses three card slots with hard-coded depth (Y offset + scale on the back
ones — no actual 3D). On commit, the top card animates to ±600px via a soft spring,
then
deck = deck.slice(1)drops it and the{#each}block re-keys the remaining cards forward.
LIKE NOPE
Grace
Linus
category · gesture
sheet · sheet 01 / 02
⟳ to re-run
FIG-002/ GESTURE
flick to dismiss.
A bottom sheet that follows your finger as you pull it down. Past 120px OR with downward velocity > 700 px/s, it commits to dismiss. Otherwise it springs back. pan gives you offset + velocity; you decide what to do with them.
-
onPanfires every frame withinfo.offsetandinfo.velocity. We clamp offset to>= 0so the sheet only follows downward drags, and write it straight into a motion value the transform reads. - The release decision in
onPanEndis the distance OR velocity pattern: pulled more than 120px past origin or still moving downward faster than 700px/s ⇒ dismiss. Either condition alone fires the close. This is how a real sheet feels — slow pull works, fast flick also works. - The overlay opacity is a
useTransformof the same sheet offset — at 0px it's fully opaque, at 300px it's transparent. One source value drives both the sheet position and the dimmer, so the visuals can't desync.
flick to dismiss
Pull down past 120px, or flick downward at > 700 px/s. The release decision combines both — fast flicks commit even when distance is short.
- follows your finger 1:1 while you drag
- springs home if you don't pass the threshold
- animates off-screen if you do
category · gesture
sheet · sheet 02 / 02
⟳ to re-run