Letter wave loop

Every letter bobs up and down on a travelling phase so the word ripples continuously. A playful, always-moving word such as a title or a call-out.

Apply this to my video: "Letter wave loop" from the 24fps video editor library.
Preset JSON: https://24fps.dev/video-editor/text/wave-chars-loop-cc/preset.json (pass its "preset" to the engine).
Engine (MIT, no dependencies, ES module): https://24fps.dev/editor/engine.js. Download the engine next to your page (curl -O) rather than importing cross-origin, then import { mount } from "./engine.js" in a <script type="module"> served over http.
Wiring: root = a position:relative box at the video's size. media = { main }: main is a wrapper holding my video, filling the root. Then const fx = mount(root, { kind: "text", preset, media }) and call fx.render(seconds) every frame. The preset runs 5s from t = 0; offset t to place it later. It is seek-safe: drive it from the GSAP timeline in HyperFrames or call render(frame / fps) in Remotion. Before capturing frames, await (fx.ready ?? document.fonts.ready). Check it on my footage: if text is hidden behind the subject or doesn't read against my colours, nudge the layer positions or colours.
Replace the demo text with mine: set preset.layers[n].text (use \n for line breaks); if none given, write lines that fit my footage and tell me.
Field reference: https://24fps.dev/video-editor/llms.txt. Keep sizes as fractions of the frame height so it works at any resolution. Credit: 24fps.dev/video-editor
Same idea
Also called: Wave, Wave 2, Wave 3, Super Wavy, Super Wavy 2, Digital Swim, Under Sea, Ocean Surface, Wiggly Wave, Text Snake 3, Text Snake 2, Text Snake, Groovy Wave, Caption Snake, Roller Coaster
Technique
Per-letter float with the letter index as phase gives a travelling wave. Amplitude and speed are fixed by the engine, so the stronger variants look the same.
Footage
Rainy street at night, Pexels

Similar text scenes