# Three.js Effect > Spring a mesh and ripple a shader uniform with animate() and threeEffect. **Source:** [https://motion.svelte.page/examples/three-effect](https://motion.svelte.page/examples/three-effect) **Markdown mirror:** [https://motion.svelte.page/examples/three-effect.md](https://motion.svelte.page/examples/three-effect.md) --- This mirror preserves the prose, implementation notes, and runnable Svelte source behind the live example page. ## FIG-001: mesh motion, shader ripple. A registered threeEffect springs a torus knot while the same Motion API animates its shader progress uniform. **Metadata:** tag: `THREE` | api: `threeEffect` | input: `animate.addEffect` | mode: `live` ### Notes - `animate(mesh)` drives Three.js transform shorthands. - `threeEffect` writes the progress MotionValue into the shader. - `frame.preRender` updates both before Three.js renders. ### Source #### Default.svelte Source file: [src/lib/examples/three-effect/demos/Default.svelte](https://github.com/humanspeak/svelte-motion/blob/main/docs/src/lib/examples/three-effect/demos/Default.svelte) ```svelte
// three-effect rotateY {displayedRotation.toFixed(2)} rad · progress {displayedProgress.toFixed(2)}
{#if !rendererAvailable}

WebGL unavailable — motion values remain active.

{/if}
mesh + shader uniform frame.preRender
```