yusufipek/distromatch
1
0
Fork 0
mirror of https://github.com/yusufipk/distromatch.git synced 2026-09-12 02:56:09 +00:00
Code Issues Packages Projects Releases Wiki Activity

Enhance the application's visual appeal with refined animations and effects

Browse Source 
Update UI components including ActionButtons, CardStack, DynamicBackground, EndOfDeck, Header, and SwipeCard to incorporate more visually engaging animations, gradients, and effects, while also adjusting button positioning for improved user experience.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: e522d728-b28a-437f-b576-83935afe7ea0
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Event-Id: 0e0edafc-30e9-4e23-88d0-1ecbc1922137
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/55e426a8-5a2b-421b-8bd4-30481ae0063b/e522d728-b28a-437f-b576-83935afe7ea0/m8j6ju0
Replit-Helium-Checkpoint-Created: true
This commit is contained in:
yusufipk
2025-12-17 13:40:11 +00:00
parent b1ca5c29fe
commit 59f1f2bd99
6 changed files with 345 additions and 137 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/components/DynamicBackground.tsx
+57 -9
View File
@@ -10,14 +10,62 @@ export default function DynamicBackground({ colors }: DynamicBackgroundProps) {
: ['#6B46C1', '#4F46E5', '#2563EB'];
return (
<motion.div
className="fixed inset-0 -z-10"
animate={{
background: `radial-gradient(ellipse at center, ${gradientColors[0]}30 0%, ${gradientColors[1]}20 50%, ${gradientColors[2] || gradientColors[0]}10 100%)`,
}}
transition={{ duration: 0.5, ease: 'easeInOut' }}
>
<div className="absolute inset-0 bg-background/80 backdrop-blur-3xl" />
</motion.div>
<div className="fixed inset-0 -z-10 overflow-hidden">
<div className="absolute inset-0 bg-[#0a0a0f]" />
<motion.div
className="absolute inset-0"
animate={{
background: `radial-gradient(ellipse 80% 50% at 50% 50%, ${gradientColors[0]}25 0%, transparent 50%)`,
}}
transition={{ duration: 0.8, ease: 'easeInOut' }}
/>
<motion.div
className="absolute -top-1/2 -left-1/2 h-full w-full"
animate={{
background: `radial-gradient(circle at center, ${gradientColors[1]}15 0%, transparent 40%)`,
}}
transition={{ duration: 0.8, ease: 'easeInOut' }}
/>
<motion.div
className="absolute -bottom-1/2 -right-1/2 h-full w-full"
animate={{
background: `radial-gradient(circle at center, ${gradientColors[2] || gradientColors[0]}15 0%, transparent 40%)`,
}}
transition={{ duration: 0.8, ease: 'easeInOut' }}
/>
<div className="absolute inset-0 bg-[url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI1IiBoZWlnaHQ9IjUiPgo8cmVjdCB3aWR0aD0iNSIgaGVpZ2h0PSI1IiBmaWxsPSIjMDAwIj48L3JlY3Q+CjxyZWN0IHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9IiMxMTEiPjwvcmVjdD4KPC9zdmc+')] opacity-30" />
<div className="absolute top-20 left-20 h-96 w-96 rounded-full bg-purple-500/10 blur-3xl" />
<div className="absolute bottom-20 right-20 h-96 w-96 rounded-full bg-cyan-500/10 blur-3xl" />
<motion.div
className="absolute top-1/4 right-1/4 h-2 w-2 rounded-full bg-white/30"
animate={{
y: [0, -20, 0],
opacity: [0.3, 0.8, 0.3],
}}
transition={{ duration: 3, repeat: Infinity }}
/>
<motion.div
className="absolute top-1/3 left-1/4 h-1 w-1 rounded-full bg-purple-400/50"
animate={{
y: [0, -15, 0],
opacity: [0.5, 1, 0.5],
}}
transition={{ duration: 2.5, repeat: Infinity, delay: 0.5 }}
/>
<motion.div
className="absolute bottom-1/3 right-1/3 h-1.5 w-1.5 rounded-full bg-cyan-400/40"
animate={{
y: [0, -25, 0],
opacity: [0.4, 0.9, 0.4],
}}
transition={{ duration: 4, repeat: Infinity, delay: 1 }}
/>
</div>
);
}