Aurora band
A section background of slow, drifting colour with your content in a slot on top. Three palettes: your site's own primary tokens; Dusk, a purple and a teal glow rising along the bottom over a dark ground; and Lagoon, three cyan to green glows drifting low and quick, with its own light version on a pale mint ground. Drift speed and a still setting as props; still is also what reduced motion and a missing stylesheet get.
Live preview
Free estimate
Ready to plan your yard?
Tell us about the project. We walk it with you within a week.
Free estimate
Ready to plan your yard?
Tell us about the project. We walk it with you within a week.
Free estimate
Ready to plan your yard?
Tell us about the project. We walk it with you within a week.
Free estimate
Ready to plan your yard?
Tell us about the project. We walk it with you within a week.
Free estimate
Ready to plan your yard?
Tell us about the project. We walk it with you within a week.
Free estimate
Ready to plan your yard?
Tell us about the project. We walk it with you within a week.
Free estimate
Ready to plan your yard?
Tell us about the project. We walk it with you within a week.
What you can build with it
A full-width hero background in dark or light, with Dusk. A hero background that moves slowly behind the headline. A closing call to action with more presence than a flat band. A section divider between two plain parts of a long page.
Props
palette (select: site, dusk, lagoon); tone (select: light, dark); drift (select: slow, medium, still); slot: content
States shown
Drifting, still. Reduced motion: still.
How to change it
Content and options are 3 props in the component's settings panel, and what goes inside is a slot you fill with your own blocks. Colour, type, spacing and radius follow your Automatic.css settings, so a change to the site's palette or scale changes this too. For anything else, edit the classes in the Style Manager, starting with .aurora, .section-intro.
ACSS tokens used
–primary, –primary-light, –primary-ultra-light, –neutral-ultra-light / –neutral-ultra-dark. Dusk: –au-glow-a (#351c4b) and –au-glow-b (#19524c), override them on .aurora for other colours.
ACSS requirements
ACSS 4 defaults. EtchPress Motion stylesheet installed once for the drift (Dusk needs 1.7.0, Lagoon 1.8.0); without it the band is still.
Version history
Version 1.0.0, September 19, 2026: First release. Version 1.1.0, October 4, 2026: Dusk palette: a purple and a teal glow along the bottom, a 15 and 14 second drift and fine grain, drawn by our designer. Light and dark. Version 1.2.0, October 5, 2026: Lagoon palette: three cyan to green glows along the bottom, drifting in 4, 3 and 4.5 seconds, with a light version on a pale mint ground. Drawn by our designer for the EtchPress home page.
Tested with
Etch 1.6.8 and ACSS 4.0.1. Version 1.2.0.
Lifetime members
Members copy this straight into Etch, ready to paste.
Used an earlier version? How to update it
Get lifetime accessWant EtchPress for Bricks or the block editor?
Everything here is made for Etch. Pick the builder you use and leave your email: we write once, when EtchPress works there.