Cloud Mist Labs

Reveal — Cloud Mist Labs

Reveal.

The brand reveal sequence — three pills rise from below in a 1.8s cascade, then settle.

stage · 1280×720 · ink ground · paper mark

Timing.

Pill rises take 0.9s each, 0.2s stagger. Wordmark at +1.2s. Settles in 1.8s total.

01 · Pill (faint)

delay 0.15s · 0.9s · ease-out

Top pill enters first. From translateY(24px) and opacity 0 to settled.

02 · Pill (soft)

delay 0.35s · 0.9s · ease-out

Middle pill follows. The widest of the three — does most of the visual work.

03 · Pill (full)

delay 0.55s · 0.9s · ease-out

Bottom pill anchors. Full ink. The mark sits.

04 · Wordmark

delay 1.2s · 0.6s · ease-out

Wordmark fades in below the mark. No motion — paint only.

Rules.

When to play the reveal, when not to.

Do
  • Use as splash on the very first paint of marketing surfaces (landing only).
  • Animate transform and opacity exclusively.
  • Honour prefers-reduced-motion: reduce — show the settled state instantly.
  • Ship the final settled state in the no-JS path. The pills don’t need motion to read.
Don’t
  • Loop the animation. The mark settles and stays.
  • Add a tagline or icon to the reveal — three pills + wordmark only.
  • Recolour. Ink on paper, or paper on ink.
  • Replay on route changes. Once per session, on landing.