liquid translate
proGet 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

