Use Anime.js for app animations

Author: Edwin Chan

CENTRAL.md

@@ -33,6 +33,7 @@ Stack: Next.js, NextAuth (Google + dev bypass), Prisma, KaTeX for math, Lucide i
 
 ### Recently landed
 
+- **Anime.js animation pass** — the shared `MathCurveLoader` now drives SVG path drawing, rotation, and dot pulses with Anime.js v4 instead of CSS keyframes, and `TypewriterGreeting` uses Anime.js for its text tick/caret motion. Dependency: `animejs` in `package.json`. Reduced-motion users still get static loader/caret output.
 - **Problem-set writeups** — `/problem-sets/[slug]/writeups` lets signed-in users post LaTeX/HTML solution notes with up to four images, then sort by latest/top and upvote/downvote posts. Authors can delete their own writeups with confirmation; admins can delete any writeup. `/writeups` is the sidebar directory for latest/top writeups and problem-set search. Persistence uses new `Writeup`, `WriteupImage`, and `WriteupVote` Prisma models plus `lib/writeup-images.ts`; image bytes are stored through the existing storage layer and streamed via `/api/files/[id]`.
 - **Class announcements** — teachers/admins post title/body announcements from `/classes` to one or more classes. `Announcement` persists the message with an implicit class relation; `POST /api/admin/announcements` enforces `admin:users` and teacher ownership. Dashboard loads targeted announcements fresh on page render and pins them above the hero.
 - **Profile mastery heatmap** — `app/users/[username]/page.tsx` now renders a GitHub-style yearly heatmap between authored tasks and the set grid. It counts days where the profile user mastered one or more sets with best-day intensity capped at 5.

DBSMO/Projects/dbsmo/Components.md

@@ -1,6 +1,6 @@
 ---
 date: 2026-06-26
-updated: 2026-06-28
+updated: 2026-06-29
 type: components
 tags: [project, architecture, components, ui, dbsmo]
 ai-first: true
@@ -22,7 +22,8 @@ This note maps important [[dbsmo]] UI/components to their source files and usage
 - `AuthButton` in `app/auth-button.tsx`: sign-in/sign-out control. It renders Google sign-in, optional bypass buttons, session badge, and profile avatar link.
 - `Avatar` in `app/avatar.tsx`: shared avatar display; deterministic fallback initial/tint helper lives in `lib/avatar.ts`.
 - `ThemeToggle` in `app/theme-toggle.tsx`: theme control used on dashboard and problem set pages.
-- `TypewriterGreeting` in `app/typewriter-greeting.tsx`: animated greeting used by dashboard and configured in settings.
+- `MathCurveLoader` in `app/math-curve-loader.tsx`: shared inline loading indicator used across admin, problem set, FTW, classes, settings, and profile actions. It renders random math-curve SVG variants and uses Anime.js v4 for path drawing, rotor spin, and dot pulses while respecting `prefers-reduced-motion`.
+- `TypewriterGreeting` in `app/typewriter-greeting.tsx`: animated greeting used by dashboard and configured in settings. It keeps the existing typed/deleted text state machine and uses Anime.js v4 for subtle text tick and caret motion.
 
 ## Student Dashboard and Catalog
 

README.md

@@ -43,5 +43,6 @@ Session updates from the CodeGraph/Second Brain indexing pass onward:
 - Added problem-set writeups with LaTeX/HTML text, image uploads, latest/top sorting, and upvote/downvote voting. Writeups are reachable from the set header beside the bookmark action and remain accessible regardless of submission status.
 - Added owner/admin writeup deletion with an in-card confirmation step, plus a sidebar Writeups page for browsing latest/top writeups and searching by problem set.
 - Added class announcements: teachers/admins can post messages to one or more classes, and students see targeted messages pinned at the top of the dashboard on page load.
+- Switched the shared math curve loader and dashboard typewriter/caret motion to Anime.js v4 while keeping reduced-motion fallbacks.
 
 © 2026 Cosmic Crusader

app/globals.css

@@ -2232,7 +2232,6 @@ img.avatar {
 }
 
 .math-curve-loader-rotor {
-  animation: math-curve-spin calc(var(--loader-duration) * 1.7) linear infinite;
   transform-origin: 50px 50px;
 }
 
@@ -2250,14 +2249,11 @@ img.avatar {
 }
 
 .math-curve-loader-path {
-  animation: math-curve-dash var(--loader-duration) ease-in-out infinite;
   opacity: 0.92;
-  stroke-dasharray: 24 76;
   stroke-width: 7;
 }
 
 .math-curve-loader-dot {
-  animation: math-curve-pulse calc(var(--loader-duration) * 0.7) ease-in-out infinite;
   fill: currentColor;
   opacity: 0.55;
   transform-box: fill-box;
@@ -2274,42 +2270,12 @@ img.avatar {
   opacity: 0.5;
 }
 
-@keyframes math-curve-spin {
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-@keyframes math-curve-dash {
-  0% {
-    stroke-dashoffset: 100;
-  }
-
-  50% {
-    stroke-dasharray: 38 62;
-  }
-
-  100% {
-    stroke-dashoffset: 0;
-  }
-}
-
-@keyframes math-curve-pulse {
-  0%,
-  100% {
-    transform: scale(0.55);
-  }
-
-  50% {
-    transform: scale(1.12);
-  }
-}
 
 @media (prefers-reduced-motion: reduce) {
   .math-curve-loader-rotor,
   .math-curve-loader-path,
   .math-curve-loader-dot {
-    animation: none;
+    transform: none !important;
   }
 }
 
@@ -4088,24 +4054,13 @@ html.dark .confetti-triangles span {
   color: var(--color-pink);
   margin-left: 1px;
   opacity: 1;
-  animation: typewriter-cursor-blink 1s steps(1, end) infinite;
+  transform-origin: center;
 }
 
 .typewriter-cursor.is-typing {
-  animation: none;
   opacity: 1;
 }
 
-@keyframes typewriter-cursor-blink {
-  0%,
-  49% {
-    opacity: 1;
-  }
-  50%,
-  100% {
-    opacity: 0;
-  }
-}
 
 .hero-copy h2 .typewriter-greeting {
   min-height: 1.2em;

app/math-curve-loader.tsx

@@ -1,6 +1,7 @@
 "use client";
 
-import { useEffect, useState } from "react";
+import { animate, createDrawable, stagger } from "animejs";
+import { useEffect, useRef, useState } from "react";
 import type { CSSProperties } from "react";
 
 type Point = {
@@ -124,6 +125,9 @@ const CURVE_VARIANTS: CurveVariant[] = CURVE_POINTS.map((curve) => ({
 
 export function MathCurveLoader({ size = 18, label = "Loading", className }: MathCurveLoaderProps) {
   const [variantIndex, setVariantIndex] = useState(0);
+  const rotorRef = useRef<SVGGElement>(null);
+  const pathRef = useRef<SVGPathElement>(null);
+  const dotsRef = useRef<SVGCircleElement[]>([]);
   const variant = CURVE_VARIANTS[variantIndex] ?? CURVE_VARIANTS[0];
 
   useEffect(() => {
@@ -134,6 +138,49 @@ export function MathCurveLoader({ size = 18, label = "Loading", className }: Mat
     return () => window.cancelAnimationFrame(frame);
   }, []);
 
+  useEffect(() => {
+    const rotor = rotorRef.current;
+    const path = pathRef.current;
+    const dots = dotsRef.current;
+
+    if (!rotor || !path || window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
+      return;
+    }
+
+    const [drawable] = createDrawable(path, 0, 0);
+    drawable.setAttribute("draw", "0 0");
+    const drawAnimation = animate(drawable, {
+      draw: "0 1",
+      duration: variant.durationMs,
+      ease: "inOutSine",
+      loop: true,
+      alternate: true,
+    });
+    const spinAnimation = animate(rotor, {
+      rotate: "360deg",
+      duration: variant.durationMs * 1.7,
+      ease: "linear",
+      loop: true,
+    });
+    const dotAnimation = dots.length
+      ? animate(dots, {
+          scale: [0.5, 1.15],
+          opacity: [0.42, 0.9],
+          duration: variant.durationMs * 0.7,
+          delay: stagger(85, { from: "center" }),
+          ease: "inOutSine",
+          loop: true,
+          alternate: true,
+        })
+      : null;
+
+    return () => {
+      drawAnimation.revert();
+      spinAnimation.revert();
+      dotAnimation?.revert();
+    };
+  }, [variant]);
+
   return (
     <span
       aria-label={label}
@@ -142,23 +189,29 @@ export function MathCurveLoader({ size = 18, label = "Loading", className }: Mat
       style={
         {
           "--loader-size": `${size}px`,
-          "--loader-duration": `${variant.durationMs}ms`,
         } as CSSProperties
       }
       title={variant.name}
     >
       <svg viewBox="0 0 100 100" fill="none" aria-hidden="true">
-        <g className="math-curve-loader-rotor">
+        <g className="math-curve-loader-rotor" ref={rotorRef}>
           <path className="math-curve-loader-track" d={variant.path} pathLength={100} />
-          <path className="math-curve-loader-path" d={variant.path} pathLength={100} />
+          <path
+            className="math-curve-loader-path"
+            d={variant.path}
+            pathLength={100}
+            ref={pathRef}
+          />
           {variant.particles.map((point, index) => (
             <circle
               className={`math-curve-loader-dot ${variant.className}`}
               cx={point.x}
               cy={point.y}
               key={`${variant.name}-${index}`}
+              ref={(node) => {
+                if (node) dotsRef.current[index] = node;
+              }}
               r={index === 0 ? 4.6 : 2.8}
-              style={{ animationDelay: `${index * -110}ms` }}
             />
           ))}
         </g>

app/typewriter-greeting.tsx

@@ -1,6 +1,7 @@
 "use client";
 
-import { useEffect, useMemo, useState, useSyncExternalStore } from "react";
+import { animate } from "animejs";
+import { useEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
 
 const DEFAULT_TYPE_SPEED_MS = 42;
 const DEFAULT_DELETE_SPEED_MS = 22;
@@ -100,6 +101,8 @@ function GreetingTyper({ name }: { name: string }) {
   const [greetingIndex, setGreetingIndex] = useState(INITIAL_GREETING_INDEX);
   const [charIndex, setCharIndex] = useState(0);
   const [isDeleting, setIsDeleting] = useState(false);
+  const textRef = useRef<HTMLSpanElement>(null);
+  const cursorRef = useRef<HTMLSpanElement>(null);
   const storedSpeeds = useSyncExternalStore(
     subscribeToTypewriterSpeeds,
     getTypewriterSpeedsSnapshot,
@@ -151,11 +154,52 @@ function GreetingTyper({ name }: { name: string }) {
     speeds.typeSpeed,
   ]);
 
+  useEffect(() => {
+    const text = textRef.current;
+
+    if (!text || window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
+      return;
+    }
+
+    const textAnimation = animate(text, {
+      opacity: [0.72, 1],
+      translateY: [2, 0],
+      duration: isDeleting ? 90 : 140,
+      ease: "outQuad",
+    });
+
+    return () => {
+      textAnimation.revert();
+    };
+  }, [charIndex, isDeleting]);
+
+  useEffect(() => {
+    const cursor = cursorRef.current;
+
+    if (!cursor || window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
+      return;
+    }
+
+    const cursorAnimation = animate(cursor, {
+      opacity: [1, 0.16],
+      scaleY: [1, 0.72],
+      duration: 620,
+      ease: "steps(2)",
+      loop: true,
+      alternate: true,
+    });
+
+    return () => {
+      cursorAnimation.revert();
+    };
+  }, []);
+
   return (
     <span className="typewriter-greeting" aria-label={activeGreeting}>
-      {activeGreeting.slice(0, charIndex)}
+      <span ref={textRef}>{activeGreeting.slice(0, charIndex)}</span>
       <span
         className={`typewriter-cursor${charIndex < activeGreeting.length || isDeleting ? " is-typing" : ""}`}
+        ref={cursorRef}
         aria-hidden="true"
       >
         |

package-lock.json

@@ -25,6 +25,7 @@
     "@prisma/adapter-pg": "^7.8.0",
     "@prisma/client": "latest",
     "@types/katex": "^0.16.8",
+    "animejs": "^4.5.0",
     "csv-parse": "^6.2.1",
     "dotenv": "^17.4.2",
     "js-yaml": "latest",