Compare Features LandingLanding page, 1 page
Flowline SaaS LandingLanding page, 1 page
Prismo Creative AgencyCreative, 1 page
Velour Car DetailingLanding page, 1 pageKinetic Media Shuffle
A living bento wall of eight photos that periodically reshuffles itself with a soft spring glide, and can be reordered by hand: drag a tile with the pointer, or focus it, press Enter/Space to pick it up, move focus with…
50 sites for €79 only, Compare all plans
All photos and visual assets used in this preview are sourced from Unsplash.
The system behind it
One pattern, your whole brand.
Kinetic Media Shuffle reads your ACSS tokens, so changing a color, a font or a spacing value once restyles it everywhere. No hard-coded values, nothing to override.
- Type
- Layout
- Category
- Galleries
- Responsive
- Desktop to phone
- Works with
- Etch, ACSS, plain CSS
Options 11
Set on the section, in Etch’s attributes panel. No code needed.
data-themere-themes the whole section
data-columnstarget column count on a wide board (the board always keeps at least 2, and drops to 1 on very narrow containers)
data-gappx between tiles
data-aspecttile ratio 1:1, 4:3 or 3:4
data-radiuscorner radius from the ACSS radius tokens
data-hoverhover/focus effect on a tile
data-shuffleautomatic reshuffle timer
data-shuffle-intervalms · time between automatic reshuffles
data-pause-on-hoverpause the timer while the pointer is over the board
data-dragmanual reordering: pointer drag, or focus a tile, press Enter to pick it up, arrow keys to choose a spot, Enter to drop (Escape cancels)
data-controlsshow the Shuffle now / pause-play buttons above the board
Component props 1
Only the repeating unit is a component. Duplicate, reorder or delete it in Layers and edit these props.
imagehttps://images.unsplash.com/photo-1500534623283-312aade485b7?w=640
altLandscape study 1
captionRidgeline, dawn
toneneutral
Included in Pro From €39 a year, with all 753 patterns.
Get ProMore patterns
