# Optimized appear
> Use optimized appear animations to start SSR entrance motion before hydration.
**Source:** [https://motion.svelte.page/examples/optimized-appear](https://motion.svelte.page/examples/optimized-appear)
**Markdown mirror:** [https://motion.svelte.page/examples/optimized-appear.md](https://motion.svelte.page/examples/optimized-appear.md)
---
This mirror preserves the prose, implementation notes, and runnable Svelte source behind the live example page.
## FIG-001: start before hydration.
The server renders the initial opacity/transform and an inline handoff script starts the same transition before Svelte Motion mounts.
**Metadata:** tag: `SSR` | handoff: `data-framer-appear-id`
### Notes
- 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-id` contract.
### Source
#### Default.svelte
Source file: [src/lib/examples/optimized-appear/demos/Default.svelte](https://github.com/humanspeak/svelte-motion/blob/main/docs/src/lib/examples/optimized-appear/demos/Default.svelte)
```svelte
Opacity and transform start before the component runtime claims the element.
initial → animate on mountduration: 800ms
```
## FIG-002: 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.
**Metadata:** tag: `FILTER` | filter: `blur(8px) → blur(0px)`
### Notes
- The SSR bootstrap emits a WAAPI entry for `filter` alongside opacity and transform, so the first frame is already mid blur-fade.
- Staggered `delay` values ride along too — each line holds its blurred initial state with `fill: both` until its turn.
### Source
#### BlurFade.svelte
Source file: [src/lib/examples/optimized-appear/demos/BlurFade.svelte](https://github.com/humanspeak/svelte-motion/blob/main/docs/src/lib/examples/optimized-appear/demos/BlurFade.svelte)
```svelte
// blur fadefilter: WAAPI
Blur fade
{#each lines as line, i (line)}
({
borderLeft: '3px solid var(--brut-accent, #247768)',
paddingLeft: '0.75rem'
}))}
>
{line}
{/each}