∞ forever components

Marketing Sections

Hairline CTA

A 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 two-line headline, a short subline, one accent button and a mono text link. Every few seconds the button presses itself and a hairline progress runs under it with a mono status.

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

Closing sections and mid-page prompts on monochrome marketing pages; products whose brand spends one accent only where it matters.

When not to

Pages that need a loud, gradient-driven hero, or a CTA carrying more than one primary action.

Working with an AI agent

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

Edit the headline (.hc06-head), subline (.hc06-sub), button label and the facts array the eyebrow cycles; set the press demo cadence via PRESS_EVERY=5200 or remove go() from tick() in a product. Re-theme to light by setting --pro-bg:#fafaf8; --pro-surface:#f4f4f0; --pro-border:rgba(0,0,0,.08); --pro-text:#1a1a18; --pro-muted:#6b6b66 (keep --pro-accent, or use #1a7a50 for warm paper), 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 (headline .hc06-head, subline .hc06-sub, button + link labels)
  • facts array + FACT_EVERY interval; PRESS_EVERY demo cadence
  • frame trace speed (5s on .hc06-trace rect) and dash length (.18 .82)
  • 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 card
  • IIFE wrapper
  • pathLength=1 + vector-effect:non-scaling-stroke on the trace rect
  • prefers-reduced-motion guard (no trace, no pulse, no demo; the press still works)
  • 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
  • The eyebrow facts use approximate counts ('600+') by design — never a snapshot that goes stale
  • Below ~200 px the subline wraps to three lines; the card scales with vmin but stays a single column

ctacall-to-actionhairlinestrokemonochromeaccentmonoconversioncard

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…
  • 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…
  • Availability SignalA parchment card stating availability plainly: a display figure of free slots (Pompeii when scarce), six engraved slot marks, a lede and an 'Ask about a…