Compare Features LandingLanding page, 1 page
Flowline SaaS LandingLanding page, 1 page
Prismo Creative AgencyCreative, 1 page
Velour Car DetailingLanding page, 1 pageProgress Reel Bento
Process bento replicated 1:1 from a reference layout, built as a plain editable Etch tree: section > container > header (48px bold "Creative Workflow" title, a 240px hairline and a muted subtitle) > a 3-column grid (colu…
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.
Progress Reel Bento 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
- Bento grids
- Responsive
- Desktop to phone
- Works with
- Etch, ACSS, plain CSS
Options 12
Set on the section, in Etch’s attributes panel. No code needed.
data-themepage background behind the cards (light = source)
data-accentcolour of the step numbers (lime #e6ff00 = source, brand = ACSS –accent)
data-grayscalephotos in black and white (source) or full colour
data-hovercard hover/focus effect: slow photo zoom (default), lift, or nothing
data-progressthe top hairline of each card fills in sequence like a story bar (off = static line as in the source)
data-intervalms per card · and
data-pause-on-hoverfor the progress sequence
data-revealcards fade and rise in, staggered, when the grid scrolls into view
data-durationms
data-staggerms
data-easingand
data-oncefor the reveal
Component props 1
Only the repeating unit is a component. Duplicate, reorder or delete it in Layers and edit these props.
number001
title001 – Curiosity First
descriptionEvery great project starts with exploration and questions, not answer…
showDescriptionTrue
showIconTrue
imagehttps://images.unsplash.com/photo-1514888286974-6c03e2ca1dba?w=1200
spannormal
hrefempty
Included in Pro From €39 a year, with all 753 patterns.
Get ProMore patterns
