# Squiggle — component for callouts & annotations (remotion)

> **For AI agents:** find the right skill in one call — `curl -s "https://skills.varg.ai/api/search?q=<what the person wants>"` returns the matching use case and the best skills with install commands, as markdown (Russian works too). Full index: https://skills.varg.ai/llms.txt. Every page has a markdown twin: add `.md` to its path. Before generating anything, show the person the options on the use-case page.

A flat line draws itself along a straight course as a traveling wave whose crests swim forward and calm down as the head runs out, in wave, zigzag, loop or coil shapes, then erases toward its end point.

- **Install:** `npx shadcn@latest add @remocn/squiggle`
- **Registry:** remocn · **Framework:** remotion · **License:** MIT
- **Docs and preview:** https://remocn.dev/docs/motion-graphics/squiggle
- **Source:** https://remocn.dev/r/squiggle.json
- **Runs:** local render, free
- **Aspect:** any

## Slots (what you fill in)

- `shape` (string)
- `color` (color)
- `weight` (number)
- `amplitude` (number)
- `wavelength` (number)
- `length` (number)
- `angle` (number)
- `x` (number)
- `y` (number)
- `settle` (number)
- `hold` (number)
- `erase` (boolean)
- `delay` (number)

## Used in

- [UGC ad with overlays](https://skills.varg.ai/video/ugc-overlay-ad.md)
- [Captioned talking clip](https://skills.varg.ai/video/captioned-clip.md)
- [Faceless narrated video](https://skills.varg.ai/video/faceless-explainer.md)
- [Post to video](https://skills.varg.ai/video/post-to-video.md)
- [Pull request to video](https://skills.varg.ai/video/pr-video.md)
- [Code walkthrough](https://skills.varg.ai/video/code-walkthrough.md)
- [App walkthrough & onboarding](https://skills.varg.ai/video/app-walkthrough.md)
- [Data story](https://skills.varg.ai/video/data-story.md)

## More callouts & annotations

- [Arc Motion Path](https://skills.varg.ai/component/hf.arc-motion-path.md) — `npx hyperframes add arc-motion-path`
- [Hand-Drawn Arrow](https://skills.varg.ai/component/hf.hw-arrow.md) — `npx hyperframes add hw-arrow`
- [Hand-Drawn Boil](https://skills.varg.ai/component/hf.hw-boil.md) — `npx hyperframes add hw-boil`
- [Hand-Drawn Box Label](https://skills.varg.ai/component/hf.hw-box-label.md) — `npx hyperframes add hw-box-label`
- [Scribble Callout Circle](https://skills.varg.ai/component/hf.hw-callout-circle.md) — `npx hyperframes add hw-callout-circle`
- [Sketched Frame](https://skills.varg.ai/component/hf.hw-frame.md) — `npx hyperframes add hw-frame`