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
2026-08-26 19:43:57 +07:00
parent 192685e1ce
commit 611ba39973
18 changed files with 698 additions and 549 deletions
@@ -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();