# Viola — component for backgrounds & gradients (react)

> **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 saturated amber and yellow field with a blue-violet hollow slowly drifting through it

- **Install:** `npm i @shadergradient/react @react-three/fiber three three-stdlib camera-controls`
- **Registry:** shadergradient · **Framework:** react · **License:** MIT
- **Docs and preview:** https://shadergradient.co/customize
- **Source:** https://github.com/ruucm/shadergradient/blob/main/packages/shadergradient/src/presets.ts#L232
- **Example:** https://skills.varg.ai/previews/lib-shadergradient-viola.mp4?v=35657 (Rendered by varg from the library’s own code (ShaderGradient · rendered by varg))
- **Time:** Drive from the frame. Runs on its own clock (requestAnimationFrame, timers, springs or CSS). Drive it from frame / fps before rendering, or the render drifts.
- **Runs:** local render, free
- **Aspect:** any

## Prompt that renders it frame-exact

Use the ShaderGradient "Viola" preset (preset 05 on https://shadergradient.co/customize, MIT; exported as presets.violaOrientalis from @shadergradient/react, source github.com/ruucm/shadergradient/blob/main/packages/shadergradient/src/presets.ts) as a vivid full-frame background for a product reveal or a punchy hook. Install @shadergradient/react with @react-three/fiber and three, then render <ShaderGradientCanvas style={{position:'absolute',inset:0}} lazyLoad={false} pixelDensity={1}> with <ShaderGradient {...presets.violaOrientalis.props} /> inside. To make it frame-exact, override animate="off" and pass uTime={seconds} (the shader multiplies it by uSpeed 0.1), set enableTransition={false} so the camera starts in place, and let R3F draw once before each frame is captured. The frame is mostly amber (color2) with the blue (color3) showing only in the hollow, so put the brand color in color2 and keep color3 dark for contrast. Raise uSpeed toward 0.2 if the slow default barely moves over a short clip, and change cameraZoom to reframe the sphere.

## Used in

- [Year in review / Wrapped](https://skills.varg.ai/video/wrapped.md)
- [Lyric video](https://skills.varg.ai/video/lyric-video.md)
- [Karaoke video](https://skills.varg.ai/video/karaoke.md)
- [Logo sting](https://skills.varg.ai/video/logo-sting.md)
- [Title sequence](https://skills.varg.ai/video/title-sequence.md)
- [Brand guidelines film](https://skills.varg.ai/video/brand-guidelines.md)
- [Stream overlay package](https://skills.varg.ai/video/stream-overlay.md)
- [Shader loop](https://skills.varg.ai/video/shader-loop.md)

## More backgrounds & gradients

- [Aurora](https://skills.varg.ai/component/hf.aurora.md) — `npx hyperframes add aurora`
- [Aurora Drift](https://skills.varg.ai/component/hf.aurora-drift.md) — `npx hyperframes add aurora-drift`
- [Flowing Gradient](https://skills.varg.ai/component/hf.flowing-gradient.md) — `npx hyperframes add flowing-gradient`
- [Mesh Gradient](https://skills.varg.ai/component/hf.mesh-gradient.md) — `npx hyperframes add mesh-gradient`
- [Mesh Gradient Background](https://skills.varg.ai/component/hf.mesh-gradient-bg.md) — `npx hyperframes add mesh-gradient-bg`
- [Minimal Gradient Background](https://skills.varg.ai/component/hf.mk-background.md) — `npx hyperframes add mk-background`