-
+
+
Sign in with the same Google account you use in the extension.
-
+
- {clientId ? (
- <>
-
-
-
- ) : (
-
- NEXT_PUBLIC_GOOGLE_CLIENT_ID is not configured.
-
- )}
-
+
+ {clientId ? (
+ <>
+
+
+
+ ) : (
+
+ NEXT_PUBLIC_GOOGLE_CLIENT_ID is not configured.
+
+ )}
+
+
);
}
diff --git a/dashboard/app/providers.tsx b/dashboard/app/providers.tsx
index 9d965e3..b2893db 100644
--- a/dashboard/app/providers.tsx
+++ b/dashboard/app/providers.tsx
@@ -3,6 +3,7 @@
import { useEffect, useState } from "react";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { ToastProvider, useToast } from "@/components/toast";
+import { SmoothScroll } from "@/components/smooth-scroll";
function QueryProviderInner({ children }: { children: React.ReactNode }) {
const toast = useToast();
@@ -33,8 +34,10 @@ function QueryProviderInner({ children }: { children: React.ReactNode }) {
export function Providers({ children }: { children: React.ReactNode }) {
return (
-
- {children}
-
+
+
+ {children}
+
+
);
}
diff --git a/dashboard/components/glitch-canvas.tsx b/dashboard/components/glitch-canvas.tsx
new file mode 100644
index 0000000..70a3f1f
--- /dev/null
+++ b/dashboard/components/glitch-canvas.tsx
@@ -0,0 +1,80 @@
+"use client";
+
+import { useRef } from "react";
+import { Canvas, useFrame } from "@react-three/fiber";
+
+const vert = /* glsl */ `
+ varying vec2 vUv;
+ void main() { vUv = uv; gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); }
+`;
+
+const frag = /* glsl */ `
+ uniform float uTime;
+ uniform float uWave;
+ varying vec2 vUv;
+
+ vec3 sampleBg(vec2 uv) {
+ vec3 bg = vec3(0.004, 0.004, 0.005);
+ float d1 = length(uv - vec2(0.08, 0.88));
+ float d2 = length(uv - vec2(0.92, 0.62));
+ float d3 = length(uv - vec2(0.50, 0.02));
+ vec3 c = bg
+ + mix(vec3(0.12), vec3(0.0, 0.898, 0.690), 0.28) * smoothstep(0.55, 0.0, d1) * 0.07
+ + mix(vec3(0.10), vec3(0.486, 0.227, 1.0), 0.24) * smoothstep(0.50, 0.0, d2) * 0.06
+ + mix(vec3(0.08), vec3(1.0, 0.0, 0.439), 0.20) * smoothstep(0.45, 0.0, d3) * 0.04;
+ float v = length((uv - 0.5) * 2.0);
+ return c * (1.0 - smoothstep(0.25, 1.0, v) * 0.78);
+ }
+
+ void main() {
+ float w1 = sin(vUv.y * 9.0 + uTime * 1.6) * 0.022;
+ float w2 = sin(vUv.y * 5.5 - uTime * 1.1) * 0.014;
+ float w3 = sin(vUv.x * 7.0 + uTime * 2.0) * 0.011;
+ vec2 wd = vec2(w1 + w2, w3);
+ float d = uWave * 0.042;
+ vec3 r = sampleBg(vUv + wd * d);
+ vec3 g = sampleBg(vUv);
+ vec3 b = sampleBg(vUv - wd * d);
+ gl_FragColor = vec4(r.r, g.g, b.b, 1.0);
+ }
+`;
+
+// Module-level: lives outside React, freely mutable by useFrame each tick.
+// The ESLint react-hooks/immutability rule only guards hook-returned values.
+const bgUniforms = { uTime: { value: 0 }, uWave: { value: 0 } };
+
+function Background({ intensityRef }: { intensityRef: React.MutableRefObject
}) {
+ const timeRef = useRef(0);
+ const waveRef = useRef(0);
+
+ useFrame((_, delta) => {
+ const t = intensityRef.current;
+ waveRef.current += (t - waveRef.current) * (t > waveRef.current ? 0.07 : 0.045);
+ timeRef.current += delta;
+ bgUniforms.uTime.value = timeRef.current;
+ bgUniforms.uWave.value = waveRef.current;
+ });
+
+ return (
+
+
+
+
+ );
+}
+
+type Props = { intensityRef: React.MutableRefObject };
+
+export default function GlitchCanvas({ intensityRef }: Props) {
+ return (
+
+ );
+}
diff --git a/dashboard/components/page-transition.tsx b/dashboard/components/page-transition.tsx
new file mode 100644
index 0000000..a2cf53a
--- /dev/null
+++ b/dashboard/components/page-transition.tsx
@@ -0,0 +1,44 @@
+"use client";
+
+import { AnimatePresence, motion, useReducedMotion } from "framer-motion";
+import { usePathname } from "next/navigation";
+import { useState } from "react";
+
+const NAV_ORDER: Record = {
+ "/dashboard": 0,
+ "/dashboard/reports": 1,
+ "/dashboard/music": 2,
+};
+
+export function PageTransition({ children }: { children: React.ReactNode }) {
+ const pathname = usePathname();
+ const reduced = useReducedMotion();
+
+ // getDerivedStateFromProps pattern: call setState during render (not in an effect).
+ // React re-runs the render synchronously with updated state, so the entering
+ // motion.div always mounts with the correct direction in its `initial` prop.
+ const [nav, setNav] = useState({ prevPath: pathname, dir: 0 });
+
+ if (nav.prevPath !== pathname) {
+ const prev = NAV_ORDER[nav.prevPath] ?? 0;
+ const curr = NAV_ORDER[pathname] ?? 0;
+ setNav({ prevPath: pathname, dir: curr >= prev ? 1 : -1 });
+ }
+
+ const dir = nav.dir;
+
+ return (
+
+
+ {children}
+
+
+ );
+}
diff --git a/dashboard/components/parallax-bg.tsx b/dashboard/components/parallax-bg.tsx
new file mode 100644
index 0000000..930acb7
--- /dev/null
+++ b/dashboard/components/parallax-bg.tsx
@@ -0,0 +1,39 @@
+"use client";
+
+import dynamic from "next/dynamic";
+import { useRef } from "react";
+import { useMotionValueEvent, useReducedMotion, useScroll, useVelocity } from "framer-motion";
+import { TimerField } from "./timer-field";
+
+const GlitchCanvas = dynamic(() => import("./glitch-canvas"), { ssr: false });
+
+const VELOCITY_THRESHOLD = 80;
+
+export function ParallaxBg() {
+ const { scrollY } = useScroll();
+ const velocity = useVelocity(scrollY);
+ const reduced = useReducedMotion();
+ const intensityRef = useRef(0);
+
+ useMotionValueEvent(velocity, "change", (v) => {
+ if (reduced) return;
+ const speed = Math.abs(v);
+ intensityRef.current = speed > VELOCITY_THRESHOLD
+ ? Math.min((speed - VELOCITY_THRESHOLD) / 520, 1)
+ : 0;
+ });
+
+ if (reduced) return null;
+
+ return (
+ <>
+ {/* Three.js: dark base + prism wave on scroll */}
+
+
+
+
+ {/* 2D canvas: timer field — green idle, red + downward on scroll */}
+
+
+ );
+}
diff --git a/dashboard/components/smooth-scroll.tsx b/dashboard/components/smooth-scroll.tsx
new file mode 100644
index 0000000..e31a492
--- /dev/null
+++ b/dashboard/components/smooth-scroll.tsx
@@ -0,0 +1,14 @@
+"use client";
+
+import { ReactLenis } from "lenis/react";
+import type { LenisOptions } from "lenis";
+
+const OPTIONS: LenisOptions = {
+ duration: 1.4, // inertia length in seconds
+ easing: (t) => Math.min(1, 1.001 - Math.pow(2, -10 * t)), // expo ease-out
+ smoothWheel: true,
+};
+
+export function SmoothScroll({ children }: { children: React.ReactNode }) {
+ return {children};
+}
diff --git a/dashboard/components/timer-field.tsx b/dashboard/components/timer-field.tsx
new file mode 100644
index 0000000..dffefa4
--- /dev/null
+++ b/dashboard/components/timer-field.tsx
@@ -0,0 +1,152 @@
+"use client";
+
+import { useEffect, useRef } from "react";
+import { useMotionValueEvent, useReducedMotion, useScroll, useVelocity } from "framer-motion";
+
+// ─── Config ───────────────────────────────────────────────────────────────────
+
+const COUNT = 85;
+const BASE_FONT = 11; // px — sizes range 0.6× – 1.5×
+const SCROLL_THRESHOLD = 80; // px/s before effects kick in
+const REVERSE_SPEED = 45; // ms subtracted per real-ms when scrolling fast
+
+// ─── Helpers ──────────────────────────────────────────────────────────────────
+
+function fmt(ms: number): string {
+ const total = Math.max(0, Math.floor(Math.abs(ms)));
+ const h = Math.floor(total / 3_600_000);
+ const m = Math.floor((total % 3_600_000) / 60_000);
+ const s = Math.floor((total % 60_000) / 1_000);
+ const cs = Math.floor((total % 1_000) / 10);
+ return h > 0
+ ? `${String(h).padStart(2, "0")}:${String(m).padStart(2, "0")}:${String(s).padStart(2, "0")}`
+ : `${String(m).padStart(2, "0")}:${String(s).padStart(2, "0")}.${String(cs).padStart(2, "0")}`;
+}
+
+interface T {
+ x: number; // px
+ y: number; // px (drifts with scroll)
+ size: number; // font scale 0.6–1.5
+ ms: number; // current timer value in ms
+ driftX: number; // gentle horizontal drift
+ driftY: number; // gentle vertical drift (natural)
+}
+
+// ─── Component ────────────────────────────────────────────────────────────────
+
+export function TimerField() {
+ const canvasRef = useRef(null);
+ const timersRef = useRef([]);
+ const velRef = useRef(0);
+ const rafRef = useRef(0);
+ const reduced = useReducedMotion();
+
+ const { scrollY } = useScroll();
+ const velocity = useVelocity(scrollY);
+
+ useMotionValueEvent(velocity, "change", (v) => { velRef.current = v; });
+
+ // Init timers after canvas mounts so we have window dimensions
+ useEffect(() => {
+ const W = window.innerWidth;
+ const H = window.innerHeight;
+ timersRef.current = Array.from({ length: COUNT }, () => ({
+ x: Math.random() * W,
+ y: Math.random() * H,
+ size: 0.6 + Math.random() * 0.9,
+ ms: Math.random() * 5_400_000, // 0–90 min spread
+ driftX: (Math.random() - 0.5) * 0.05,
+ driftY: (Math.random() - 0.5) * 0.06,
+ }));
+ }, []);
+
+ useEffect(() => {
+ if (reduced) return;
+ const canvas = canvasRef.current;
+ if (!canvas) return;
+ const ctx = canvas.getContext("2d")!;
+ let last = performance.now();
+
+ const c = canvas; // stable reference for closures
+
+ function resize() {
+ c.width = window.innerWidth;
+ c.height = window.innerHeight;
+ }
+ resize();
+ window.addEventListener("resize", resize);
+
+ function draw(now: number) {
+ const dt = Math.min(now - last, 50);
+ last = now;
+
+ const speed = Math.abs(velRef.current);
+ const intensity = Math.max(0, Math.min((speed - SCROLL_THRESHOLD) / 520, 1));
+ const scrolling = speed > SCROLL_THRESHOLD;
+
+ ctx.clearRect(0, 0, c.width, c.height);
+
+ for (const t of timersRef.current) {
+ // ── Time value ──────────────────────────────────────────────────────
+ if (scrolling) {
+ t.ms -= dt * (1 + intensity * REVERSE_SPEED); // reverse + accelerate
+ if (t.ms < 0) t.ms = 5_400_000;
+ } else {
+ t.ms += dt; // normal forward tick
+ if (t.ms > 5_400_000) t.ms = 0;
+ }
+
+ // ── Position ────────────────────────────────────────────────────────
+ t.x += t.driftX;
+ // natural drift + downward parallax proportional to depth (size)
+ t.y += t.driftY + intensity * t.size * 2.2;
+
+ // wrap
+ if (t.x < -80) t.x = c.width + 60;
+ if (t.x > c.width + 80) t.x = -60;
+ if (t.y < -20) t.y = c.height + 10;
+ if (t.y > c.height + 20) t.y = -10;
+
+ // ── Style ───────────────────────────────────────────────────────────
+ const fontSize = Math.round(BASE_FONT * t.size);
+
+ if (scrolling) {
+ // Aggressive red — brighter/stronger with intensity
+ const g = Math.round((1 - intensity) * 40);
+ const a = 0.45 + intensity * 0.50;
+ ctx.fillStyle = `rgba(255, ${g}, 30, ${a})`;
+ ctx.shadowColor = `rgba(255, 0, 70, ${intensity * 0.9})`;
+ ctx.shadowBlur = 4 + intensity * 12;
+ } else {
+ // Default green — dim, subtle
+ const a = 0.15 + t.size * 0.10;
+ ctx.fillStyle = `rgba(0, 229, 176, ${a})`;
+ ctx.shadowColor = "rgba(0, 229, 176, 0.25)";
+ ctx.shadowBlur = 2;
+ }
+
+ ctx.font = `${fontSize}px "Courier New", monospace`;
+ ctx.fillText(fmt(t.ms), t.x, t.y);
+ }
+
+ ctx.shadowBlur = 0;
+ rafRef.current = requestAnimationFrame(draw);
+ }
+
+ rafRef.current = requestAnimationFrame(draw);
+ return () => {
+ cancelAnimationFrame(rafRef.current);
+ window.removeEventListener("resize", resize);
+ };
+ }, [reduced]);
+
+ if (reduced) return null;
+
+ return (
+
+ );
+}
diff --git a/dashboard/components/toast.tsx b/dashboard/components/toast.tsx
index 44dcf6b..3874b3d 100644
--- a/dashboard/components/toast.tsx
+++ b/dashboard/components/toast.tsx
@@ -7,6 +7,7 @@ import {
useRef,
useState,
} from "react";
+import { AnimatePresence, motion } from "framer-motion";
// ─── Types ────────────────────────────────────────────────────────────────────
@@ -80,36 +81,40 @@ function ToastStack({
toasts: ToastItem[];
onDismiss: (id: number) => void;
}) {
- if (toasts.length === 0) return null;
-
return (
- {toasts.map((t) => (
-
-
{t.message}
-
-
- ))}
+
{t.message}
+
+
+ ))}
+