Entrance animations

Blue card that fades in while sliding up 20px on mount.

Ocean card that pops in from scale 0.6 → 1 with a spring easing.

Blue card that slides in from the left with a colored left border.

Ocean card that flips in along the X axis with perspective.

Element that resolves out of a blur while settling into place — softer than a plain fade-up, and the current house style.

List whose rows arrive 100ms apart with ocean markers — stagger by nth-child, no animation library.

Ocean banner uncovered top-to-bottom by an animated clip-path inset — no wrapper element needed.

Checklist rows sliding in from the left on a per-item delay, each with an ocean dot.

Container revealed by an inset clip while the label lifts on its own curve, so the box and its contents arrive a beat apart.

Three tiles hinged from their bottom edge and dealt in on a stagger, with the perspective on the parent so they share one vanishing point.

Squash-and-stretch entrance with a shadow that widens on impact, which is what sells the landing more than the bounce itself.

Letters wrapped individually and released seventy milliseconds apart, each rotating slightly so the line assembles rather than sliding as a block.

Height animated with `grid-template-rows` from 0fr to 1fr — the one technique that transitions to intrinsic height without a hardcoded max-height.

Six slats collapsing on a stagger from their top edge, so the surface behind is uncovered in bands rather than by a single wipe.

Each line pushed up out of its own overflow-hidden track on a short stagger, which reads as type setting itself rather than as three blocks sliding in.

Odometer entrance built from three digit columns behind fixed windows, each travelling a different distance and settling at a different moment so it lands like a mechanism.

Tiles keyed off row plus column rather than index, so the entrance sweeps diagonally from the top-left corner instead of running along each row in turn.

Four edges scaling in sequence from the corner the previous one finished at, so a single stroke appears to travel the perimeter before the label arrives.

Monospace line types itself out character by character behind a caret that blinks a few times and settles.

Pill badge pops in with a springy overshoot, dips smaller and settles at its natural size.

Card swings in around its top-left corner like a hinged sign, overshooting slightly before hanging level.

Two words slide in from opposite edges and lock together into a single headline.

Panel rushes in from the left leaning into its motion, then straightens up as it stops.

A rubber-stamp label drops from oversized and slams onto the surface with a tilted, inked landing.