TranslateFlow is a code component that takes your English text, translates it into your chosen languages, and cycles through each translation with beautiful animated transitions. It supports 240+ languages via Google Translate and caches every result in localStorage so your visitors never wait twice.
TranslateFlow uses an open-source translation gateway to access Google Translate without API keys or billing. Results are cached in your browser's localStorage, making every subsequent page visit instant with zero network calls.
Hero headlines that greet every visitor in their language
Landing pages targeting a global audience with a single text block
Portfolio sites adding a multilingual personality to headings
Event websites welcoming attendees from different countries
Text — Your English source text.
Languages — Pick from 240+ languages. Add as many as you need. Browser language is auto-prioritised when detected.
Show English — Toggle whether the original English text appears in the rotation cycle.
Text Color — Set any color using Framer's native color picker. Supports design tokens.
Animation — Grouped controls for transition style (7 options: Blur Reveal, Slide Up, Morph Scale, Flip Y, Elastic Drop, Crossfade, Clip Reveal) and cycle interval (0.8s–10s).
Font — Full extended font control with size, weight, line height, alignment, and font family selection.
Drag TranslateFlow onto your canvas.
Type your English text in the Text field.
Open the Languages array and pick your target languages.
Choose a transition style and set the interval under Animation.
Set your text color and font.
Preview — your text now cycles through every selected language with smooth transitions.
On the canvas, only the static English text is shown for performance. Translations and animations play in Preview and on the published site.
Translations are cached permanently in localStorage. If you change your source text, fresh translations are fetched automatically.
Keep your interval above 1.5s for readability, especially with longer sentences.