Showcase: realistic marquee uses

Trust logos

gentle scroll, image-only, pause on hover to inspect

Announcement bar

tinted background, short benefits, pause on link hover

Reviews ribbon

text + ★ stars decoration (or unicode), slow scroll

Regression tests (annotate the bug each guards against)

1. Defaults — no overrides

should scroll with nbsp gap between items

2. Marquee set_gap=lg

gap between items === gap at the source→target seam (watch for: 2× gap at the wrap = `[&>*:not(:last-child)]:me-…` regression in inline.liquid)

3. Marquee gap=custom 0

items must literally touch with NO whitespace (watch for: anything resembling a nbsp between items = inline-gap CSS var leak)

4. Text-group owns gap, marquee unset

text-group's `set_gap=true, gap=lg` drives spacing without the marquee block setting it

5. Marquee=lg, text-group=sm

text-group's closer scope wins via CSS cascade (watch for: lg-sized spacing here = inline-gap var override broken)

6. Speed -10 (reverse)

content must fully cover viewport at all times (watch for: empty space appearing at the right edge during cycle = stale viewport measurement, `w-full min-w-0` regression on marquee root)

7. Pause on hover: anywhere

ANY hover inside the marquee pauses scrolling, mouseleave resumes

8. Pause on hover: interactive

pauses ONLY when hovering a link or button (links here are underlined; plain text should not pause)

8c. Follow scroll direction · marquee tracks scroll exactly while scrolling, resumes normal animation when still

Scroll down → marquee advances forward; scroll up → marquee reverses. After ~150 ms silence, the loop resumes from wherever scroll left it. Tune SCROLL_TO_OFFSET / SCROLL_SILENCE_MS in src/js/plugins/marquee-scroll-track.ts.

8d. Direction-aware tracking · paired forward + reverse — they diverge as you scroll

Two marquees with opposite speed (+2 / −2), both Follow scroll direction. Scroll down: the top row advances left, the bottom row advances right. The scroll drive is signed by the speed in src/js/plugins/marquee-scroll-track.ts.

9. Color: tint background

subtle gray strip (watch for: transparent background = `bg-custom` overriding `bg-content-mix-5` from base class, OR tailwind safelist regression for `bg-content-mix-5`)

10. Color: custom orange bg + backdrop-blur (watch for: transparent strip = `bg-custom` missing from tailwind safelist, OR `backdrop-blur-md` not applied)

11. Mismatched heights, block_alignment=middle

tall + short items align to middle (watch for: items baseline-aligned = block_alignment regression)

12. Image-only marquee

only inline-image children (watch for: gaps wider between images than within; the inline-image is `inline-block` so HTML whitespace can sneak in)

13. KNOWN cosmetic: image⇄text whitespace (Bug 6, unfixed)

with gap=0 every boundary should touch. inline-block image spans absorb ~0.25em HTML whitespace, so image→text gaps are ~12px wider than text→text at this font size. If text-text touches and image-text doesn't, the bug is still present. If they all touch, someone fixed it — celebrate.

Gallery: 3 sizing modes

Gallery 1 — Height mode (120px), no aspect ratio

product photos at uniform height, natural widths, never cropped

Gallery 2 — Height + 1:1 aspect ratio, Crop to fill

forced squares, lifestyle images cropped to fill each cell

Gallery 3 — Width mode (200px), no aspect ratio

product photos at uniform width, natural heights, never cropped. Fancy alignment test.

Gallery 4 — no settings

falls through to Height mode at 120px; first 2 images use `placeholder: logo`, third is a product photo

Gallery 5 — Width (240px) + 16:9 aspect ratio, Crop to fill

forced landscape cells, lifestyle images cropped to fill

Gallery 6 — Height + 1:1 aspect ratio, Fit inside

forced squares, logos letterboxed inside the cell, never cropped (watch for: same as Cover = `[&_img]:object-contain` Tailwind safelist regression)

Gallery 7 — Width (180px) + 16:9 aspect ratio, Fit inside

forced landscape cells, logos letterboxed (vertical bars on portrait logos, horizontal bars on portrait-cropped ratios)

Gallery 8 — alignment cascade

parent block_alignment=top, product photos should sit at the top of the row (watch for: middle-aligned = `items-[--placement-content-vertical]` regression in _marquee-gallery)

Frame: arbitrary theme-* content at pixel width

Frame 1 — 320px base width with tablet + mobile overrides on

resizing the viewport should step the frame to 280px (md) and 200px (sm)