SVG Gradient Bento by Fancy Components. SVG Gradient Bento by Fancy Components. Includes the original animated component and authored usage example. Try the live React demo, inspect the original source, and install from PODIE.
React · Tailwind CSS · MIT license · Original registry
Added to PODIE · Catalog updated · Page updated
Installation and usage
The published examples target React 19 and Tailwind CSS 4. See the recorded installation tests and their limits; verify compatibility in your own project.
01 — Set up your project
First component? Initialize shadcn once.
pnpm dlx shadcn@latest init02 — Install the component
pnpm dlx shadcn@latest add https://podie.dev/r/fancy--animated-gradient.json03 — Add it to your interface
Import the component from the path created by the installer.
'use client';
import EffectAnimatedGradient from '@/components/fancy/animated-gradient/demo';
export default function Example() {
return (
<div style={{ width: '100%', height: '100vh' }}>
<EffectAnimatedGradient />
</div>
);
}
Example styling
These styles belong to the demo wrapper. Add them to your stylesheet to reproduce this example.
.expanded-demo { position:relative; display:flex; align-items:center; justify-content:center; width:360px; max-width:100%; min-height:180px; padding:15px; isolation:isolate }
.demo-stack { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:22px }
.demo-action { display:inline-flex; align-items:center; justify-content:center; gap:8px; border:1px solid var(--border, #e5e5e5); border-radius:8px; background:var(--muted, #f5f5f5); color:var(--foreground, #171717); padding:10px 16px; font-size:13px; cursor:pointer }
.demo-action:hover { background:var(--accent, #eee) }
.demo-tile { padding:16px 22px; background:var(--muted, #f5f5f5); border:1px solid var(--border, #e5e5e5); border-radius:12px; color:var(--foreground, #171717); font-size:15px }
.demo-art { display:flex; align-items:center; justify-content:center; min-height:140px; padding:30px; width:280px; max-width:100%; background:var(--muted, #f5f5f5); border:1px solid var(--border, #e5e5e5); border-radius:16px; text-align:center; font-size:25px; letter-spacing:-.7px; color:var(--foreground, #171717) }
.demo-art.h-full { height:100%; min-height:0 }
.demo-gradient { position:relative; background:linear-gradient(145deg,#b6c7d1,#d5bcd6 50%,#e2d5bb); border-radius:16px; padding:20px; color:#222 }
.demo-gradient .demo-tile { background:#ffffff48 }
.demo-scene { position:relative; width:360px; height:260px; max-width:100%; overflow:hidden; border-radius:12px }
.demo-scene-label { position:absolute; left:0; right:0; top:50%; transform:translateY(-50%); text-align:center; font-size:25px; line-height:1.3; font-weight:500; letter-spacing:-.7px; z-index:1; pointer-events:none }
.demo-dot { display:block; width:60px; height:60px; border-radius:50%; background:var(--foreground, #171717) }
.expanded-demo:has(.codrops-preview) { width:100%; max-width:none; height:100%; padding:0 }
.codrops-preview { width:100%; height:100%; border:0; border-radius:inherit }Dependencies and distribution
clsx@^2.1.1, tailwind-merge@^2.3.0 The CLI installs declared dependencies. React is a project prerequisite; scenes may include bundled libraries with their own notices.
By Fancy Components · MIT license. Original component source and license included.