∞ forever components

Marketing Sections

Logo Wall Marquee

A 'Trusted by teams at' social-proof section: two rows of invented, purely geometric company marks on chips, marqueeing in opposite directions on a seamless CSS loop with soft edge fades and hover-pause.

csslight complexitysubtle motionhover

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-page social proof, 'trusted by' / customer logo strips, marketing hero footers, integration or partner walls where real brand logos aren't available.

When not to

You need real, recognizable customer logos or clickable brand links, or a static (non-scrolling) logo grid — this uses invented geometric marks and continuous motion.

Working with an AI agent

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

Edit the rowA / rowB arrays ([wordmark, mark-key]) to set your own company names and geometric marks (keys defined in the S map: ring, tri, hex, dia, chev, arch, venn, pent, bars, disc, star, ast). Tune scroll speed via the two animation-duration values (34s / 41s). Re-theme to light by setting --pro-bg:#f6f8fa; --pro-surface:#ffffff; --pro-border:rgba(0,0,0,.08); --pro-text:#1f2328; --pro-muted:#59636e (keep --pro-accent), 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)
  • brand data (rowA / rowB arrays: [wordmark, mark-key])
  • geometric mark shapes (S map of SVG inner markup)
  • scroll speed (.lwm-track animation-duration 34s and .lwm-b 41s)
  • edge fade width (.lwm-rows::before/::after width 13%)
  • 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 .lwm-stage
  • duplicated track content (el.innerHTML = h + h) — required for the seamless -50% loop
  • IIFE wrapper
  • prefers-reduced-motion freeze (populated static rows, no early blank frame)
  • visibilitychange pause (.lwm-paused class)
  • 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
  • Marks and wordmarks are invented and non-clickable — swap in your own via the rowA/rowB arrays, not real brand logos
  • Seamless loop relies on each row's chip set being duplicated exactly; keep the h + h render and equal per-chip margins

logo-wallmarqueetrusted-bysocial-proofmarketingbrandstickerscroller

More Marketing Sections components

  • 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…