Motion graphics

Lottie clips bring animated graphics to the Edit timeline: lower thirds, badges, kinetic type, logo stings. Ready-made Mograph templates cover the common ones without touching a file, and Motion gives any clip an entrance and an exit. A Lottie file is the JSON format After Effects exports through Bodymovin and that LottieFiles serves, and in Kitlig it is a clip like any other. Drop it on a video lane, trim it, move it, blend it, and it plays in the player and renders in Export Media. The same page covers keyframes, which animate any clip's position, scale, rotation and opacity, and the graph editor behind them.

Lottie clips

Adding one

• Media Bin ▸ Generators ▸ Lottie clip adds a starter animation (a card that fades and slides in) at the playhead, ready to edit.
• Media Bin ▸ Generators ▸ Import Lottie… picks a .json from disk and adds it as a clip.
• Drop a .json asset from the project onto a video lane. If it parses as a Lottie, it becomes a Lottie clip.
• Ask the Assistant: "add a lower third for Ada Lovelace, Engineer" and it writes the animation itself (see Agents).

The clip takes the animation's own length. Looping clips can be stretched past it; the animation wraps.

Note

Kitlig reads the plain .json export. A .lottie archive is a zip and is refused with a hint to export the JSON instead.

What a Lottie clip can do

The clip carries its own copy of the animation, so the file on disk is never changed. In the Clip panel a Lottie clip shows:

• Fit: fit inside the frame, fill the frame, or draw at the animation's own pixel size, centred.
• Speed and Loop.
• Background: a colour behind the animation. Off means transparent, so the lanes below show through.
• Open in editor, Import JSON… and Export Lottie….

Transform, opacity, blend mode, fades and Paste Attributes all work on a Lottie clip as they do on footage. On mograph clips, Paste Attributes… also offers the look (font, size, colour, stroke, position, box and highlight look) and the entrance and exit as tick boxes. The target keeps its own words.

Controls

Below the look settings the Clip panel lists the animation's Controls: the words of every text layer, the colour of each text layer, each solid's colour, and every fixed fill and stroke colour on a shape layer. Change a name or a brand colour there and the clip updates; nothing else in the file is touched. The list comes from the file itself, so a template you build once carries its controls wherever it goes. A file can also carry a kitlig.controls list at its top level, with an id, an optional label and an optional hidden flag per control, to name the ones that matter and hide the rest; the Lottie editor is the place to write it.

Saving templates

Type a name next to Save to library and the clip's animation is written as a .json into the project's library/mograph folder, with its fit, loop, speed and background inside the file. It appears under My mograph in Media Bin ▸ Generators, ready to drag onto a lane or add at the playhead, and because it is an ordinary Lottie file you can copy it to another project, hand it to someone else or open it in any Lottie player. Import Lottie… and a dropped .json read the saved look back.

The Lottie editor

Open in editor opens the animation as text beside a live preview. The left side is a code editor for the JSON with syntax checks; the right side plays the animation with a frame scrubber and a play button. Format re-indents the text. Apply (or Ctrl+S) writes the document onto the clip. Apply stays off while the text is not a playable animation, so a half-typed edit can never break the clip. The status line at the bottom says what is wrong, or lists the parts of the file Kitlig will skip.

What plays and what does not

Kitlig draws Lottie animations with lottie-web's canvas renderer, frame by frame.

• Shape layers, solids, nulls, precomps and text layers play.
• Text is drawn with Kitlig's bundled fonts. Name a Kitlig font in the layer (space-grotesk, bebas-neue, playfair-display, space-mono and the others from the Theme Editor's list, with -bold for the bold weight) and that face is used; any other name falls back to a face of the same flavour. The words look the same in the player, in the export and on a headless Kitlig.
• Expressions are ignored. Layer effects are not rendered. Audio layers are not supported, and an image layer plays only when the picture is embedded in the file (textures in mograph shapes are). The editor's status line counts the expressions and effects it skipped.

Warning

Lottie frames are drawn by the running app, like title cards. An export started while Kitlig has no window open (an agent on a closed app) renders the clip empty. The headless container counts as having a window.

Export

Export Media renders the animation to one frame per export frame and composites it like footage, so transforms, fades and blends apply. FCP XML has no way to carry a Lottie clip; it is left out and counted in the export message, like a timecode clip.

Mograph templates

Mograph templates are ready-made animated titles and transitions. You pick one, type your words and adjust a handful of settings; Kitlig builds the Lottie animation for you. The settings stay on the clip, so you can change the words, the direction or the easing at any time and the animation is rebuilt. Trim the clip and it is rebuilt again for the new length, so an exit always lands on the clip's last frame.

Adding one

Open Media Bin ▸ Generators. The templates sit in four groups:

Group	Templates
Mograph · Text in	Words rise, Words from the side, Words drop, Words alternate, Letters pop, Letters rise, Letters spin in, Typewriter, Scale type
Mograph · Shape + text	Box title, Pill label, Lower third, Outline badge
Mograph · Highlight	Highlight box, Highlight colour, Highlight underline
Mograph · Transitions	Colour wipe, Bars, Blinds, Iris, Split doors

Drag one onto a video lane, or press + to add it at the playhead. Put titles on a lane above your footage so the picture shows around them. The clip is built for the sequence's own frame size and rate.

The Mograph section

Select the clip and the Clip panel shows a Mograph section in place of the Lottie controls.

• Template swaps the whole look. Your words stay; everything else takes the new template's settings.
• The text box holds the words. Press Enter for a new line; click away (or press Ctrl+Enter) to apply.
• Style sets the font (any of Kitlig's bundled faces), Bold, Uppercase, Size, Colour, Stroke, Stroke colour, Align, Line height, Tracking, Wrap at (a width in pixels; 0 breaks lines only where you do) and X / Y, which move the block from the frame centre as a share of the frame.

Entrance

The Entrance settings decide how the words arrive.

• Animate: Each letter, Each word, Each line or All at once.
• Comes: where each one comes from. From below, From above, From the left, From the right, In place, Alternate above / below or Random sides.
• Distance is how far away it starts, in pixels. Scale is the size it starts at (0 grows it from nothing, 100 keeps it full size). Rotate spins it in from that angle. Fade fades it in on the way.
• Each is how long one letter or word takes. Set it to 0 and each one appears instantly, which is how the Typewriter works.
• Easing shapes the move. Besides the usual ease in and ease out there are strong and expo versions, Back out (overshoot) for a little bounce past the mark, Back in (wind-up), Elastic and Bounce.
• Order: First to last, Last to first, Middle out, Edges in or Random.
• Timing decides the spacing. Fixed stagger starts each one Stagger seconds after the last. Fit in a time spreads them so the whole group lands within All in seconds. Fit to the clip length spreads them over a Share of the clip's length, so a longer clip gets a slower reveal. Delay holds the start.

Exit

Tick Animate out at the end for an exit. Leave the way it came plays the entrance backwards; untick it to give the exit its own direction, distance, timing and easing. The exit always finishes on the clip's last frame, Before end seconds early if you want a gap. When the clip is too short for both moves to play in full, Kitlig speeds them up together so neither is cut off.

Shape behind the words

Tick Shape behind the words in Shape for a box, pill or any shape the words sit in.

• Shape: Rectangle (with Corners), Pill, Ellipse or Custom path (SVG). For a custom shape, paste the d attribute of any SVG path; it is stretched to the box.
• Fill, Opacity, Outline and its Width. An outline with the fill opacity at 0 gives an outlined badge.
• Texture fills the shape with a project image, cropped to the shape. Fit chooses whether the image covers the shape, fits inside it or stretches to it.
• Size: Fit the words hugs the text plus Pad X and Pad Y; Fixed size uses a Width and Height and wraps the words inside.
• Hide words outside clips the words to the shape, so they slide in from inside the box rather than across the frame.
• In and Out pick how the shape itself arrives and leaves: Scale, Pop, grow from one side or the centre, Fade or Cut, each with its own Takes and Easing. Words at is how long after the shape starts the words begin.

Highlight

Tick Highlight a word after the entrance in Highlight. Words takes a comma-separated list of words or word numbers (1 is the first word); leave it empty to highlight the last word. Style is Box behind (a box sweeps in behind the word and the word takes the Text colour), Colour change (the word changes to the Text colour) or Underline (a line draws under it). After is how long after the entrance it happens and Takes how long it takes.

Typing cursor

Cursor adds a typing cursor that follows the letters as they appear and blinks once the words are in (Blink when done). It goes with the Typewriter, but works with any template that animates each letter.

Transitions

The transition templates cover the whole frame. Each one is fully covered exactly at the middle of its clip, so centre it on a cut and the change happens unseen. Their settings are Style, From (the side the cover comes in from), Easing, Stripes for bars and blinds, Hold (how long the frame stays covered) and Stagger, plus a row of colours: wipes use one panel per colour, the other styles cycle through them.

The quickest way to place one is from the clip itself: see Motion below.

Making it a plain Lottie

Make plain Lottie drops the settings and keeps the animation as it is, so you can open it in the Lottie editor or key its layers. Editing the JSON or keying a layer does the same on its own. From then on the clip is an ordinary Lottie clip: changing its length no longer rebuilds it.

Save to library works for mograph clips too. The saved .json keeps the settings inside it, so adding it again gives you an editable mograph clip.

Motion

Motion gives any clip on a video lane an entrance and an exit: footage, a still, a colour card, a title or a Lottie clip. It lives in the Clip panel under Transform.

• In and Out each take a preset: Fade, Slide, Scale, Pop, Spin, Move (custom pose) or Instant cut. None removes it.
• Takes is the length of the move (0 is a cut), Delay holds the entrance after the clip starts, and Before end finishes the exit early. The easing list is the same one the templates use.
• Slide adds a side to come from (or leave to) and a Distance as a share of the frame; 100 % moves a full-frame clip all the way off. Fade too fades it on the way.
• Starts from (relative to rest) and Ends at (from rest) show the pose behind the preset: an X and Y offset, a Scale, a Rotate and an Opacity. Change them to set exactly where the clip starts and finishes; the clip's own Transform is where it rests.

The entrance runs from the clip's first frame and the exit ends on its last, so trimming the clip carries both with it. Motion adds to the clip's transform and keyframes rather than replacing them. Splitting a clip keeps the entrance on the first piece and the exit on the second. Motion also travels with Paste Attributes… as its own tick box.

Transition at the bottom of the section picks a transition template; At start or At end drops it centred on that edge of the clip, on the lane above (a new top lane when the one above is busy there).

Note

Motion moves and fades the whole picture. It does not crop or mask it, so a wipe that reveals footage is done with a transition clip over the cut.

Keyframes

Any clip on a video lane can animate its position, scale, rotation and opacity over time. A Lottie clip also exposes every animatable property of every layer inside its animation. Both kinds use the same keyframe model, the Lottie one, so what you key on a layer is saved into the animation itself and goes with the file when you Export Lottie….

The Keyframes drawer

Click Keyframes on the toolbar to open the drawer under the lanes. It follows the selected clip and shares the timeline's zoom and scroll, so a key sits exactly under the moment it belongs to.

• The left column lists the rows: the clip's own five, then a group per Lottie layer with its Anchor, Position, Scale, Rotation and Opacity rows and any other property the file animates. A padlock marks a layer Kitlig lists but cannot edit (time-remapped or precomp layers).
• The stopwatch on a row starts animating it: the current value becomes a key at the playhead. Click it again to drop the keys and keep the value under the playhead.
• Each row shows its value at the playhead. Click a row name to focus it; the header then shows that value in fields you can type into, which writes a key at the playhead.

Dope sheet shows every row's keys as diamonds. A half diamond is a hold key.

• Click a key to select it, Ctrl click to add to the selection.
• Drag across empty space to draw a box round the keys you want, across as many rows as you like. Hold Shift or Ctrl to add to the selection.
• Drag keys to move them in time. They snap to frames, and a key dragged onto another replaces it.
• With keys selected at more than one time, a band marks their extent with a grip past each end. Drag a grip to stretch or squeeze the animation proportionally, the way you would in After Effects: the far end stays put, the keys between keep their spacing and easing, and the percentage shows as you drag. Hold Alt to scale from the middle. Squeezing stops before two keys would land on the same frame.
• Double-click empty space on a row to add a key there with the row's current value. Double-click a key to toggle hold.
• Add key adds one on the focused row at the playhead. Delete (or Del) removes the selection.
• Copy (Ctrl+C) remembers the selected keys, with their easing. Paste (Ctrl+V) puts them down at the playhead: on the same rows when the clip has them, or, for keys from one row, on the row you have focused. Select another clip first to carry a move from one clip to another. The whole set of a clip's keyframes also travels with Paste Attributes… as its own tick box.
• The easing buttons, and the right-click menu, apply Linear, Ease in, Ease out, Ease in/out or Hold to the selected keys.

Graph shows the focused row as a curve, one line per dimension, with the keys on it. Drag a key up or down to change its value, left or right to move it in time; Shift keeps the value and moves only in time. A selected key shows its bezier handles: drag them to shape the ease, Alt to move one dimension's handle on its own, Shift to snap a handle flat. The value range fits what is on screen.

The box and the grips work in the Graph too, on the focused row. Every gesture is one undo step. Press Esc to clear the selection.

Auto-key and the Clip panel

Auto-key in the drawer header turns every value change into a key at the playhead: dragging the picture in the player, the wheel over it, or typing into the Transform and Opacity fields in the Clip panel. With auto-key off, a property that already has keys still gets a key when you change it, because that is the only way to change an animated property; a property without keys changes its single value as before. In the Clip panel a keyframed property shows a diamond after its name and its value at the playhead.

Agents

The Assistant, and any agent connected over MCP, has the same abilities:

• add_lottie_clip adds an animation it writes itself or loads from a .json asset; get_lottie_clip reads a clip back with its layers; set_lottie_clip replaces the document or its fit, loop, speed and background.
• list_mograph_templates lists the templates; add_mograph_clip adds one with your words and any settings (a transition can be centred on a clip's start or end); set_mograph_clip and get_mograph_clip change and read them.
• set_clip_motion gives any clip an entrance and an exit.
• set_clip_keyframes animates a clip's position, scale, rotation or opacity, or the gain of a clip on an audio lane; set_lottie_keyframes keys a property of a layer inside the animation.
• The Lottie from Prompt operation (Sandbox ▸ Text ▸ Motion Graphics) has your configured AI model write an animation from a description, a style, the exact text to show and a palette, saves it as a .json asset and, when asked, places it on a sequence. It costs one model call on your own key.

Expect the model to do well with shapes, bars, cards and text. Ask for something simple, check it in the editor, then refine by hand or by asking again.