14 components · free to start

UI that feels alive

Hand-built, shader-driven components. Play with each one live, take the free Web Component, or go Pro for React + TypeScript and every preset.

New

Neon RainCity · 02:14

Red CanyonDesert · 17:40

Northern LightsForest · 23:05

Monument RoadHighway · 11:20

Night RiderBackroad · 21:48

SwitchbacksMountain pass · 09:30

Aurora HighwayTundra · 00:12

Cloud ValleyValley · 07:55

AfterglowDowntown · 01:30

Milky WayOpen road · 03:00

Code

<script src="/orbit-carousel.free.js" defer></script>

<orbit-carousel
  preset="ring"
  theme="light"
  size="220"
  autoplay="0"
>
  <img src="/photos/neon-rain.webp" alt="Neon Rain" data-title="Neon Rain" data-tag="City · 02:14">
  <img src="/photos/red-canyon.webp" alt="Red Canyon" data-title="Red Canyon" data-tag="Desert · 17:40">
  <img src="/photos/northern-lights.webp" alt="Northern Lights" data-title="Northern Lights" data-tag="Forest · 23:05">
  <img src="/photos/monument-road.webp" alt="Monument Road" data-title="Monument Road" data-tag="Highway · 11:20">
  <!-- …as many photos as you like -->
</orbit-carousel>

In context

Install · Free Web Component

One file, no dependencies. Ring preset, every other option included. Host it yourself so your visitors never load anything from our servers.

1. Install with one command — or download the file

shadcn CLI · React

npx shadcn@latest add https://www.ui-design.co/r/orbit-carousel.json

↓ orbit-carousel.free.js 15 KB

2. Load it and use the element

HTML

<script src="/orbit-carousel.free.js" defer></script>

<orbit-carousel
  preset="ring"
  theme="light"
  size="220"
  autoplay="0"
>
  <img src="/photos/neon-rain.webp" alt="Neon Rain" data-title="Neon Rain" data-tag="City · 02:14">
  <img src="/photos/red-canyon.webp" alt="Red Canyon" data-title="Red Canyon" data-tag="Desert · 17:40">
  <img src="/photos/northern-lights.webp" alt="Northern Lights" data-title="Northern Lights" data-tag="Forest · 23:05">
  <img src="/photos/monument-road.webp" alt="Monument Road" data-title="Monument Road" data-tag="Highway · 11:20">
  <!-- …as many photos as you like -->
</orbit-carousel>

3. React + TypeScript (optional)

The shadcn command adds a typed React wrapper for you. Using the file directly? Custom elements work in React as-is; for type checking add:

TypeScript

// orbit-carousel.d.ts
declare namespace JSX {
  interface IntrinsicElements {
    'orbit-carousel': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> & {
      preset?: 'ring' | 'helix' | 'wave' | 'arc';
      theme?: 'light' | 'dark';
      size?: number | string;
      autoplay?: number | string;
      speed?: number | string;
      label?: string;
      controls?: 'true' | 'false';
    };
  }
}

Pro · React + TypeScript Pro

One payment of $4.99, yours forever. Use it in unlimited personal and commercial projects; no resale.

React component with TypeScript types — slides in, onChange out
Helix, Wave and Arc layouts: a rising spiral, a ring that breathes on a travelling wave, and a shallow cover-flow arc
The vanilla Web Component with every layout, a demo page, README and license

Attributes & props

Name	Type	Default	Description
<img> children	src, alt, data-title, data-tag	—	Each child image is a slide; title and tag become the caption on the front card.
size	number (px)	220	Card width; the height is 1.32×. The ring scales down to fit narrow containers.
theme	'light' \| 'dark'	'light'	Fade colour for distant cards, shadows and the reflection.
autoplay	seconds	0	Advance every n seconds; pauses on hover, focus and drag. 0 = off.
speed	number	1	Snappiness of the spring (and the pace of Wave).
controls	'true' \| 'false'	'true'	The prev / next pill with a counter.
label	string	'Photo carousel'	Accessible name of the carousel.
change	event	—	`detail.index` when another photo comes to the front (React: onChange).
preset Pro	'ring' \| 'helix' \| 'wave' \| 'arc'	'ring'	Layout. Free build ships Ring only.

Drag or swipe to spin — release with speed and it coasts, then springs onto the nearest card; tap a side card to bring it forward. A sideways trackpad scroll (or Shift + wheel) spins it too, while a normal vertical scroll still scrolls the page. Arrow keys, Home and End work once it has focus, and screen readers hear each photo as it settles. Pure CSS 3D, no WebGL; it stops animating when it’s at rest or off-screen, and honours reduced motion.