loading code fetching the highlighted snippet
FIG-001/ USEANIMATIONFRAME
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.
- Two
feTurbulencefields are offset bymotion.feoffsetMotionValues, averaged, then fed tomotion.fedisplacementmapwhoseattrScaleswells each frame — the SVG displacement that gives the Apple Intelligence border (the Siri glow effect) its rippling wavy edge. - One
useAnimationFrameintegrator 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
--tcustom property; every ring reach, radius, blur, and band width derives from it viacalc(), so the whole glow scales from a single value. -
useReducedMotionrenders a static glow — the blobs are placed at their resting orbit spots and no frame loop runs at all.
category · useanimationframe
sheet · sheet 01 / 01
⟳ to re-run