Compare Features LandingLanding page, 1 page
Flowline SaaS LandingLanding page, 1 page
Prismo Creative AgencyCreative, 1 page
Velour Car DetailingLanding page, 1 pageMagnetic Tilt Photo Cards
Showcase grid built as a plain, fully editable Etch tree: section > container > header (eyebrow, h2, intro) > grid of "Tilt Card" component instances (image, imageAlt, title, kicker, badge — empty badge hides it, url opt…
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.
Magnetic Tilt Photo Cards 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
- Effects
- 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-themere-themes the section
data-max-tiltdeg the card rotates toward the pointer
data-scalehover/focus scale amount
data-perspectivepx
data-glarea soft specular highlight that tracks the pointer across the photo
data-parallaxthe photo and caption drift a few px opposite the tilt for a layered-depth feel
data-shadowrest/hover shadow depth
data-radiuscorner radius from the ACSS radius tokens
data-captioncaption position: under the photo, over it revealed on hover/focus, or hidden
data-columnscards per row at the carousel's own desktop width
data-speedms the card eases back to rest when the pointer leaves
data-easingreturn-to-rest easing curve
Component props 1
Only the repeating unit is a component. Duplicate, reorder or delete it in Layers and edit these props.
photohttps://images.unsplash.com/photo-1611591437281-460bfbe1220a?w=800
photoAltKintsugi Hoop Set laid on a textured surface
titleKintsugi Hoop Set
kickerGold-fill · Hand finished
badgeNew
toneneutral
index01
url#
labelView piece
Free pattern. Yours to use on any site, no plan needed.
Included in Pro From €39 a year, with all 753 patterns.
Get ProMore patterns
