File: src/blocks/scroller/ScrollerLogos01.astro
Horizontal logo marquee. Same motion shell as ScrollerText01, plus grayscale → color on hover, logo height, and optional links.
Shared shell: ScrollerLayout.astro + ScrollerScript.astro.
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", href: "https://example.com" },
],
},Add to a page
---
import ScrollerLogos01 from "@/blocks/scroller/ScrollerLogos01.astro";
---
<ScrollerLogos01 />Props
| Prop | Config key | Notes |
|---|---|---|
items |
scrollerLogos.items |
{ src, alt, href? }[] |
heading / subheading |
same | Optional header |
width |
scrollerLogos.width |
Header container width |
background |
scrollerLogos.background |
Surface token |
padding |
scrollerLogos.padding |
none | sm | md | lg |
fadeEdges |
scrollerLogos.fadeEdges |
Fade uses section background token |
motion |
scrollerLogos.motion |
auto | scroll |
direction |
scrollerLogos.direction |
|
speed |
scrollerLogos.speed |
|
pauseOnHover |
scrollerLogos.pauseOnHover |
Auto mode |
gap |
scrollerLogos.gap |
|
logoHeight |
scrollerLogos.logoHeight |
sm | md | lg |
grayscale |
scrollerLogos.grayscale |
Desaturate; full color on hover |
Also include: ScrollerLayout.astro, ScrollerScript.astro (imported by the block).