library

effects

mcp

liquid translate

pro

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

A translate control as one piece of liquid glass, on a 1080 × 1080 stage that scales to the window and loops every 12 seconds. Over a sculptural fan of curved violet-to-teal blades, a round glass drop with a languages glyph waits; a pointer presses it and it stretches into a pill (its right end leads, the left follows, a neck pinches and wobbles out), the glyph turns into swap arrows and "Thank you so much" is typed with a blinking caret beside an EN label. Each press on the round button spins the arrows half a turn and runs a sweep of cyan-violet-gold light through the glass from left to right that wipes the old phrase out and the new one in: ES "Muchas gracias", then DE "Vielen Dank", the pill resizing to fit each phrase. A last press folds it back into the drop. The glass is one WebGL fragment shader: an SDF capsule that refracts the backdrop with a gentle lens in the body and a strong, colour-split bend at the rim, a floor glow, a lit inner disc and a rim light; text, Lucide icons and the pointer are drawn on a 2D canvas above it. Every frame comes from one pure render(t) (window.__render(t), window.__MANUAL, ?rec), so any moment can be drawn on its own. Geist, a reduced-motion 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

  • liquid glass
  • translate pill
  • language switcher
  • webgl refraction
  • sdf shape
  • chromatic dispersion
  • rim light
  • light sweep
  • text wipe
  • typing caret
  • pill resize
  • icon morph
  • scripted cursor
  • fragment shader
  • canvas text
  • autoplay loop
  • frame-exact recorder

stack

  • react
  • vite
  • typescript
  • webgl
  • canvas

fonts

Geist

Free fonts, linked in the prompt.

colors

  • #4B4877
  • #8A2BE2
  • #19B5E8
  • #1B1830

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