2D lip-sync in your browser: make a character talk from a voice clip

Record a line with your microphone or import an audio file, and pinkcel animates the character's mouth to it automatically. The mouth shapes are yours to draw, the timing comes from the voice, and the result is ordinary keyframes you can adjust. Free, and your audio never leaves your computer.

How the automatic lip-sync works

pinkcel listens to how loud the voice is, not to which sounds it makes. For every frame it measures the loudness of the clip, smooths that curve so the mouth does not jitter, and scales it to the loudest moment of this particular recording. Quiet frames close the mouth, loud frames open it, and pauses hold it shut.

What happens next depends on how the mouth is built:

• A mouth made of several drawings (a switch group, for example closed, half open and wide open) is animated by swapping drawings: the louder the voice, the more open the shape. A key is written only when the shape changes, so held vowels and silences stay clean.
• A mouth made of one drawing opens by stretching vertically between two limits you choose.

Because it follows loudness, it works with any language and any voice, and with sound effects or music too. What it does not do is tell an "oo" from an "ee": if a close-up shot needs exact mouth shapes for particular sounds, keep the automatic pass for timing and adjust individual keys by hand.

Step by step

1. Get a character with a mouth. The quickest start is the built-in one: in the layers panel click the character button and choose Simple character (face). Its mouth is already a switch group with shapes ordered from closed to open, and the eyes blink the same way.
2. Add the voice. Select the character and press Add voice (import + lip-sync) in the inspector. Pick an MP3, WAV or OGG file, and the mouth is animated in the same step. To record instead, use the microphone button, then run Generate lip-sync on the mouth with the new audio track.
3. Play it back. Press Space. The audio plays with the animation and its waveform sits on the timeline, so you can see where each word lands.
4. Adjust. Change Gain or Smooth and generate again, or edit single keys on the timeline. More on that below.

The lip-sync goes into its own clip on a separate channel of the main timeline, so it keeps playing while the body runs any other animation on top.

Drawing mouth shapes that read well

• Order them from quiet to loud. In the layers panel the bottom drawing of the group is used for silence and the top one for the loudest moments. Order is the only thing the lip-sync needs to know.
• Three to five shapes are enough. Closed, slightly open, open and wide open cover most dialogue. More shapes than that start to flicker unless you raise Smooth.
• Make the difference visible at small sizes. A mouth that is 20 pixels tall in the final video needs clearly different silhouettes, not subtle line changes.
• Keep the pivot still. Draw every shape around the same centre so swaps do not make the mouth jump around the face.
• Blink separately. Eyes are a switch group of their own (Open, Half, Blink): move the playhead and pick the Blink drawing for a frame or two whenever the character should blink.

Tuning the result

Exporting a talking character

• Video (MP4, WebM) renders in your browser with the voice mixed in, exactly where it plays on your timeline, so the file is ready to post. A GIF has no sound track, so share the talking version as a video.
• Games. In a sprite sheet the talking loop becomes frames. In the Godot scene export the mouth swaps become visibility tracks, so you can play the dialogue animation next to the voice line in the engine.

FAQ

Related guides