Live demo · two themes, scroll the page to see the parallax
Default · on cobalt.
White hexes on a cobalt surface. Use behind CTA banners, testimonial cobalt halves, download forms.
Scroll up and down
On-light · on white.
Cobalt hexes on a white surface. Use behind heroes, full-bleed pages, soft cobalt-50 stages. Opacity is auto-scaled so cobalt-on-white reads as a veil, not a pattern.
Scroll up and down
Five depth tiers · size, opacity, parallax
Far · 0.10
32–56 px
opacity 0.03 → 0.10
weight 5
Distant · 0.25
56–96 px
opacity 0.04 → 0.13
weight 4
Mid · 0.45
96–150 px
opacity 0.05 → 0.16
weight 3
Near · 0.65
150–220 px
opacity 0.07 → 0.18
weight 2
Front · 0.85
220–300 px
opacity 0.08 → 0.20
weight 1
Always pointy-top · never rotate
Do
Pointy-top, vertex up. The huisstijl rule applies to every hex, decoration included. Movement comes from parallax and opacity, never from rotation.
Don't
Tilted hexes feel improvisational. The hex is the brand mark, keep it stable, vertex up. If a scene feels too rigid, vary size and depth, not angle.
How to use
<!-- 1. Include the stylesheet and hydrator once per page -->
<link
rel=
"stylesheet" href=
"conduction-bg.css">
<script
src=
"conduction-bg.js" defer></script>
<!-- 2. Drop the layer as the first child of a position:relative + overflow:hidden parent -->
<section
class=
"cta-banner">
<div
class=
"conduction-bg" aria-hidden=
"true"></div>
<h2>Pick an app. Install it. Done.</h2>
…
</section>
<!-- 3. For light surfaces (white, cobalt-50) add the on-light theme class -->
<section
class=
"hero">
<div
class=
"conduction-bg on-light" aria-hidden=
"true"></div>
…
</section>
/* Optional dataset hooks */
<div
class=
"conduction-bg" data-count=
"24"></div>
/* override hex count, default 18 */
<div
class=
"conduction-bg" style=
"--cbg-accent: var(--c-mint-500);"></div>
/* override accent colour */
Anatomy
Parallax
translateY = -offset · depth · 0.4
Offset is the section's centre vs. viewport centre. Depth scales the move. Tier 0.10 hexes drift 4× slower than tier 0.85, the small ones feel distant.
Breath
Each hex's opacity ease-in-outs between --opa-min and --opa-max on an 11–18 s cycle. Random negative delays so they're already mid-cycle on load, the field never pulses in unison.
Performance
IntersectionObserver gates the rAF scroll handler, zero work when the section is offscreen. prefers-reduced-motion disables both parallax and breath; hexes still render statically.
Rules
Do
- Use it on CTA banners, heroes, testimonials, downloads, places that already feel like brand surface
- Pick the right theme: default for cobalt / cobalt-800,
.on-light for white / cobalt-50
- Keep every hex pointy-top, depth comes from size + opacity, never from rotation
- One orange accent per scene; the hydrator places it in the middle of the tier mix automatically
- Wrap the host in
position: relative; overflow: hidden; isolation: isolate
- Cap the field at ~18 hexes, past that the breath stops feeling calm
- Honour
prefers-reduced-motion, the layer is decorative, never load-bearing (hydrator handles this)
Don't
- Don't rotate hexes for "movement", that breaks the huisstijl
- Don't push opacity above ~0.20 on dark or ~0.12 on light; the field is backdrop, not pattern
- Don't stack two conduction-bg layers on the same section, one field per surface
- Don't combine with the cut-corners motif on the same surface, pick one
- Don't use the default (white) theme on a light surface, switch to
.on-light
- Don't speed up the breath cycle below ~10 s, the field starts to flicker