Back to Motion Prompt examples
UI component names · #13
Filter chips
Small pills you click to add or remove a filter. Clicking the "New" and "Free" chips adds a check mark and turns them blue, and cards that do not match fade out.
Choosing & switchingchipsfilter-chipstagsfilterfacetspills
Full motion specification
How the movement works
Use it to let people narrow a list or search results by combining a few quick filters.
- 014.5 s cycle on a 542×191 card. Four chips ("All, New, Popular, Free" in Japanese): 34 tall, radius 17, width = text + 32, 10 px apart from the left.
- 02Clicks: New on at 0.95 s, Free on at 1.75 s, New off at 3.0 s, Free off at 3.6 s.
- 03Each change takes 0.15 s with easeOutCubic: the chip widens 18 px to make room for a check mark; fill light blue, border and text blue.
- 04List below: four cards (242×54, two columns, two rows); cards that do not match drop from opacity 1 to 0.12.
Prompt
Add filter chips above the list: a clicked chip gets a check mark and turns blue, and the list filters within 0.15 s.