Motion study

Product Push In

Loading…
Sceneportrait

Overview

Push the SKU in on a ground (sunburst, tile, color-block). Settle with a weightless bob. Land price and one line. Optional wipe out.

Build

  1. 01

    Ground appears (rings / tile / wipe).

  2. 02

    Product scales in 0.86→1, 500–700ms ease-out.

  3. 03

    Inner bob loop starts after settle.

  4. 04

    Copy + price stagger.

.sku { animation: 600ms push-in both }
.sku-inner { animation: 3s bob infinite; animation-delay: -1s }
Example source React / TSX

examples/product-push-in.tsx · Uses the catalog’s shared composition helpers.

Loading source…