> ## Documentation Index
> Fetch the complete documentation index at: https://hyperframes.heygen.com/llms.txt
> Use this file to discover all available pages before exploring further.
# Ripples
> Concentric rings ripple outward from the centre, white on black. A WebGPU shader from the Shaders library (shaders.com, MIT).
**Ripples**
```html ripples.html theme={null}
```
Copy npx hyperframes add ripples to the clipboard
That writes `compositions/ripples.html`, plus 2 supporting files under `compositions/lib/`.
## Add it to your video
It runs for 2 seconds at 1920×1080. Paste this into your composition:
```html index.html theme={null}
```
Move it in time with `data-start`. Put it on a different timeline row with
`data-track-index`. See [data attributes](https://hyperframes.heygen.com/concepts/data-attributes.md) for the rest.
Tagged `webgpu` `webgpu-shader` `background` `texture` `rings` `waves` `monochrome`.
## Related topics
* [Browse the complete Catalog](https://hyperframes.heygen.com/catalog.md)
* [Add assets and Catalog items in Studio](https://hyperframes.heygen.com/studio/assets-and-blocks.md)
* [Build a richer composition](https://hyperframes.heygen.com/go-further.md)
## Related topics
- [Ripple Waves](https://hyperframes.heygen.com/catalog/blocks/ripple-waves.md)
- [Press Ripple](https://hyperframes.heygen.com/catalog/components/press-ripple.md)
- [Aurora](https://hyperframes.heygen.com/catalog/blocks/aurora.md)
This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.