# Apple Intelligence Glow Border in Svelte
> Recreate the Apple Intelligence wavy glow border (the Siri screen-edge glow effect from iOS and macOS) in Svelte — spring physics, feTurbulence noise, and SVG displacement with a Framer Motion-compatible animation library.
**Source:** [https://motion.svelte.page/examples/ai-glow-border](https://motion.svelte.page/examples/ai-glow-border)
**Markdown mirror:** [https://motion.svelte.page/examples/ai-glow-border.md](https://motion.svelte.page/examples/ai-glow-border.md)
---
This mirror preserves the prose, implementation notes, and runnable Svelte source behind the live example page.
## FIG-001: the apple intelligence border.
The wavy Apple Intelligence border from iOS and macOS — the Siri glow effect — rebuilt in Svelte with MotionValues. One useAnimationFrame integrator drives an SVG displacement filter: two drifting feTurbulence fields bound to feOffset MotionValues warp a thin ring band, a transform-driven conic rotor spins the colour field, and four radial-gradient blobs orbit on x/y springs. Click the card to enter the listening state — one flow multiplier boosts rotation, waviness, and glow together.
**Metadata:** tag: `USEANIMATIONFRAME` | api: `motion.feoffset` | input: `useAnimationFrame` | channels: `filter + transform`
### Notes
- Two `feTurbulence` fields are offset by `motion.feoffset` MotionValues, averaged, then fed to `motion.fedisplacementmap` whose `attrScale` swells each frame — the SVG displacement that gives the Apple Intelligence border (the Siri glow effect) its rippling wavy edge.
- One `useAnimationFrame` integrator advances every channel — conic rotation, bounded dual-sine drift vectors, the displacement swell, and blob orbit targets — from integrator state kept outside the effect so the loop never restarts.
- The thickness slider writes one `--t` custom property; every ring reach, radius, blur, and band width derives from it via `calc()`, so the whole glow scales from a single value.
- `useReducedMotion` renders a static glow — the blobs are placed at their resting orbit spots and no frame loop runs at all.
### Source
#### Default.svelte
Source file: [src/lib/examples/ai-glow-border/demos/Default.svelte](https://github.com/humanspeak/svelte-motion/blob/main/docs/src/lib/examples/ai-glow-border/demos/Default.svelte)
```svelte