# Custom Effects
> Animate any JavaScript object — a canvas dial driven by createEffect and animate.addEffect.
**Source:** [https://motion.svelte.page/examples/custom-effects](https://motion.svelte.page/examples/custom-effects)
**Markdown mirror:** [https://motion.svelte.page/examples/custom-effects.md](https://motion.svelte.page/examples/custom-effects.md)
---
This mirror preserves the prose, implementation notes, and runnable Svelte source behind the live example page.
## FIG-001: plain object, full Motion physics.
A custom effect claims a plain dial object and writes its animated values before a canvas render loop draws each frame.
**Metadata:** tag: `EFFECT` | api: `createEffect` | input: `animate.addEffect` | mode: `live`
### Notes
- `createEffect` teaches Motion how to read and write the dial.
- The same `animate()` call applies spring physics to a plain object.
- `frame.preRender` writes values before the canvas draws.
### Source
#### Default.svelte
Source file: [src/lib/examples/custom-effects/demos/Default.svelte](https://github.com/humanspeak/svelte-motion/blob/main/docs/src/lib/examples/custom-effects/demos/Default.svelte)
```svelte