Remove staged content 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
 
+- **Immediate content rendering** — removed the global `AnimeRouteEffects` stagger, analytics card/bar entrance pass, trend-chart drawing animation, page fade, smooth scrolling, FTW result-row fade, and floating confetti motion. Routes and analytics now render at their final state immediately. Anime.js remains only for the shared math loading indicator and typewriter caret; ordinary hover/focus and functional feedback transitions remain (sources: `app/layout.tsx`, `app/admin/analytics/page.tsx`, `app/admin/sets/[id]/analytics/page.tsx`, `app/admin/analytics/trend-chart.tsx`, `app/globals.css`).
 - **Consistent page exits and sidebar state** — page headers and completion states use the shared `PageBackLink` control with one explicit `Back to …` label, one canonical 44 px control size, and a logical parent destination. The Classes landing page now includes its missing `Back to Dashboard` control, and nested class pages link directly back to `/classes`. Detail pages no longer present competing arrow buttons for both Dashboard and their parent collection. Sidebar activation now selects one most-specific segment-aware route, so the signed-in user's `/users/<username>` page highlights only **My Profile**, while another user's profile highlights **Users**. Active links expose `aria-current="page"`; no schema or deploy change is required (sources: `app/page-back-link.tsx`, `lib/sidebar-navigation.ts`, `app/site-sidebar-nav.tsx`).
 - **Uniform Students and Leaderboard rows** — the dense Students and Leaderboard tables opt out of the global alternating cream row background. Ordinary rows now share one neutral surface; top-three Leaderboard emphasis and row hover feedback remain intact (sources: `app/admin/students/page.tsx`, `app/globals.css`).
 - **Invisible KaTeX overflow chrome** — inline and display statement math keep local horizontal scrolling for long expressions, but their browser scrollbars are hidden so short formulas no longer render grey pill-shaped “sliders” underneath (source: `app/globals.css`).
@@ -49,7 +50,7 @@ Stack: Next.js, NextAuth (Google + dev bypass), Prisma, KaTeX for math, Lucide i
 - **Expanded LaTeX statement support** — KaTeX is upgraded to `0.17.x`, the official `mhchem` extension enables `\ce{...}`, and `lib/latex-compat.ts` converts document wrappers plus `tabular`, `tabular*`, `tabularx`, and `longtable` into safe KaTeX-compatible arrays, including standard optional position arguments such as `[t]`. A production sweep of all published 1985-1998 AJHSME sets found and covered six affected expressions in 1987 Q8/Q23, 1989 Q14/Q22, 1990 Q9, and 1991 Q6. Safe MathLive notation aliases map to KaTeX primitives; editor/HTML commands remain unsupported. Rendering keeps `trust: false`, `maxSize: 50`, and `maxExpand: 1000`. See `docs/latex-support.md`.
 - **Legacy LaTeX currency compatibility** — imported contest statements using full-LaTeX `\textdollar` or invalid currency sequences such as `\54` now render through bounded aliases in `lib/latex-compat.ts`; escaped row breaks remain unchanged.
 - **Escape-aware LaTeX parsing and safe aliases** — `LatexStatement` now tokenizes escaped dollar signs, multiline delimiters, image tokens, and matching bare environments without regex delimiter collisions. This fixes HTML imports such as 1996 AJHSME question 18 (`<math>\$2000</math>`). Conservative aliases cover common blackboard/bold, paired-delimiter, calculus, and basic SI-unit notation; legacy `eqnarray`/`flalign`/`multline` displays are downgraded safely. Security remains `trust: false`, `globalGroup: false`, fresh macros per expression, bounded size/expansion, and inert non-math HTML.
-- **Anime.js animation pass** — the shared `MathCurveLoader` now drives SVG path drawing, rotation, and dot pulses with Anime.js v4 instead of CSS keyframes, `AnimeRouteEffects` adds reduced-motion-aware route reveal animations for key panels/rows/actions, and analytics surfaces use `AnalyticsMotion` plus animated `TrendChart` path/dots for growing bars and drawn charts. `TypewriterGreeting` keeps the existing typed/deleted text state machine and only animates the caret, avoiding per-character text tween flicker. Dependency: `animejs` in `package.json`.
+- **Focused Anime.js usage** — the shared `MathCurveLoader` drives SVG path drawing, rotation, and dot pulses with Anime.js v4, while `TypewriterGreeting` uses it only for caret motion. Decorative route, analytics, and chart entrance animations were subsequently removed to keep content immediate. Dependency: `animejs` in `package.json`.
 - **Per-set analytics access** — admins can open `/admin/sets/[id]/analytics` directly from the student-facing problem set header and the admin set editor; the editor delete action uses full-size topbar button sizing while the list keeps compact row actions.
 - **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.

DBSMO/Projects/dbsmo/Components.md

@@ -1,6 +1,6 @@
 ---
 date: 2026-06-26
-updated: 2026-07-19
+updated: 2026-07-26
 type: components
 tags: [project, architecture, components, ui, dbsmo]
 ai-first: true
@@ -15,9 +15,8 @@ This note maps important [[dbsmo]] UI/components to their source files and usage
 
 ## Global Shell
 
-- `RootLayout` in `app/layout.tsx`: imports KaTeX CSS/global CSS, configures Inter and Shantell Sans CSS variables, sets metadata/viewport, injects an early theme script from `localStorage`, renders `SiteSidebar`, optional mobile nav toggle, `AnimeRouteEffects`, and `.site-content`.
+- `RootLayout` in `app/layout.tsx`: imports KaTeX CSS/global CSS, configures Inter and Shantell Sans CSS variables, sets metadata/viewport, injects an early theme script from `localStorage`, and renders `SiteSidebar`, the optional mobile nav toggle, `.site-content`, and `AppFooter`.
 - The two final hand-drawn override sections in `app/globals.css` define paper/ink tokens, graph-paper surfaces, asymmetric squircle card/control corners, marker accents, dark-mode equivalents, and route-specific coverage. Shared functional surfaces use native borders because `border-image` produced unclipped rectangular frames around squircles; `border-shape` remains limited to bounded empty states and the landing orbit. Dark structural borders use lower-opacity ink tokens, and search inputs show a single cyan border only while focused. Global wavy eyebrow/title underlines are intentionally disabled. Shantell Sans is scoped to headings, compact controls, and tabular display text; long-form content, inputs, and math stay in Inter. `app/page.tsx` supplies the decorative math-sketch spans used by the public sign-in composition. The route audit covers all primary non-game surfaces; FTW and Playground are excluded. See [[Common Tasks]] and `docs/visual-system.md`.
-- `AnimeRouteEffects` in `app/anime-route-effects.tsx`: client-only Anime.js v4 route reveal pass for visible page panels, rows, cards, and action controls; it reruns on pathname changes and exits for `prefers-reduced-motion`.
 - `SiteSidebar` in `app/site-sidebar.tsx`: server component that loads session/user and builds sidebar links based on raw admin role plus `hasPermission(...)`. It renders the Lucide Sigma/DBSMO wordmark, `SiteSidebarNav`, and `GlobalMobileNavScrim`. At desktop widths `app/globals.css` keeps it at 64 px until hover or keyboard focus expands it to 240 px and reveals labels; at mobile widths it remains the existing off-canvas sheet. Browser metadata and the public landing brand use the matching `public/dbsmo-mark.svg` asset.
 - `SiteSidebarNav` in `app/site-sidebar-nav.tsx`: client nav that maps link icon names to lucide icons and marks active links by pathname prefix.
 - `GlobalMobileNavToggle` and `GlobalMobileNavScrim` in `app/global-mobile-nav.tsx`: mobile sidebar controls used by the root shell/sidebar. Mobile sheet sizing is fixed in `app/globals.css` so hover/focus/focus-within states keep the same top padding and do not shift the nav grid during taps.
@@ -75,8 +74,8 @@ This note maps important [[dbsmo]] UI/components to their source files and usage
 
 - `AnalyticsOverviewPage` in `app/admin/analytics/page.tsx`: server route that builds analytics summary/trend/filter options.
 - `AnalyticsFilters` and local `SearchableSelect` in `app/admin/analytics/filters.tsx`: client filter bar that edits query params and supports searchable dropdowns/date range.
-- `AnalyticsMotion` in `app/admin/analytics/analytics-motion.tsx`: client Anime.js pass for analytics pages; meter fills, score distribution bars, daily activity bars, and accuracy cards animate on page/filter changes with reduced-motion exit.
-- `TrendChart` in `app/admin/analytics/trend-chart.tsx`: client SVG chart for attempts/completions/average percent trend; Anime.js draws the line path and pops the dots in when the chart data changes.
+- Analytics metrics in `app/admin/analytics/page.tsx` and `app/admin/sets/[id]/analytics/page.tsx` render directly at their final widths and values; there is no staggered entrance pass.
+- `TrendChart` in `app/admin/analytics/trend-chart.tsx`: client SVG chart for attempts/completions/average percent trend. It renders statically and retains pointer/focus hover details without delaying the line, area, or dots.
 - `AuditFilters` and local `SearchableSelect` in `app/admin/audit/audit-filters.tsx`: audit-log filtering UI.
 - `FeedbackTable` in `app/admin/feedback/feedback-table.tsx`: feedback list/table client.
 - `FeedbackActions` in `app/admin/feedback/feedback-actions.tsx`: feedback status/admin-note actions backed by admin feedback APIs.

DBSMO/Projects/dbsmo/File Map.md

@@ -25,7 +25,7 @@ This is a folder/file guide for [[dbsmo]], verified with CodeGraph and `rg --fil
 
 ## `app/` Routes and UI
 
-- `app/layout.tsx`, `app/anime-route-effects.tsx` - root layout, Inter font, KaTeX CSS, theme bootstrap script, sidebar shell, mobile nav toggle, route-level Anime.js reveal effects, and global body wrapper (sources: named files).
+- `app/layout.tsx` - root layout, Inter/Shantell Sans fonts, KaTeX CSS, theme bootstrap script, sidebar shell, mobile nav toggle, global body wrapper, and footer. Route content renders immediately without a global entrance-animation component (source: named file).
 - `app/globals.css` - dominant styling for app shells and components (source: `app/globals.css`).
 - `app/page.tsx`, `app/login/page.tsx`, `app/dashboard/page.tsx` - landing/login/dashboard surfaces (sources: named files).
 - `app/site-sidebar.tsx`, `app/site-sidebar-nav.tsx`, `app/global-mobile-nav.tsx` - authenticated sidebar links and mobile nav behavior (sources: named files).

README.md

@@ -46,7 +46,7 @@ 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, route-level UI reveals, and analytics chart/bar motion to Anime.js v4 while keeping reduced-motion fallbacks; stabilized the dashboard typewriter by removing the per-character text tween that caused flicker.
+- Kept Anime.js only for the shared math loading indicator and dashboard caret, while removing delayed route reveals, staggered analytics cards/bars, animated chart drawing, page fades, and floating background motion so content appears immediately.
 - Fixed mobile problem-set task cards/sidebar tap layout/dashboard account controls, added the `/classes` Announcements subtab with existing-message deletion, and normalized literal `null` display names.
 - Added direct per-set Analytics buttons on both the student-facing set header for admins and the admin set editor, and made the set-editor Delete button match the other topbar action sizing.
 - Fixed the mobile sidebar tap/focus jump by keeping the opened sheet geometry stable when nav items receive focus.

app/admin/analytics/analytics-motion.tsx

@@ -4,7 +4,6 @@ import type { Prisma } from "@prisma/client";
 import { getServerSession } from "next-auth/next";
 import { redirect } from "next/navigation";
 import { AnalyticsFilters } from "./filters";
-import { AnalyticsMotion } from "./analytics-motion";
 import { TrendChart, type TrendPoint } from "./trend-chart";
 import { prisma } from "@/lib/db";
 import { authOptions } from "@/lib/auth";
@@ -516,7 +515,6 @@ export default async function AnalyticsOverviewPage({
         <span className="bg-spark bg-spark-two" />
       </div>
       <div className="page-frame analytics-frame">
-        <AnalyticsMotion />
         <header className="topbar standalone">
           <div>
             <p className="eyebrow">Admin</p>

app/admin/analytics/page.tsx

@@ -1,7 +1,6 @@
 "use client";
 
-import { animate, stagger } from "animejs";
-import { useEffect, useMemo, useRef, useState } from "react";
+import { useMemo, useRef, useState } from "react";
 
 type TrendPoint = {
   label: string;
@@ -85,55 +84,6 @@ export function TrendChart({ data }: { data: TrendPoint[] }) {
   const hovered = hover !== null ? points[hover] : null;
   const tooltipPct = hovered ? Math.max(0, Math.min(100, ((hovered.x - PAD_L) / PLOT_W) * 100)) : 0;
 
-  useEffect(() => {
-    if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
-      return;
-    }
-
-    const root = wrapRef.current;
-    const line = root?.querySelector<SVGPathElement>(".trend-line");
-    const area = root?.querySelector<SVGPathElement>(".trend-area");
-    const dots = root ? Array.from(root.querySelectorAll<SVGCircleElement>(".trend-dot")) : [];
-
-    if (!line) {
-      return;
-    }
-
-    const length = line.getTotalLength();
-    line.style.strokeDasharray = `${length}`;
-    line.style.strokeDashoffset = `${length}`;
-
-    const lineAnimation = animate(line, {
-      strokeDashoffset: 0,
-      duration: 980,
-      ease: "outCubic",
-    });
-    const areaAnimation = area
-      ? animate(area, {
-          opacity: [{ from: 0, to: 1 }],
-          duration: 720,
-          delay: 240,
-          ease: "outQuad",
-        })
-      : null;
-    const dotAnimation =
-      dots.length > 0
-        ? animate(dots, {
-            opacity: [{ from: 0, to: 1 }],
-            scale: [{ from: 0.55, to: 1 }],
-            duration: 420,
-            delay: stagger(32, { start: 320 }),
-            ease: "outBack(1.5)",
-          })
-        : null;
-
-    return () => {
-      lineAnimation.revert();
-      areaAnimation?.revert();
-      dotAnimation?.revert();
-    };
-  }, [linePath]);
-
   return (
     <div className="trend-chart-wrap" ref={wrapRef}>
       <svg

app/admin/analytics/trend-chart.tsx

@@ -6,7 +6,6 @@ import { prisma } from "@/lib/db";
 import { authOptions } from "@/lib/auth";
 import { computeScoreBuckets, accuracyLevel } from "@/lib/analytics";
 import { hasPermission } from "@/lib/permissions";
-import { AnalyticsMotion } from "@/app/admin/analytics/analytics-motion";
 import { PageBackLink } from "@/app/page-back-link";
 
 export const dynamic = "force-dynamic";
@@ -64,7 +63,6 @@ export default async function SetAnalyticsPage({ params }: Props) {
         <span className="bg-band bg-band-two" />
       </div>
       <div className="page-frame analytics-frame">
-        <AnalyticsMotion />
         <header className="topbar standalone">
           <div>
             <p className="eyebrow">Analytics</p>