Teardown: feather.computer's radial sticker explosion

Open feather.computer and the hero doesn't fade in — it detonates. A “Got Mail?” headline appears, a dense stack of mail-themed stickers assembles behind it, and then the whole pile explodes radially across the viewport, every ticket, envelope, and badge landing in a scattered-but-balanced field that keeps breathing for as long as you watch.

It feels effortless. It isn't. We ran the first ten seconds through MotionLens in Precision mode and pulled the exact choreography apart. Here's what makes it work.

1. Anchor first. The headline fades into center before anything else moves. Your eye has a home before the chaos starts.
2. Compress. Stickers scale up rapidly into a dense central stack — a beat of stored energy. This is classic anticipation: the pile is the wind-up.
3. Detonate. Radial scatter, every item on its own trajectory, finished with a snappy overshoot — the blueprint reads it as ease-out-back. Items overshoot their landing spot and snap back, which is what sells the physicality.
4. Never fully stop. After landing, every sticker keeps a slow independent drift (~15px translation range) and a gentle rotation oscillation between roughly −3° and +3°. The scene stays alive without demanding attention.
5. Garnish. A cream bird glides leftward across the headline, and a dashed pill-shaped focus ring draws around the text — two small storytelling touches on top of the system.
6. Reset. Everything fades out simultaneously and the loop breathes back in.

Three principles carry the whole thing. Anticipation: the compressed stack makes the explosion legible — you understand where everything came from. Overshoot: the ease-out-back landing gives weight and snap; linear easing here would feel like a PowerPoint transition. Ambient afterlife: the post-explosion drift is doing the quiet work — a static field would read as “finished loading,” while the drift reads as “alive.” The blueprint's feel tags: tactile, playful, weightless, organized-chaos.

A minimal Framer Motion sketch of the explosion + drift pattern:

// each sticker: explode from center, then drift forever
<motion.div
  initial={{ x: 0, y: 0, scale: 0.6, opacity: 0 }}
  animate={{
    x: target.x, y: target.y, scale: 1, opacity: 1,
    transition: { type: "spring", stiffness: 260, damping: 18 }, // the overshoot
  }}
>
  <motion.div
    animate={{ rotate: [-3, 3, -3], y: [0, -8, 0] }}
    transition={{ duration: 6 + Math.random() * 3, repeat: Infinity, ease: "easeInOut" }}
  >
    {sticker}
  </motion.div>
</motion.div>

The details that matter: stagger the explosion by a few milliseconds per item, randomize each drift duration so the field never synchronizes, and keep the drift amplitude small — the original moves items barely 15px.

The blueprint declares its blind spots instead of inventing them: the exact spring constants behind the overshoot, whether the dot-grid background has its own parallax layer, and the per-sticker oscillation frequencies. Those live in feather's source code, not in any recording — a 10-second clip sampled at 12fps tells you the choreography and the curves, not the constants.

This entire analysis was one sentence in Claude Code:

analyze the first 10 seconds of https://feather.computer with MotionLens in precision mode

MotionLens recorded the page headlessly with real frame timing, watched it, and returned the blueprint — motions, timings, easing, and an agent-ready prompt. The full interactive version — replay, storyboard, and the measured motion table — lives in the gallery: feather.computer, decoded. Try it on any site — new accounts get 5 free credits, no card.