Marquee

2026.1

Requires Celeste 2026.1

Download Install in VSCode

Properties

Prop Description
gap Valid CSS unit for the gap between items, e.g. 12px or var(--space-xs). Defaults to var(--space-sm)
speed Valid CSS unit for the speed, in time. e.g. 20ms, 10s. Defaults to 40s
pauseOnHover Whether the Marquee should pause when hovered, true or false
reverse Whether the Marquee should move in reverse, true or false

How to use it

<div class="flow flow-space-sm">
	<Marquee pauseOnHover>
		<Marquee.Item>
			<img src="https://unsplash.it/180?random=1" class="w-32 aspect-square" />
		</Marquee.Item>
		<Marquee.Item>
			<img src="https://unsplash.it/180?random=2" class="w-32 aspect-square" />
		</Marquee.Item>
		<Marquee.Item>
			<img src="https://unsplash.it/180?random=3" class="w-32 aspect-square" />
		</Marquee.Item>
		<Marquee.Item>
			<img src="https://unsplash.it/180?random=4" class="w-32 aspect-square" />
		</Marquee.Item>
		<Marquee.Item>
			<img src="https://unsplash.it/180?random=5" class="w-32 aspect-square" />
		</Marquee.Item>
		<Marquee.Item>
			<img src="https://unsplash.it/180?random=6" class="w-32 aspect-square" />
		</Marquee.Item>
		<Marquee.Item>
			<img src="https://unsplash.it/180?random=7" class="w-32 aspect-square" />
		</Marquee.Item>
		<Marquee.Item>
			<img src="https://unsplash.it/180?random=8" class="w-32 aspect-square" />
		</Marquee.Item>
		<Marquee.Item>
			<img src="https://unsplash.it/180?random=9" class="w-32 aspect-square" />
		</Marquee.Item>
	</Marquee>
	<Marquee reverse pauseOnHover>
		<Marquee.Item>
			<img src="https://unsplash.it/180?random=1" class="w-32 aspect-square" />
		</Marquee.Item>
		<Marquee.Item>
			<img src="https://unsplash.it/180?random=2" class="w-32 aspect-square" />
		</Marquee.Item>
		<Marquee.Item>
			<img src="https://unsplash.it/180?random=3" class="w-32 aspect-square" />
		</Marquee.Item>
		<Marquee.Item>
			<img src="https://unsplash.it/180?random=4" class="w-32 aspect-square" />
		</Marquee.Item>
		<Marquee.Item>
			<img src="https://unsplash.it/180?random=5" class="w-32 aspect-square" />
		</Marquee.Item>
		<Marquee.Item>
			<img src="https://unsplash.it/180?random=6" class="w-32 aspect-square" />
		</Marquee.Item>
		<Marquee.Item>
			<img src="https://unsplash.it/180?random=7" class="w-32 aspect-square" />
		</Marquee.Item>
		<Marquee.Item>
			<img src="https://unsplash.it/180?random=8" class="w-32 aspect-square" />
		</Marquee.Item>
		<Marquee.Item>
			<img src="https://unsplash.it/180?random=9" class="w-32 aspect-square" />
		</Marquee.Item>
	</Marquee>
</div>
Back to Top