Neural UI Components
Relevant source files
The following files were used as context for generating this wiki page:
Neural UI Components constitute the high-fidelity visual system used to represent complex data structures within the PCSTYLE portfolio. These components leverage advanced motion libraries and real-time data hooks to transform static metrics—such as coding time, language frequency, and contribution history—into interactive, cyberpunk-inspired visualizations.
The system is integrated primarily within the Stats view and the global application layout, utilizing a combination of framer-motion for animations and lucide-react for iconography. These components are designed to react to user input (hover, mouse movement) and system state (loading, error, or live data updates).
Sources: App.tsx:10-23, pages/Stats.tsx:112-132, components/ui/NeuralLanguageMap.tsx:1-5
Core Visualization Components
The Neural UI system relies on specific components to map different data domains (GitHub contributions, WakaTime metrics) into visual patterns.
Neural Language Map
The NeuralLanguageMap visualizes programming language usage frequency. It uses a signal-flow aesthetic where each language is represented by a progress bar with a dynamic "pulse glow" and "digital fragments" that appear if usage exceeds 20%.
The diagram shows the data flow from WakaTime hooks to the reactive animation states in the Language Map.
Sources: components/ui/NeuralLanguageMap.tsx:7-14, components/ui/NeuralLanguageMap.tsx:82-108
Project Bit Matrix
The ProjectMatrix displays project-specific activity using a grid-based "bit" system. Each project entry contains a row of 12 blocks; the number of colored blocks represents the project's percentage of total work, with an added staggered opacity animation for a "scanning" effect.
Sources: components/ui/ProjectMatrix.tsx:13-58
Data Voxel Grid (3D Heatmap)
The VisualContributionHeatmap transforms 2D GitHub contribution data into a 3D voxel grid. It utilizes mouse parallax to rotate the grid in 3D space based on the user's cursor position.
| Feature | Implementation | Description |
|---|---|---|
| Perspective | perspective: 1200px | Provides depth for 3D transformations. |
| Parallax | rotateX, rotateZ | Derived from mouseX/Y to react to cursor. |
| Voxel Height | Math.max(4, day.level * 18) | Level 0-4 mapping to physical height. |
| Shading | brightness(0.6) / brightness(0.8) | Applied to side faces for depth. |
Sources: components/ui/VisualContributionHeatmap.tsx:21-35, components/ui/VisualContributionHeatmap.tsx:104-142
Data Flow and State Management
Neural components are primarily consumers of specialized data hooks that interface with external APIs (GitHub and WakaTime).
Sequence of data retrieval from external providers to the neural rendering engine.
Sources: components/ui/NeuralLanguageMap.tsx:7, components/ui/WakaTimeDashboard.tsx:43, pages/Stats.tsx:11-12
Animation Constants
The system uses standardized color scales and timing for its "neural" effects.
- Signal Colors: Primary highlight is
#ff00ff(Magenta). - Voxel Levels:
- Level 0:
#0f172a(Base slate) - Level 4:
#ff00ff(Full intensity)
- Level 0:
- Scanline Timing: 4-second linear loops for background grid effects.
Sources: components/ui/VisualContributionHeatmap.tsx:7-13, components/ui/ProjectMatrix.tsx:32-36
Integration and Layout
The WakaTimeDashboard acts as the primary orchestrator for these components, arranging them into a multi-column "command center" layout.
Dashboard Layout Structure
- Metric Cards: High-level summaries (Total Time, Daily Avg).
- Neural Map Column: Detailed language neural flow.
- Matrix Column: Project bit-matrix allocation.
- System Editors: Progress bars for IDE usage (e.g., VS Code).
Sources: components/ui/WakaTimeDashboard.tsx:77-128
Structural hierarchy of the Neural UI components within the system dashboard.
Sources: components/ui/WakaTimeDashboard.tsx:90-108
Conclusion
Neural UI Components serve as the visual "nervous system" of the PCSTYLE project, converting abstract developer metrics into a cohesive cyberpunk aesthetic. By utilizing 3D transformations, motion-driven parallax, and staggered bit-matrix animations, the system provides an immersive representation of live coding data.