Skip to content
BaseLayer Themes

Scroller Logos 01

Logo marquee with grayscale and edge fade

Live preview

Trusted by teams

A few of the brands and studios I've partnered with.

File: src/blocks/scroller/ScrollerLogos01.astro

Full-bleed logo marquee. Optional heading/subheading are constrained by width; the track itself is always edge-to-edge. Prefer SVG logos in public/images/.

Config (blocks.ts → scrollerLogos)

scrollerLogos: {
    width: "standard",
    background: "bg",
    padding: "md",
    fadeEdges: true,
    motion: "auto",
    direction: "ltr",
    speed: "slow",
    pauseOnHover: true,
    gap: "lg",
    logoHeight: "md",
    grayscale: true,
    heading: "Trusted by teams",
    subheading: "A few of the brands and studios I've partnered with.",
    items: [
      { src: "/images/logo/clients/northline.svg", alt: "Northline" },
      { src: "/images/logo/clients/formfield.svg", alt: "Form & Field" },
      { src: "/images/logo/clients/scalepath.svg", alt: "Scalepath" },
      { src: "/images/logo/clients/lunarlab.svg", alt: "Lunar Lab" },
      { src: "/images/logo/clients/orbitco.svg", alt: "Orbit Co" },
      { src: "/images/logo/clients/baselayer.svg", alt: "Baselayer" },
    ],
  },

Add to a page

---
import ScrollerLogos01 from "@/blocks/scroller/ScrollerLogos01.astro";
---

<ScrollerLogos01 />

Props override matching keys from config:

<ScrollerLogos01
  width="wide"
  padding="md"
  heading="Custom headline"
/>

Props

Prop Config key Type / values Default / notes
sectionId scrollerLogos.sectionId string Default "scroller-logos"; DOM id for the section; not in config
width scrollerLogos.width standard | narrow | wide Wrapper max-width
background scrollerLogos.background bg | surface | elevated | brand-soft | transparent Surface / background token
padding scrollerLogos.padding none | sm | md | lg Vertical section padding
fadeEdges scrollerLogos.fadeEdges boolean Fade the start/end of the marquee track
motion scrollerLogos.motion auto (continuous) | scroll (tied to page scroll) —
direction scrollerLogos.direction ltr | rtl —
speed scrollerLogos.speed slow | normal | fast —
pauseOnHover scrollerLogos.pauseOnHover boolean Pause motion on hover/focus
gap scrollerLogos.gap sm | md | lg Gap between slides (px) or marquee items
logoHeight scrollerLogos.logoHeight sm | md | lg —
grayscale scrollerLogos.grayscale boolean Render logos in grayscale
heading scrollerLogos.heading string —
subheading scrollerLogos.subheading string —
items scrollerLogos.items Array of { src: string, alt: string, href?: string } Content list for this block

Also include: ScrollerLayout.astro, ScrollerScript.astro, ScrollerLogosTrack.astro.

← Scroller Logos versions · Blocks overview