ArcaneMarquee#

An infinite scrolling marquee/carousel component with automatic content duplication for seamless looping.

Basic Usage#

ArcaneMarquee(
  children: [
    for (final item in items) ItemCard(item),
  ],
)

Properties#

Examples#

Logo Carousel#

ArcaneMarquee(
  duration: '20s',
  showFadeEdges: true,
  children: [
    for (final logo in partnerLogos)
      ArcaneImage(src: logo.url, alt: logo.name),
  ],
)

Tech Stack Display#

ArcaneMarquee(
  duration: '25s',
  pauseOnHover: true,
  children: [
    for (final tech in ['React', 'Vue', 'Angular', 'Svelte', 'Next.js'])
      ArcaneDiv(
        styles: const ArcaneStyleData(
          padding: PaddingPreset.md,
          background: Background.surface,
          borderRadius: Radius.md,
          border: BorderPreset.subtle,
        ),
        children: [ArcaneText(tech)],
      ),
  ],
)

Testimonials Marquee#

ArcaneMarquee(
  duration: '40s',
  showFadeEdges: true,
  children: [
    for (final testimonial in testimonials)
      ArcaneCard(
        children: [
          ArcaneText(testimonial.quote),
          ArcaneAuthorCard(
            name: testimonial.author,
            role: testimonial.role,
          ),
        ],
      ),
  ],
)

Reverse Direction#

Use ArcaneMarqueeReverse for opposite scroll direction:

ArcaneColumn(
  children: [
    ArcaneMarquee(children: [...]),
    ArcaneMarqueeReverse(children: [...]),
  ],
)

Related Components#

• ArcaneFadeEdge - Standalone fade edges
• ArcaneLogoCarousel - Logo-specific carousel