# Spotlight New — component for textures & overlays (react)

> **For AI agents:** find the right skill in one call — `curl -s "https://varg.ai/how-to/api/search?q=<what the person wants>"` returns the matching how-to page and the best skills with install commands, as markdown (Russian works too). Full index: https://varg.ai/how-to/llms.txt. Every page has a markdown twin: add `.md` to its path. Before generating anything, show the person the options on the how-to 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://s3.varg.ai/how-to/previews/48791363c6c6/lib-aceternity-spotlight-new.mp4 (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://varg.ai/how-to/video/music-video.md)
- [Logo sting](https://varg.ai/how-to/video/logo-sting.md)
- [Title sequence](https://varg.ai/how-to/video/title-sequence.md)
- [Generative art loop](https://varg.ai/how-to/video/generative-loop.md)
- [ASCII & retro looks](https://varg.ai/how-to/video/ascii-retro.md)
- [Ambient & lofi loop](https://varg.ai/how-to/video/ambient-loop.md)
- [Paper collage & zine](https://varg.ai/how-to/video/collage.md)

## More textures & overlays

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