From 0b5a590481c536d3a60ba5c3506035ce8e2361e9 Mon Sep 17 00:00:00 2001
From: nitin mohan <mohannitin494@gmail.com>
Date: Mon, 20 Jul 2026 21:54:23 +0530
Subject: [PATCH] added dashboard card revelling animation

---
 app/dashboard/page.tsx                | 38 ++++-----------------
 components/dashboard/auth-overlay.tsx | 49 ++++++++++++++++++---------
 2 files changed, 39 insertions(+), 48 deletions(-)

diff --git a/app/dashboard/page.tsx b/app/dashboard/page.tsx
index 43e0325..f8ca686 100644
--- a/app/dashboard/page.tsx
+++ b/app/dashboard/page.tsx
@@ -62,13 +62,7 @@ export default function DashboardPage() {
       <div className="mx-auto max-w-7xl px-6 lg:px-8">
         <div className="flex flex-col gap-8">
           {/* 1. Premium Welcome Banner (Full Width) */}
-          <motion.div
-            initial={{ opacity: 0, y: 30, scale: 0.98 }}
-            whileInView={{ opacity: 1, y: 0, scale: 1 }}
-            viewport={{ once: true, margin: "-50px" }}
-            transition={{ duration: 0.7, ease: [0.25, 1, 0.5, 1] }}
-            className="relative w-full overflow-hidden rounded-[24px] border border-slate-200/60 bg-white/80 dark:border-blue-400/15 dark:bg-slate-900/60 dark:bg-gradient-to-b dark:from-white/[0.02] dark:to-transparent backdrop-blur-xl p-8 shadow-[0_8px_30px_rgb(0,0,0,0.04)] dark:shadow-[0_8px_32px_0_rgba(0,0,0,0.2)] group transition-all duration-300 dark:hover:border-blue-400/30"
-          >
+          <div className="relative w-full overflow-hidden rounded-[24px] border border-slate-200/60 bg-white/80 dark:border-blue-400/15 dark:bg-slate-900/60 dark:bg-gradient-to-b dark:from-white/[0.02] dark:to-transparent backdrop-blur-xl p-8 shadow-[0_8px_30px_rgb(0,0,0,0.04)] dark:shadow-[0_8px_32px_0_rgba(0,0,0,0.2)] group transition-all duration-300 dark:hover:border-blue-400/30">
             {/* Ambient Background Glow (Dark Mode only) */}
             <div className="hidden dark:block absolute inset-0 -z-10 opacity-[0.12] transition-opacity duration-500 group-hover:opacity-[0.24]">
               <div className="absolute left-1/2 top-0 -translate-x-1/2 -translate-y-1/2 h-[300px] w-[500px] rounded-full bg-cyan-500/24 blur-[100px]" />
@@ -160,21 +154,11 @@ export default function DashboardPage() {
                 </div>
               </div>
             </div>
-          </motion.div>
+          </div>
 
           <div className="grid grid-cols-1 lg:grid-cols-12 gap-8 items-stretch">
             {/* 2. Continue Learning Section (Left side) */}
-            <motion.div
-              initial={{ opacity: 0, y: 30, scale: 0.96 }}
-              whileInView={{ opacity: 1, y: 0, scale: 1 }}
-              viewport={{ once: true, margin: "-50px" }}
-              transition={{
-                duration: 0.6,
-                delay: 0.1,
-                ease: [0.25, 1, 0.5, 1],
-              }}
-              className="col-span-1 lg:col-span-7 flex flex-col gap-5"
-            >
+            <div className="col-span-1 lg:col-span-7 flex flex-col gap-5">
               <div className="flex items-center justify-between px-1 shrink-0">
                 <h2 className="text-xl font-bold tracking-tight text-foreground">
                   Start your journey
@@ -212,20 +196,10 @@ export default function DashboardPage() {
                   isPreviewing={isPreviewing}
                 />
               </div>
-            </motion.div>
+            </div>
 
             {/* 3. Quick Actions (Right side grid) */}
-            <motion.div
-              initial={{ opacity: 0, y: 30, scale: 0.96 }}
-              whileInView={{ opacity: 1, y: 0, scale: 1 }}
-              viewport={{ once: true, margin: "-50px" }}
-              transition={{
-                duration: 0.6,
-                delay: 0.2,
-                ease: [0.25, 1, 0.5, 1],
-              }}
-              className="col-span-1 lg:col-span-5 flex flex-col gap-5"
-            >
+            <div className="col-span-1 lg:col-span-5 flex flex-col gap-5">
               <div className="flex items-center justify-between px-1 shrink-0">
                 <h2 className="text-xl font-bold tracking-tight text-foreground">
                   Quick Actions
@@ -265,7 +239,7 @@ export default function DashboardPage() {
                   isPreviewing={isPreviewing}
                 />
               </div>
-            </motion.div>
+            </div>
           </div>
         </div>
       </div>
diff --git a/components/dashboard/auth-overlay.tsx b/components/dashboard/auth-overlay.tsx
index 3486f19..672f2cf 100644
--- a/components/dashboard/auth-overlay.tsx
+++ b/components/dashboard/auth-overlay.tsx
@@ -1,7 +1,8 @@
 "use client";
 
 import Link from "next/link";
-import { motion } from "framer-motion";
+import { useRef } from "react";
+import { motion, useScroll, useTransform, useSpring } from "framer-motion";
 import {
   Lock,
   UserPlus,
@@ -25,26 +26,42 @@ export function DashboardAuthOverlay({
 }: {
   onPreview?: () => void;
 }) {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const { scrollYProgress } = useScroll({
+    target: containerRef,
+    offset: ["start 90%", "start 10%"],
+  });
+
+  // Snappy, premium spring (PhonePe style)
+  const smoothProgress = useSpring(scrollYProgress, {
+    stiffness: 300,
+    damping: 30,
+    restDelta: 0.001,
+  });
+
+  // Drop down from slightly above, scale up, and fold in 3D
+  const scale = useTransform(smoothProgress, [0, 1], [0.6, 1]);
+  const y = useTransform(smoothProgress, [0, 1], [-60, 0]);
+  const rotateX = useTransform(smoothProgress, [0, 1], [15, 0]);
+  const opacity = useTransform(smoothProgress, [0, 1], [0, 1]);
+
   return (
-    <motion.div
-      initial={{ opacity: 0 }}
-      animate={{ opacity: 1 }}
-      exit={{ opacity: 0 }}
-      transition={{ duration: 0.6, ease: [0.25, 1, 0.5, 1] }}
-      className="absolute inset-0 z-50"
-    >
-      {/* Frosted Backdrop — lighter blur so dashboard content is recognizable */}
-      <div className="absolute inset-0 bg-white/50 backdrop-blur-[6px] dark:bg-[#0a0a12]/55 dark:backdrop-blur-[8px]" />
+    <motion.div ref={containerRef} className="absolute inset-0 z-50">
+      {/* Frosted Backdrop — opacity linked to scroll */}
+      <motion.div
+        style={{ opacity }}
+        className="absolute inset-0 bg-white/50 backdrop-blur-[6px] dark:bg-[#0a0a12]/55 dark:backdrop-blur-[8px]"
+      />
 
       {/* Wrapper: Sticky scrolling on Mobile, Static absolute centering on Desktop */}
       <div className="absolute inset-x-0 top-16 bottom-16 sm:inset-0 pointer-events-none">
-        <div className="sticky top-[15vh] translate-y-0 sm:absolute sm:top-1/2 sm:-translate-y-1/2 flex w-full justify-center px-4 pointer-events-auto">
-          {/* Floating Card */}
+        <div
+          style={{ perspective: "1000px" }}
+          className="sticky top-[15vh] translate-y-0 sm:absolute sm:top-1/2 sm:-translate-y-1/2 flex w-full justify-center px-4 pointer-events-auto"
+        >
+          {/* Floating Card - Scale, Opacity, Y, and 3D Rotate linked to smooth scroll */}
           <motion.div
-            initial={{ opacity: 0, y: 24, scale: 0.96 }}
-            animate={{ opacity: 1, y: 0, scale: 1 }}
-            exit={{ opacity: 0, y: -20, scale: 0.95 }}
-            transition={{ duration: 0.7, delay: 0.15, ease: [0.25, 1, 0.5, 1] }}
+            style={{ scale, opacity, y, rotateX }}
             className="relative w-full max-w-md overflow-hidden rounded-2xl border border-slate-200/70 bg-white/95 shadow-[0_20px_60px_-12px_rgba(0,0,0,0.15)] backdrop-blur-xl dark:border-white/[0.08] dark:bg-[#111119]/95 dark:shadow-[0_20px_60px_-12px_rgba(0,0,0,0.6)]"
           >
             {/* Top Gradient Accent Line */}