∞ forever components

Marketing Sections

Dappled Light Hero

A hero on a warm meadow ground: two oversized radial pigment washes drift on a 24 s clock, sparse broken-colour dabs on an 18 s clock dissolve into a dry-brush horizon, and a leaf band grounds the frame. On flat ground above them sit a kicker with a breathing pigment dab, a light display headline, a line of copy and a poppy 'Start a study' button that records a study when pressed.

csslight complexitysubtle motionclick

Open on the canvas to copy the code → Free account · 3 copies a day · membership goes unlimited

Live demo — the real component, running in a sandbox. One self-contained HTML file, zero dependencies. Open it on the canvas →
Worth keeping? Votes steer what gets built next — sign in to cast one, free to read

When to use it

Landing and section heroes for painterly, outdoor, wellness-adjacent or editorial products that want atmosphere without a photograph.

When not to

Dense hero layouts, or brands whose ground must stay neutral (the washes tint the whole frame).

Working with an AI agent

Every component ships agent-ready metadata. An example instruction for this one:

Edit the copy (kicker, headline, body, button), the wash tokens --dh12-wash-*, the drift clocks (24s / 18s) and the demo press cadence EVERY=5200. Re-theme to light by setting --pro-bg:#f1e5ce; --pro-surface:#faf4e7; --pro-border:rgba(32,48,68,.1); --pro-text:#203044; --pro-muted:#686b6b; --pro-accent:#9e3e31 (warm daylight), and update the catalog bg field to match. Theme: dark tokens live in :root, the light variant in :root[data-theme="light"]; ?theme=light or a {type:'forever:theme'} postMessage switches at runtime.

Safe to edit

  • theme tokens (:root --pro-bg, --pro-surface, --pro-border, --pro-text, --pro-muted, --pro-accent)
  • copy (kicker, .dh12-h, .dh12-b, button, note)
  • wash tokens (--dh12-wash-warm / -cool / -red / -leaf) and drift clocks (24s, 18s)
  • dab positions in .dh12-dabs (percentages across the whole element, never tiled)
  • demo press cadence (EVERY)
  • theme tokens (:root dark defaults + [data-theme=light] overrides)

Keep intact

  • :root --pro-* token block (renaming breaks the shared pro theming API)
  • role=img + aria-label on the hero; decorative layers aria-hidden
  • IIFE wrapper
  • two clocks never mixed: atmosphere drifts on transform/opacity, the control answers in 220 ms, text never moves
  • prefers-reduced-motion guard (the composition settles complete and still)
  • visibilitychange pause
  • theme hook (?theme= bootstrap + forever:theme message listener + theme tokens)

Known limitations

  • Light re-theme via the --pro-* block; catalog bg/accent describe the dark default
  • Ysabeau / Source Sans 3 fall back to Georgia and the system sans
  • Below ~260 px the supporting line hides before the headline shrinks

heroctaplein-airwashdaylightatmospherebroken-colourlanding

More Marketing Sections components

  • Logo Wall MarqueeA 'Trusted by teams at' social-proof section: two rows of invented, purely geometric company marks on chips, marqueeing in opposite directions on a…
  • CTA BannerA centered call-to-action band on a slowly shifting amber-to-tan gradient, with a rotating eyebrow tag, a bold headline, a subline, a white primary button…
  • Hairline CTAA calm call-to-action card: a hairline frame traced by one slow running dash, a mono eyebrow with a heartbeat dot cycling quiet facts, a lowercase…
  • Agent Handoff CTAA two-register call to action: the human side carries a lowercase headline, a subline and one accent button; the machine side is a mono bundle (id,…
  • Pricing StackA membership pricing card: a segmented monthly/annual switch whose pill thumb slides, a price that rolls between £5 a month and £50 a year (with 'two…
  • Founding OfferA founding-member offer card: '£399, once', a short subline, a seat meter (hairline track, accent fill with a slow travelling highlight, ten ticks, a…