See it in the wild
Showcase
Interface craft worth studying — live examples, reusable patterns, experiments, and video. Each one links straight to the lesson or playground behind it, so you can take it apart.
Made something with Motif? Share it — the gallery is open and curated by pull request.
4 items in the showcase
- Example
Jelly button, taken apart
A press that squashes and springs back — the canonical playful micro-interaction, with every spring value exposed so you can feel what each one does.
From the Motion track
- Pattern
Three-tier design tokens
Primitive → semantic → component tokens, shown live against Motif's own design system. The pattern that makes theming and dark mode one-line changes.
From the Design systems track
- Experiment
A card that responds to its container
The same component, dropped in a sidebar and a wide column, reflows on its own width — not the viewport's. Container queries make components truly reusable.
From the Modern web platform track
- Video
Video in the gallery, privately
A sample clip showing how video lands in the showcase — nothing loads until you press play, so opening the page makes no third-party request.
“Big Buck Bunny” © Blender Foundation — CC BY 3.0