Compare Features LandingLanding page, 1 page
Flowline SaaS LandingLanding page, 1 page
Prismo Creative AgencyCreative, 1 page
Velour Car DetailingLanding page, 1 pageFloating Card Fan
A hand of cards fanned across a hero: one card leads (centred, upright, in front), its neighbours rotate away and drop back on either side, and the whole arrangement idles with a slow, staggered float. One "Fan Card" com…
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.
Floating Card Fan 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
- Grids and cards
- Responsive
- Desktop to phone
- Works with
- Etch, ACSS, plain CSS
Options 8
Set on the section, in Etch’s attributes panel. No code needed.
data-themere-themes the whole section
data-archow far the cards fan out from the leading card
data-floatidle up/down drift, staggered per card
data-tiltthe whole fan tilts a few degrees toward the pointer (mouse/trackpad only)
data-cycleautomatically advances which card leads the fan
data-cycle-intervalms
data-pause-on-hoverpause the auto-cycle while the pointer is over the fan
data-stack-belowem · container width under which the fan flattens into a horizontal snap-scroll row
Component props 1
Only the repeating unit is a component. Duplicate, reorder or delete it in Layers and edit these props.
toneviolet
categoryDesign
titleBrand Identity
descCrafting distinctive visual systems that communicate core essence.
href#work
ctaLabelExplore
Included in Pro From €39 a year, with all 753 patterns.
Get ProMore patterns
