Skip to content
L-131Layout

Drift Hero Section

Full-width interactive landing hero built as a plain, fully editable Etch tree: section (backdrop + a 3D "Scene" of five glass shard layers) > container > panel (eyebrow, two-line H1, subtext, primary/secondary CTAs). No…

Get this with ProIncluded in your plan

50 sites for €79 only, Compare all plans

Preview Desktop, 1280px

The system behind it

One pattern, your whole brand.

Drift Hero Section 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
Hero
Responsive
Desktop to phone
Works with
Etch, ACSS, plain CSS

Options 5

Set on the section, in Etch’s attributes panel. No code needed.

data-background
imagegradient

backdrop treatment behind the 3D scene

data-tilt
truefalse

pointer-driven 3D tilt of the floating shard scene (mouse/trackpad only — a no-op on touch)

data-drift
truefalse

continuous ambient float of the shards via the Web Animations API when the pointer is not tilting them

data-layout
centeredsplit

centred stacked copy with the scene behind it, or a two-column split with the scene beside the copy

data-entrance-speed
slownormalfast

stagger timing for the load-in sequence

Included in Pro From €39 a year, with all 469 patterns.

Get Pro

More patterns

Keep browsing.

L-000

Quick View

Desktop, 1440px
Pro
demo.etchedy.com

The real preview of this pattern. Every pattern adapts to your ACSS tokens.

Unlock with ProSee plansIncluded in your plan