Render an app splash screen to MP4

A splash screen MP4 is the file your mobile app loads while it boots, the loop your kiosk plays during attract mode, the intro on your video walls. It should be 3–6 seconds, hold a single brand idea, and render the same way on every device.

That last constraint is what trips most splashes up. Lottie crashes on some Androids. AE exports get re-encoded by the OS. A deterministic HTML→MP4 splash dodges all of it: you ship the MP4, the OS plays the MP4, frame-for-frame.

The three beats

A good splash has three beats and one rest. Anything more is a music video.

1. Logo arrives (0 → 1.4s). The monogram springs from scale(0) to scale(1) with a damped sinusoid. One overshoot, soft landing.
2. Wordmark fades in (0.9 → 1.7s). Slightly overlapped with the logo's settle. The eye is already on the center; the name appears under it.
3. Sheen sweep (2.4 → 3.6s). A diagonal highlight crosses the logo. Reads as "polish," takes one line of CSS.
4. Rest (3.6 → 6.0s). The composition holds. This is the frame the OS may freeze on when the app finishes booting.

The spring, the right way

Browser spring physics in 12 lines, deterministic, no library:

const spring = p => {
  if (p >= 1) return 1;
  return 1 - Math.exp(-6 * p) * Math.cos(p * Math.PI * 1.8);
};

This is a critically-damped-ish decaying cosine. It overshoots once at around p=0.55, then settles. The -6 controls damping (higher = faster decay), the 1.8 controls overshoot frequency. Both are dial-able to taste.

The sheen sweep

A linear-gradient diagonal stripe with mix-blend-mode: overlay, translated across the logo container:

.sheen {
  position: absolute;
  top: 0; bottom: 0;
  width: 60%;
  background: linear-gradient(105deg,
    transparent 30%,
    rgba(255,255,255,.55) 50%,
    transparent 70%);
  transform: translateX(-200%);
  mix-blend-mode: overlay;
}

The container has overflow: hidden, so the sheen disappears at the edges. The angle (105deg) matters more than the color — straight-down sheens look like screen tearing; diagonal sheens read as light.

Customize the brand

Two source variants

Same splash, two starting code shapes — pick whichever your build system prefers:

<div class="mono-wrap">
<div class="mono" id="m"><span>H</span></div>
<div class="sheen" id="sh"></div>
</div>
<div class="brand" id="b">Hyperframes</div>
<script>
const spring = p => p >= 1 ? 1 : 1 - Math.exp(-6*p) * Math.cos(p*Math.PI*1.8);
addEventListener('hf-seek', e => {
  const t = e.detail.time;
  m.style.transform = 'scale(' + spring(Math.min(1, t/1.4)) + ')';
  // ...
});
</script>

Frame budget

At 30fps over 6 seconds: 180 frames. The render is CPU-bound, mostly html2canvas-pro DOM rasterization. A modest CI runner finishes the encode in 8–14 seconds. See from DOM to MP4 for the renderer internals.

Render to MP4

hyperframes render input.html --out clip.mp4 --duration 6 --fps 30

For a square logo intro: --width 1080 --height 1080. For phone splash: --width 1080 --height 1920. The quickstart covers the full flag list. Open the playground to iterate the spring constants visually before locking the render.

FAQ

What frame should an app splash screen "rest" on?

The last 30–50% of the duration should be motion-free, so whichever frame the OS pauses or loops on still reads as a finished composition. In the demo above, motion ends at 3.6s and the final 2.4s are static.

How do I match my native app's launch screen exactly?

Pull the colors and corner-radius from your design tokens, then render an MP4 whose first frame matches the iOS storyboard or Android XML splash. The transition from native splash to MP4 splash becomes invisible if frame 0 of the MP4 is pixel-identical to the OS splash.

Can I embed audio in the splash MP4?

The HyperFrames renderer produces video-only MP4s. Add audio after the fact with ffmpeg -i splash.mp4 -i sting.wav -c:v copy -c:a aac output.mp4. Keep the sting short (under 1.5s) and aligned with the spring landing.

Why does my monogram look pixelated in the MP4?

You're probably rendering at the wrong DPR. Pass --scale 2 to the CLI for retina-equivalent output, or set the viewport directly to 2160×3840 for 4K phone splashes. The DOM stays the same; the rasterizer captures at higher resolution.

How long should an app splash be?

Two to four seconds for a real app boot; six seconds for marketing intros and demo videos. Past six seconds, users perceive the app as slow. The spring-and-sheen pattern above scales linearly — for a 3-second variant, just scale all hf-seek time thresholds by 0.5.

Can I render a looping splash for kiosks and trade-show displays?

Yes. Set the duration to your loop length (10–20 seconds works well for attract mode) and add a final fade-to-frame-0 in the last 0.5 seconds so the loop point is invisible. The deterministic renderer guarantees frame 0 and the last frame are pixel-identical when you ramp opacity back to the initial state. Encode with -loop 0 in FFmpeg downstream and the playback is seamless.

What's the smallest viable splash — can I do this in a 1.5 second window?

Yes, but drop the sheen and shorten the rest. A 1.5s splash with just the spring-scale plus wordmark fade still feels intentional. Compress the spring to 0.9s and the wordmark to 0.5s, then hold for 0.1s. Useful for app cold-starts where the OS gates how long the splash can run.

Related: animate a logo in CSS, easing curves cheatsheet, from DOM to MP4.