feat: add 3D rotating package animation to sign-in verification

Replace the spinner loading state on the sign-in page with a 3D
verification scene featuring a rotating package box with gentle
emissive pulse and float animation. Uses react-three-fiber with
bloom post-processing. Reduced motion users see the static fallback.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Author: ugurkocde

app/auth/signin/page.tsx

@@ -5,6 +5,8 @@ import { useEffect, useState, Suspense, useCallback } from 'react';
 import Link from 'next/link';
 import { motion, AnimatePresence, useReducedMotion } from 'framer-motion';
 import { Shield, Loader2, Package, ChevronDown, Copy, Check, AlertTriangle, Users, Boxes, ArrowLeft } from 'lucide-react';
+import dynamic from 'next/dynamic';
+import { VerificationSceneFallback } from '@/components/auth/verification-scene/VerificationSceneFallback';
 import { Button } from '@/components/ui/button';
 import { useMicrosoftAuth } from '@/hooks/useMicrosoftAuth';
 import { getAdminConsentUrl } from '@/lib/msal-config';
@@ -16,6 +18,11 @@ import { FadeIn } from '@/components/landing/animations/FadeIn';
 import { CountUp } from '@/components/landing/animations/CountUp';
 import { springPresets } from '@/lib/animations/variants';
 
+const VerificationScene = dynamic(
+  () => import('@/components/auth/verification-scene/VerificationScene').then(m => m.VerificationScene),
+  { ssr: false, loading: () => <VerificationSceneFallback /> }
+);
+
 // Microsoft logo SVG component -- colors per official brand spec
 function MicrosoftLogo({ className }: { className?: string }) {
   return (
@@ -125,24 +132,14 @@ function SignInContent() {
 
   // Show loading state while checking auth or verifying consent
   if (isAuthenticated || isVerifyingConsent) {
+    const statusText = isVerifyingConsent ? 'Verifying permissions...' : 'Redirecting to your dashboard...';
     return (
       <div className="flex min-h-screen items-center justify-center bg-bg-deepest">
-        <motion.div
-          className="flex flex-col items-center gap-6"
-          initial={shouldReduceMotion ? {} : { opacity: 0, scale: 0.95 }}
-          animate={{ opacity: 1, scale: 1 }}
-          transition={{ duration: 0.4 }}
-        >
-          <div className="relative">
-            <div className="absolute inset-0 bg-accent-cyan/10 rounded-full blur-2xl animate-pulse" />
-            <div className="relative w-16 h-16 bg-gradient-to-br from-accent-cyan to-accent-violet rounded-2xl flex items-center justify-center shadow-glow-cyan">
-              <Loader2 className="h-7 w-7 animate-spin text-white" />
-            </div>
-          </div>
-          <p className="text-text-muted text-sm font-medium">
-            {isVerifyingConsent ? 'Verifying permissions...' : 'Redirecting to your dashboard...'}
-          </p>
-        </motion.div>
+        {shouldReduceMotion ? (
+          <VerificationSceneFallback statusText={statusText} />
+        ) : (
+          <VerificationScene statusText={statusText} />
+        )}
       </div>
     );
   }

components/auth/verification-scene/PackageBox.tsx

@@ -0,0 +1,90 @@
+'use client';
+
+import { useRef } from 'react';
+import { useFrame } from '@react-three/fiber';
+import { RoundedBox, Float } from '@react-three/drei';
+import * as THREE from 'three';
+
+export function PackageBox() {
+  const groupRef = useRef<THREE.Group>(null!);
+  const materialRef = useRef<THREE.MeshStandardMaterial>(null!);
+  const edgeMaterialRef = useRef<THREE.MeshBasicMaterial>(null!);
+  const materialized = useRef(false);
+
+  useFrame(({ clock }) => {
+    const elapsed = clock.elapsedTime;
+    const group = groupRef.current;
+    const mat = materialRef.current;
+
+    if (!group || !mat) return;
+
+    // Materialize: scale from 0 to 1 over first 0.8s
+    if (!materialized.current) {
+      if (elapsed < 0.8) {
+        const progress = elapsed / 0.8;
+        const eased = 1 - Math.pow(1 - progress, 3);
+        group.scale.setScalar(eased);
+      } else {
+        group.scale.setScalar(1);
+        materialized.current = true;
+      }
+    }
+
+    // Continuous slow Y-axis rotation (~0.3 rad/s)
+    group.rotation.y = elapsed * 0.3;
+
+    // Gentle emissive pulse: sine-wave between 0.15 and 0.35
+    mat.emissiveIntensity = 0.25 + Math.sin(elapsed * 1.5) * 0.1;
+
+    // Update edge opacity in sync
+    if (edgeMaterialRef.current) {
+      edgeMaterialRef.current.opacity = 0.2 + mat.emissiveIntensity * 0.3;
+    }
+  });
+
+  return (
+    <Float
+      speed={1.5}
+      rotationIntensity={0.1}
+      floatIntensity={0.3}
+      floatingRange={[-0.05, 0.05]}
+    >
+      <group ref={groupRef} scale={0}>
+        {/* Main box */}
+        <RoundedBox args={[1.2, 1.2, 1.2]} radius={0.12} smoothness={4}>
+          <meshStandardMaterial
+            ref={materialRef}
+            color="#0891b2"
+            metalness={0.3}
+            roughness={0.4}
+            emissive="#06b6d4"
+            emissiveIntensity={0}
+          />
+        </RoundedBox>
+
+        {/* Wireframe overlay for tech look */}
+        <RoundedBox args={[1.22, 1.22, 1.22]} radius={0.12} smoothness={4}>
+          <meshBasicMaterial
+            ref={edgeMaterialRef}
+            wireframe
+            color="#22d3ee"
+            transparent
+            opacity={0.2}
+          />
+        </RoundedBox>
+
+        {/* Cross symbol on front face */}
+        {/* Horizontal bar */}
+        <mesh position={[0, 0, 0.62]}>
+          <boxGeometry args={[0.5, 0.08, 0.02]} />
+          <meshBasicMaterial color="#a5f3fc" transparent opacity={0.6} />
+        </mesh>
+        {/* Vertical bar */}
+        <mesh position={[0, 0, 0.62]}>
+          <boxGeometry args={[0.08, 0.5, 0.02]} />
+          <meshBasicMaterial color="#a5f3fc" transparent opacity={0.6} />
+        </mesh>
+      </group>
+    </Float>
+  );
+}

components/auth/verification-scene/SceneLights.tsx

@@ -0,0 +1,41 @@
+'use client';
+
+export function SceneLights() {
+  return (
+    <>
+      {/* Moody ambient base */}
+      <ambientLight intensity={0.15} />
+
+      {/* Cool white key light -- upper right */}
+      <directionalLight
+        position={[3, 4, 2]}
+        intensity={0.8}
+        color="#e0f0ff"
+      />
+
+      {/* Cyan fill -- left side */}
+      <pointLight
+        position={[-3, 1, 2]}
+        intensity={0.6}
+        color="#0891b2"
+        distance={10}
+      />
+
+      {/* Violet accent -- below right */}
+      <pointLight
+        position={[2, -2, 1]}
+        intensity={0.4}
+        color="#7c3aed"
+        distance={8}
+      />
+
+      {/* Cyan rim light -- behind */}
+      <pointLight
+        position={[0, 1, -3]}
+        intensity={0.3}
+        color="#06b6d4"
+        distance={8}
+      />
+    </>
+  );
+}

components/auth/verification-scene/VerificationScene.tsx

@@ -0,0 +1,58 @@
+'use client';
+
+import { useState } from 'react';
+import { Canvas } from '@react-three/fiber';
+import { EffectComposer, Bloom } from '@react-three/postprocessing';
+import { motion } from 'framer-motion';
+import { SceneLights } from './SceneLights';
+import { PackageBox } from './PackageBox';
+
+interface VerificationSceneProps {
+  statusText?: string;
+}
+
+export function VerificationScene({ statusText = 'Verifying permissions...' }: VerificationSceneProps) {
+  const [ready, setReady] = useState(false);
+
+  return (
+    <div className="flex flex-col items-center gap-4">
+      <motion.div
+        aria-hidden="true"
+        className="w-[320px] h-[320px] sm:w-[400px] sm:h-[400px]"
+        initial={{ opacity: 0 }}
+        animate={{ opacity: ready ? 1 : 0 }}
+        transition={{ duration: 0.6 }}
+      >
+        <Canvas
+          camera={{ position: [0, 0, 5], fov: 40 }}
+          dpr={[1, 1.5]}
+          gl={{ alpha: true, antialias: true }}
+          onCreated={() => setReady(true)}
+          style={{ background: 'transparent' }}
+        >
+          <SceneLights />
+          <PackageBox />
+
+          <EffectComposer>
+            <Bloom
+              mipmapBlur
+              intensity={0.8}
+              luminanceThreshold={0.8}
+              luminanceSmoothing={0.3}
+            />
+          </EffectComposer>
+        </Canvas>
+      </motion.div>
+
+      <motion.p
+        aria-live="polite"
+        className="text-text-muted text-sm font-medium"
+        initial={{ opacity: 0 }}
+        animate={{ opacity: 1 }}
+        transition={{ duration: 0.4, delay: 0.2 }}
+      >
+        {statusText}
+      </motion.p>
+    </div>
+  );
+}

components/auth/verification-scene/VerificationSceneFallback.tsx

@@ -0,0 +1,23 @@
+'use client';
+
+import { Loader2 } from 'lucide-react';
+
+interface VerificationSceneFallbackProps {
+  statusText?: string;
+}
+
+export function VerificationSceneFallback({ statusText = 'Verifying permissions...' }: VerificationSceneFallbackProps) {
+  return (
+    <div className="flex flex-col items-center gap-6">
+      <div className="relative">
+        <div className="absolute inset-0 bg-accent-cyan/10 rounded-full blur-2xl animate-pulse" />
+        <div className="relative w-16 h-16 bg-gradient-to-br from-accent-cyan to-accent-violet rounded-2xl flex items-center justify-center shadow-glow-cyan">
+          <Loader2 className="h-7 w-7 animate-spin text-white" />
+        </div>
+      </div>
+      <p aria-live="polite" className="text-text-muted text-sm font-medium">
+        {statusText}
+      </p>
+    </div>
+  );
+}

components/auth/verification-scene/index.ts

@@ -0,0 +1,4 @@
+// VerificationScene is intentionally not re-exported here to avoid pulling
+// Three.js into the SSR evaluation path. Import it directly via dynamic():
+//   import('@/components/auth/verification-scene/VerificationScene')
+export { VerificationSceneFallback } from './VerificationSceneFallback';