Motion Blur Streak

How It Works

A fast out-eased move front-loads velocity — fastest off the start, bleeding to zero at the settle. Map the blur/echo envelope onto that same curve: position travels from an off-frame / pushed-back start to rest over MOVE_DUR; in lockstep on the same window and ease the smear goes PEAK_BLUR → 0 (A) or the ghosts collapse onto the lead (B). By the settle the element is fully crisp and dwells ≥1 s — the contrast between violent streak and still, sharp settle IS the effect. GSAP can’t tween an SVG attribute directly: tween a plain { v } proxy and write setAttribute("stdDeviation", …) in onUpdate, seeding it once at setup so a seek to t=0 shows the streaked start.

Recipe

Variations

• Vertical streak — swap axes: y, stdDeviation="0 Y", vertical echo offsets.
• Camera push-through — scale: SCALE_FROM → 1 with a symmetric "B B" envelope (depth-wise smear, not directional): the wordmark punches out of soft focus and snaps crisp at the lock.
• Staggered grid streak-in — each card streaks into its slot at MOVE_START + i * CARD_STAGGER with its own blur proxy / ghosts; sharp the instant it lands.
• Hold-the-streak — blur on a marginally slower curve than position (position expo.out, blur power3.out) so the last wisp resolves just after arrival. Sparingly; default is locked envelopes.

Camera-Travel Carve-Out

The envelope is also sanctioned at wrapper level: on the .world / camera wrapper of a virtual-camera scene (viewport-change.md, multi-phase-camera.md, 3d-camera-flight.md) during a travel leg — a dive, a whip sweep, a violent final push. This does not violate “never a mid-composition exit”: the world never leaves frame — the camera travels through it, and every leg ends with the world at rest, sharp, inside the frame. Each leg is an arrival at the next pose, so the entrance doctrine applies leg by leg. Three deltas from the element-level recipe:

• Envelope follows the leg’s ease. An out leg (dive, final push) uses the base recipe unchanged. An inOut repositioning leg peaks mid-leg: split the envelope at the velocity peak — 0 → PEAK on the in-half ease over the first half, PEAK → 0 on the out-half over the second. Seed the proxy at 0 for these (the streaked state lives mid-leg, not at t=0; seed-at-PEAK_BLUR belongs to the entrance shape, where the first frame IS the fastest).
• Filter placement. 2D camera: filter: url(#streak) on the .world wrapper. 3D flight: on the perspective stage above the 3D context — a filter on a preserve-3d element flattens it and collapses every translateZ. Never per-element inside the world: one frame-wide envelope, not N desynced ones.
• Full-frame blur is heavy — cap PEAK_BLUR ~18–20 at wrapper level (vs 30 for one element); a brief whip may touch ~24. Axis rule as usual: "X 0" for a lateral whip/pan, "B B" for a dive/push.

Whip sweep (named composition)

The heavily-blurred lateral whip that resolves into the next region — two rules on one window:

1. Position — nudge-curve.md‘s three-phase chain on the camera state, tuned burst-dominant (tail still ≥3× ramp-in in time).
2. Blur — 0 → PEAK across the ramp-in, held at PEAK through the linear burst (constant velocity = constant smear), PEAK → 0 across the tail.

Swap or reveal the next region’s content DURING the burst — the smear masks the change; the power4.out tail lands it sharp. Reveal during the burst, read after the tail.

Values

Critical Constraints

• Blur peaks at peak speed and resolves to 0 at the settle — share the ease and window between position and envelope. A blur that lingers after the stop reads as a focus pull.
• Entrances / mid-shot arrivals only — never a mid-composition exit; wrapper-level use only per the carve-out.
• Seed stdDeviation at setup: at PEAK_BLUR for the entrance shape, at 0 for a whip / inOut leg.
• Generous filter region (x="-50%" y="-50%" width="200%" height="200%") or the smear clips at the element’s box edge.
• Directional axis: "X 0" horizontal, "0 Y" vertical, "B B" only for a depth/scale move — symmetric blur on a sideways move looks like defocus.
• Dwell ≥1 s sharp after the snap; a streak landing at the last beat reads as “flashed and gone”.
• Heavy element on a solid field — thin type (< ~120px / 800 weight) or a busy backdrop swallows the smear.
• overflow: hidden on the scene — the smear / furthest ghost extends past the resting position during travel.

See also

kinetic-beat-slam (streak as one beat’s entrance) · center-outward-expansion (grid streak-in) · scale-swap-transition (same-footprint morph — not an arrival) · nudge-curve (the whip sweep’s position half) · 3d-camera-flight / viewport-change (the carve-out’s wrappers).