Animated Bento Cards

Summary

A Figma motion experiment animating a bento card layout where a swooping cursor triggers each service card's illustration to come to life in sequence.

Visual description

A white page with four rounded bento cards in a clean grid: a tall orange card at left, pink and yellow cards stacked at right, and a wide lavender card across the bottom. Each card has a bold dark heading in a heavy grotesque, a short sentence of small body copy, and a line-art icon or browser window beside a dithered checkerboard offset shadow. Text and illustrations are tinted in a darker shade of each card's own color.

Key takeaway

Give each card one saturated flat color with text and artwork in a deeper tone of the same hue, then add a dithered pixel shadow behind the line illustration. It gives a small set of cards cohesive character without extra imagery.

Reuse notes

Reach for this as a motion still reference. Pairs with playful directions. Original by Pawel Olek.