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

01/ 10

City · 02:14Neon Rain

Photo 1 of 10: Neon Rain

Code

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

<liquid-carousel
  theme="light"
  autoplay="5"
  ratio="16/10"
  speed="1"
>
  <img src="/photos/neon-rain.webp" alt="" data-title="Neon Rain" data-tag="City · 02:14">
  <img src="/photos/red-canyon.webp" alt="" data-title="Red Canyon" data-tag="Desert · 17:40">
  <img src="/photos/northern-lights.webp" alt="" data-title="Northern Lights" data-tag="Forest · 23:05">
</liquid-carousel>

In context

Install · Free Web Component

One file, no dependencies. Flow 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/liquid-carousel.json

↓ liquid-carousel.free.js 25 KB

2. Load it and use the element

HTML

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

<liquid-carousel
  theme="dark"
  autoplay="5"
  ratio="16/10"
  speed="1"
>
  <img src="/photos/neon-rain.webp" alt="" data-title="Neon Rain" data-tag="City · 02:14">
  <img src="/photos/red-canyon.webp" alt="" data-title="Red Canyon" data-tag="Desert · 17:40">
  <img src="/photos/northern-lights.webp" alt="" data-title="Northern Lights" data-tag="Forest · 23:05">
</liquid-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

// liquid-carousel.d.ts
declare namespace JSX {
  interface IntrinsicElements {
    'liquid-carousel': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> & {
      theme?: 'light' | 'dark';
      autoplay?: number | string;
      ratio?: string;
      radius?: number | string;
      speed?: number | string;
      label?: string;
    };
  }
}

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, onChange), the shared WebGL core and the GLSL source
Ripple, Mosaic and Ink transitions on top of Flow
The vanilla Web Component with every transition, a demo page, README and license

Attributes & props

Name	Type	Default	Description
<img> children	src, alt, data-title, data-tag	—	One per slide. Same-origin images, or add crossorigin and serve them with CORS.
theme	'light' \| 'dark'	'dark'	Frame, shadow and glass buttons. Captions stay white over the photo.
autoplay	seconds	0	Advance on a timer; pauses on hover, focus, drag and off-screen.
ratio	CSS aspect-ratio	'16/10'	Shape of the frame, e.g. 4/5 or 1/1.
radius	number (px)	28	Corner radius.
speed	number	1	Transition speed multiplier.
label	string	'Photo carousel'	Accessible name of the region.
preset Pro	'flow' \| 'ripple' \| 'mosaic' \| 'ink'	'flow'	Transition style. Free build ships Flow only.

Swipe, drag, tap (advances, rippling from the finger), arrow keys or the progress bars — every one of them drives the same transition, and a drag stays under the finger until you let go. RGB split grows with swipe speed. Emits a change event (detail.index); next(), prev() and go(i) are methods on the element. Without WebGL, or with cross-origin images lacking CORS, it falls back to a cross-fade. Under reduced motion it switches instantly and autoplay stays off.