Blocks

Infinite Rotating Cards

A hero wheel of photo cards that slowly spins so the next idea always comes into view.

A ready-made hero block. Cards sit on a large circle sized from the preview, so only the top arc shows. GSAP spins the wheel.

New tab

Motion that actually ships

Cards ride a slow wheel so the next idea is always coming into view.

Brand motion

Product UI

Launch pages

Scroll stories

Hover systems

Type in motion

Photo reveals

Hub diagrams

Installation

pnpm dlx shadcn@latest add @tween-ui/infinite-rotating-cards

Usage

app/page.tsx

import InfiniteRotatingCards from '@/components/tweenui/hero/infinite-rotating-cards';
 
export default function Page() {
  return <InfiniteRotatingCards />;
}

Pass your own cards:

app/page.tsx

import InfiniteRotatingCards from '@/components/tweenui/hero/infinite-rotating-cards';
 
export default function Page() {
  return (
    <InfiniteRotatingCards
      title="Motion that actually ships"
      cards={[
        { title: 'Brand motion', image: '/photos/brand.jpg', imageAlt: 'Brand frames' },
        { title: 'Product UI', image: '/photos/ui.jpg', imageAlt: 'Product UI' },
        { title: 'Launch pages', image: '/photos/launch.jpg', imageAlt: 'Launch page' },
      ]}
    />
  );
}

Props

Prop	Type	Default	Description
`title`	`ReactNode`	sample heading	Section heading.
`description`	`string`	sample line	Supporting line under the heading.
`cards`	`{ title, image, imageAlt, icon? }[]`	eight sample cards	Cards placed around the wheel.

Extends native <section> attributes (className, style, …).

Accessibility

Each card image keeps its alt text. Under prefers-reduced-motion: reduce the wheel stays still with cards already placed on the arc.