# Scoped Motion Classes
> A live Svelte Motion example using @humanspeak/svelte-scoped-props to keep component-scoped CSS selectors alive on motion components.
**Source:** [https://motion.svelte.page/examples/scoped-motion-classes](https://motion.svelte.page/examples/scoped-motion-classes)
**Markdown mirror:** [https://motion.svelte.page/examples/scoped-motion-classes.md](https://motion.svelte.page/examples/scoped-motion-classes.md)
---
This mirror preserves the prose, implementation notes, and runnable Svelte source behind the live example page.
## FIG-001: motion classes.
A parent-scoped `.headline` selector styles both a native heading and a `motion.h2`. The motion component uses `scoped:class` so Svelte sees the selector as used and keeps the generated CSS.
**Metadata:** tag: `SCOPED CSS` | syntax: `scoped:class` | element: `motion.h2` | package: `@humanspeak/svelte-scoped-props`
### Source
#### Default.svelte
Source file: [src/lib/examples/scoped-motion-classes/demos/Default.svelte](https://github.com/humanspeak/svelte-motion/blob/main/docs/src/lib/examples/scoped-motion-classes/demos/Default.svelte)
```svelte