ciphera-net/pulse
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 15 Wiki Activity

feat: add floating animation to dashboard preview and implement 3D transform utilities for enhanced visual effects

Browse Source
This commit is contained in:
Usman Baig
2026-01-30 15:00:30 +01:00
parent 409934c75f
commit a2a7bbe96f
2 changed files with 45 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
app/page.tsx
View File

@@ -17,21 +17,24 @@ function DashboardPreview() {
{/* * Glow behind the image */} {/* * Glow behind the image */}
<div className="absolute inset-0 bg-brand-orange/20 blur-[100px] -z-10 rounded-full opacity-50" /> <div className="absolute inset-0 bg-brand-orange/20 blur-[100px] -z-10 rounded-full opacity-50" />
{/* * The Dashboard Image Container */} {/* * Floating Wrapper */}
<div className="relative rounded-xl border border-neutral-200/50 dark:border-neutral-800/50 bg-neutral-900/50 backdrop-blur-sm shadow-2xl transform rotate-x-12 hover:rotate-x-0 transition-transform duration-700 ease-out overflow-hidden"> <div className="animate-float">
{/* * Header of the fake browser window */} {/* * The Dashboard Image Container */}
<div className="h-8 bg-neutral-800/50 border-b border-white/5 flex items-center px-4 gap-2"> <div className="relative rounded-xl border border-neutral-200/50 dark:border-neutral-800/50 bg-neutral-900/50 backdrop-blur-sm shadow-2xl transform rotate-x-12 hover:rotate-x-0 transition-transform duration-700 ease-out overflow-hidden">
<div className="w-3 h-3 rounded-full bg-red-500/50" /> {/* * Header of the fake browser window */}
<div className="w-3 h-3 rounded-full bg-yellow-500/50" /> <div className="h-8 bg-neutral-800/50 border-b border-white/5 flex items-center px-4 gap-2">
<div className="w-3 h-3 rounded-full bg-green-500/50" /> <div className="w-3 h-3 rounded-full bg-red-500/50" />
</div> <div className="w-3 h-3 rounded-full bg-yellow-500/50" />
<div className="w-3 h-3 rounded-full bg-green-500/50" />
</div>
{/* * Placeholder for actual dashboard screenshot - replace src with real image later */} {/* * Placeholder for actual dashboard screenshot - replace src with real image later */}
<div className="aspect-video bg-neutral-900 flex items-center justify-center text-neutral-700"> <div className="aspect-video bg-neutral-900 flex items-center justify-center text-neutral-700">
<div className="text-center"> <div className="text-center">
<BarChartIcon className="w-16 h-16 mx-auto mb-4 opacity-20" /> <BarChartIcon className="w-16 h-16 mx-auto mb-4 opacity-20" />
<p>Dashboard Preview</p> <p>Dashboard Preview</p>
</div> </div>
</div>
</div> </div>
</div> </div>
</div> </div>

27
styles/globals.css
View File

@@ -52,4 +52,31 @@
.glow-orange { .glow-orange {
box-shadow: 0 0 40px -10px rgba(253, 94, 15, 0.5); box-shadow: 0 0 40px -10px rgba(253, 94, 15, 0.5);
} }
/* * 3D Transform Utilities */
.perspective-1000 {
perspective: 1000px;
}
.rotate-x-12 {
transform: rotateX(12deg);
}
.rotate-x-0 {
transform: rotateX(0deg);
}
.transform-style-3d {
transform-style: preserve-3d;
}
/* * Animations */
@keyframes float {
0%, 100% { transform: translateY(0px); }
50% { transform: translateY(-20px); }
}
.animate-float {
animation: float 6s ease-in-out infinite;
}
} }