arc charge

free

The prompt is free with an account: sign up with Google or email, and your copy starts right after. The project and Figma file come with monthly or yearly.

A charging screen that fills the whole window, made of one WebGL2 shader and one big number. At rest a dim 4 % sits over a faint red thread between two contacts and a 24-tick level scale. A spark flares on the left contact, the camera pushes in and chases it along the thread as it ignites into an arc, with dust streaking past; it hits the right contact in a flash and the camera pulls back to the wide shot. Then the number counts up and the arc changes with the level: a thin amber filament at low charge, a jittering blue arc with side filaments peeling off in the middle, a wild violet-white arc throwing sparks near full. At 100 % it straightens into a calm mint-white beam with an anamorphic flare, the ticks fill in the same colour, and the level drains back to 4 % to loop. It plays as an 8-second seamless loop at any window size and keeps the scene centred on the shorter side. The colours by level, every timing and the arc's shape are a few named constants. Every frame is a pure function of time, with window.__render(t) and a ?rec mode for frame-exact video export; reduced motion shows one still of the full beam. The font is local, so it runs offline.

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

  • charging screen
  • progress indicator
  • electric arc
  • webgl shader
  • camera move
  • sparks
  • level ticks
  • autoplay loop
  • frame-exact recorder

stack

  • react
  • vite
  • typescript
  • webgl2

fonts

Geist

Free fonts, linked in the prompt.

colors

  • #020203
  • #E6290D
  • #FF7A0F
  • #294DFF
  • #7F3DFF
  • #1ABF99
  • #BFFFEB
  • #FFFFFF

license

Free account: personal use only. Monthly or yearly adds commercial and client work. Don't resell or share the template, prompt or files.

read the license