Hydrated cleanly
Opacity and transform start before the component runtime claims the element.
FIG-001/ SSR
start before hydration.
The server renders the initial opacity/transform and an inline handoff script starts the same transition before Svelte Motion mounts.
- The optimized appear bootstrap uses WAAPI for opacity and transform so the first visible frame already belongs to the entrance animation.
- Hydration hands the animation back to the normal motion runtime using the upstream
data-framer-appear-idcontract.
// optimized appear hydration: clean
initial → animate on mount duration: 800ms
category · ssr
sheet · sheet 01 / 02
⟳ to re-run
FIG-002/ FILTER
blur fade beyond transforms.
WAAPI-safe properties beyond opacity and transform — filter and clip-path — now ride the same SSR appear path, so blur-fade entrances start before hydration.
- The SSR bootstrap emits a WAAPI entry for
filteralongside opacity and transform, so the first frame is already mid blur-fade. - Staggered
delayvalues ride along too — each line holds its blurred initial state withfill: bothuntil its turn.
// blur fade filter: WAAPI
Blur fade
Filter, clip-path, and color now ride the appear path.
Each line starts blurred inside the SSR payload.
Hydration adopts the animation mid-flight — no snap, no pop.
blur(8px) → blur(0px) stagger: 150ms
category · filter
sheet · sheet 02 / 02
⟳ to re-run