Marquee

Marquee

Passchildren=once

— the block renders a second aria-hidden copy itself to close the loop. Duplicating them yourself gives a visible double run.

fade

is off by default; on, it masks the first and last 10% so items dissolve instead of being clipped.

pauseOnHover

is off by default; on, it freezes the loop while the pointer is inside.

gap="4rem"

is a raw CSS length that both spaces the items and feeds the loop maths — a % value breaks it.

direction="left"

is the default: content travels leftwards.

Reverse direction

Setdirection="right"

to run the same animation backwards — pair it with a left row above or below for a two-row logo wall.

Vertical

Vertical marquees need a bounded height — without one the container grows to fit both tracks and nothing appears to move.

Usedirection="up"

to scroll the column upwards — it switches the container to flex-col and animates translateY.

direction="down"

runs the same column the other way.

fade

follows the axis on its own, masking the top and bottom edges here.

Speed

speed is a duration for one full pass, not a pixels-per-second rate — the same value moves faster with fewer items.

Usespeed="slow"

for 40s per pass — a calm drift, good for large imagery.

speed="normal"

is the default: 20s per pass.

speed="fast"

gives 10s per pass — ticker pace.

speed={45}

a raw number sets the seconds per pass directly.

Without fade or pause

Setfade={false}

to drop the edge mask and let items run to a hard edge.

pauseOnHover={false}

keeps the loop running under the cursor. Both are the defaults.