Modern React Components

Build Beautiful
UI Components

A collection of accessible and customizable React components built for modern web applications. Copy, paste, and customize to your heart's content.

Browse Components

pnpm dlx shadcn@latest add pattern-carousel --registry https://pluto-ui.dev/r

pnpm dlx shadcn@latest add pattern-carousel --registry https://pluto-ui.dev/r

npx shadcn@latest add pattern-carousel --registry https://pluto-ui.dev/r

npx shadcn@latest add pattern-carousel --registry https://pluto-ui.dev/r

yarn shadcn@latest add pattern-carousel --registry https://pluto-ui.dev/r

yarn shadcn@latest add pattern-carousel --registry https://pluto-ui.dev/r

bunx --bun shadcn@latest add pattern-carousel --registry https://pluto-ui.dev/r

bunx --bun shadcn@latest add pattern-carousel --registry https://pluto-ui.dev/r

Featured Components

Explore our collection of beautifully crafted components

Pattern Carousel

An interactive carousel component with multiple animation patterns including circle, wave, stagger, grid, fan, and 3D depth.

001

002

003

004

005

006

007

008

009

010

011

012

Prism Button

A stunning animated button with prismatic gradient effects, shimmer animations, and customizable colors.

Dot Matrix Display

A retro dot matrix display component with animated scrolling text, customizable colors, and authentic LED-style visual effects.

You can get it all here

Welcome to the future

Retro vibes only

WebGL Effects

Apply stunning WebGL shader effects to any element using vfx-js, with support for built-in shaders and custom shaders.

Glitch Effect

Scanner Reveal

An animated card stream component with a scanner effect that reveals ASCII art as cards pass through.

Speed: 120 px/s

// compiled preview • scanner demo const SCAN_WIDTH = 8; const MAX
_PARTICLES = 2500; function clamp(n, a, b) { return Math.max(a, Ma
th.min(b, n)); } function lerp(a, b, t) { return a + (b - a) * t; 
} const now = () => performance.now(); const SCAN_WIDTH = 8; funct
ion lerp(a, b, t) { return a + (b - a) * t; } function clamp(n, a,
 b) { return Math.max(a, Math.min(b, n)); } function lerp(a, b, t)
 { return a + (b - a) * t; } function lerp(a, b, t) { return a + (
b - a) * t; } // compiled preview • scanner demo const MAX_PARTICL
ES = 2500; const now = () => performance.now(); const now = () => 
performance.now(); function clamp(n, a, b) { return Math.max(a, Ma
th.min(b, n)); } const SCAN_WIDTH = 8; function lerp(a, b, t) { re
turn a + (b - a) * t; } function clamp(n, a, b) { return Math.max(
a, Math.min(b, n)); } const SCAN_WIDTH = 8; function clamp(n, a, b
) { return Math.max(a, Math.min(b, n)); } // compiled preview • sc
anner demo function clamp(n, a, b) { return Math.max(a, Math.min(b
, n)); } // compiled preview • scanner demo const MAX_PARTICLES = 
2500; const MAX_PARTICLES = 2500; function lerp(a, b, t) { return 
a + (b - a) * t; } function lerp(a, b, t) { return a + (b - a) * t
; } const SCAN_WIDTH = 8; const now = () => performance.now(); fun

// compiled preview • scanner demo const SCAN_WIDTH = 8; const MAX
_PARTICLES = 2500; function clamp(n, a, b) { return Math.max(a, Ma
th.min(b, n)); } function lerp(a, b, t) { return a + (b - a) * t; 
} const now = () => performance.now(); const SCAN_WIDTH = 8; funct
ion clamp(n, a, b) { return Math.max(a, Math.min(b, n)); } const M
AX_PARTICLES = 2500; const now = () => performance.now(); function
 lerp(a, b, t) { return a + (b - a) * t; } // compiled preview • s
canner demo const now = () => performance.now(); function lerp(a, 
b, t) { return a + (b - a) * t; } function lerp(a, b, t) { return 
a + (b - a) * t; } function clamp(n, a, b) { return Math.max(a, Ma
th.min(b, n)); } function lerp(a, b, t) { return a + (b - a) * t; 
} function lerp(a, b, t) { return a + (b - a) * t; } const SCAN_WI
DTH = 8; const MAX_PARTICLES = 2500; const SCAN_WIDTH = 8; const M
AX_PARTICLES = 2500; // compiled preview • scanner demo // compile
d preview • scanner demo function clamp(n, a, b) { return Math.max
(a, Math.min(b, n)); } const now = () => performance.now(); const 
SCAN_WIDTH = 8; const now = () => performance.now(); function lerp
(a, b, t) { return a + (b - a) * t; } const MAX_PARTICLES = 2500; 
// compiled preview • scanner demo function lerp(a, b, t) { return

// compiled preview • scanner demo const SCAN_WIDTH = 8; const MAX
_PARTICLES = 2500; function clamp(n, a, b) { return Math.max(a, Ma
th.min(b, n)); } function lerp(a, b, t) { return a + (b - a) * t; 
} const now = () => performance.now(); const SCAN_WIDTH = 8; const
 MAX_PARTICLES = 2500; // compiled preview • scanner demo const SC
AN_WIDTH = 8; function lerp(a, b, t) { return a + (b - a) * t; } c
onst SCAN_WIDTH = 8; const MAX_PARTICLES = 2500; function clamp(n,
 a, b) { return Math.max(a, Math.min(b, n)); } function clamp(n, a
, b) { return Math.max(a, Math.min(b, n)); } function clamp(n, a, 
b) { return Math.max(a, Math.min(b, n)); } const MAX_PARTICLES = 2
500; function lerp(a, b, t) { return a + (b - a) * t; } function l
erp(a, b, t) { return a + (b - a) * t; } function clamp(n, a, b) {
 return Math.max(a, Math.min(b, n)); } const now = () => performan
ce.now(); function lerp(a, b, t) { return a + (b - a) * t; } const
 MAX_PARTICLES = 2500; const now = () => performance.now(); functi
on lerp(a, b, t) { return a + (b - a) * t; } function clamp(n, a, 
b) { return Math.max(a, Math.min(b, n)); } function lerp(a, b, t) 
{ return a + (b - a) * t; } // compiled preview • scanner demo con
st SCAN_WIDTH = 8; // compiled preview • scanner demo const MAX_PA

// compiled preview • scanner demo const SCAN_WIDTH = 8; const MAX
_PARTICLES = 2500; function clamp(n, a, b) { return Math.max(a, Ma
th.min(b, n)); } function lerp(a, b, t) { return a + (b - a) * t; 
} const now = () => performance.now(); const SCAN_WIDTH = 8; const
 SCAN_WIDTH = 8; const now = () => performance.now(); const MAX_PA
RTICLES = 2500; function clamp(n, a, b) { return Math.max(a, Math.
min(b, n)); } const SCAN_WIDTH = 8; const now = () => performance.
now(); const MAX_PARTICLES = 2500; const MAX_PARTICLES = 2500; con
st MAX_PARTICLES = 2500; const now = () => performance.now(); func
tion lerp(a, b, t) { return a + (b - a) * t; } const MAX_PARTICLES
 = 2500; function clamp(n, a, b) { return Math.max(a, Math.min(b, 
n)); } function lerp(a, b, t) { return a + (b - a) * t; } // compi
led preview • scanner demo const now = () => performance.now(); fu
nction lerp(a, b, t) { return a + (b - a) * t; } const now = () =>
 performance.now(); // compiled preview • scanner demo const SCAN_
WIDTH = 8; const SCAN_WIDTH = 8; const now = () => performance.now
(); function clamp(n, a, b) { return Math.max(a, Math.min(b, n)); 
} function lerp(a, b, t) { return a + (b - a) * t; } const MAX_PAR
TICLES = 2500; const SCAN_WIDTH = 8; function lerp(a, b, t) { retu

// compiled preview • scanner demo const SCAN_WIDTH = 8; const MAX
_PARTICLES = 2500; function clamp(n, a, b) { return Math.max(a, Ma
th.min(b, n)); } function lerp(a, b, t) { return a + (b - a) * t; 
} const now = () => performance.now(); const MAX_PARTICLES = 2500;
 // compiled preview • scanner demo function lerp(a, b, t) { retur
n a + (b - a) * t; } function clamp(n, a, b) { return Math.max(a, 
Math.min(b, n)); } function clamp(n, a, b) { return Math.max(a, Ma
th.min(b, n)); } const SCAN_WIDTH = 8; const MAX_PARTICLES = 2500;
 const SCAN_WIDTH = 8; const SCAN_WIDTH = 8; const MAX_PARTICLES =
 2500; function clamp(n, a, b) { return Math.max(a, Math.min(b, n)
); } function lerp(a, b, t) { return a + (b - a) * t; } const now 
= () => performance.now(); function lerp(a, b, t) { return a + (b 
- a) * t; } const MAX_PARTICLES = 2500; const SCAN_WIDTH = 8; cons
t MAX_PARTICLES = 2500; function clamp(n, a, b) { return Math.max(
a, Math.min(b, n)); } // compiled preview • scanner demo function 
lerp(a, b, t) { return a + (b - a) * t; } function lerp(a, b, t) {
 return a + (b - a) * t; } function clamp(n, a, b) { return Math.m
ax(a, Math.min(b, n)); } const MAX_PARTICLES = 2500; const SCAN_WI
DTH = 8; // compiled preview • scanner demo function clamp(n, a, b

// compiled preview • scanner demo const SCAN_WIDTH = 8; const MAX
_PARTICLES = 2500; function clamp(n, a, b) { return Math.max(a, Ma
th.min(b, n)); } function lerp(a, b, t) { return a + (b - a) * t; 
} const now = () => performance.now(); const MAX_PARTICLES = 2500;
 const now = () => performance.now(); function clamp(n, a, b) { re
turn Math.max(a, Math.min(b, n)); } function lerp(a, b, t) { retur
n a + (b - a) * t; } function clamp(n, a, b) { return Math.max(a, 
Math.min(b, n)); } const MAX_PARTICLES = 2500; // compiled preview
 • scanner demo // compiled preview • scanner demo const now = () 
=> performance.now(); const MAX_PARTICLES = 2500; // compiled prev
iew • scanner demo function lerp(a, b, t) { return a + (b - a) * t
; } function clamp(n, a, b) { return Math.max(a, Math.min(b, n)); 
} const now = () => performance.now(); // compiled preview • scann
er demo function clamp(n, a, b) { return Math.max(a, Math.min(b, n
)); } function lerp(a, b, t) { return a + (b - a) * t; } const MAX
_PARTICLES = 2500; const SCAN_WIDTH = 8; const SCAN_WIDTH = 8; con
st SCAN_WIDTH = 8; function lerp(a, b, t) { return a + (b - a) * t
; } const now = () => performance.now(); function lerp(a, b, t) { 
return a + (b - a) * t; } const MAX_PARTICLES = 2500; const now = 

// compiled preview • scanner demo const SCAN_WIDTH = 8; const MAX
_PARTICLES = 2500; function clamp(n, a, b) { return Math.max(a, Ma
th.min(b, n)); } function lerp(a, b, t) { return a + (b - a) * t; 
} const now = () => performance.now(); const MAX_PARTICLES = 2500;
 function lerp(a, b, t) { return a + (b - a) * t; } const SCAN_WID
TH = 8; // compiled preview • scanner demo const MAX_PARTICLES = 2
500; const MAX_PARTICLES = 2500; function clamp(n, a, b) { return 
Math.max(a, Math.min(b, n)); } // compiled preview • scanner demo 
function lerp(a, b, t) { return a + (b - a) * t; } const MAX_PARTI
CLES = 2500; function lerp(a, b, t) { return a + (b - a) * t; } fu
nction lerp(a, b, t) { return a + (b - a) * t; } // compiled previ
ew • scanner demo const now = () => performance.now(); function le
rp(a, b, t) { return a + (b - a) * t; } const now = () => performa
nce.now(); const SCAN_WIDTH = 8; const SCAN_WIDTH = 8; const MAX_P
ARTICLES = 2500; const now = () => performance.now(); function ler
p(a, b, t) { return a + (b - a) * t; } const now = () => performan
ce.now(); const MAX_PARTICLES = 2500; const MAX_PARTICLES = 2500; 
function lerp(a, b, t) { return a + (b - a) * t; } const SCAN_WIDT
H = 8; function lerp(a, b, t) { return a + (b - a) * t; } function

// compiled preview • scanner demo const SCAN_WIDTH = 8; const MAX
_PARTICLES = 2500; function clamp(n, a, b) { return Math.max(a, Ma
th.min(b, n)); } function lerp(a, b, t) { return a + (b - a) * t; 
} const now = () => performance.now(); const MAX_PARTICLES = 2500;
 function clamp(n, a, b) { return Math.max(a, Math.min(b, n)); } /
/ compiled preview • scanner demo const SCAN_WIDTH = 8; const MAX_
PARTICLES = 2500; function clamp(n, a, b) { return Math.max(a, Mat
h.min(b, n)); } // compiled preview • scanner demo const now = () 
=> performance.now(); function clamp(n, a, b) { return Math.max(a,
 Math.min(b, n)); } const MAX_PARTICLES = 2500; const SCAN_WIDTH =
 8; function lerp(a, b, t) { return a + (b - a) * t; } function cl
amp(n, a, b) { return Math.max(a, Math.min(b, n)); } // compiled p
review • scanner demo const MAX_PARTICLES = 2500; const SCAN_WIDTH
 = 8; function lerp(a, b, t) { return a + (b - a) * t; } // compil
ed preview • scanner demo function clamp(n, a, b) { return Math.ma
x(a, Math.min(b, n)); } const MAX_PARTICLES = 2500; const SCAN_WID
TH = 8; // compiled preview • scanner demo const now = () => perfo
rmance.now(); const now = () => performance.now(); // compiled pre
view • scanner demo const MAX_PARTICLES = 2500; const now = () => 

// compiled preview • scanner demo const SCAN_WIDTH = 8; const MAX
_PARTICLES = 2500; function clamp(n, a, b) { return Math.max(a, Ma
th.min(b, n)); } function lerp(a, b, t) { return a + (b - a) * t; 
} const now = () => performance.now(); function clamp(n, a, b) { r
eturn Math.max(a, Math.min(b, n)); } const MAX_PARTICLES = 2500; c
onst now = () => performance.now(); const MAX_PARTICLES = 2500; co
nst MAX_PARTICLES = 2500; function clamp(n, a, b) { return Math.ma
x(a, Math.min(b, n)); } function clamp(n, a, b) { return Math.max(
a, Math.min(b, n)); } function lerp(a, b, t) { return a + (b - a) 
* t; } const MAX_PARTICLES = 2500; const MAX_PARTICLES = 2500; con
st now = () => performance.now(); function lerp(a, b, t) { return 
a + (b - a) * t; } const SCAN_WIDTH = 8; const SCAN_WIDTH = 8; con
st SCAN_WIDTH = 8; function clamp(n, a, b) { return Math.max(a, Ma
th.min(b, n)); } // compiled preview • scanner demo // compiled pr
eview • scanner demo function lerp(a, b, t) { return a + (b - a) *
 t; } // compiled preview • scanner demo function clamp(n, a, b) {
 return Math.max(a, Math.min(b, n)); } const SCAN_WIDTH = 8; const
 MAX_PARTICLES = 2500; function clamp(n, a, b) { return Math.max(a
, Math.min(b, n)); } const MAX_PARTICLES = 2500; function lerp(a, 

// compiled preview • scanner demo const SCAN_WIDTH = 8; const MAX
_PARTICLES = 2500; function clamp(n, a, b) { return Math.max(a, Ma
th.min(b, n)); } function lerp(a, b, t) { return a + (b - a) * t; 
} const now = () => performance.now(); function clamp(n, a, b) { r
eturn Math.max(a, Math.min(b, n)); } const SCAN_WIDTH = 8; functio
n lerp(a, b, t) { return a + (b - a) * t; } function lerp(a, b, t)
 { return a + (b - a) * t; } const MAX_PARTICLES = 2500; function 
clamp(n, a, b) { return Math.max(a, Math.min(b, n)); } // compiled
 preview • scanner demo function clamp(n, a, b) { return Math.max(
a, Math.min(b, n)); } const SCAN_WIDTH = 8; const MAX_PARTICLES = 
2500; const MAX_PARTICLES = 2500; function lerp(a, b, t) { return 
a + (b - a) * t; } function lerp(a, b, t) { return a + (b - a) * t
; } const SCAN_WIDTH = 8; const now = () => performance.now(); con
st now = () => performance.now(); function clamp(n, a, b) { return
 Math.max(a, Math.min(b, n)); } const now = () => performance.now(
); const now = () => performance.now(); function clamp(n, a, b) { 
return Math.max(a, Math.min(b, n)); } // compiled preview • scanne
r demo const MAX_PARTICLES = 2500; const now = () => performance.n
ow(); // compiled preview • scanner demo function lerp(a, b, t) { 

// compiled preview • scanner demo const SCAN_WIDTH = 8; const MAX
_PARTICLES = 2500; function clamp(n, a, b) { return Math.max(a, Ma
th.min(b, n)); } function lerp(a, b, t) { return a + (b - a) * t; 
} const now = () => performance.now(); function clamp(n, a, b) { r
eturn Math.max(a, Math.min(b, n)); } // compiled preview • scanner
 demo function clamp(n, a, b) { return Math.max(a, Math.min(b, n))
; } const now = () => performance.now(); const SCAN_WIDTH = 8; fun
ction lerp(a, b, t) { return a + (b - a) * t; } function clamp(n, 
a, b) { return Math.max(a, Math.min(b, n)); } const MAX_PARTICLES 
= 2500; const now = () => performance.now(); const MAX_PARTICLES =
 2500; // compiled preview • scanner demo function lerp(a, b, t) {
 return a + (b - a) * t; } const MAX_PARTICLES = 2500; const MAX_P
ARTICLES = 2500; function clamp(n, a, b) { return Math.max(a, Math
.min(b, n)); } // compiled preview • scanner demo // compiled prev
iew • scanner demo function lerp(a, b, t) { return a + (b - a) * t
; } // compiled preview • scanner demo const SCAN_WIDTH = 8; funct
ion clamp(n, a, b) { return Math.max(a, Math.min(b, n)); } functio
n clamp(n, a, b) { return Math.max(a, Math.min(b, n)); } function 
clamp(n, a, b) { return Math.max(a, Math.min(b, n)); } function le

// compiled preview • scanner demo const SCAN_WIDTH = 8; const MAX
_PARTICLES = 2500; function clamp(n, a, b) { return Math.max(a, Ma
th.min(b, n)); } function lerp(a, b, t) { return a + (b - a) * t; 
} const now = () => performance.now(); function clamp(n, a, b) { r
eturn Math.max(a, Math.min(b, n)); } const now = () => performance
.now(); const SCAN_WIDTH = 8; // compiled preview • scanner demo c
onst SCAN_WIDTH = 8; function lerp(a, b, t) { return a + (b - a) *
 t; } const SCAN_WIDTH = 8; const SCAN_WIDTH = 8; function lerp(a,
 b, t) { return a + (b - a) * t; } const MAX_PARTICLES = 2500; fun
ction clamp(n, a, b) { return Math.max(a, Math.min(b, n)); } const
 now = () => performance.now(); const now = () => performance.now(
); function clamp(n, a, b) { return Math.max(a, Math.min(b, n)); }
 const SCAN_WIDTH = 8; const MAX_PARTICLES = 2500; const MAX_PARTI
CLES = 2500; function clamp(n, a, b) { return Math.max(a, Math.min
(b, n)); } const SCAN_WIDTH = 8; function lerp(a, b, t) { return a
 + (b - a) * t; } // compiled preview • scanner demo function lerp
(a, b, t) { return a + (b - a) * t; } // compiled preview • scanne
r demo const SCAN_WIDTH = 8; const MAX_PARTICLES = 2500; function 
clamp(n, a, b) { return Math.max(a, Math.min(b, n)); } function cl

// compiled preview • scanner demo const SCAN_WIDTH = 8; const MAX
_PARTICLES = 2500; function clamp(n, a, b) { return Math.max(a, Ma
th.min(b, n)); } function lerp(a, b, t) { return a + (b - a) * t; 
} const now = () => performance.now(); function lerp(a, b, t) { re
turn a + (b - a) * t; } function lerp(a, b, t) { return a + (b - a
) * t; } // compiled preview • scanner demo const SCAN_WIDTH = 8; 
const SCAN_WIDTH = 8; function lerp(a, b, t) { return a + (b - a) 
* t; } function lerp(a, b, t) { return a + (b - a) * t; } const SC
AN_WIDTH = 8; function clamp(n, a, b) { return Math.max(a, Math.mi
n(b, n)); } const SCAN_WIDTH = 8; const SCAN_WIDTH = 8; const now 
= () => performance.now(); function clamp(n, a, b) { return Math.m
ax(a, Math.min(b, n)); } function clamp(n, a, b) { return Math.max
(a, Math.min(b, n)); } const now = () => performance.now(); functi
on lerp(a, b, t) { return a + (b - a) * t; } const now = () => per
formance.now(); const MAX_PARTICLES = 2500; const MAX_PARTICLES = 
2500; const MAX_PARTICLES = 2500; function clamp(n, a, b) { return
 Math.max(a, Math.min(b, n)); } const now = () => performance.now(
); function clamp(n, a, b) { return Math.max(a, Math.min(b, n)); }
 const now = () => performance.now(); function lerp(a, b, t) { ret

// compiled preview • scanner demo const SCAN_WIDTH = 8; const MAX
_PARTICLES = 2500; function clamp(n, a, b) { return Math.max(a, Ma
th.min(b, n)); } function lerp(a, b, t) { return a + (b - a) * t; 
} const now = () => performance.now(); function lerp(a, b, t) { re
turn a + (b - a) * t; } function clamp(n, a, b) { return Math.max(
a, Math.min(b, n)); } const now = () => performance.now(); functio
n clamp(n, a, b) { return Math.max(a, Math.min(b, n)); } // compil
ed preview • scanner demo const now = () => performance.now(); con
st SCAN_WIDTH = 8; // compiled preview • scanner demo const MAX_PA
RTICLES = 2500; const SCAN_WIDTH = 8; function lerp(a, b, t) { ret
urn a + (b - a) * t; } const now = () => performance.now(); // com
piled preview • scanner demo function lerp(a, b, t) { return a + (
b - a) * t; } function lerp(a, b, t) { return a + (b - a) * t; } /
/ compiled preview • scanner demo const SCAN_WIDTH = 8; const SCAN
_WIDTH = 8; function clamp(n, a, b) { return Math.max(a, Math.min(
b, n)); } const now = () => performance.now(); // compiled preview
 • scanner demo // compiled preview • scanner demo // compiled pre
view • scanner demo const MAX_PARTICLES = 2500; // compiled previe
w • scanner demo // compiled preview • scanner demo const now = ()

// compiled preview • scanner demo const SCAN_WIDTH = 8; const MAX
_PARTICLES = 2500; function clamp(n, a, b) { return Math.max(a, Ma
th.min(b, n)); } function lerp(a, b, t) { return a + (b - a) * t; 
} const now = () => performance.now(); function lerp(a, b, t) { re
turn a + (b - a) * t; } const MAX_PARTICLES = 2500; function lerp(
a, b, t) { return a + (b - a) * t; } function lerp(a, b, t) { retu
rn a + (b - a) * t; } // compiled preview • scanner demo const now
 = () => performance.now(); function lerp(a, b, t) { return a + (b
 - a) * t; } const now = () => performance.now(); const SCAN_WIDTH
 = 8; const SCAN_WIDTH = 8; const MAX_PARTICLES = 2500; const now 
= () => performance.now(); function lerp(a, b, t) { return a + (b 
- a) * t; } const now = () => performance.now(); const MAX_PARTICL
ES = 2500; const MAX_PARTICLES = 2500; function lerp(a, b, t) { re
turn a + (b - a) * t; } // compiled preview • scanner demo functio
n lerp(a, b, t) { return a + (b - a) * t; } function clamp(n, a, b
) { return Math.max(a, Math.min(b, n)); } function clamp(n, a, b) 
{ return Math.max(a, Math.min(b, n)); } const SCAN_WIDTH = 8; func
tion clamp(n, a, b) { return Math.max(a, Math.min(b, n)); } // com
piled preview • scanner demo const MAX_PARTICLES = 2500; const MAX

// compiled preview • scanner demo const SCAN_WIDTH = 8; const MAX
_PARTICLES = 2500; function clamp(n, a, b) { return Math.max(a, Ma
th.min(b, n)); } function lerp(a, b, t) { return a + (b - a) * t; 
} const now = () => performance.now(); function lerp(a, b, t) { re
turn a + (b - a) * t; } const SCAN_WIDTH = 8; const MAX_PARTICLES 
= 2500; const now = () => performance.now(); // compiled preview •
 scanner demo // compiled preview • scanner demo const SCAN_WIDTH 
= 8; function lerp(a, b, t) { return a + (b - a) * t; } // compile
d preview • scanner demo const SCAN_WIDTH = 8; const now = () => p
erformance.now(); const now = () => performance.now(); const SCAN_
WIDTH = 8; const now = () => performance.now(); // compiled previe
w • scanner demo function lerp(a, b, t) { return a + (b - a) * t; 
} const SCAN_WIDTH = 8; // compiled preview • scanner demo const n
ow = () => performance.now(); // compiled preview • scanner demo /
/ compiled preview • scanner demo function clamp(n, a, b) { return
 Math.max(a, Math.min(b, n)); } // compiled preview • scanner demo
 function clamp(n, a, b) { return Math.max(a, Math.min(b, n)); } f
unction lerp(a, b, t) { return a + (b - a) * t; } function clamp(n
, a, b) { return Math.max(a, Math.min(b, n)); } const SCAN_WIDTH =

// compiled preview • scanner demo const SCAN_WIDTH = 8; const MAX
_PARTICLES = 2500; function clamp(n, a, b) { return Math.max(a, Ma
th.min(b, n)); } function lerp(a, b, t) { return a + (b - a) * t; 
} const now = () => performance.now(); const now = () => performan
ce.now(); // compiled preview • scanner demo const SCAN_WIDTH = 8;
 const SCAN_WIDTH = 8; const now = () => performance.now(); // com
piled preview • scanner demo const now = () => performance.now(); 
function clamp(n, a, b) { return Math.max(a, Math.min(b, n)); } fu
nction lerp(a, b, t) { return a + (b - a) * t; } const SCAN_WIDTH 
= 8; function clamp(n, a, b) { return Math.max(a, Math.min(b, n));
 } const now = () => performance.now(); function lerp(a, b, t) { r
eturn a + (b - a) * t; } // compiled preview • scanner demo functi
on lerp(a, b, t) { return a + (b - a) * t; } const now = () => per
formance.now(); function clamp(n, a, b) { return Math.max(a, Math.
min(b, n)); } const now = () => performance.now(); // compiled pre
view • scanner demo function lerp(a, b, t) { return a + (b - a) * 
t; } function clamp(n, a, b) { return Math.max(a, Math.min(b, n));
 } function lerp(a, b, t) { return a + (b - a) * t; } function cla
mp(n, a, b) { return Math.max(a, Math.min(b, n)); } const SCAN_WID

// compiled preview • scanner demo const SCAN_WIDTH = 8; const MAX
_PARTICLES = 2500; function clamp(n, a, b) { return Math.max(a, Ma
th.min(b, n)); } function lerp(a, b, t) { return a + (b - a) * t; 
} const now = () => performance.now(); const now = () => performan
ce.now(); const now = () => performance.now(); // compiled preview
 • scanner demo const MAX_PARTICLES = 2500; const now = () => perf
ormance.now(); // compiled preview • scanner demo const MAX_PARTIC
LES = 2500; function clamp(n, a, b) { return Math.max(a, Math.min(
b, n)); } function clamp(n, a, b) { return Math.max(a, Math.min(b,
 n)); } const SCAN_WIDTH = 8; // compiled preview • scanner demo c
onst now = () => performance.now(); const MAX_PARTICLES = 2500; co
nst SCAN_WIDTH = 8; const MAX_PARTICLES = 2500; const SCAN_WIDTH =
 8; // compiled preview • scanner demo function lerp(a, b, t) { re
turn a + (b - a) * t; } const SCAN_WIDTH = 8; const SCAN_WIDTH = 8
; // compiled preview • scanner demo const now = () => performance
.now(); const SCAN_WIDTH = 8; const now = () => performance.now();
 const MAX_PARTICLES = 2500; const SCAN_WIDTH = 8; function clamp(
n, a, b) { return Math.max(a, Math.min(b, n)); } const MAX_PARTICL
ES = 2500; function lerp(a, b, t) { return a + (b - a) * t; } func

// compiled preview • scanner demo const SCAN_WIDTH = 8; const MAX
_PARTICLES = 2500; function clamp(n, a, b) { return Math.max(a, Ma
th.min(b, n)); } function lerp(a, b, t) { return a + (b - a) * t; 
} const now = () => performance.now(); const now = () => performan
ce.now(); function lerp(a, b, t) { return a + (b - a) * t; } const
 now = () => performance.now(); function clamp(n, a, b) { return M
ath.max(a, Math.min(b, n)); } const now = () => performance.now();
 const SCAN_WIDTH = 8; const now = () => performance.now(); const 
MAX_PARTICLES = 2500; const MAX_PARTICLES = 2500; const SCAN_WIDTH
 = 8; function lerp(a, b, t) { return a + (b - a) * t; } const now
 = () => performance.now(); const now = () => performance.now(); c
onst SCAN_WIDTH = 8; const SCAN_WIDTH = 8; function clamp(n, a, b)
 { return Math.max(a, Math.min(b, n)); } function clamp(n, a, b) {
 return Math.max(a, Math.min(b, n)); } function clamp(n, a, b) { r
eturn Math.max(a, Math.min(b, n)); } const MAX_PARTICLES = 2500; c
onst now = () => performance.now(); function clamp(n, a, b) { retu
rn Math.max(a, Math.min(b, n)); } // compiled preview • scanner de
mo function lerp(a, b, t) { return a + (b - a) * t; } const MAX_PA
RTICLES = 2500; function lerp(a, b, t) { return a + (b - a) * t; }

// compiled preview • scanner demo const SCAN_WIDTH = 8; const MAX
_PARTICLES = 2500; function clamp(n, a, b) { return Math.max(a, Ma
th.min(b, n)); } function lerp(a, b, t) { return a + (b - a) * t; 
} const now = () => performance.now(); const now = () => performan
ce.now(); function clamp(n, a, b) { return Math.max(a, Math.min(b,
 n)); } function clamp(n, a, b) { return Math.max(a, Math.min(b, n
)); } function lerp(a, b, t) { return a + (b - a) * t; } function 
lerp(a, b, t) { return a + (b - a) * t; } const SCAN_WIDTH = 8; co
nst MAX_PARTICLES = 2500; const SCAN_WIDTH = 8; const SCAN_WIDTH =
 8; const SCAN_WIDTH = 8; const SCAN_WIDTH = 8; const now = () => 
performance.now(); function clamp(n, a, b) { return Math.max(a, Ma
th.min(b, n)); } const MAX_PARTICLES = 2500; const now = () => per
formance.now(); const now = () => performance.now(); const now = (
) => performance.now(); const MAX_PARTICLES = 2500; function clamp
(n, a, b) { return Math.max(a, Math.min(b, n)); } const MAX_PARTIC
LES = 2500; // compiled preview • scanner demo const SCAN_WIDTH = 
8; const SCAN_WIDTH = 8; // compiled preview • scanner demo // com
piled preview • scanner demo function lerp(a, b, t) { return a + (
b - a) * t; } const now = () => performance.now(); function clamp(

// compiled preview • scanner demo const SCAN_WIDTH = 8; const MAX
_PARTICLES = 2500; function clamp(n, a, b) { return Math.max(a, Ma
th.min(b, n)); } function lerp(a, b, t) { return a + (b - a) * t; 
} const now = () => performance.now(); // compiled preview • scann
er demo const MAX_PARTICLES = 2500; const MAX_PARTICLES = 2500; //
 compiled preview • scanner demo function lerp(a, b, t) { return a
 + (b - a) * t; } const SCAN_WIDTH = 8; const now = () => performa
nce.now(); // compiled preview • scanner demo // compiled preview 
• scanner demo const SCAN_WIDTH = 8; const now = () => performance
.now(); const now = () => performance.now(); // compiled preview •
 scanner demo function clamp(n, a, b) { return Math.max(a, Math.mi
n(b, n)); } function clamp(n, a, b) { return Math.max(a, Math.min(
b, n)); } const SCAN_WIDTH = 8; const MAX_PARTICLES = 2500; const 
SCAN_WIDTH = 8; function lerp(a, b, t) { return a + (b - a) * t; }
 // compiled preview • scanner demo const MAX_PARTICLES = 2500; co
nst MAX_PARTICLES = 2500; function lerp(a, b, t) { return a + (b -
 a) * t; } function clamp(n, a, b) { return Math.max(a, Math.min(b
, n)); } const MAX_PARTICLES = 2500; // compiled preview • scanner
 demo // compiled preview • scanner demo const SCAN_WIDTH = 8; con

// compiled preview • scanner demo const SCAN_WIDTH = 8; const MAX
_PARTICLES = 2500; function clamp(n, a, b) { return Math.max(a, Ma
th.min(b, n)); } function lerp(a, b, t) { return a + (b - a) * t; 
} const now = () => performance.now(); // compiled preview • scann
er demo const SCAN_WIDTH = 8; const SCAN_WIDTH = 8; const SCAN_WID
TH = 8; function lerp(a, b, t) { return a + (b - a) * t; } const M
AX_PARTICLES = 2500; const MAX_PARTICLES = 2500; const now = () =>
 performance.now(); const now = () => performance.now(); // compil
ed preview • scanner demo const MAX_PARTICLES = 2500; const now = 
() => performance.now(); function lerp(a, b, t) { return a + (b - 
a) * t; } function clamp(n, a, b) { return Math.max(a, Math.min(b,
 n)); } const SCAN_WIDTH = 8; const MAX_PARTICLES = 2500; const no
w = () => performance.now(); // compiled preview • scanner demo co
nst now = () => performance.now(); function clamp(n, a, b) { retur
n Math.max(a, Math.min(b, n)); } const now = () => performance.now
(); function clamp(n, a, b) { return Math.max(a, Math.min(b, n)); 
} const SCAN_WIDTH = 8; const SCAN_WIDTH = 8; function lerp(a, b, 
t) { return a + (b - a) * t; } const SCAN_WIDTH = 8; const SCAN_WI
DTH = 8; function lerp(a, b, t) { return a + (b - a) * t; } // com

// compiled preview • scanner demo const SCAN_WIDTH = 8; const MAX
_PARTICLES = 2500; function clamp(n, a, b) { return Math.max(a, Ma
th.min(b, n)); } function lerp(a, b, t) { return a + (b - a) * t; 
} const now = () => performance.now(); // compiled preview • scann
er demo // compiled preview • scanner demo // compiled preview • s
canner demo const MAX_PARTICLES = 2500; function clamp(n, a, b) { 
return Math.max(a, Math.min(b, n)); } const MAX_PARTICLES = 2500; 
// compiled preview • scanner demo function lerp(a, b, t) { return
 a + (b - a) * t; } function clamp(n, a, b) { return Math.max(a, M
ath.min(b, n)); } // compiled preview • scanner demo // compiled p
review • scanner demo // compiled preview • scanner demo const SCA
N_WIDTH = 8; function lerp(a, b, t) { return a + (b - a) * t; } co
nst now = () => performance.now(); function lerp(a, b, t) { return
 a + (b - a) * t; } const SCAN_WIDTH = 8; // compiled preview • sc
anner demo const SCAN_WIDTH = 8; const SCAN_WIDTH = 8; const MAX_P
ARTICLES = 2500; function lerp(a, b, t) { return a + (b - a) * t; 
} function lerp(a, b, t) { return a + (b - a) * t; } function lerp
(a, b, t) { return a + (b - a) * t; } // compiled preview • scanne
r demo function clamp(n, a, b) { return Math.max(a, Math.min(b, n)

// compiled preview • scanner demo const SCAN_WIDTH = 8; const MAX
_PARTICLES = 2500; function clamp(n, a, b) { return Math.max(a, Ma
th.min(b, n)); } function lerp(a, b, t) { return a + (b - a) * t; 
} const now = () => performance.now(); // compiled preview • scann
er demo const now = () => performance.now(); const now = () => per
formance.now(); function lerp(a, b, t) { return a + (b - a) * t; }
 function clamp(n, a, b) { return Math.max(a, Math.min(b, n)); } f
unction clamp(n, a, b) { return Math.max(a, Math.min(b, n)); } fun
ction clamp(n, a, b) { return Math.max(a, Math.min(b, n)); } funct
ion lerp(a, b, t) { return a + (b - a) * t; } const MAX_PARTICLES 
= 2500; // compiled preview • scanner demo function clamp(n, a, b)
 { return Math.max(a, Math.min(b, n)); } // compiled preview • sca
nner demo const now = () => performance.now(); const now = () => p
erformance.now(); function lerp(a, b, t) { return a + (b - a) * t;
 } // compiled preview • scanner demo function lerp(a, b, t) { ret
urn a + (b - a) * t; } const now = () => performance.now(); const 
MAX_PARTICLES = 2500; function lerp(a, b, t) { return a + (b - a) 
* t; } const now = () => performance.now(); const now = () => perf
ormance.now(); const MAX_PARTICLES = 2500; const MAX_PARTICLES = 2

// compiled preview • scanner demo const SCAN_WIDTH = 8; const MAX
_PARTICLES = 2500; function clamp(n, a, b) { return Math.max(a, Ma
th.min(b, n)); } function lerp(a, b, t) { return a + (b - a) * t; 
} const now = () => performance.now(); const SCAN_WIDTH = 8; funct
ion lerp(a, b, t) { return a + (b - a) * t; } function clamp(n, a,
 b) { return Math.max(a, Math.min(b, n)); } const now = () => perf
ormance.now(); function clamp(n, a, b) { return Math.max(a, Math.m
in(b, n)); } function clamp(n, a, b) { return Math.max(a, Math.min
(b, n)); } // compiled preview • scanner demo function clamp(n, a,
 b) { return Math.max(a, Math.min(b, n)); } const SCAN_WIDTH = 8; 
// compiled preview • scanner demo const SCAN_WIDTH = 8; // compil
ed preview • scanner demo const MAX_PARTICLES = 2500; const now = 
() => performance.now(); const MAX_PARTICLES = 2500; const MAX_PAR
TICLES = 2500; const SCAN_WIDTH = 8; function lerp(a, b, t) { retu
rn a + (b - a) * t; } function clamp(n, a, b) { return Math.max(a,
 Math.min(b, n)); } const MAX_PARTICLES = 2500; const MAX_PARTICLE
S = 2500; // compiled preview • scanner demo const now = () => per
formance.now(); const now = () => performance.now(); function lerp
(a, b, t) { return a + (b - a) * t; } // compiled preview • scanne

// compiled preview • scanner demo const SCAN_WIDTH = 8; const MAX
_PARTICLES = 2500; function clamp(n, a, b) { return Math.max(a, Ma
th.min(b, n)); } function lerp(a, b, t) { return a + (b - a) * t; 
} const now = () => performance.now(); const SCAN_WIDTH = 8; funct
ion clamp(n, a, b) { return Math.max(a, Math.min(b, n)); } const M
AX_PARTICLES = 2500; // compiled preview • scanner demo const MAX_
PARTICLES = 2500; function clamp(n, a, b) { return Math.max(a, Mat
h.min(b, n)); } function clamp(n, a, b) { return Math.max(a, Math.
min(b, n)); } const MAX_PARTICLES = 2500; // compiled preview • sc
anner demo // compiled preview • scanner demo function lerp(a, b, 
t) { return a + (b - a) * t; } // compiled preview • scanner demo 
const now = () => performance.now(); // compiled preview • scanner
 demo // compiled preview • scanner demo function lerp(a, b, t) { 
return a + (b - a) * t; } function clamp(n, a, b) { return Math.ma
x(a, Math.min(b, n)); } function clamp(n, a, b) { return Math.max(
a, Math.min(b, n)); } function lerp(a, b, t) { return a + (b - a) 
* t; } const now = () => performance.now(); const now = () => perf
ormance.now(); const MAX_PARTICLES = 2500; const MAX_PARTICLES = 2
500; function clamp(n, a, b) { return Math.max(a, Math.min(b, n));

// compiled preview • scanner demo const SCAN_WIDTH = 8; const MAX
_PARTICLES = 2500; function clamp(n, a, b) { return Math.max(a, Ma
th.min(b, n)); } function lerp(a, b, t) { return a + (b - a) * t; 
} const now = () => performance.now(); const SCAN_WIDTH = 8; const
 MAX_PARTICLES = 2500; const SCAN_WIDTH = 8; const SCAN_WIDTH = 8;
 const MAX_PARTICLES = 2500; function lerp(a, b, t) { return a + (
b - a) * t; } // compiled preview • scanner demo const SCAN_WIDTH 
= 8; const now = () => performance.now(); // compiled preview • sc
anner demo const MAX_PARTICLES = 2500; // compiled preview • scann
er demo function clamp(n, a, b) { return Math.max(a, Math.min(b, n
)); } const SCAN_WIDTH = 8; function lerp(a, b, t) { return a + (b
 - a) * t; } // compiled preview • scanner demo // compiled previe
w • scanner demo const MAX_PARTICLES = 2500; const now = () => per
formance.now(); function clamp(n, a, b) { return Math.max(a, Math.
min(b, n)); } const MAX_PARTICLES = 2500; function clamp(n, a, b) 
{ return Math.max(a, Math.min(b, n)); } const now = () => performa
nce.now(); // compiled preview • scanner demo const MAX_PARTICLES 
= 2500; function clamp(n, a, b) { return Math.max(a, Math.min(b, n
)); } const now = () => performance.now(); const now = () => perfo

// compiled preview • scanner demo const SCAN_WIDTH = 8; const MAX
_PARTICLES = 2500; function clamp(n, a, b) { return Math.max(a, Ma
th.min(b, n)); } function lerp(a, b, t) { return a + (b - a) * t; 
} const now = () => performance.now(); const SCAN_WIDTH = 8; const
 SCAN_WIDTH = 8; // compiled preview • scanner demo function clamp
(n, a, b) { return Math.max(a, Math.min(b, n)); } const MAX_PARTIC
LES = 2500; function lerp(a, b, t) { return a + (b - a) * t; } fun
ction clamp(n, a, b) { return Math.max(a, Math.min(b, n)); } // co
mpiled preview • scanner demo function clamp(n, a, b) { return Mat
h.max(a, Math.min(b, n)); } // compiled preview • scanner demo con
st now = () => performance.now(); // compiled preview • scanner de
mo // compiled preview • scanner demo const SCAN_WIDTH = 8; const 
MAX_PARTICLES = 2500; const SCAN_WIDTH = 8; function clamp(n, a, b
) { return Math.max(a, Math.min(b, n)); } const SCAN_WIDTH = 8; //
 compiled preview • scanner demo // compiled preview • scanner dem
o const now = () => performance.now(); function lerp(a, b, t) { re
turn a + (b - a) * t; } const MAX_PARTICLES = 2500; function lerp(
a, b, t) { return a + (b - a) * t; } function lerp(a, b, t) { retu
rn a + (b - a) * t; } const now = () => performance.now(); // comp

// compiled preview • scanner demo const SCAN_WIDTH = 8; const MAX
_PARTICLES = 2500; function clamp(n, a, b) { return Math.max(a, Ma
th.min(b, n)); } function lerp(a, b, t) { return a + (b - a) * t; 
} const now = () => performance.now(); const SCAN_WIDTH = 8; // co
mpiled preview • scanner demo function lerp(a, b, t) { return a + 
(b - a) * t; } function lerp(a, b, t) { return a + (b - a) * t; } 
const SCAN_WIDTH = 8; const now = () => performance.now(); const S
CAN_WIDTH = 8; const now = () => performance.now(); const MAX_PART
ICLES = 2500; // compiled preview • scanner demo function clamp(n,
 a, b) { return Math.max(a, Math.min(b, n)); } // compiled preview
 • scanner demo function lerp(a, b, t) { return a + (b - a) * t; }
 const MAX_PARTICLES = 2500; const SCAN_WIDTH = 8; function clamp(
n, a, b) { return Math.max(a, Math.min(b, n)); } const now = () =>
 performance.now(); // compiled preview • scanner demo const SCAN_
WIDTH = 8; function lerp(a, b, t) { return a + (b - a) * t; } cons
t MAX_PARTICLES = 2500; const now = () => performance.now(); const
 now = () => performance.now(); const SCAN_WIDTH = 8; // compiled 
preview • scanner demo const SCAN_WIDTH = 8; const SCAN_WIDTH = 8;
 // compiled preview • scanner demo function lerp(a, b, t) { retur

// compiled preview • scanner demo const SCAN_WIDTH = 8; const MAX
_PARTICLES = 2500; function clamp(n, a, b) { return Math.max(a, Ma
th.min(b, n)); } function lerp(a, b, t) { return a + (b - a) * t; 
} const now = () => performance.now(); const MAX_PARTICLES = 2500;
 const now = () => performance.now(); function clamp(n, a, b) { re
turn Math.max(a, Math.min(b, n)); } const now = () => performance.
now(); const SCAN_WIDTH = 8; const now = () => performance.now(); 
function lerp(a, b, t) { return a + (b - a) * t; } const now = () 
=> performance.now(); const SCAN_WIDTH = 8; // compiled preview • 
scanner demo // compiled preview • scanner demo // compiled previe
w • scanner demo const SCAN_WIDTH = 8; function clamp(n, a, b) { r
eturn Math.max(a, Math.min(b, n)); } const now = () => performance
.now(); const now = () => performance.now(); const MAX_PARTICLES =
 2500; // compiled preview • scanner demo const MAX_PARTICLES = 25
00; const SCAN_WIDTH = 8; const now = () => performance.now(); // 
compiled preview • scanner demo const MAX_PARTICLES = 2500; const 
now = () => performance.now(); const MAX_PARTICLES = 2500; const M
AX_PARTICLES = 2500; const MAX_PARTICLES = 2500; function lerp(a, 
b, t) { return a + (b - a) * t; } function clamp(n, a, b) { return

View All Components

Get Started in Seconds

Install components using the shadcn CLI

Installation

Add components to your project with a single command

1. Install a component

pnpm dlx shadcn@latest add pattern-carousel --registry https://pluto-ui.dev/r

pnpm dlx shadcn@latest add pattern-carousel --registry https://pluto-ui.dev/r

npx shadcn@latest add pattern-carousel --registry https://pluto-ui.dev/r

npx shadcn@latest add pattern-carousel --registry https://pluto-ui.dev/r

yarn shadcn@latest add pattern-carousel --registry https://pluto-ui.dev/r

yarn shadcn@latest add pattern-carousel --registry https://pluto-ui.dev/r

bunx --bun shadcn@latest add pattern-carousel --registry https://pluto-ui.dev/r

bunx --bun shadcn@latest add pattern-carousel --registry https://pluto-ui.dev/r

2. Import and use

import { PatternCarousel } from "@/components/pluto-ui/pattern-carousel"

import { PatternCarousel } from "@/components/pluto-ui/pattern-carousel"

Build BeautifulUI Components

Featured Components

Glitch Effect

Get Started in Seconds

Build Beautiful
UI Components