Neon tide
A section background that behaves like a night sea: four blurred wave glows roll along the bottom in slow counter-rhythm, fine dust rises through the dark, and the whole scene leans toward the pointer in real 3D while the content in the slot stays still. Dark as drawn by our designer; light is its own version, pastel waves on the paper with deeper dust. Still under reduced motion, and the tilt only answers a mouse.
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.
What you can build with it
A dark hero background that moves without a video. A closing call to action band with depth. A light hero on the paper with a pastel tide low in the frame. A section divider that reacts to the pointer.
Props
tone (select: dark, light); motion (select: full, waves, still); tilt (select: on, off); slot: content
States shown
Rolling, waves only, still. Pointer over the band tilts the scene up to 12 degrees and it eases back when the pointer leaves. Reduced motion: still, no tilt, the dust rests as points.
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 .section-intro, .tide. Its behaviour is a small script that travels with the component; no plugin and nothing to install.
ACSS tokens used
–neutral-ultra-light / –text-dark for the light ground; the dark ground is #100c08 and the four wave colours are fixed (#20a0cf, #0b7b99, #18c5a5, #10ea7b; pastel #c4f7ff, #bfe6ef, #c6fbef, #c9ffe0 in light). Override –tide-1 to –tide-4 on .tide for other colours.
ACSS requirements
ACSS 4 defaults. EtchPress Motion stylesheet 1.9.0 or newer for the waves and the dust; without it the band is still.
Version history
Version 1.0.0, October 7, 2026: First release: our designer's parallax sea for the EtchPress home hero, with a light version of its own.
Tested with
Etch 1.6.8 and ACSS 4.0.1. Version 1.0.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.