Image Marquee

A skewed grid of image columns that scroll in opposite directions. Built with motion. Bundled photos install under components/3d/image-marquee/images. For the CSS text/card strip, see Marquee.

Default

Four columns tilt in space and drift up and down. Demo frames ship with the install.

Loading…

Installation

CLI

npx @sonojs/ui@latest add image-marquee

Also needsnpm i motion

Usage

page.tsx

"use client"

import { ImageMarquee, type MarqueeImage } from "@/components/3d/image-marquee"

const images: MarqueeImage[] = [
  { src: "/media/hero-1.jpg", alt: "Studio shelf" },
  { src: "/media/hero-2.jpg", alt: "Glass desk", href: "/work/desk" },
]

export default function Page() {
  return (
    <ImageMarquee
      images={images}
      cols={4}
      onImageClick={(image, index) => {
        console.log(index, image.alt)
      }}
    />
  )
}

Props

Prop	Type	Default	Description
images	MarqueeImage[]	bundled demo	Tiles with `src`, `alt`, and optional `href` / `target`.
cols	number	4	Column count from `sm` up (clamped 2–6). Mobile uses 2.
onImageClick	(image, index) => void	-	Click handler. When set, it runs instead of opening `href`.
className	string	-	Classes on the outer section.