aquarium toggle

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 day/night switch built as a glass pill with a living pixel-art aquarium inside, centred in a room whose colour follows the light. The big glass bubble is the knob: it magnifies the tank under it like a lens. Click it or drag it and the light follows its position: the lamp dims through a warm dusk, the moon LEDs come on and the tank goes dark. The brass diving helmet's porthole lights up, the snail comes out of its shell, and the plankton glows cyan and flares when the bubble or a fish rushes past. The fish school after the bubble, the plants bend in its wake, and the layers shift with your pointer. By day, air bubbles rise from the sand and gather into a sun etched on the back glass; at night it breaks up into plankton that settles as a moon. The 144 × 76 world is drawn in code 30 times a second with every colour dithered between four light keys, and one WebGL2 shader draws the glass, the wobbling lens and its coloured shadow, so there are no images or fonts to load. It's a real switch for the keyboard and screen readers, opens on night for dark-mode visitors and holds still for reduced motion. Hook your theme change into one function; recolour every material in one palette file. Add ?demo=1 for a scripted pointer that clicks to night and drags back to day, with window.__render(t) for frame-exact video export.

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

  • toggle
  • dark mode switch
  • pixel art
  • webgl shader
  • glass lens
  • drag interaction
  • parallax
  • fish schooling
  • ordered dithering
  • scripted demo
  • frame-exact recorder

stack

  • react
  • vite
  • typescript
  • webgl2
  • canvas

colors

  • #F7F5F3
  • #E4E7F2
  • #86D5C5
  • #3B9CA1
  • #1D6175
  • #F2C463
  • #5CE8F6
  • #04070D

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