Compare Features LandingLanding page, 1 page
Flowline SaaS LandingLanding page, 1 page
Prismo Creative AgencyCreative, 1 page
Velour Car DetailingLanding page, 1 pageMaterial Swatch Dial
Semicircular photo-wheel gallery built as a plain, fully editable Etch tree: section > corner arrow keys (glassy outer pad + white key cap) > a Dial whose disc is centred on the bottom edge so only its upper half shows,…
50 sites for €79 only, Compare all plans
The system behind it
One pattern, your whole brand.
Material Swatch Dial 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
- Component
- Category
- Galleries
- Responsive
- Desktop to phone
- Works with
- Etch, ACSS, plain CSS
Options 10
Set on the section, in Etch’s attributes panel. No code needed.
data-loopwrap around past the last/first wedge
data-dragpointer/touch drag-to-spin with snap to the nearest wedge, default true
data-sensitivitydegrees rotated per 100px of drag
data-durationms per 90° step · ·
data-easingor any cubic-bezier( · )
data-arrowsshow the corner arrow keys
data-labelsshow the left/right wedge names (desktop only, like the source)
data-ctashow the "See all" button in the hub
data-sizewheel scale, default m (836px desktop / 544px phone)
data-themesection surface, default dark
Component props 1
Only the repeating unit is a component. Duplicate, reorder or delete it in Layers and edit these props.
index0
nameEmber Rose
imagehttps://images.unsplash.com/photo-1496062031456-07b8f162a322?w=1200
altA deep red rose against a dark, blurred garden
Included in Pro From €39 a year, with all 469 patterns.
Get Pro
