Components
Loading preview...
An svg filter component that creates a gooey effect on the background. Can be used to create fluid interfaces or rounded-at-all-corners panels. Limited support for Safari.
@danielpetho
npx shadcn@latest add https://21st.dev/r/danielpetho/gooey-filterimport { GooeyFilter } from "@/components/ui/gooey-filter"
const GooeyDemo = () => {
return (
<div className="relative min-h-[400px] flex items-center justify-center bg-tertiary rounded-xl p-8">
<GooeyFilter id="goo" strength={12} />
<div
className="relative flex gap-4"
style={{ filter: 'url(#goo)' }}
>
<div
className="w-20 h-20 rounded-full"
style={{
background: 'linear-gradient(45deg, #FF3366, #FF6B6B)',
boxShadow: '0 4px 15px rgba(255, 51, 102, 0.4)',
animation: 'moveLeft 2s ease-in-out infinite'
}}
/>
<div
className="w-20 h-20 rounded-full"
style={{
background: 'linear-gradient(45deg, #4CAF50, #8BC34A)',
boxShadow: '0 4px 15px rgba(76, 175, 80, 0.4)',
animation: 'moveCenter 2s ease-in-out infinite'
}}
/>
<div
className="w-20 h-20 rounded-full"
style={{
background: 'linear-gradient(45deg, #2196F3, #03A9F4)',
boxShadow: '0 4px 15px rgba(33, 150, 243, 0.4)',
animation: 'moveRight 2s ease-in-out infinite'
}}
/>
</div>
<style jsx>{`
@keyframes moveLeft {
0%, 100% { transform: translate(0, 0); }
50% { transform: translate(40px, 0); }
}
@keyframes moveCenter {
0%, 100% { transform: translate(0, 0); }
50% { transform: translate(0, -20px); }
}
@keyframes moveRight {
0%, 100% { transform: translate(0, 0); }
50% { transform: translate(-40px, 0); }
}
`}</style>
</div>
)
}
export { GooeyDemo }