Getting Started
Components
Text Animations
Backgrounds
(components.json)
npx shadcn add
Installation
pnpm dlx shadcn@latest add @gammaui/shadcn-animated-ui
global.css
.shadcn {
offset-anchor: 10px 0px;
animation: shadcn-line-animation;
animation-iteration-count: infinite;
animation-timing-function: cubic-bezier(0.75, -0.01, 0, 0.99);
}
.shadcn-line-1 {
offset-path: path("M 35 14 h 25 q 5 0 5 5 v 23 q 0 5 5 5 h 15");
animation-duration: 4s;
animation-delay: 1s;
}
.shadcn-line-2 {
offset-path: path("M 30 50 h 52");
animation-duration: 3.5s;
animation-delay: 1.5s;
}
.shadcn-line-3 {
offset-path: path("M 36.3 87 h 24 q 5 0 5 -5 v -24 q 0 -5 5 -5 h 15");
animation-duration: 4.5s;
animation-delay: 2s;
}
.compBox {
animation: comp-box-spin 4.5s ease-in-out infinite;
}
@keyframes comp-box-spin {
0% { transform: rotate(0deg); }
50% { transform: rotate(8deg); }
100% { transform: rotate(0deg); }
}
@keyframes shadcn-line-animation {
0% { offset-distance: 0%; }
100% { offset-distance: 100%; }
}
.shadcn {
offset-anchor: 10px 0px;
animation: shadcn-line-animation;
animation-iteration-count: infinite;
animation-timing-function: cubic-bezier(0.75, -0.01, 0, 0.99);
}
.shadcn-line-1 {
offset-path: path("M 35 14 h 25 q 5 0 5 5 v 23 q 0 5 5 5 h 15");
animation-duration: 4s;
animation-delay: 1s;
}
.shadcn-line-2 {
offset-path: path("M 30 50 h 52");
animation-duration: 3.5s;
animation-delay: 1.5s;
}
.shadcn-line-3 {
offset-path: path("M 36.3 87 h 24 q 5 0 5 -5 v -24 q 0 -5 5 -5 h 15");
animation-duration: 4.5s;
animation-delay: 2s;
}
.compBox {
animation: comp-box-spin 4.5s ease-in-out infinite;
}
@keyframes comp-box-spin {
0% { transform: rotate(0deg); }
50% { transform: rotate(8deg); }
100% { transform: rotate(0deg); }
}
@keyframes shadcn-line-animation {
0% { offset-distance: 0%; }
100% { offset-distance: 100%; }
}
Props
| Prop | Type | Default | Description |
|---|---|---|---|
className | string | — | Wrapper class |
circleText | string | "Registry" | Text inside the circle |
triangleText | string | "AI" | Text inside triangle |
diamondText | string | "Registry" | Bottom diamond text |
animatedText | string | "npx shadcn add" | Glowing command text |
animatedBoxText | string | "Sidebar" | Box label text |
hintText | string | "(components.json)" | Small hint under box |
appName | string | "Your App" | App name text |