Components
Loading preview...
An animated multi-color gradient background effect with SVG elements. Animated gradients can be achieved with many different techniques (shaders, CSS gradients, etc.), this component uses simple SVG circles with a blur filter to create the effect. 1. For each color in the colors prop array, the component creates an SVG circle element 2. Each circle is given a random initial position using percentage values 3. The movement of each circle is controlled by 8 CSS variables that define target positions: --tx-1 and --ty-1 for the first position --tx-2 and --ty-2 for the second position And so on for positions 3 and 4 4. These variables are set to random values between -0.5 and 0.5.
@danielpetho
npx shadcn@latest add https://21st.dev/r/danielpetho/animated-gradient-with-svgimport React from "react"
import { motion } from "framer-motion"
import { AnimatedGradient } from "@/components/ui/animated-gradient-with-svg"
interface BentoCardProps {
title: string
value: string | number
subtitle?: string
colors: string[]
delay: number
}
const BentoCard: React.FC<BentoCardProps> = ({
title,
value,
subtitle,
colors,
delay,
}) => {
const container = {
hidden: { opacity: 0 },
show: {
opacity: 1,
transition: {
staggerChildren: 0.1,
delayChildren: delay + 0.3,
},
},
}
const item = {
hidden: { opacity: 0 },
show: { opacity: 1, transition: { duration: 0.5 } },
}
return (
<motion.div
className="relative overflow-hidden h-full bg-background dark:bg-background/50" // Изменено здесь
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
transition={{ duration: 0.5, delay }}
>
<AnimatedGradient colors={colors} speed={0.05} blur="medium" />
<motion.div
className="relative z-10 p-3 sm:p-5 md:p-8 text-foreground backdrop-blur-sm" // Добавлен backdrop-blur
variants={container}
initial="hidden"
animate="show"
>
<motion.h3
className="text-sm sm:text-base md:text-lg text-foreground"
variants={item}
>
{title}
</motion.h3>
<motion.p
className="text-2xl sm:text-4xl md:text-5xl font-medium mb-4 text-foreground"
variants={item}
>
{value}
</motion.p>
{subtitle && (
<motion.p
className="text-sm text-foreground/80"
variants={item}
>
{subtitle}
</motion.p>
)}
</motion.div>
</motion.div>
)
}
const AnimatedGradientDemo: React.FC = () => {
return (
<div className="w-full bg-background h-full">
<div className="grid grid-cols-1 md:grid-cols-3 grow h-full">
<div className="md:col-span-2">
<BentoCard
title="Total Revenue"
value="$1,234,567"
subtitle="15% increase from last month"
colors={["#3B82F6", "#60A5FA", "#93C5FD"]}
delay={0.2}
/>
</div>
<BentoCard
title="New Users"
value={1234}
subtitle="Daily signups"
colors={["#60A5FA", "#34D399", "#93C5FD"]}
delay={0.4}
/>
<BentoCard
title="Conversion Rate"
value="3.45%"
subtitle="0.5% increase from last week"
colors={["#F59E0B", "#A78BFA", "#FCD34D"]}
delay={0.6}
/>
<div className="md:col-span-2">
<BentoCard
title="Active Projects"
value={42}
subtitle="8 completed this month"
colors={["#3B82F6", "#A78BFA", "#FBCFE8"]}
delay={0.8}
/>
</div>
<div className="md:col-span-3">
<BentoCard
title="Customer Satisfaction"
value="4.8/5"
subtitle="Based on 1,000+ reviews from verified customers across all product categories"
colors={["#EC4899", "#F472B6", "#3B82F6"]}
delay={1}
/>
</div>
</div>
</div>
)
}
export { AnimatedGradientDemo }