Getting Started
Scroll Animations
Text Animations
Hover & Cursor
Sliders & Carousels
Galleries & Grids
Menus & Navigation
Preloaders & Intros
Page Transitions
3D & WebGL
"use client"
import { WheelFullscreenCarousel } from "@/registry/tween/wheel-fullscreen-carousel"
export function WheelFullscreenCarouselDemo() {
return <WheelFullscreenCarousel />
}
import { WheelFullscreenCarousel } from "@/components/ui/wheel-fullscreen-carousel"<WheelFullscreenCarousel
slides={[
{
title: "Blue Hour",
description:
"The coast before sunrise, when the sea stack is still a silhouette.",
tags: ["Coast", "Dawn", "Chapter 01"],
image:
"https://images.unsplash.com/photo-1626131719997-e216ff236c40?q=85&w=1800&h=1100&fit=crop&crop=center&auto=format",
imageAlt: "Lone walker on a dark beach facing a sea stack in blue fog",
href: "#",
},
]}
/>Navigation is driven by wheel and touchmove events, throttled by
cooldownMs so a single gesture advances exactly one slide. On each
transition the outgoing slide falls away to scale: 0.25, opacity: 0,
rotation: 30deg with power4.inOut, while the incoming slide rises in
and un-clips to full frame with power4.out, and its caption and tags
stagger in just behind the image. A bottom scrim keeps the caption
legible over bright frames, and the slide counter updates in lockstep so
the viewer always knows where they are in the sequence. When prefers-reduced-motion: reduce is set, slides
swap instantly without the scale and rotation flourish.
| Prop | Type | Default | Description |
|---|---|---|---|
slides | WheelCarouselSlide[] | 5 defaults | Each entry is { title, description, tags, image, href?, imageAlt? }. |
cooldownMs | number | 1000 | Minimum milliseconds between two wheel-driven advances. |
background | string | "#0c0f11" | Background color behind every slide. |
ink | string | "#f1ede4" | Default foreground color. |
linkLabel | string | "Open Chapter" | Anchor label rendered on each slide. |
className | string | — | Extra classes on the outer container. |