Motion Element
Animated Code Block
A code block inside a widget: file name in the header, lines typing out one after another with a caret, one line highlighted.
Create in your browser. Start for free.
What Is the Code Widget?
This element renders a snippet the way a code editor does and then types it out. A two-layer widget carries the file name in its header and a white panel below holding your code in a monospace face with line numbers and light syntax colouring. Lines type themselves one after another with a blinking caret, and one line of your choosing gains a tinted band and an accent rail as it arrives, which is how you point at the line that matters without narrating a line number. Paste any language; the colouring is deliberately light rather than a full theme, so the code reads as code without competing with your captions.
How It Works
Each line is revealed character by character over a share of the build phase, and the next line begins only once the previous one finishes, so the rhythm matches real typing rather than a wipe. The caret blinks on a fixed interval and sits at the current character, pausing at the end of each line. When the highlighted line begins typing, its background band and accent rail fade in behind it, so the emphasis arrives with the line rather than after the whole block.
Best For
- -Developer tutorials and quick tips
- -Explaining one function, config or flag
- -Before and after refactors
- -API and command-line walkthroughs
- -Any snippet that deserves its own beat
Best Platforms for Code Widget
YouTube Shorts
Dev Shorts live on a single snippet with a voiceover. Typing it out at the pace you explain it stops the viewer from reading ahead and finishing the point before you do.
Technical posts on LinkedIn usually attach a carbon-style screenshot. An animated block plays in the feed, and the highlighted line does the work a red arrow annotation would otherwise do.
Keeping a snippet readable in a vertical frame
The hard limit on a code animation for short-form video is characters per line, not lines of code. In a nine by sixteen frame a monospace line stays comfortably readable up to roughly forty characters; past that the type shrinks and viewers stop reading. Reformat before you paste: break long argument lists across lines, shorten variable names for the demo, and cut imports and boilerplate that are not part of the point. Six to ten short lines is a good target for a single beat. If your snippet genuinely needs more, split it across two instances on the timeline with different file names, which also gives you a natural cut for the narration.
The highlighted line as the whole argument
Most code explainers are about one line: the flag that fixes it, the call that was missing, the condition that was backwards. The highlight exists so you can show the surrounding context without the viewer hunting for the change. Pick the line before you write the voiceover, because the band and rail arriving on that line is the visual beat your sentence should land on. If two lines matter equally, that is usually a sign the snippet should be two beats rather than one. The file name in the header is free text and worth using properly: a real path tells the viewer where this code lives, which is context you would otherwise have to say out loud.
Which languages does the syntax colouring support?
The colouring is language-agnostic and light by design: it distinguishes strings, numbers, comments and keywords broadly rather than parsing a specific grammar. That keeps any language readable without shipping a full theme.
Can I turn off the line numbers?
Yes, line numbers are a toggle. Turn them off for a short snippet where they add nothing, and leave them on when you want to reference a line by number in your narration.
How fast does the code type?
The typing pace is a control, and the whole block is fitted into the element's build phase, so a longer element on the timeline types more slowly. Match it to how fast you read the line aloud.
Can I highlight more than one line?
One line at a time. For a second emphasis, add the element again on the timeline with a different highlighted line and cut between the two instances. That also gives your narration a natural beat between the first point and the second.
Your next video starts here
Create a Free Code Widget Motion Element
Beautiful captions. Your words, your style.
Keep exploring