Lumen Nothing is uploaded

How to Animate Text in the Browser, Step by Step

1080 × 1080 · 72 frames
1080 × 1080 px

Your text stays in this browser. Nothing is uploaded.

The editor above is loaded with the worked example below. Follow along with it, change a setting, and compare your numbers.

How to use it in 3 steps

  1. Write the line and pick a style

    Type your text (up to 80 characters), then choose neon, typewriter, glitch, fire, 3D, or rainbow.

  2. Set the canvas, duration, and fps

    Pick a canvas size and a loop of 1 to 6 seconds at 10 to 30 fps. The editor shows the resulting frame count.

  3. Export in the format that fits

    Download GIF, MP4, or WebM. Everything is generated in your browser, with no watermark and no account.

Worked example: MAKE IT MOVE

The editor above is set up for this example, so you can follow along with it. The sample sentence is MAKE IT MOVE, the style is neon, and the canvas is the 1080 × 1080 square preset. Duration is 3 seconds and frame rate is 24 fps.

Frame count: N = round(3 × 24) = 72 frames. Each frame is 1080 × 1080 = 1,166,400 pixels. At 4 bytes per pixel, one frame is 4,665,600 bytes, and all 72 frames are 335,923,200 bytes, about 335.9 MB, before encoding.

Video estimate: the default bitrate is round(1080 × 1080 × 24 × 0.1) = 2,799,360 bits per second, which falls inside the 1,000,000 to 12,000,000 limits. Size ≈ 2,799,360 × 3 / 8 = 1,049,760 bytes, about 1.05 MB. That is a back-of-the-envelope number: a neon loop has a lot of flat dark, so the actual file may be smaller.

GIF note: a GIF stores one byte per pixel (a palette index) before compression, so 72 frames are 72 × 1,166,400 = about 84.0 MB uncompressed. Compression brings it down by an amount that depends on the content, and a glow can band in 256 colors. If the GIF is too big, drop to 15 fps (45 frames) or use the 540 × 540 compact canvas.

Now try it. Change the text to your own line, switch the style, set fps to 15, and watch the frame count in the editor change to 45. Then export and compare the file with the estimate.

Three tuning tips

Change one setting at a time

If you change style, size, and fps together you will not know which one made the file heavier. Change fps first, since it has the clearest effect on frame count.

Decide the destination before the format

A platform that takes video is better served by MP4. A chat or doc that only plays GIF needs GIF. Pick that first, then tune the loop to fit.

Use the preview as the check, not the settings

The preview is drawn by the same code as the export. If the loop looks right there, the file will match.

The math behind the steps

Every export follows the same arithmetic. Frames N = round(duration × fps). Raw bytes = N × width × height × 4. Video size ≈ bitrate × duration / 8, where the default bitrate is the pixel count times fps times 0.1, kept between 1,000,000 and 12,000,000 bits per second. This site uses decimal megabytes (1 MB = 1,000,000 bytes).

Worked example at this page's starting settings
Canvas1080 × 1080 px (1,166,400 pixels per frame)
FramesN = 3 s × 24 fps = 72
Raw frames before encoding72 × 1080 × 1080 × 4 bytes = 336 MB
MP4 / WebM upper estimate2.8 Mbps × 3 s ÷ 8 = 1.0 MB
GIF frame delay1/24 s is 4.17 centiseconds; GIF stores whole centiseconds, so delays alternate (4 and 5 cs) to average out

The same sentence at different settings shows what matters. At 1080 × 1080, 3 seconds at 24 fps has 72 frames. At 15 fps, 3 seconds has 45 frames, which is 37.5 percent fewer. At 540 × 540 (a quarter of the pixels), 72 frames is about 84.0 MB raw instead of 335.9 MB. Frames and pixels multiply, so cutting either one cuts the work.

Format limits matter as much as size. GIF is limited to 256 colors per frame and on-or-off transparency. MP4 cannot carry transparency, so the editor flattens it onto a matte. WebM keeps transparency in browsers that record it. MP4 uses the browser's H.264 encoder when available and a built-in software encoder when not.

Sources

Common mistakes

Starting with the largest canvas and the highest fps

A 1080 × 1920 canvas at 30 fps for 6 seconds is 180 frames, about 1,493 MB raw. Start smaller and scale up only if you need it.

Choosing a format before the destination

A GIF is the wrong choice for a platform that takes video, and MP4 is the wrong choice when you need transparency.

Ignoring the loop point

Watch the preview across the restart. A visible jump means the style ends differently than it begins.

Too much text

Long lines force a small size that is unreadable on a phone. Use short lines.

Frequently asked questions

How do I animate text without installing software?

Use the editor on this page. Type a line, choose a style, set the loop, and export. Everything runs in your browser.

How long should the animation be?

Three seconds is a good start. The editor allows 1 to 6 seconds.

What fps should I use?

Use 12 to 15 for GIF and 24 to 30 for MP4 or WebM. The editor accepts 10 to 30.

Why is my file bigger than the estimate?

The estimate is a rough size from a default bitrate. Busy motion needs more bits, and GIF size depends on content and palette.

Does the preview match the export?

Yes. The preview and export use the same drawing code at a fixed time step.

Is my text uploaded?

No. Nothing leaves your browser.