Everything the component does.

One script and one element.

Accepted beta partners receive a self-hostable JavaScript build. Load it with defer, then place the reel where it belongs in the page.

<script src="/assets/commentreel.js" defer></script>

<comment-reel label="What people are saying">
  <script type="application/json">
    [
      {
        "text": "Best in the business.",
        "author": "@dane",
        "postUrl": "https://example.com/source"
      }
    ]
  </script>
</comment-reel>

Use it on any website.

The script registers <comment-reel>. The element reads comment data from a JSON child, creates enough duplicate sets for a continuous loop, and keeps duplicate content hidden from assistive technology.

Lifecycle

• Changing speed updates the running controller.
• Changing data, direction, labels, or link behavior rerenders safely.
• Resize and content changes remeasure the loop.
• Disconnecting the element removes timers, observers, and listeners.

Bring your own card markup.

The React adapter exposes the movement engine for applications that need complete control of their rendered cards.

import { useMarquee } from 'commentreel/react'

const { paused, toggle } = useMarquee(scrollerRef, {
  speed: 56,
  direction: 'left',
  pauseOnHover: true,
})

Render the same item sequence at least twice, mark duplicate content aria-hidden, and provide a visible pause control whenever motion can start automatically.

Small API, explicit behavior.

Engine and React users can also configure resume delay, hover pause, drag, focus pause, reduced-motion handling, and initial paused state.

Comments stay plain data.

Keep the wording intact unless the commenter has approved an edit. When a stable source exists, link it.

Style it from the host site.

CSS custom properties inherit through the shadow boundary. Shadow parts provide structural control without exposing implementation details.

comment-reel {
  --cr-card-bg: #f8f5ed;
  --cr-text: #1b211c;
  --cr-author: #1b211c;
  --cr-accent: #527044;
  --cr-card-width: 19rem;
  --cr-gap: 1rem;
  --cr-radius: .75rem;
}

comment-reel::part(text) {
  font-style: normal;
}

Available parts: reel, scroller, card, text, author, and control.

Motion remains optional.

• Visible pause and resume control by default.
• Automatic pause on hover and while focus is inside the reel.
• No automatic movement when prefers-reduced-motion is active.
• Native horizontal touch scrolling and pointer drag.
• Duplicate loop cards hidden from assistive technology.
• Source-linked cards work with Enter and Space.
• Focus indicators inherit the configured accent.

The host page remains responsible for color contrast, readable card widths, and permission to publish the supplied comments.

Comment text stays text.

The component never inserts comment data as HTML. Author and source URLs are parsed and accepted only when their protocol is HTTP or HTTPS. Invalid and scriptable URLs are discarded.

The component makes no network request of its own, uses no cookies, and includes no analytics. Any request made by a source link happens only after a visitor activates it.

Modern browsers, direct beta help.

The build targets ES2019 for the script-tag embed and ES2020 for module consumers. It relies on custom elements, shadow DOM, pointer events, observers, and requestAnimationFrame available in current evergreen browsers.

Common integration checks

• If no cards appear, validate the JSON child and confirm the script loaded before checking CSS.
• If a rightward reel appears still, confirm the current beta build is installed; early builds had a browser-clamping defect.
• If the reel is intentionally static, check reduced-motion preferences before treating it as a failure.
• If cards look clipped, give the host element a usable width and avoid placing it inside a narrow overflow container.

Accepted design partners receive direct installation support. Request beta access with the site you have in mind.