OPAJE — Text Displacement Tool

Internt verktyg. Ange lösenord för att fortsätta.

OPAJE — Text Displacement Tool

Animate any text with a torn-edge / blob displacement effect inspired by After Effects' Displacer Pro. Type your text, choose a font and canvas format, tune the animation layers, then export a still SVG frame, a looping MP4, or a looping GIF — all rendered locally in your browser.

Playing
Animation presets
Text
500
115
0
15
16
9
1.6
8
1
0.4
1.2
0
2
Canvas size
×
Current: 1080×1080 px
Grid guides
6
0
5
2
Reel safe zone
13
21
5
13
Rule-of-thumb margins for a 1080×1920 Reel, shaded on canvas — top clears the profile/username row, bottom clears caption + audio track name, right clears the like/comment/share/remix icon column. Meta doesn't publish one exact spec for organic (non-ad) Reels, so treat this as a safety margin, not a guarantee — double-check in Instagram itself before publishing. Screen-only, like grid guides: never appears in exported SVG/MP4/GIF files.
Animated text position
Text boxes (non-animated)
Drag the animated text or any text box directly on the canvas to reposition it — click and hold, then move the mouse. Click an empty area of the canvas to deselect. Grid guides and the selection outline are only shown on screen; they never appear in exported SVG/MP4/GIF files.
Background mode
Works with any background mode above — e.g. keep a flat black background while the letter shape itself reveals the moving gradient animation through it. Overrides the animated text's own black/white ink choice while on.
OPAJE presets
Adjustments
0
0
Colors
Motion
30
2.0
30
90
The gradient moves on the same 4-second loop as the text animation, so it always repeats seamlessly together with it — including in exported MP4/GIF files. The animated text becomes a true alpha channel in this mode: the gradient shows through both the space around the letters and any torn gaps within them. Text boxes below (non-animated) are never affected — they always stay fully solid black or white, never transparent.
A flat, solid-colour background behind the animation.
Still frame
Loop export (4 sec × loop count)
Loop export renders the animation frame by frame (not in real time) and encodes it with ffmpeg.wasm — entirely local in your browser, no internet connection needed. Can take anywhere from a few seconds to a couple of minutes depending on format, resolution and loop count. The files opaje_ffmpeg_core_1.js and opaje_ffmpeg_core_2.js must stay in the same folder as this HTML file for this to work.
Background only (no text)
Exports just the background layer — no animated text, no text boxes — as its own standalone file, so you can use it as a background elsewhere (a presentation, Adobe Express, Instagram, …). Works with any Background mode, though it's most useful with Gradient selected. Its own loop count, independent from the loop export above.
Templates
Saves the whole project as it stands right now — text, format, animation, layout, and background — so you can pick up exactly where you left off, or start a new piece from it.
Templates are only kept in this session/tab (no browser storage is used). To use them again next time you open the file, click "Export templates" — it downloads a small JSON file you can import again later, in this file or a future version of it. Saving under a name that already exists overwrites that template.