Skip to content

feat: Next.js frontend-v2 — anatomical brain, real data, knowledge graph#6

Open
pranjalbhatia710 wants to merge 3 commits into
mainfrom
frontend-v2-pr
Open

feat: Next.js frontend-v2 — anatomical brain, real data, knowledge graph#6
pranjalbhatia710 wants to merge 3 commits into
mainfrom
frontend-v2-pr

Conversation

@pranjalbhatia710
Copy link
Copy Markdown
Collaborator

Summary

  • Anatomical 3D brain — parametric mesh with hemispheres, central fissure, temporal lobes, gyri/sulci noise, brain stem. 15 interactive region hotspots with activation-driven color/pulse/glow
  • Real TRIBE mock data wired — 15 regions × 30 timesteps, 20 personas, 44-event simulation with sentiment cascade
  • Knowledge graph — 229 nodes, 551 edges across 7 categories with 3D force-directed viz, category filters, search, node inspector
  • Dock navigation — bottom bar with spring-physics magnification
  • No dead code — cleaned up unused components, proper file organization

Pages

Route Description
/ Landing with anatomical brain hero, aurora bg, animated text
/brain Neural activation heatmap + interactive 3D brain + radar chart
/personas 20 personas with Big Five, VAD, archetypes
/simulation #GreenFuture campaign feed with sentiment cascade
/report Diagnostic report with computed MHIS score
/graph Knowledge graph (229 nodes, 7 categories)

Stack

Next.js 15 · React 19 · Three.js r170 · @react-three/fiber v9 · Tailwind v4 · motion

Test plan

  • cd frontend-v2 && npm install --legacy-peer-deps && npm run dev
  • All 6 routes load without console errors
  • Brain shows hemispheres + hotspots (not a blob)
  • Data is consistent across refreshes (not random)
  • Knowledge graph renders nodes with category filters
  • Dock appears on dashboard pages

🤖 Generated with Claude Code

pranjalbhatia710 and others added 3 commits April 4, 2026 18:37
…ledge graph

- Parametric anatomical brain mesh (hemispheres, fissure, gyri/sulci, brain stem)
- 15 interactive region hotspots with activation-driven color/pulse/glow
- Real TRIBE v2 mock data (15 regions, 30 timesteps) wired to all pages
- 20 real personas with Big Five traits, VAD, demographics from backend mock data
- 44-event #GreenFuture simulation with sentiment cascade narrative
- Report with computed MHIS score derived from activation data
- Knowledge graph page (229 nodes, 551 edges, 7 categories) with 3D viz
- Dock navigation with magnification physics
- React 19 + Three.js r170 + Next.js 15 + Tailwind v4

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
…ansition

- Export real neuroanatomical brain from nilearn fsaverage5 (20,484 vertices, 40,960 faces)
- Generate Destrieux atlas vertex-to-region mapping for 11 cortical TRIBE regions
- BrainViewer component: loads GLB mesh, applies activation vertex colors per timestep
- Timestep scrubber with play/pause for temporal animation of brain activations
- Immersive landing page: parallax brain, glow orbs, frosted glass nav, grid bg
- Pipeline transition: 5-stage cinematic animation (TRIBE → Bridge → Sim → Agents)
  with neural connection lines, floating particles, stage spinners, auto-redirect

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
- Full-screen interactive fsaverage5 brain (drag to rotate, auto-animating)
- Aurora background, ClickSpark, DecryptedText, LetterPullUp, ShinyText, CountUp
- Pipeline overlay with Aurora per-stage + DecryptedText header
- Darker brain material, tilted hero angle, gentle float animation
- Proper proportions: brain right 65%, text left with gradient separation
- Remotion NeuralNetwork + PipelineReel compositions
- New reactbits: ShinyText (sweep shine), LetterPullUp (3D letter reveal)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant