86 Pro components and page blocks

Get Pro
uibrik

Möbius Carousel

Pro

Preview

Customize

Twist1.00
Tilt16°
Blur6.0px
Fog0.60
Card width200px
Speed40s
left

Installation

Pro

Möbius Carousel is a Pro component

Sign in to see the source, or install it with a license key. The live preview and props above are free to explore.

Sign inGet Pro

Install with a key

  1. Add the Pro registry to components.json:
    components.json
    {
  "registries": {
    "@uibrik-pro": {
      "url": "https://uibrik.com/r/pro/{name}.json",
      "headers": { "Authorization": "Bearer ${UIBRIK_LICENSE}" }
    }
  }
}
  2. Put your key in .env.local and add that file to .gitignore:
    .env.local
    UIBRIK_LICENSE=your-license-key
  3. Install it:
    Terminal
    npx shadcn@latest add @uibrik-pro/mobius-carousel

Usage

import { MobiusCarousel } from "@/components/uibrik/mobius-carousel/mobius-carousel";​<MobiusCarousel  twist={1}  tilt={16}  blur={6}  fog={0.6}  cardWidth={200}  autoplay  speed={40}  direction="left"  defaultIndex={0}  onChange={(index) => {}}  // items={[{ id: "…", src: "…", alt: "…" }]}/>

Props

MobiusCarousel
twist
Type number
1
How far the ribbon twists over one turn. 0 is a plain ring, 1 a full Möbius half-twist.
tilt
Type number
16
How far above the ring the view sits.
blur
Type number
6
Blur on the cards furthest back, easing to sharp at the front. 0 turns it off.
fog
Type number
0.6
How far the cards at the back fade into the page.
cardWidth
Type number
200
Width of a card. Narrow stages shrink it to half their width, and the ring draws in to fit.
autoplay
Type boolean
true
Keep the ring turning on its own. Eases to a stop while pointed at, dragged or focused.
speed
Type number
40
Seconds the ring takes to go once round.
direction
Type "left" | "right"
"left"
Which way the cards travel past the front.
items
Type { id: string; src: string; alt: string; title?: string; meta?: string }[]
SAMPLE_ITEMS
Cards round the ring. title and meta show on the back of each card.
defaultIndex
Type number
0
Card at the front to begin with.
onChange
Type (index: number) => void
–
Called when a different card comes to the front.
className
Type string
–
Classes for the stage.