Design sample Twelve launch animations. Every one is CSS and SVG — nothing here downloads a library. Read how they are built →

Twelve ways to open an app

A splash screen buys you the second or two a cold start needs, and it is the first thing anyone sees. These are the techniques worth knowing, one screen each. Press any of them to play it again.

Maujud

01 Stroke draw

The logo draws itself: an SVG path with stroke-dasharray animated to zero. The most reliable trick there is, because it needs one path and no images.

02 Liquid fill

Two offset wave paths rise past each other while the wordmark sits on top in difference blend mode, so it inverts as the colour passes behind it.

Motors

03 Mask reveal

Each letter sits in its own overflow-hidden box and slides up from beneath it. The staggered delay is what makes it read as typesetting rather than as a fade.

Nova

04 Particle burst

Twelve dots fired along a circle, each with its own delay and distance computed rather than typed. The core pulses once behind them.

Cobalt

05 Shape morph

One element, one keyframe track: a circle rotates, squares off and settles. Cheaper than a shape-morph library and impossible to get wrong on a slow phone.

Halden

06 Tile stagger

Nine tiles arriving on a diagonal, delayed by their distance from the corner rather than by their index — which is what makes the wave read as a wave.

0% Ready

07 Progress ring

An arc drawn with the same dasharray trick, with the number counted up in script so the two always agree. Use this one when the wait is genuinely long.

VerreEst. 2019

08 Door open

The screen itself is the animation: two halves clipped from one panel slide apart to show what is already behind them. Good for anything that wants to feel like a threshold.

MAUJUD

booting

09 Typewriter

The only one here driven by text rather than shape. steps() is what makes it read as typing — an eased width slides half a letter into view and the eye reads that as a smudge.

Northbeam

10 Zoom portal

The mark does not sit on the background, it becomes it: one disc scales past the viewport while its colour takes over. Transform only, so it still composites on the frame the app is busiest.

11 Skeleton first

The honest one. Rather than a badge you have already seen, the wait is spent showing the shape of what is arriving, then filling it in. The shimmer stops the instant the real thing lands.

Kestrel

12 Spring settle

Easing as the entire subject. The mark is thrown in and settles on a real spring curve written as a linear() ramp — physical motion with no physics loop running during a cold start.

Why none of these use a library

A splash screen covers the moment before an app is ready. Anything it depends on has to load first, which means a 400 KB animation library makes the wait it was hired to hide measurably longer.

All twelve are CSS keyframes and inline SVG. The only script on this page toggles a .go class so they can be replayed, and counts the number on the seventh so the digits and the arc cannot drift apart.

Every one respects prefers-reduced-motion: with it set they render their finished state instantly. A launch screen that ignores that setting is a launch screen somebody has to close their eyes to get past.