# Vanilla Values
> Motion values without motion components — a $state slider driving a plain div through toMotionValue, mapValue, springValue, and styleEffect.
**Source:** [https://motion.svelte.page/examples/vanilla-values](https://motion.svelte.page/examples/vanilla-values)
**Markdown mirror:** [https://motion.svelte.page/examples/vanilla-values.md](https://motion.svelte.page/examples/vanilla-values.md)
---
This mirror preserves the prose, implementation notes, and runnable Svelte source behind the live example page.
## FIG-001: motion values on plain elements.
No motion components anywhere: a $state slider feeds toMotionValue, mapValue derives position and color, springValue smooths them, and styleEffect binds the result to a plain div.
**Metadata:** tag: `VANILLA` | pattern: `rune-bridge`
### Notes
- `toMotionValue(() => slider / 100)` is the rune bridge — reads of `$state` inside the getter are tracked, so plain Svelte state drives the whole motion-value chain. Everything here works in module scope or a `.svelte.ts` store too.
- `mapValue` mixes COLOR stops as happily as numbers — one spring-smoothed progress value drives position, `backgroundColor`, and a tinted `boxShadow` through three-stop ranges.
- `styleEffect` binds the values straight to a plain ` ` — updates run on Motion's frame loop, outside Svelte's render cycle. The unbind function and `.destroy()` calls in the `$effect` cleanups are the manual lifecycle vanilla values ask for.
### Source
#### Default.svelte
Source file: [src/lib/examples/vanilla-values/demos/Default.svelte](https://github.com/humanspeak/svelte-motion/blob/main/docs/src/lib/examples/vanilla-values/demos/Default.svelte)
```svelte