library

effects

mcp

building light

pro

Get the prompt, project and Figma file with monthly ($29 a month) or yearly ($249 a year). Plus tax where it applies.

A flat blue rounded rectangle on a near-black stage becomes a soft natural spotlight in six steps, the way you'd build one in a design tool. For each step a dark settings card appears beside the light, joined to it by a thin line with a blue end dot, and a cursor grabs the field's scrub icon and drags the value with a small overshoot and correction while the light follows live: Layer blur, Progressive, End 40 (the beam softens and widens downward); Layer blur, Uniform, 150 (a glow); Ellipse, FFFFFF, 90 % (a hot spot on the floor); Layer blur, Progressive, Start 100 (the spot spreads, light spills); Layer blur, Uniform, 250 (a deep blue haze, the beam becomes a cone with a bright core); Noise, 40 % (film grain). Seven step dots track the progress; the result holds, then every effect eases back to the flat shape. The light is a half-resolution canvas with real canvas blur filters and gradient masks, the grain its own canvas in overlay blend; the cards are Geist and Geist Mono. ?rec and window.__render(t) draw any moment for frame-exact video export, and reduced motion gets one still.

what you get

prompt
Paste it into Claude, Codex, Kimi or Cursor to rebuild this template. Tested: we rebuild every template from its prompt before it goes live.
project
The Vite + React source code as a .zip, ready to run.
figma file
The editable design as a .fig file to import into Figma.

what's inside

  • spotlight
  • light study
  • design tool
  • settings cards
  • layer blur
  • progressive blur
  • scrub field
  • cursor animation
  • connector lines
  • step dots
  • film grain
  • canvas 2d
  • canvas filters
  • gradient masks
  • autoplay loop
  • frame-exact recorder

stack

  • react
  • vite
  • typescript
  • canvas

fonts

Geist, Geist Mono

Free fonts, linked in the prompt.

colors

  • #070A10
  • #3B86FF
  • #2F7BFF
  • #4D8DFF
  • #1D1E22
  • #2A2B30
  • #E9EBEF
  • #8A8D94

license

With monthly or yearly: personal and commercial work, client projects included. Don't resell or share the template, prompt or files.

read the license