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
- 01
Ground appears (rings / tile / wipe).
- 02
Product scales in 0.86→1, 500–700ms ease-out.
- 03
Inner bob loop starts after settle.
- 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…