# arc()
> Curve keyframes and layout animations with transition.path, including tangent-following rotation.
**Source:** [https://motion.svelte.page/examples/arc](https://motion.svelte.page/examples/arc)
**Markdown mirror:** [https://motion.svelte.page/examples/arc.md](https://motion.svelte.page/examples/arc.md)
---
This mirror preserves the prose, implementation notes, and runnable Svelte source behind the live example page.
## FIG-001: straight endpoints, curved travel.
Click the stage to send the box between fixed endpoints. Strength controls the bend while direction can stay automatic or lock clockwise/counter-clockwise.
**Metadata:** tag: `PATH` | api: `arc()` | input: `transition.path` | mode: `live`
### Notes
- `arc()` replaces straight x/y interpolation with a quadratic bend.
- Auto direction remembers a stable screen-space side across reversals.
- The endpoints stay exact; only the route between them changes.
### Source
#### Default.svelte
Source file: [src/lib/examples/arc/demos/Default.svelte](https://github.com/humanspeak/svelte-motion/blob/main/docs/src/lib/examples/arc/demos/Default.svelte)
```svelte
strength
{#each [0.25, 0.5, 1] as value (value)}
{/each}
```
## FIG-002: path tangent, visible heading.
The arrow follows the curve and rotates with its tangent. Path rotation uses a separate channel, so authored rotate values stay additive.
**Metadata:** tag: `ROTATE` | api: `arc()` | input: `transition.path` | mode: `live`
### Notes
- `rotate: true` follows the full path tangent.
- A value from `0` to `1` scales the tangent rotation.
- Path rotation is additive to the element's own `rotate` channel.
### Source
#### Rotate.svelte
Source file: [src/lib/examples/arc/demos/Rotate.svelte](https://github.com/humanspeak/svelte-motion/blob/main/docs/src/lib/examples/arc/demos/Rotate.svelte)
```svelte
// tangent followingrotate: true
```
## FIG-003: shared element, curved FLIP.
A single layoutId bubble swaps between two slots. transition.layout.path bends the projection animation without changing the destination layout.
**Metadata:** tag: `LAYOUT` | api: `arc()` | input: `transition.layout.path` | mode: `live`
### Notes
- The same path works for shared `layoutId` transitions.
- Place it at `transition.layout.path` to configure FLIP motion.
- Layout shifts under 20px stay straight to avoid a noisy detour.
### Source
#### Layout.svelte
Source file: [src/lib/examples/arc/demos/Layout.svelte](https://github.com/humanspeak/svelte-motion/blob/main/docs/src/lib/examples/arc/demos/Layout.svelte)
```svelte