# Spotlight New — component for textures & overlays (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.

Soft white light cones fall from both top corners and sway slowly left and right over a dark frame

- **Install:** `npx shadcn@latest add @aceternity/spotlight-new`
- **Registry:** aceternity · **Framework:** react · **License:** Aceternity License (free components)
- **Docs and preview:** https://ui.aceternity.com/components/spotlight-new
- **Source:** https://ui.aceternity.com/components/spotlight-new
- **Example:** https://skills.varg.ai/previews/lib-aceternity-spotlight-new.mp4?v=22260 (Rendered by varg from the library’s own code (Aceternity UI))
- **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

Layer Aceternity UI's Spotlight New (https://ui.aceternity.com/components/spotlight-new; free component, Aceternity License, fine in commercial video, do not redistribute the source) over a dark background as a slow light sweep behind my headline. Install with `npx shadcn@latest add @aceternity/spotlight-new`. The sway is a Motion x animation that mirrors forever, so in Remotion set x from a sine of frame / fps with the same duration, and in HyperFrames put a yoyo tween on the paused timeline. Adjust gradientFirst/Second/Third for the light color, width, height, smallWidth, translateY, xOffset and duration (7 s by default).

## Used in

- [Music video](https://skills.varg.ai/video/music-video.md)
- [Logo sting](https://skills.varg.ai/video/logo-sting.md)
- [Title sequence](https://skills.varg.ai/video/title-sequence.md)
- [Generative art loop](https://skills.varg.ai/video/generative-loop.md)
- [ASCII & retro looks](https://skills.varg.ai/video/ascii-retro.md)
- [Ambient & lofi loop](https://skills.varg.ai/video/ambient-loop.md)
- [Paper collage & zine](https://skills.varg.ai/video/collage.md)

## More textures & overlays

- [Editorial Flash Overlay](https://skills.varg.ai/component/hf.editorial-flash-overlay.md) — `npx hyperframes add editorial-flash-overlay`
- [Freeze-Frame Dressing](https://skills.varg.ai/component/hf.freeze-frame-dressing.md) — `npx hyperframes add freeze-frame-dressing`
- [Grain Field](https://skills.varg.ai/component/hf.grain-field.md) — `npx hyperframes add grain-field`
- [Grain Overlay](https://skills.varg.ai/component/hf.grain-overlay.md) — `npx hyperframes add grain-overlay`
- [Halftone Field](https://skills.varg.ai/component/hf.halftone-field.md) — `npx hyperframes add halftone-field`
- [Light Leak](https://skills.varg.ai/component/hf.light-leak.md) — `npx hyperframes add light-leak`