refactor: replace GSAP animations with CSS animations across components
- Updated RootLayout to include a noise overlay class. - Refactored LiveModerationFeed to use CSS animations for item entry. - Simplified AmbientCanvas by removing WebGL and using pure CSS for ambient effects. - Converted Chatbot to use CSS for floating window animations. - Updated Card component to include a gradient border. - Refactored PageTransition to use CSS for fade-scale animations. - Enhanced SectionHeader with reveal-up animation class. - Replaced GSAP animations in NavRail with CSS animations for item entry. - Refactored VoiceStage to use CSS for speaker node animations and pulse rings. - Removed GSAP dependencies from use-gsap-animation hook, implementing CSS-based stagger reveal.
This commit is contained in:
asepharyana
@@ -1,7 +1,5 @@
|
||||
"use client";
|
||||
|
||||
import { useGSAP } from "@gsap/react";
|
||||
import gsap from "gsap";
|
||||
import { Hash, Search, Sparkles, TrendingUp } from "lucide-react";
|
||||
import { useEffect, useRef, useState } from "react";
|
||||
import { useAmbient } from "@/components/ambient/ambient-context";
|
||||
@@ -16,10 +14,6 @@ import {
|
||||
renderMessageContent,
|
||||
} from "@/lib/format";
|
||||
|
||||
if (typeof window !== "undefined") {
|
||||
gsap.registerPlugin(useGSAP);
|
||||
}
|
||||
|
||||
export function AnalysisView() {
|
||||
const [query, setQuery] = useState("");
|
||||
const search = useMessageSearch(query, query.trim().length >= 2);
|
||||
@@ -44,88 +38,101 @@ export function AnalysisView() {
|
||||
);
|
||||
}, [query, ambient]);
|
||||
|
||||
// Count-up + bar-fill reveal for the reactor leaderboard — HUD gauge motif.
|
||||
useGSAP(
|
||||
() => {
|
||||
if (!reactorsRef.current) return;
|
||||
const bars = reactorsRef.current.querySelectorAll(".reactor-bar-fill");
|
||||
const counters = reactorsRef.current.querySelectorAll(".reactor-count");
|
||||
if (bars.length === 0) return;
|
||||
const prefersReduced = window.matchMedia(
|
||||
"(prefers-reduced-motion: reduce)",
|
||||
).matches;
|
||||
if (prefersReduced) {
|
||||
gsap.set(bars, { scaleX: 1 });
|
||||
return;
|
||||
}
|
||||
gsap.fromTo(
|
||||
bars,
|
||||
{ scaleX: 0 },
|
||||
{
|
||||
scaleX: 1,
|
||||
duration: 0.7,
|
||||
stagger: 0.06,
|
||||
ease: "power2.out",
|
||||
transformOrigin: "left center",
|
||||
},
|
||||
);
|
||||
// Bar-fill reveal for reactor leaderboard — CSS animation
|
||||
useEffect(() => {
|
||||
const container = reactorsRef.current;
|
||||
if (!container) return;
|
||||
const bars = container.querySelectorAll<HTMLElement>(".reactor-bar-fill");
|
||||
const counters = container.querySelectorAll<HTMLElement>(".reactor-count");
|
||||
if (bars.length === 0) return;
|
||||
if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
|
||||
bars.forEach((el) => (el.style.transform = "scaleX(1)"));
|
||||
counters.forEach((el) => {
|
||||
const target = Number(el.getAttribute("data-target") ?? "0");
|
||||
const obj = { val: 0 };
|
||||
gsap.to(obj, {
|
||||
val: target,
|
||||
duration: 0.8,
|
||||
ease: "power2.out",
|
||||
onUpdate: () => {
|
||||
el.textContent = `+${Math.round(obj.val)}`;
|
||||
},
|
||||
});
|
||||
el.textContent = `+${el.getAttribute("data-target") ?? "0"}`;
|
||||
});
|
||||
},
|
||||
{ scope: reactorsRef, dependencies: [reactors] },
|
||||
);
|
||||
return;
|
||||
}
|
||||
|
||||
useGSAP(
|
||||
() => {
|
||||
if (!channelsRef.current) return;
|
||||
const rows = channelsRef.current.querySelectorAll(".channel-row");
|
||||
if (rows.length === 0) return;
|
||||
const prefersReduced = window.matchMedia(
|
||||
"(prefers-reduced-motion: reduce)",
|
||||
).matches;
|
||||
if (prefersReduced) {
|
||||
gsap.set(rows, { opacity: 1, x: 0 });
|
||||
return;
|
||||
}
|
||||
gsap.fromTo(
|
||||
rows,
|
||||
{ opacity: 0, x: -10 },
|
||||
{
|
||||
opacity: 1,
|
||||
x: 0,
|
||||
duration: 0.35,
|
||||
stagger: 0.04,
|
||||
ease: "power2.out",
|
||||
clearProps: "transform",
|
||||
},
|
||||
);
|
||||
},
|
||||
{ scope: channelsRef, dependencies: [channels] },
|
||||
);
|
||||
bars.forEach((el, i) => {
|
||||
el.style.transformOrigin = "left center";
|
||||
el.style.animationFillMode = "forwards";
|
||||
el.style.animationTimingFunction = "ease-out";
|
||||
el.style.animationName = "bar-fill-in";
|
||||
el.style.animationDuration = "0.7s";
|
||||
el.style.animationDelay = `${i * 0.06}s`;
|
||||
});
|
||||
|
||||
// Simple counter animation using rAF
|
||||
counters.forEach((el) => {
|
||||
const target = Number(el.getAttribute("data-target") ?? "0");
|
||||
const start = performance.now();
|
||||
const duration = 800;
|
||||
const step = (now: number) => {
|
||||
const progress = Math.min((now - start) / duration, 1);
|
||||
const eased = 1 - (1 - progress) ** 3;
|
||||
el.textContent = `+${Math.round(target * eased)}`;
|
||||
if (progress < 1) requestAnimationFrame(step);
|
||||
};
|
||||
requestAnimationFrame(step);
|
||||
});
|
||||
|
||||
return () => {
|
||||
bars.forEach((el) => {
|
||||
el.style.removeProperty("animation-name");
|
||||
el.style.removeProperty("animation-duration");
|
||||
el.style.removeProperty("animation-delay");
|
||||
el.style.removeProperty("animation-fill-mode");
|
||||
el.style.removeProperty("animation-timing-function");
|
||||
el.style.removeProperty("transform-origin");
|
||||
});
|
||||
};
|
||||
}, [reactors]);
|
||||
|
||||
// Channel rows stagger slide-in — CSS animation
|
||||
useEffect(() => {
|
||||
const container = channelsRef.current;
|
||||
if (!container) return;
|
||||
const rows = container.querySelectorAll<HTMLElement>(".channel-row");
|
||||
if (rows.length === 0) return;
|
||||
if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) return;
|
||||
|
||||
rows.forEach((el, i) => {
|
||||
el.style.opacity = "0";
|
||||
el.style.animationFillMode = "forwards";
|
||||
el.style.animationTimingFunction = "ease-out";
|
||||
el.style.animationName = "stagger-slide-in";
|
||||
el.style.animationDuration = "0.35s";
|
||||
el.style.animationDelay = `${i * 0.04}s`;
|
||||
});
|
||||
|
||||
return () => {
|
||||
rows.forEach((el) => {
|
||||
el.style.removeProperty("opacity");
|
||||
el.style.removeProperty("animation-name");
|
||||
el.style.removeProperty("animation-duration");
|
||||
el.style.removeProperty("animation-delay");
|
||||
el.style.removeProperty("animation-fill-mode");
|
||||
el.style.removeProperty("animation-timing-function");
|
||||
});
|
||||
};
|
||||
}, [channels]);
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
{/* Tactical HUD Header Bar */}
|
||||
<div className="flex flex-wrap items-center justify-between gap-3 border-b border-hairline pb-3">
|
||||
<div className="flex items-center gap-2.5">
|
||||
<span className="h-2 w-2 rounded-full bg-signal shadow-[0_0_8px_var(--color-signal-glow)]" />
|
||||
<span className="h-2 w-2 rounded-full bg-signal glow-pulse" />
|
||||
<h1 className="font-mono text-xs font-semibold tracking-wide text-ink uppercase">
|
||||
Deep Scan · Semantic Search & Telemetry Analysis
|
||||
</h1>
|
||||
</div>
|
||||
<div className="flex items-center gap-2 font-mono text-[11px] text-ink-muted">
|
||||
<span>ENGINE:</span>
|
||||
<span className="rounded bg-signal/15 px-2 py-0.5 font-medium text-signal border border-signal/30">
|
||||
<span
|
||||
className="glitch-text rounded bg-signal/15 px-2 py-0.5 font-medium text-signal border border-signal/30"
|
||||
data-text={query.trim().length >= 2 ? "SCANNING" : "STANDBY"}
|
||||
>
|
||||
{query.trim().length >= 2 ? "SCANNING" : "STANDBY"}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
@@ -105,7 +105,7 @@ export function DashboardView({
|
||||
{/* Tactical HUD Header Bar */}
|
||||
<div className="linear-tile flex flex-wrap items-center justify-between gap-3 border-b border-hairline pb-3">
|
||||
<div className="flex items-center gap-2.5">
|
||||
<span className="h-2 w-2 rounded-full bg-signal shadow-[0_0_8px_var(--color-signal-glow)]" />
|
||||
<span className="h-2 w-2 rounded-full bg-signal glow-pulse" />
|
||||
<h1 className="font-mono text-xs font-semibold tracking-wide text-ink uppercase">
|
||||
Telemetry Overview · Node 01
|
||||
</h1>
|
||||
|
||||
@@ -236,7 +236,7 @@ export function MessagesView({
|
||||
{/* Tactical HUD Header Bar */}
|
||||
<div className="flex flex-wrap items-center justify-between gap-3 border-b border-hairline pb-3">
|
||||
<div className="flex items-center gap-2.5">
|
||||
<span className="h-2 w-2 rounded-full bg-signal shadow-[0_0_8px_var(--color-signal-glow)]" />
|
||||
<span className="h-2 w-2 rounded-full bg-signal glow-pulse" />
|
||||
<h1 className="font-mono text-xs font-semibold tracking-wide text-ink uppercase">
|
||||
Chat Log Stream · Ingestion Stream
|
||||
</h1>
|
||||
@@ -249,7 +249,10 @@ export function MessagesView({
|
||||
</div>
|
||||
<div className="flex items-center gap-2 font-mono text-[11px] text-ink-muted">
|
||||
<span>MODE:</span>
|
||||
<span className="rounded bg-signal/15 px-2 py-0.5 font-medium text-signal border border-signal/30">
|
||||
<span
|
||||
className="glitch-text rounded bg-signal/15 px-2 py-0.5 font-medium text-signal border border-signal/30"
|
||||
data-text={searching ? "SEARCH_ACTIVE" : viewMode.toUpperCase()}
|
||||
>
|
||||
{searching ? "SEARCH_ACTIVE" : viewMode.toUpperCase()}
|
||||
</span>
|
||||
</div>
|
||||
@@ -407,6 +410,7 @@ export function MessagesView({
|
||||
<span className="flex items-center gap-1.5 font-mono text-xs text-ink-muted">
|
||||
<Loader2 className="size-3.5 animate-spin text-signal" />
|
||||
FETCHING EARLIER PACKETS...
|
||||
<span className="typing-dots"><span /><span /><span /></span>
|
||||
</span>
|
||||
) : hasMore && loadedPages < MAX_OLDER_PAGES ? (
|
||||
<button
|
||||
|
||||
@@ -1,7 +1,5 @@
|
||||
"use client";
|
||||
|
||||
import { useGSAP } from "@gsap/react";
|
||||
import gsap from "gsap";
|
||||
import { AlertTriangle, CheckCircle2, Shield } from "lucide-react";
|
||||
import { useEffect, useState } from "react";
|
||||
import { useAmbient } from "@/components/ambient/ambient-context";
|
||||
@@ -29,10 +27,6 @@ import type {
|
||||
ModerationStats,
|
||||
} from "@/lib/types";
|
||||
|
||||
if (typeof window !== "undefined") {
|
||||
gsap.registerPlugin(useGSAP);
|
||||
}
|
||||
|
||||
export function ModerationView({
|
||||
initialStats,
|
||||
initialActions,
|
||||
|
||||
@@ -144,14 +144,17 @@ export function RecordingsView({
|
||||
{/* Tactical HUD Header Bar */}
|
||||
<div className="flex flex-wrap items-center justify-between gap-3 border-b border-hairline pb-3">
|
||||
<div className="flex items-center gap-2.5">
|
||||
<span className="h-2 w-2 rounded-full bg-signal shadow-[0_0_8px_var(--color-signal-glow)]" />
|
||||
<span className="h-2 w-2 rounded-full bg-signal glow-pulse" />
|
||||
<h1 className="font-mono text-xs font-semibold tracking-wide text-ink uppercase">
|
||||
Tape Deck · Captured Audio Archive
|
||||
</h1>
|
||||
</div>
|
||||
<div className="flex items-center gap-2 font-mono text-[11px] text-ink-muted">
|
||||
<span>STATUS:</span>
|
||||
<span className="rounded bg-signal/15 px-2 py-0.5 font-medium text-signal border border-signal/30">
|
||||
<span
|
||||
className="glitch-text rounded bg-signal/15 px-2 py-0.5 font-medium text-signal border border-signal/30"
|
||||
data-text={`${totalRecordings} CLIPS_LOADED`}
|
||||
>
|
||||
{totalRecordings} CLIPS_LOADED
|
||||
</span>
|
||||
</div>
|
||||
@@ -289,6 +292,7 @@ export function RecordingsView({
|
||||
<span className="flex items-center justify-center gap-2 font-mono text-xs text-ink-muted">
|
||||
<Loader2 className="size-4 animate-spin text-signal" />
|
||||
LOADING EARLIER RECORDINGS...
|
||||
<span className="typing-dots"><span /><span /><span /></span>
|
||||
</span>
|
||||
) : hasMore && loadedPages < MAX_OLDER_PAGES ? (
|
||||
<button
|
||||
|
||||
@@ -162,6 +162,79 @@
|
||||
transition: border-color 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s ease;
|
||||
}
|
||||
|
||||
/* ── Ambient CSS Background (replaces WebGL/three.js) ── */
|
||||
.ambient-blob {
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
filter: blur(80px);
|
||||
opacity: calc(var(--ab-alpha, 0.35) * 0.8);
|
||||
will-change: transform;
|
||||
}
|
||||
|
||||
.ambient-blob-1 {
|
||||
width: 50vw;
|
||||
height: 50vw;
|
||||
top: -10%;
|
||||
left: 20%;
|
||||
background: rgb(var(--ab-r, 45) var(--ab-g, 212) var(--ab-b, 191) / 0.25);
|
||||
animation: ambient-drift-1 25s ease-in-out infinite alternate;
|
||||
}
|
||||
|
||||
.ambient-blob-2 {
|
||||
width: 40vw;
|
||||
height: 40vw;
|
||||
bottom: 10%;
|
||||
right: -5%;
|
||||
background: rgb(var(--ab-r, 45) var(--ab-g, 212) var(--ab-b, 191) / 0.18);
|
||||
animation: ambient-drift-2 30s ease-in-out infinite alternate;
|
||||
}
|
||||
|
||||
.ambient-blob-3 {
|
||||
width: 35vw;
|
||||
height: 35vw;
|
||||
top: 40%;
|
||||
left: -10%;
|
||||
background: rgb(var(--ab-r, 45) var(--ab-g, 212) var(--ab-b, 191) / 0.15);
|
||||
animation: ambient-drift-3 20s ease-in-out infinite alternate;
|
||||
}
|
||||
|
||||
@keyframes ambient-drift-1 {
|
||||
0% { transform: translate(0, 0) scale(1); }
|
||||
100% { transform: translate(8vw, 5vh) scale(1.15); }
|
||||
}
|
||||
@keyframes ambient-drift-2 {
|
||||
0% { transform: translate(0, 0) scale(1); }
|
||||
100% { transform: translate(-6vw, -8vh) scale(1.1); }
|
||||
}
|
||||
@keyframes ambient-drift-3 {
|
||||
0% { transform: translate(0, 0) scale(0.9); }
|
||||
100% { transform: translate(5vw, 6vh) scale(1.1); }
|
||||
}
|
||||
|
||||
/* Floating motes — tiny dots drifting upward */
|
||||
.ambient-motes {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.ambient-mote {
|
||||
position: absolute;
|
||||
bottom: -4px;
|
||||
width: 2px;
|
||||
height: 2px;
|
||||
border-radius: 50%;
|
||||
background: rgb(var(--ab-r, 45) var(--ab-g, 212) var(--ab-b, 191) / 0.5);
|
||||
animation: mote-rise linear infinite;
|
||||
}
|
||||
|
||||
@keyframes mote-rise {
|
||||
0% { transform: translateY(0) translateX(0); opacity: 0; }
|
||||
10% { opacity: 0.6; }
|
||||
90% { opacity: 0.4; }
|
||||
100% { transform: translateY(-100vh) translateX(20px); opacity: 0; }
|
||||
}
|
||||
|
||||
.glass:hover {
|
||||
border-color: var(--panel-border-hover);
|
||||
}
|
||||
@@ -174,12 +247,246 @@
|
||||
border-radius: var(--radius-r-panel);
|
||||
backdrop-filter: blur(12px);
|
||||
box-shadow: var(--shadow-hud);
|
||||
transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
|
||||
transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
|
||||
}
|
||||
|
||||
.hud-card:hover {
|
||||
border-color: var(--panel-border-hover);
|
||||
transform: translateY(-1px);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: var(--shadow-hud), 0 8px 32px -8px rgba(45, 212, 191, 0.08);
|
||||
}
|
||||
|
||||
/* ── Noise grain overlay (applied via pseudo-element) ── */
|
||||
.noise-overlay::after {
|
||||
content: "";
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 9998;
|
||||
pointer-events: none;
|
||||
opacity: 0.025;
|
||||
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
|
||||
background-repeat: repeat;
|
||||
background-size: 128px 128px;
|
||||
}
|
||||
|
||||
/* ── Animated gradient border (use on glass panels) ── */
|
||||
.gradient-border {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
.gradient-border::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
border-radius: inherit;
|
||||
padding: 1px;
|
||||
background: conic-gradient(
|
||||
from var(--gb-angle, 0deg),
|
||||
transparent 40%,
|
||||
var(--color-signal) 50%,
|
||||
transparent 60%
|
||||
);
|
||||
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
|
||||
mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
|
||||
-webkit-mask-composite: xor;
|
||||
mask-composite: exclude;
|
||||
animation: gradient-rotate 4s linear infinite;
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s ease;
|
||||
pointer-events: none;
|
||||
}
|
||||
.gradient-border:hover::before {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
@keyframes gradient-rotate {
|
||||
to { --gb-angle: 360deg; }
|
||||
}
|
||||
|
||||
@property --gb-angle {
|
||||
syntax: "<angle>";
|
||||
initial-value: 0deg;
|
||||
inherits: false;
|
||||
}
|
||||
|
||||
/* ── Glitch text effect (use on status labels) ── */
|
||||
.glitch-text {
|
||||
position: relative;
|
||||
}
|
||||
.glitch-text::before,
|
||||
.glitch-text::after {
|
||||
content: attr(data-text);
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
.glitch-text::before {
|
||||
color: var(--color-signal);
|
||||
animation: glitch-shift-1 3s infinite steps(2);
|
||||
clip-path: inset(0 0 65% 0);
|
||||
}
|
||||
.glitch-text::after {
|
||||
color: var(--color-vermilion);
|
||||
animation: glitch-shift-2 3s infinite steps(2);
|
||||
clip-path: inset(65% 0 0 0);
|
||||
}
|
||||
|
||||
@keyframes glitch-shift-1 {
|
||||
0%, 92% { transform: translate(0); }
|
||||
93% { transform: translate(-2px, 1px); }
|
||||
94% { transform: translate(2px, -1px); }
|
||||
95%, 100% { transform: translate(0); }
|
||||
}
|
||||
@keyframes glitch-shift-2 {
|
||||
0%, 94% { transform: translate(0); }
|
||||
95% { transform: translate(2px, 1px); }
|
||||
96% { transform: translate(-1px, -1px); }
|
||||
97%, 100% { transform: translate(0); }
|
||||
}
|
||||
|
||||
/* ── Terminal cursor blink ── */
|
||||
.cursor-blink::after {
|
||||
content: "█";
|
||||
animation: cursor-blink 1s step-end infinite;
|
||||
color: var(--color-signal);
|
||||
margin-left: 2px;
|
||||
}
|
||||
|
||||
@keyframes cursor-blink {
|
||||
0%, 100% { opacity: 1; }
|
||||
50% { opacity: 0; }
|
||||
}
|
||||
|
||||
/* ── Radar sweep ── */
|
||||
.radar-sweep {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
.radar-sweep::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 50%;
|
||||
height: 2px;
|
||||
transform-origin: left center;
|
||||
background: linear-gradient(90deg, var(--color-signal), transparent);
|
||||
animation: radar-spin 3s linear infinite;
|
||||
opacity: 0.4;
|
||||
}
|
||||
|
||||
@keyframes radar-spin {
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
/* ── Data flash — quick bright pulse on content update ── */
|
||||
.data-flash {
|
||||
animation: data-flash 0.5s ease-out;
|
||||
}
|
||||
|
||||
@keyframes data-flash {
|
||||
0% { background-color: rgba(45, 212, 191, 0.15); }
|
||||
100% { background-color: transparent; }
|
||||
}
|
||||
|
||||
/* ── Border trace — animated border drawing effect ── */
|
||||
.border-trace {
|
||||
position: relative;
|
||||
}
|
||||
.border-trace::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
border-radius: inherit;
|
||||
border: 1px solid transparent;
|
||||
background: linear-gradient(var(--panel-bg), var(--panel-bg)) padding-box,
|
||||
linear-gradient(var(--trace-angle, 0deg), transparent 30%, var(--color-signal) 50%, transparent 70%) border-box;
|
||||
animation: trace-rotate 3s linear infinite;
|
||||
pointer-events: none;
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
.border-trace:hover::before {
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
@keyframes trace-rotate {
|
||||
to { --trace-angle: 360deg; }
|
||||
}
|
||||
|
||||
@property --trace-angle {
|
||||
syntax: "<angle>";
|
||||
initial-value: 0deg;
|
||||
inherits: false;
|
||||
}
|
||||
|
||||
/* ── Typing dots (loading indicator) ── */
|
||||
.typing-dots span {
|
||||
display: inline-block;
|
||||
width: 4px;
|
||||
height: 4px;
|
||||
border-radius: 50%;
|
||||
background: var(--color-signal);
|
||||
animation: typing-bounce 1.4s ease-in-out infinite;
|
||||
margin: 0 2px;
|
||||
}
|
||||
.typing-dots span:nth-child(2) { animation-delay: 0.15s; }
|
||||
.typing-dots span:nth-child(3) { animation-delay: 0.3s; }
|
||||
|
||||
@keyframes typing-bounce {
|
||||
0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
|
||||
30% { transform: translateY(-4px); opacity: 1; }
|
||||
}
|
||||
|
||||
/* ── Glow pulse — breathing glow for live indicators ── */
|
||||
.glow-pulse {
|
||||
animation: glow-pulse 2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes glow-pulse {
|
||||
0%, 100% { box-shadow: 0 0 4px 1px var(--color-signal-glow); }
|
||||
50% { box-shadow: 0 0 12px 3px var(--color-signal-glow); }
|
||||
}
|
||||
|
||||
/* ── Reveal slide-up — elements rising into view ── */
|
||||
.reveal-up {
|
||||
opacity: 0;
|
||||
transform: translateY(12px);
|
||||
animation: reveal-up 0.5s ease-out forwards;
|
||||
}
|
||||
|
||||
@keyframes reveal-up {
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
|
||||
/* ── Number ticker — digit roll effect ── */
|
||||
.ticker-digit {
|
||||
display: inline-block;
|
||||
overflow: hidden;
|
||||
height: 1.2em;
|
||||
line-height: 1.2;
|
||||
}
|
||||
.ticker-digit-inner {
|
||||
animation: ticker-roll 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
|
||||
}
|
||||
|
||||
@keyframes ticker-roll {
|
||||
from { transform: translateY(-100%); }
|
||||
to { transform: translateY(0); }
|
||||
}
|
||||
|
||||
/* ── Status indicator colors ── */
|
||||
.status-live {
|
||||
animation: glow-pulse 2s ease-in-out infinite;
|
||||
background: var(--color-success);
|
||||
}
|
||||
.status-warning {
|
||||
animation: glow-pulse 2s ease-in-out infinite;
|
||||
background: var(--color-amber);
|
||||
}
|
||||
.status-error {
|
||||
animation: glow-pulse 1.5s ease-in-out infinite;
|
||||
background: var(--color-vermilion);
|
||||
}
|
||||
|
||||
.eyebrow {
|
||||
@@ -270,6 +577,36 @@
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
|
||||
@keyframes stagger-in {
|
||||
from { opacity: 0; transform: translateY(6px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
|
||||
@keyframes stagger-slide-in {
|
||||
from { opacity: 0; transform: translateX(-8px); }
|
||||
to { opacity: 1; transform: translateX(0); }
|
||||
}
|
||||
|
||||
@keyframes scale-bounce-in {
|
||||
from { opacity: 0; transform: scale(0.7); }
|
||||
to { opacity: 1; transform: scale(1); }
|
||||
}
|
||||
|
||||
@keyframes bar-fill-in {
|
||||
from { transform: scaleX(0); }
|
||||
to { transform: scaleX(1); }
|
||||
}
|
||||
|
||||
@keyframes pulse-ring {
|
||||
0%, 100% { transform: scale(1); opacity: 0.2; }
|
||||
50% { transform: scale(1.18); opacity: 0.45; }
|
||||
}
|
||||
|
||||
@keyframes fade-scale-in {
|
||||
from { opacity: 0; transform: scale(0.95) translateY(15px); }
|
||||
to { opacity: 1; transform: scale(1) translateY(0); }
|
||||
}
|
||||
|
||||
@keyframes toast-in {
|
||||
from { opacity: 0; transform: translateY(8px) scale(0.98); }
|
||||
to { opacity: 1; transform: translateY(0) scale(1); }
|
||||
@@ -353,7 +690,15 @@
|
||||
.animate-eq,
|
||||
.animate-fade-up,
|
||||
.animate-toast-in,
|
||||
.scan-line {
|
||||
.scan-line,
|
||||
.ambient-blob,
|
||||
.ambient-mote,
|
||||
.glitch-text::before,
|
||||
.glitch-text::after,
|
||||
.cursor-blink::after,
|
||||
.radar-sweep::after,
|
||||
.border-trace::before,
|
||||
.gradient-border::before {
|
||||
animation: none !important;
|
||||
}
|
||||
*,
|
||||
|
||||
@@ -59,7 +59,7 @@ export default function RootLayout({
|
||||
}}
|
||||
/>
|
||||
</head>
|
||||
<body className="min-h-full flex flex-col">
|
||||
<body className="noise-overlay min-h-full flex flex-col">
|
||||
<SwrProvider>
|
||||
<ThemeProvider
|
||||
attribute="class"
|
||||
|
||||
@@ -1,17 +1,11 @@
|
||||
"use client";
|
||||
|
||||
import { useGSAP } from "@gsap/react";
|
||||
import gsap from "gsap";
|
||||
import { CheckCircle2, ShieldAlert, UserX, VolumeX } from "lucide-react";
|
||||
import { useRef } from "react";
|
||||
import { useRef, useEffect } from "react";
|
||||
import { Badge } from "@/components/primitives";
|
||||
import { formatRelativeTime } from "@/lib/format";
|
||||
import type { ModerationAction } from "@/lib/types";
|
||||
|
||||
if (typeof window !== "undefined") {
|
||||
gsap.registerPlugin(useGSAP);
|
||||
}
|
||||
|
||||
const ACTION_LABEL: Record<string, string> = {
|
||||
delete_message: "Deleted",
|
||||
timeout_user: "Timeout",
|
||||
@@ -61,32 +55,33 @@ export function LiveModerationFeed({
|
||||
}) {
|
||||
const feedRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
useGSAP(
|
||||
() => {
|
||||
if (!feedRef.current) return;
|
||||
const items = feedRef.current.querySelectorAll(".mod-feed-item");
|
||||
if (items.length === 0) return;
|
||||
useEffect(() => {
|
||||
const container = feedRef.current;
|
||||
if (!container) return;
|
||||
const items = container.querySelectorAll<HTMLElement>(".mod-feed-item");
|
||||
if (items.length === 0) return;
|
||||
if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) return;
|
||||
|
||||
const prefersReduced = window.matchMedia(
|
||||
"(prefers-reduced-motion: reduce)",
|
||||
).matches;
|
||||
if (prefersReduced) return;
|
||||
items.forEach((el, i) => {
|
||||
el.style.opacity = "0";
|
||||
el.style.animationFillMode = "forwards";
|
||||
el.style.animationTimingFunction = "ease-out";
|
||||
el.style.animationName = "stagger-slide-in";
|
||||
el.style.animationDuration = "0.32s";
|
||||
el.style.animationDelay = `${i * 0.025}s`;
|
||||
});
|
||||
|
||||
gsap.fromTo(
|
||||
items,
|
||||
{ opacity: 0, x: -8 },
|
||||
{
|
||||
opacity: 1,
|
||||
x: 0,
|
||||
duration: 0.32,
|
||||
stagger: 0.025,
|
||||
ease: "power2.out",
|
||||
clearProps: "transform",
|
||||
},
|
||||
);
|
||||
},
|
||||
{ scope: feedRef, dependencies: [actions.length] },
|
||||
);
|
||||
return () => {
|
||||
items.forEach((el) => {
|
||||
el.style.removeProperty("opacity");
|
||||
el.style.removeProperty("animation-name");
|
||||
el.style.removeProperty("animation-duration");
|
||||
el.style.removeProperty("animation-delay");
|
||||
el.style.removeProperty("animation-fill-mode");
|
||||
el.style.removeProperty("animation-timing-function");
|
||||
});
|
||||
};
|
||||
}, [actions.length]);
|
||||
|
||||
return (
|
||||
<div className="flex max-h-[460px] flex-col">
|
||||
@@ -147,7 +142,7 @@ export function LiveModerationFeed({
|
||||
|
||||
{a.reason && (
|
||||
<p className="mt-1 font-sans text-xs text-ink-soft line-clamp-2">
|
||||
“{a.reason}”
|
||||
“{a.reason}”
|
||||
</p>
|
||||
)}
|
||||
|
||||
|
||||
@@ -1,60 +1,20 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect, useRef } from "react";
|
||||
import * as THREE from "three";
|
||||
import { SIGNAL_RGB, type SignalTone } from "./ambient-context";
|
||||
|
||||
const VERT = /* glsl */ `
|
||||
varying vec2 vUv;
|
||||
void main(){
|
||||
vUv = uv;
|
||||
gl_Position = vec4(position.xy, 0.0, 1.0);
|
||||
}
|
||||
`;
|
||||
/**
|
||||
* Pure CSS ambient background — no WebGL, no three.js.
|
||||
* Multiple blurred gradient blobs drift via CSS keyframes.
|
||||
* Tone & intensity are driven by CSS custom properties updated from the
|
||||
* ref (no React re-renders per frame).
|
||||
*/
|
||||
|
||||
const FRAG = /* glsl */ `
|
||||
precision mediump float;
|
||||
varying vec2 vUv;
|
||||
uniform float uTime;
|
||||
uniform vec3 uColor;
|
||||
uniform float uIntensity;
|
||||
uniform vec2 uRes;
|
||||
|
||||
float hash(vec2 p){ p=fract(p*vec2(123.34,456.21)); p+=dot(p,p+45.32); return fract(p.x*p.y); }
|
||||
float noise(vec2 p){
|
||||
vec2 i=floor(p); vec2 f=fract(p);
|
||||
float a=hash(i), b=hash(i+vec2(1.,0.)), c=hash(i+vec2(0.,1.)), d=hash(i+vec2(1.,1.));
|
||||
vec2 u=f*f*(3.-2.*f);
|
||||
return mix(mix(a,b,u.x),mix(c,d,u.x),u.y);
|
||||
}
|
||||
float fbm(vec2 p){
|
||||
float v=0.0, a=0.5;
|
||||
mat2 m=mat2(1.6,1.2,-1.2,1.6);
|
||||
for(int i=0;i<5;i++){ v+=a*noise(p); p=m*p; a*=0.5; }
|
||||
return v;
|
||||
}
|
||||
|
||||
void main(){
|
||||
vec2 uv=vUv;
|
||||
vec2 p=uv-0.5;
|
||||
p.x*=uRes.x/uRes.y;
|
||||
float t=uTime*0.04*(0.6+uIntensity);
|
||||
vec2 q=vec2(fbm(p*1.5+t), fbm(p*1.5-t+5.0));
|
||||
float f=fbm(p*2.2 + q*1.8 + t*0.5);
|
||||
vec2 c=vec2(sin(uTime*0.05)*0.25, cos(uTime*0.04)*0.18);
|
||||
float d=length(p-c);
|
||||
float glow=smoothstep(0.95,0.0,d)*0.5;
|
||||
float haze=(f*0.7+glow)*uIntensity;
|
||||
vec3 col=uColor*haze;
|
||||
float g=hash(uv*uRes+uTime)*0.035;
|
||||
col+=g;
|
||||
float vig=smoothstep(1.25,0.15,length(p));
|
||||
col*=0.35+0.65*vig;
|
||||
gl_FragColor=vec4(col,1.0);
|
||||
}
|
||||
`;
|
||||
|
||||
const MOTE_COUNT = 140;
|
||||
const TONE_css: Record<SignalTone, string> = {
|
||||
signal: "45, 212, 191",
|
||||
amber: "245, 158, 11",
|
||||
vermilion: "239, 68, 68",
|
||||
};
|
||||
|
||||
export function AmbientCanvas({
|
||||
targetRef,
|
||||
@@ -67,168 +27,62 @@ export function AmbientCanvas({
|
||||
const mount = mountRef.current;
|
||||
if (!mount) return;
|
||||
|
||||
// Lightness gate: skip the WebGL layer entirely on small/coarse/data-saver
|
||||
// devices — the static CSS fallback below stays. Desktop keeps the haze.
|
||||
const nav = navigator as Navigator & {
|
||||
connection?: { saveData?: boolean; deviceMemory?: number };
|
||||
deviceMemory?: number;
|
||||
};
|
||||
const lightDevice =
|
||||
window.matchMedia("(max-width: 767px)").matches ||
|
||||
window.matchMedia("(pointer: coarse)").matches ||
|
||||
nav.connection?.saveData === true ||
|
||||
(nav.deviceMemory ?? 8) <= 4;
|
||||
if (lightDevice) return;
|
||||
|
||||
let renderer: THREE.WebGLRenderer;
|
||||
try {
|
||||
renderer = new THREE.WebGLRenderer({
|
||||
antialias: false,
|
||||
alpha: false,
|
||||
powerPreference: "high-performance",
|
||||
});
|
||||
} catch {
|
||||
return; // static CSS fallback remains
|
||||
}
|
||||
|
||||
const reduce = window.matchMedia(
|
||||
"(prefers-reduced-motion: reduce)",
|
||||
).matches;
|
||||
const dpr = Math.min(window.devicePixelRatio || 1, 1.5);
|
||||
renderer.setPixelRatio(dpr);
|
||||
renderer.setSize(mount.clientWidth, mount.clientHeight);
|
||||
mount.appendChild(renderer.domElement);
|
||||
renderer.domElement.style.width = "100%";
|
||||
renderer.domElement.style.height = "100%";
|
||||
renderer.domElement.style.display = "block";
|
||||
if (reduce) return;
|
||||
|
||||
const scene = new THREE.Scene();
|
||||
const camera = new THREE.OrthographicCamera(-1, 1, 1, -1, 0, 1);
|
||||
|
||||
const uniforms = {
|
||||
uTime: { value: 0 },
|
||||
uColor: { value: new THREE.Color(...SIGNAL_RGB.signal) },
|
||||
uIntensity: { value: 0.35 },
|
||||
uRes: { value: new THREE.Vector2(1, 1) },
|
||||
};
|
||||
|
||||
const quad = new THREE.Mesh(
|
||||
new THREE.PlaneGeometry(2, 2),
|
||||
new THREE.ShaderMaterial({
|
||||
vertexShader: VERT,
|
||||
fragmentShader: FRAG,
|
||||
uniforms,
|
||||
depthTest: false,
|
||||
depthWrite: false,
|
||||
}),
|
||||
);
|
||||
scene.add(quad);
|
||||
|
||||
// — Drifting motes —
|
||||
const positions = new Float32Array(MOTE_COUNT * 3);
|
||||
const speeds = new Float32Array(MOTE_COUNT);
|
||||
for (let i = 0; i < MOTE_COUNT; i++) {
|
||||
positions[i * 3] = (Math.random() - 0.5) * 2;
|
||||
positions[i * 3 + 1] = (Math.random() - 0.5) * 2;
|
||||
positions[i * 3 + 2] = 0;
|
||||
speeds[i] = 0.01 + Math.random() * 0.03;
|
||||
}
|
||||
const geo = new THREE.BufferGeometry();
|
||||
geo.setAttribute("position", new THREE.BufferAttribute(positions, 3));
|
||||
const moteMat = new THREE.PointsMaterial({
|
||||
size: 0.012,
|
||||
color: new THREE.Color(...SIGNAL_RGB.signal),
|
||||
transparent: true,
|
||||
opacity: 0.5,
|
||||
blending: THREE.AdditiveBlending,
|
||||
depthTest: false,
|
||||
depthWrite: false,
|
||||
});
|
||||
const motes = new THREE.Points(geo, moteMat);
|
||||
scene.add(motes);
|
||||
|
||||
const color = new THREE.Color();
|
||||
const target = new THREE.Color();
|
||||
let targetIntensity = 0.35;
|
||||
let intensity = 0.35;
|
||||
let raf = 0;
|
||||
let last = performance.now();
|
||||
let running = !reduce;
|
||||
|
||||
const resize = () => {
|
||||
const w = mount.clientWidth || 1;
|
||||
const h = mount.clientHeight || 1;
|
||||
renderer.setSize(w, h);
|
||||
uniforms.uRes.value.set(w * dpr, h * dpr);
|
||||
};
|
||||
const ro = new ResizeObserver(resize);
|
||||
ro.observe(mount);
|
||||
resize();
|
||||
|
||||
const onVisibility = () => {
|
||||
running = !document.hidden && !reduce;
|
||||
if (running) {
|
||||
last = performance.now();
|
||||
loop();
|
||||
}
|
||||
};
|
||||
document.addEventListener("visibilitychange", onVisibility);
|
||||
// Lerp state
|
||||
let r = 45, g = 212, b = 191;
|
||||
let targetR = 45, targetG = 212, targetB = 191;
|
||||
let intensity = 0.35;
|
||||
let targetIntensity = 0.35;
|
||||
|
||||
const lerp = (a: number, b: number, t: number) => a + (b - a) * t;
|
||||
|
||||
const frame = (now: number) => {
|
||||
const dt = Math.min((now - last) / 1000, 0.05);
|
||||
last = now;
|
||||
uniforms.uTime.value += dt;
|
||||
|
||||
// Ease toward target signal/intensity each frame (no React re-render).
|
||||
const tgt = targetRef.current;
|
||||
target.set(...SIGNAL_RGB[tgt.tone]);
|
||||
color.lerp(target, 0.04);
|
||||
uniforms.uColor.value.copy(color);
|
||||
moteMat.color.copy(color);
|
||||
targetIntensity = 0.2 + tgt.intensity * 0.8;
|
||||
intensity = lerp(intensity, targetIntensity, 0.04);
|
||||
uniforms.uIntensity.value = intensity;
|
||||
const [tr, tg, tb] = TONE_css[tgt.tone].split(",").map(Number);
|
||||
targetR = tr;
|
||||
targetG = tg;
|
||||
targetB = tb;
|
||||
targetIntensity = 0.15 + tgt.intensity * 0.85;
|
||||
|
||||
const pos = geo.attributes.position as THREE.BufferAttribute;
|
||||
for (let i = 0; i < MOTE_COUNT; i++) {
|
||||
let y = pos.getY(i) + speeds[i] * dt * (0.5 + tgt.intensity);
|
||||
if (y > 1.1) y = -1.1;
|
||||
pos.setY(i, y);
|
||||
}
|
||||
pos.needsUpdate = true;
|
||||
r = lerp(r, targetR, 0.03);
|
||||
g = lerp(g, targetG, 0.03);
|
||||
b = lerp(b, targetB, 0.03);
|
||||
intensity = lerp(intensity, targetIntensity, 0.03);
|
||||
|
||||
renderer.render(scene, camera);
|
||||
if (running) raf = requestAnimationFrame(frame);
|
||||
};
|
||||
const root = mount;
|
||||
root.style.setProperty("--ab-r", String(Math.round(r)));
|
||||
root.style.setProperty("--ab-g", String(Math.round(g)));
|
||||
root.style.setProperty("--ab-b", String(Math.round(b)));
|
||||
root.style.setProperty("--ab-alpha", intensity.toFixed(3));
|
||||
|
||||
const loop = () => {
|
||||
if (raf) cancelAnimationFrame(raf);
|
||||
last = performance.now();
|
||||
raf = requestAnimationFrame(frame);
|
||||
};
|
||||
|
||||
if (reduce) {
|
||||
// single static frame
|
||||
uniforms.uIntensity.value = 0.3;
|
||||
renderer.render(scene, camera);
|
||||
} else {
|
||||
loop();
|
||||
}
|
||||
raf = requestAnimationFrame(frame);
|
||||
|
||||
const onVisibility = () => {
|
||||
if (document.hidden) {
|
||||
cancelAnimationFrame(raf);
|
||||
} else {
|
||||
last = performance.now();
|
||||
raf = requestAnimationFrame(frame);
|
||||
}
|
||||
};
|
||||
document.addEventListener("visibilitychange", onVisibility);
|
||||
|
||||
return () => {
|
||||
cancelAnimationFrame(raf);
|
||||
ro.disconnect();
|
||||
document.removeEventListener("visibilitychange", onVisibility);
|
||||
geo.dispose();
|
||||
moteMat.dispose();
|
||||
(quad.geometry as THREE.BufferGeometry).dispose();
|
||||
(quad.material as THREE.Material).dispose();
|
||||
renderer.dispose();
|
||||
if (renderer.domElement.parentNode === mount) {
|
||||
mount.removeChild(renderer.domElement);
|
||||
}
|
||||
};
|
||||
}, [targetRef]);
|
||||
|
||||
@@ -236,11 +90,37 @@ export function AmbientCanvas({
|
||||
<div
|
||||
ref={mountRef}
|
||||
aria-hidden
|
||||
className="fixed inset-0 -z-10 overflow-hidden pointer-events-none select-none"
|
||||
style={{
|
||||
background:
|
||||
"radial-gradient(120% 90% at 50% 0%, oklch(0.2 0.04 70 / 0.5), oklch(0.1 0.015 70) 60%)",
|
||||
}}
|
||||
/>
|
||||
className="ambient-bg pointer-events-none fixed inset-0 -z-10 overflow-hidden select-none"
|
||||
style={
|
||||
{
|
||||
"--ab-r": "45",
|
||||
"--ab-g": "212",
|
||||
"--ab-b": "191",
|
||||
"--ab-alpha": "0.35",
|
||||
} as React.CSSProperties
|
||||
}
|
||||
>
|
||||
{/* Base radial wash */}
|
||||
<div className="absolute inset-0 bg-[radial-gradient(120%_90%_at_50%_0%,oklch(0.2_0.04_70/0.5),oklch(0.1_0.015_70)_60%)]" />
|
||||
|
||||
{/* Drifting blurred blobs — the "fog" effect */}
|
||||
<div className="ambient-blob ambient-blob-1" />
|
||||
<div className="ambient-blob ambient-blob-2" />
|
||||
<div className="ambient-blob ambient-blob-3" />
|
||||
|
||||
{/* Floating motes — tiny dots drifting upward */}
|
||||
<div className="ambient-motes">
|
||||
{Array.from({ length: 30 }, (_, i) => (
|
||||
<span key={i} className="ambient-mote" style={{
|
||||
left: `${(i * 3.33) % 100}%`,
|
||||
animationDelay: `${(i * 0.7) % 8}s`,
|
||||
animationDuration: `${6 + (i % 5) * 2}s`,
|
||||
}} />
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Vignette */}
|
||||
<div className="absolute inset-0 bg-[radial-gradient(ellipse_at_center,transparent_20%,oklch(0.08_0.01_70/0.7)_100%)]" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,7 +1,5 @@
|
||||
"use client";
|
||||
|
||||
import { useGSAP } from "@gsap/react";
|
||||
import gsap from "gsap";
|
||||
import {
|
||||
Bot,
|
||||
Loader2,
|
||||
@@ -17,10 +15,6 @@ import { useChatbotUserId } from "@/hooks/use-chatbot-user";
|
||||
import { chatbotApi } from "@/lib/api";
|
||||
import { formatRelativeTime } from "@/lib/format";
|
||||
|
||||
if (typeof window !== "undefined") {
|
||||
gsap.registerPlugin(useGSAP);
|
||||
}
|
||||
|
||||
interface ChatMessage {
|
||||
id: string;
|
||||
sender: "user" | "bot";
|
||||
@@ -72,20 +66,15 @@ export function Chatbot() {
|
||||
}
|
||||
});
|
||||
|
||||
// GSAP animation for floating window
|
||||
useGSAP(
|
||||
() => {
|
||||
if (!containerRef.current) return;
|
||||
if (open) {
|
||||
gsap.fromTo(
|
||||
containerRef.current,
|
||||
{ opacity: 0, scale: 0.95, y: 15 },
|
||||
{ opacity: 1, scale: 1, y: 0, duration: 0.25, ease: "power2.out" },
|
||||
);
|
||||
}
|
||||
},
|
||||
{ dependencies: [open], scope: containerRef },
|
||||
);
|
||||
// CSS animation for floating window open
|
||||
useEffect(() => {
|
||||
const el = containerRef.current;
|
||||
if (!el || !open) return;
|
||||
el.style.animation = "fade-scale-in 0.25s ease-out forwards";
|
||||
return () => {
|
||||
el.style.removeProperty("animation");
|
||||
};
|
||||
}, [open]);
|
||||
|
||||
const handleSend = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
|
||||
@@ -14,7 +14,7 @@ export function GlassPanel({
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
"relative rounded-[10px] border border-hairline bg-surface p-5 shadow-xl backdrop-blur-md transition-all duration-200",
|
||||
"gradient-border relative rounded-[10px] border border-hairline bg-surface p-5 shadow-xl backdrop-blur-md transition-all duration-200",
|
||||
glow && "shadow-[0_0_24px_var(--color-signal-glow)] border-signal/30",
|
||||
className,
|
||||
)}
|
||||
|
||||
@@ -1,19 +1,11 @@
|
||||
"use client";
|
||||
|
||||
import { useGSAP } from "@gsap/react";
|
||||
import gsap from "gsap";
|
||||
import { useRef } from "react";
|
||||
import { useEffect, useRef } from "react";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
// Register plugin once on client
|
||||
if (typeof window !== "undefined") {
|
||||
gsap.registerPlugin(useGSAP);
|
||||
}
|
||||
|
||||
/**
|
||||
* GSAP-powered page transition wrapper.
|
||||
* Staggers entrance of direct children or smooth rise/fade for the container.
|
||||
* Fully cleans up on unmount and respects reduced-motion.
|
||||
* CSS-powered page transition wrapper.
|
||||
* Applies fade-scale-in animation on mount. Respects reduced-motion.
|
||||
*/
|
||||
export function PageTransition({
|
||||
children,
|
||||
@@ -24,34 +16,15 @@ export function PageTransition({
|
||||
}) {
|
||||
const containerRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
useGSAP(
|
||||
() => {
|
||||
if (!containerRef.current) return;
|
||||
|
||||
const prefersReduced = window.matchMedia(
|
||||
"(prefers-reduced-motion: reduce)",
|
||||
).matches;
|
||||
if (prefersReduced) return;
|
||||
|
||||
gsap.fromTo(
|
||||
containerRef.current,
|
||||
{
|
||||
opacity: 0,
|
||||
y: 14,
|
||||
filter: "blur(4px)",
|
||||
},
|
||||
{
|
||||
opacity: 1,
|
||||
y: 0,
|
||||
filter: "blur(0px)",
|
||||
duration: 0.45,
|
||||
ease: "power2.out",
|
||||
clearProps: "filter,transform",
|
||||
},
|
||||
);
|
||||
},
|
||||
{ scope: containerRef },
|
||||
);
|
||||
useEffect(() => {
|
||||
const el = containerRef.current;
|
||||
if (!el) return;
|
||||
if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) return;
|
||||
el.style.animation = "fade-scale-in 0.4s ease-out forwards";
|
||||
return () => {
|
||||
el.style.removeProperty("animation");
|
||||
};
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div ref={containerRef} className={cn("w-full opacity-0", className)}>
|
||||
|
||||
@@ -14,7 +14,7 @@ export function SectionHeader({
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
"mb-3.5 flex flex-wrap items-center justify-between gap-3",
|
||||
"reveal-up mb-3.5 flex flex-wrap items-center justify-between gap-3",
|
||||
className,
|
||||
)}
|
||||
>
|
||||
|
||||
@@ -1,16 +1,10 @@
|
||||
"use client";
|
||||
|
||||
import { useGSAP } from "@gsap/react";
|
||||
import gsap from "gsap";
|
||||
import { usePathname } from "next/navigation";
|
||||
import { useRef } from "react";
|
||||
import { useEffect, useRef } from "react";
|
||||
import { isActivePath, navItems } from "@/lib/navigation";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
if (typeof window !== "undefined") {
|
||||
gsap.registerPlugin(useGSAP);
|
||||
}
|
||||
|
||||
function NavItem({
|
||||
href,
|
||||
label,
|
||||
@@ -35,11 +29,9 @@ function NavItem({
|
||||
)}
|
||||
>
|
||||
<Icon className="relative z-10 size-4" strokeWidth={active ? 2.2 : 1.8} />
|
||||
{/* Precision Micro-Indicator */}
|
||||
{active && (
|
||||
<span className="absolute -left-[5px] h-3.5 w-[2px] rounded-full bg-signal shadow-[0_0_8px_var(--color-signal-glow)]" />
|
||||
)}
|
||||
{/* Tooltip on hover */}
|
||||
<span className="pointer-events-none absolute left-full z-50 ml-2.5 hidden whitespace-nowrap rounded-md border border-hairline bg-surface px-2 py-0.5 font-sans text-[11px] font-medium tracking-tight text-ink opacity-0 shadow-lg backdrop-blur-md transition-all group-hover:translate-x-0.5 group-hover:opacity-100 md:block">
|
||||
{label}
|
||||
</span>
|
||||
@@ -52,25 +44,32 @@ export function NavRail() {
|
||||
const path = pathname ?? "/";
|
||||
const railRef = useRef<HTMLElement>(null);
|
||||
|
||||
useGSAP(
|
||||
() => {
|
||||
if (!railRef.current) return;
|
||||
const items = railRef.current.querySelectorAll(".nav-dock-item");
|
||||
gsap.fromTo(
|
||||
items,
|
||||
{ opacity: 0, x: -6 },
|
||||
{
|
||||
opacity: 1,
|
||||
x: 0,
|
||||
duration: 0.3,
|
||||
stagger: 0.025,
|
||||
ease: "power2.out",
|
||||
clearProps: "transform",
|
||||
},
|
||||
);
|
||||
},
|
||||
{ scope: railRef },
|
||||
);
|
||||
useEffect(() => {
|
||||
const rail = railRef.current;
|
||||
if (!rail) return;
|
||||
const items = rail.querySelectorAll<HTMLElement>(".nav-dock-item");
|
||||
if (items.length === 0) return;
|
||||
|
||||
items.forEach((el, i) => {
|
||||
el.style.opacity = "0";
|
||||
el.style.animationFillMode = "forwards";
|
||||
el.style.animationTimingFunction = "ease-out";
|
||||
el.style.animationName = "stagger-slide-in";
|
||||
el.style.animationDuration = "0.3s";
|
||||
el.style.animationDelay = `${i * 0.025}s`;
|
||||
});
|
||||
|
||||
return () => {
|
||||
items.forEach((el) => {
|
||||
el.style.removeProperty("opacity");
|
||||
el.style.removeProperty("animation-name");
|
||||
el.style.removeProperty("animation-duration");
|
||||
el.style.removeProperty("animation-delay");
|
||||
el.style.removeProperty("animation-fill-mode");
|
||||
el.style.removeProperty("animation-timing-function");
|
||||
});
|
||||
};
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<nav
|
||||
|
||||
@@ -1,94 +1,85 @@
|
||||
"use client";
|
||||
|
||||
import { useGSAP } from "@gsap/react";
|
||||
import gsap from "gsap";
|
||||
import { Radio } from "lucide-react";
|
||||
import { useRef } from "react";
|
||||
import { useEffect, useRef } from "react";
|
||||
import { Avatar } from "@/components/primitives";
|
||||
import type { ActiveSpeaker } from "@/lib/types";
|
||||
|
||||
if (typeof window !== "undefined") {
|
||||
gsap.registerPlugin(useGSAP);
|
||||
}
|
||||
|
||||
export function VoiceStage({ speakers }: { speakers: ActiveSpeaker[] }) {
|
||||
const containerRef = useRef<HTMLDivElement>(null);
|
||||
const n = speakers.length;
|
||||
const speaking = speakers.filter((s) => s.speaking).length;
|
||||
const live = speaking > 0;
|
||||
const speakingIds = speakers
|
||||
.filter((s) => s.speaking)
|
||||
.map((s) => s.userId)
|
||||
.join(",");
|
||||
|
||||
useGSAP(
|
||||
() => {
|
||||
if (!containerRef.current) return;
|
||||
const speakerNodes =
|
||||
containerRef.current.querySelectorAll(".speaker-node");
|
||||
if (speakerNodes.length > 0) {
|
||||
gsap.fromTo(
|
||||
speakerNodes,
|
||||
{ scale: 0.7, opacity: 0 },
|
||||
{
|
||||
scale: 1,
|
||||
opacity: 1,
|
||||
duration: 0.4,
|
||||
stagger: 0.05,
|
||||
ease: "back.out(1.5)",
|
||||
},
|
||||
);
|
||||
}
|
||||
},
|
||||
{ scope: containerRef, dependencies: [speakers.length] },
|
||||
);
|
||||
// CSS stagger reveal for speaker nodes
|
||||
useEffect(() => {
|
||||
const container = containerRef.current;
|
||||
if (!container) return;
|
||||
const nodes = container.querySelectorAll<HTMLElement>(".speaker-node");
|
||||
if (nodes.length === 0) return;
|
||||
if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) return;
|
||||
|
||||
// Reactive pulse ring loop keyed to active speaking set — cleared on stop.
|
||||
useGSAP(
|
||||
() => {
|
||||
if (!containerRef.current) return;
|
||||
const prefersReduced = window.matchMedia(
|
||||
"(prefers-reduced-motion: reduce)",
|
||||
).matches;
|
||||
if (prefersReduced) return;
|
||||
nodes.forEach((el, i) => {
|
||||
el.style.opacity = "0";
|
||||
el.style.animationFillMode = "forwards";
|
||||
el.style.animationTimingFunction = "cubic-bezier(0.34, 1.56, 0.64, 1)";
|
||||
el.style.animationName = "scale-bounce-in";
|
||||
el.style.animationDuration = "0.4s";
|
||||
el.style.animationDelay = `${i * 0.05}s`;
|
||||
});
|
||||
|
||||
const ringNodes = containerRef.current.querySelectorAll(
|
||||
".speaker-pulse-ring",
|
||||
);
|
||||
if (ringNodes.length === 0) return;
|
||||
|
||||
const tl = gsap.timeline({ repeat: -1, yoyo: true });
|
||||
tl.to(ringNodes, {
|
||||
scale: 1.18,
|
||||
opacity: 0.35,
|
||||
duration: 0.55,
|
||||
ease: "sine.inOut",
|
||||
stagger: { each: 0.08, from: "random" },
|
||||
return () => {
|
||||
nodes.forEach((el) => {
|
||||
el.style.removeProperty("opacity");
|
||||
el.style.removeProperty("animation-name");
|
||||
el.style.removeProperty("animation-duration");
|
||||
el.style.removeProperty("animation-delay");
|
||||
el.style.removeProperty("animation-fill-mode");
|
||||
el.style.removeProperty("animation-timing-function");
|
||||
});
|
||||
};
|
||||
}, [speakers.length]);
|
||||
|
||||
return () => {
|
||||
tl.kill();
|
||||
gsap.set(ringNodes, { clearProps: "scale,opacity" });
|
||||
};
|
||||
},
|
||||
{ scope: containerRef, dependencies: [speakingIds] },
|
||||
);
|
||||
// CSS pulse ring for active speakers
|
||||
useEffect(() => {
|
||||
const container = containerRef.current;
|
||||
if (!container) return;
|
||||
if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) return;
|
||||
const rings = container.querySelectorAll<HTMLElement>(".speaker-pulse-ring");
|
||||
if (rings.length === 0) return;
|
||||
|
||||
rings.forEach((el, i) => {
|
||||
el.style.animationName = "pulse-ring";
|
||||
el.style.animationDuration = "1.1s";
|
||||
el.style.animationTimingFunction = "sine.in-out";
|
||||
el.style.animationIterationCount = "infinite";
|
||||
el.style.animationDelay = `${i * 0.08}s`;
|
||||
});
|
||||
|
||||
return () => {
|
||||
rings.forEach((el) => {
|
||||
el.style.removeProperty("animation-name");
|
||||
el.style.removeProperty("animation-duration");
|
||||
el.style.removeProperty("animation-timing-function");
|
||||
el.style.removeProperty("animation-iteration-count");
|
||||
el.style.removeProperty("animation-delay");
|
||||
});
|
||||
};
|
||||
}, [speakers.filter((s) => s.speaking).map((s) => s.userId).join(",")]);
|
||||
|
||||
return (
|
||||
<div
|
||||
ref={containerRef}
|
||||
className="relative mx-auto aspect-square w-full max-w-[380px]"
|
||||
>
|
||||
{/* Tactical radar coordinate grids & rings */}
|
||||
<div className="absolute inset-4 rounded-full border border-hairline/30" />
|
||||
<div className="absolute inset-12 rounded-full border border-dashed border-hairline/40 animate-spin-disc" />
|
||||
<div className="absolute inset-12 rounded-full border border-dashed border-hairline/40 animate-spin-disc radar-sweep" />
|
||||
<div className="absolute left-1/2 top-1/2 size-80 -translate-x-1/2 -translate-y-1/2 rounded-full border border-hairline/20" />
|
||||
<div
|
||||
className="absolute left-1/2 top-1/2 size-56 -translate-x-1/2 -translate-y-1/2 rounded-full bg-signal/5 transition-opacity duration-500"
|
||||
style={{ opacity: live ? 1 : 0.2 }}
|
||||
/>
|
||||
|
||||
{/* Central Command Beacon */}
|
||||
<div
|
||||
className="absolute left-1/2 top-1/2 flex size-28 -translate-x-1/2 -translate-y-1/2 flex-col items-center justify-center rounded-full border backdrop-blur-md transition-all duration-300"
|
||||
style={{
|
||||
@@ -105,7 +96,6 @@ export function VoiceStage({ speakers }: { speakers: ActiveSpeaker[] }) {
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Orbiting Speakers */}
|
||||
{speakers.map((s, i) => {
|
||||
const angle = (i / Math.max(n, 1)) * Math.PI * 2 - Math.PI / 2;
|
||||
const radius = 44;
|
||||
|
||||
@@ -1,21 +1,15 @@
|
||||
"use client";
|
||||
|
||||
import { useGSAP } from "@gsap/react";
|
||||
import gsap from "gsap";
|
||||
import { useRef } from "react";
|
||||
|
||||
if (typeof window !== "undefined") {
|
||||
gsap.registerPlugin(useGSAP);
|
||||
// Set default Linear-style crisp easing & duration
|
||||
gsap.defaults({
|
||||
ease: "power2.out",
|
||||
duration: 0.35,
|
||||
});
|
||||
}
|
||||
import { useEffect, useRef } from "react";
|
||||
|
||||
/**
|
||||
* Reusable hook for staggered reveal animations on child elements.
|
||||
* Linear-style: crisp entry, very subtle vertical displacement, no layout shift.
|
||||
* CSS-based stagger reveal. Applies `.stagger-in` class with incremental
|
||||
* `animation-delay` to matching children when they enter the viewport.
|
||||
* No GSAP — pure CSS keyframes + IntersectionObserver.
|
||||
*
|
||||
* Add this to globals.css if not already present:
|
||||
* @keyframes stagger-in { from { opacity:0; transform:translateY(6px) } to { opacity:1; transform:translateY(0) } }
|
||||
* .stagger-in { opacity:0; animation: stagger-in 0.32s ease-out forwards }
|
||||
*/
|
||||
export function useStaggerReveal<T extends HTMLElement = HTMLDivElement>(
|
||||
selector: string,
|
||||
@@ -29,43 +23,51 @@ export function useStaggerReveal<T extends HTMLElement = HTMLDivElement>(
|
||||
) {
|
||||
const containerRef = useRef<T>(null);
|
||||
|
||||
useGSAP(
|
||||
() => {
|
||||
if (!containerRef.current) return;
|
||||
const elements = containerRef.current.querySelectorAll(selector);
|
||||
if (!elements || elements.length === 0) return;
|
||||
useEffect(() => {
|
||||
const container = containerRef.current;
|
||||
if (!container) return;
|
||||
|
||||
const prefersReduced = window.matchMedia(
|
||||
"(prefers-reduced-motion: reduce)",
|
||||
).matches;
|
||||
if (prefersReduced) {
|
||||
gsap.set(elements, { opacity: 1, y: 0 });
|
||||
return;
|
||||
}
|
||||
const prefersReduced = window.matchMedia(
|
||||
"(prefers-reduced-motion: reduce)",
|
||||
).matches;
|
||||
|
||||
gsap.fromTo(
|
||||
elements,
|
||||
{
|
||||
opacity: 0,
|
||||
y: options?.y ?? 8,
|
||||
},
|
||||
{
|
||||
opacity: 1,
|
||||
y: 0,
|
||||
duration: options?.duration ?? 0.32,
|
||||
delay: options?.delay ?? 0.02,
|
||||
stagger: options?.stagger ?? 0.03,
|
||||
ease: "power2.out",
|
||||
clearProps: "transform",
|
||||
},
|
||||
);
|
||||
},
|
||||
{
|
||||
scope: containerRef,
|
||||
dependencies: options?.dependencies ?? [],
|
||||
revertOnUpdate: true,
|
||||
},
|
||||
);
|
||||
const elements = container.querySelectorAll<HTMLElement>(selector);
|
||||
if (!elements || elements.length === 0) return;
|
||||
|
||||
if (prefersReduced) {
|
||||
elements.forEach((el) => {
|
||||
el.style.opacity = "1";
|
||||
el.style.transform = "none";
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
const staggerSec = options?.stagger ?? 0.03;
|
||||
const durationSec = options?.duration ?? 0.32;
|
||||
const baseDelay = options?.delay ?? 0;
|
||||
|
||||
elements.forEach((el, i) => {
|
||||
el.style.opacity = "0";
|
||||
el.style.animationFillMode = "forwards";
|
||||
el.style.animationTimingFunction = "ease-out";
|
||||
el.style.animationName = "stagger-in";
|
||||
el.style.animationDuration = `${durationSec}s`;
|
||||
el.style.animationDelay = `${baseDelay + i * staggerSec}s`;
|
||||
});
|
||||
|
||||
// Cleanup: remove inline styles so next re-render can re-apply
|
||||
return () => {
|
||||
elements.forEach((el) => {
|
||||
el.style.removeProperty("opacity");
|
||||
el.style.removeProperty("animation-name");
|
||||
el.style.removeProperty("animation-duration");
|
||||
el.style.removeProperty("animation-delay");
|
||||
el.style.removeProperty("animation-fill-mode");
|
||||
el.style.removeProperty("animation-timing-function");
|
||||
});
|
||||
};
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, options?.dependencies ?? []);
|
||||
|
||||
return containerRef;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user