Backgrounds

vanillasky/backgrounds

FreeUtility

Paint deterministic brand backdrops and keep their visual layer moving.

See it running

Open the demo on vanillasky

vanillasky.ai/docs/components/backgrounds

This registry sends X-Frame-Options, so its page cannot be embedded here. The link is the same page the frame would have shown.

Install it

npx shadcn@latest add https://vanillasky.ai/r/backgrounds.json

Source

src/lib/backgrounds/index.tsvanillasky.ai/r/backgrounds.json

1/** Brand-safe scene backgrounds and continuous background motion. */
2export {
3  TOP_TEXT_AREA_RATIO,
4  gradientBackground,
5  BrandGradientOverlay,
6} from "../scene-templates/color-utils";
7export * from "../scene-templates/background-effect";

What it pulls in

npm packages

react

Other registry items

@vanillasky/motion
@vanillasky/theme

Files it writes

src/lib/backgrounds/index.ts
src/lib/scene-templates/background-effect.ts
src/lib/scene-templates/color-utils.ts

More from vanillasky

All 33 items

Same registry, same kind — the ones you would have found next
Component	Registry	Kind	Access	Installs
Motionmotion	vanillasky	Utilities	Free	1 dep · 3 files
Themetheme	vanillasky	Utilities	Free	no deps · 3 files
Typographytypography	vanillasky	Utilities	Free	no deps · 3 files
Video configvideo-config	vanillasky	Utilities	Free	no deps