Angled Slider

An infinite marquee of angled image cards - hover to pause and straighten. Pass items or use the bundled demos. Built with motion.

Default

Cards rest at a 3D angle and scroll in a seamless loop. Hover pauses the marquee and snaps the card flat.

Loading…

Installation

CLI

npx @sonojs/ui@latest add angled-slider

Also needsnpm i motion

Usage

Demo images install under components/carousels/angled-slider/images/ and are imported by the defaults. Pass your own items when you replace them.

page.tsx

"use client"

import { AngledSlider } from "@/components/carousels/angled-slider"

export default function Page() {
  return <AngledSlider speed={30} className="w-full" />
}

Props

Prop	Type	Default	Description
items	AngledSliderItem[]	bundled images	Cards with `id`, `url`, optional `title` / `alt`. Defaults to static imports from `./images/`.
speed	number	40	Seconds for one full loop (higher = slower).
direction	"left" · "right"	"left"	Marquee scroll direction.
containerHeight	string	"400px"	Stage height CSS length.
cardWidth	string	"300px"	Card width CSS length.
gap	string	"40px"	Gap between cards.
angle	number	20	Resting rotateY in degrees.
hoverScale	number	1.05	Scale while a card is hovered.
className	string	-	Extra classes on the stage.