Turn Code & Web Animations into Instagram & TikTok Videos

Why Developers Are Posting Animations as Video

Dev content performs on short-form video: CSS tricks, terminal demos, and animated snippets rack up views precisely because they move. But Instagram and TikTok only accept video uploads — you cannot post a CodePen link and expect it to play. Most creators bridge the gap by screen-recording their editor with their phone, which produces shaky, cropped, low-contrast clips.

A cleaner pipeline: design the entire "slide" as HTML and CSS, then render it to MP4 with the HTML to Video Converter. You get platform-native H.264 video at exactly 1080×1920, typography stays razor sharp, and iterating is as easy as editing a stylesheet and re-converting.

Worked Example: A Vertical "CSS Tip" Card

This snippet builds a complete 9:16 reel: a kicker line, a headline, and a code card rise in one after another over a slowly shifting background, while a progress bar fills across the clip — a proven retention trick. The reveal finishes by 1.6 seconds; the bar is timed to the full 6-second clip.

<div class="reel">
  <p class="kicker">CSS TIP #7</p>
  <h1 class="title">Center anything<br>in 3 lines</h1>
  <pre class="code">display: grid;
place-items: center;
height: 100vh;</pre>
  <div class="bar"></div>
</div>

<style>
.reel {
  width: 100%; height: 100%;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 48px;
  background: linear-gradient(200deg, #0f172a, #312e81, #0f172a);
  background-size: 100% 300%;
  animation: sweep 6s ease-in-out infinite alternate;
  font-family: Arial, sans-serif;
}
.kicker {
  margin: 0; color: #a5b4fc; letter-spacing: 10px; font-size: 34px;
  animation: rise 1s ease-out both;
}
.title {
  margin: 0; color: #fff; font-size: 104px;
  line-height: 1.1; text-align: center;
  animation: rise 1s ease-out 0.3s both;
}
.code {
  margin: 0; font-family: "Courier New", monospace;
  font-size: 42px; color: #4ade80;
  background: #020617; padding: 44px 60px;
  border-radius: 24px; border: 1px solid #334155;
  animation: rise 1s ease-out 0.6s both;
}
.bar {
  height: 10px; border-radius: 5px; background: #6366f1;
  animation: load 6s linear forwards;
}
@keyframes rise {
  from { opacity: 0; transform: translateY(40px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes sweep {
  to { background-position: 0 100%; }
}
@keyframes load {
  from { width: 0; }
  to   { width: 760px; }
}
</style>

Step by Step

1. Paste the snippet into the converter.
2. Select the Portrait (9:16) preset — 1080×1920, the exact canvas Reels, TikTok, and Shorts expect.
3. Set Duration to 6s so the progress bar completes precisely at the end of the clip.
4. Set FPS to 30 (bump to 60 if you add fast motion like spinning shapes).
5. Convert, download, and upload the MP4 from your phone or desktop; add music and captions in the platform's editor.

Formats, Timing, and Safe Areas

Use 1080×1920 Portrait for Reels, TikTok, and Shorts, and 1080×1080 Square for feed posts and carousels — both are one-click presets. Keep essential text in the middle two-thirds of a vertical frame: platform UI (captions, buttons, usernames) overlays the top and bottom edges, so a headline hugging the bottom will sit under the caption box.

Clips can run 1 to 15 seconds, which maps neatly onto short-form attention spans: a 6–8 second tip that loops cleanly often outperforms a longer cut, because platforms replay short videos automatically and each replay counts. At 30 fps a 6-second render captures 180 frames; 60 fps doubles that for buttery motion at the cost of longer processing. And prefer MP4 over GIF here — Instagram and TikTok do not accept GIF uploads, and anywhere that does will re-encode it to video anyway. Save GIFs for READMEs and chat, as covered in the GIF guide.

• Design at full size. On a 1080-pixel-wide canvas, body text below 40px becomes unreadable on phones; this example's headline is 104px.
• Start motion immediately. The first half-second decides whether viewers scroll past — and capture begins at page load.
• End on a stable frame. Fill-mode both keeps elements visible after their entrance so the final frame makes a clean thumbnail.

Frequently Asked Questions