Media viewers
ProPreview a link, browse product pictures, scan a photo wall, flip through covers and control playback.
Link preview
Example Journal
Designing calm motion for product interfaces (opens in a new tab)
Movement should explain a change, then get out of the way. Durations, easing and reduced motion in practice.
Picture 1 of 3
Harbour print, 50 × 70 cm
Giclée print on cotton paper. Hover the picture to look closely, or use the arrow keys on the thumbnails.
Page appearance
Components #
Each component has its own page with a focused preview, installation, usage and API.
- Link unfurlA preview card for a link, with image, title and source.
- Product galleryA main image with thumbnails for a product.
- Photo gridA grid of photos that opens in a viewer.
- Cover flowAlbum-style covers that flip through in 3D.
- Now playingA compact card for the current track with controls.
- Whats newRelease notes people read: a few cards in a dialog, stepping with a slide in the direction of travel, dots for place, and Got it to close.
- Story viewerShort updates one at a time: bars fill as each plays, taps go back or on, holding pauses, and there is always a pause button.
- MinimapA long canvas with a small map of the whole of it: the frame follows as you scroll, and dragging it or clicking the map jumps there.