Cyberpunk Visual & Particle Effects

Relevant source files

The following files were used as context for generating this wiki page:

• frontend/src/App.css
• frontend/src/App.js
• frontend/src/index.css
• frontend/tailwind.config.js
• test_result.md

The NEXUS project utilizes a "cyberpunk-meets-luxury" aesthetic characterized by glassmorphism, high-contrast neon gradients, and dynamic background animations. This visual system is designed to provide a "stunning digital account and trial tracking system" interface that enhances user engagement through micro-animations and immersive depth effects.

Sources: test_result.md:129-130, frontend/src/App.css:1-10

Visual Architecture Overview

The visual identity of NEXUS is built on a foundation of CSS custom properties (variables) that define a specific color palette and animation timing. These variables are consumed across the application to ensure consistency in the glassmorphic cards, neon buttons, and typography.

This diagram illustrates the layered approach to the NEXUS UI, moving from the foundational CSS variables to the complex visual layers that comprise the interface.
Sources: frontend/src/App.css:4-44, frontend/src/App.css:56-91

Core Visual Systems

1. Particle Background System

The ParticleBackground component is a dedicated React component that renders an animated particle field on a full-screen HTML5 Canvas. It utilizes a class-based particle system to manage position, velocity, and opacity of individual light points.

• Particle Density: 50 active particles.
• Color: Electric Blue (#00D4FF).
• Interaction: The system includes a resize listener to ensure the canvas always covers the viewport.

The logic for the particle movement and drawing.
Sources: frontend/src/App.js:101-163

2. Glassmorphism & UI Depth

The application achieves depth through backdrop-filter blur effects and layered radial gradients.

Component	Visual Properties	CSS Class
Glass Card	Blur (20px), 5% White Alpha BG, 1px Border	.glass-card
Global Depth	Three overlapping radial gradients (Purple, Blue, Pink)	body::before
Texture	Repeating linear gradient noise overlay	body::after

Sources: frontend/src/App.css:56-110, frontend/src/App.css:112-127

3. Typography and Branding

Branding utilizes the Orbitron font for a futuristic feel, combined with a "pulse" animation and linear gradients.

• Primary Title: Uses --gradient-primary (Electric Blue to Vibrant Purple) with a text shadow glow of 30px.
• Animation: The pulse keyframe fluctuates opacity from 1 to 0.8.

Sources: frontend/src/App.css:94-110, frontend/src/App.css:662-666

Animation and Micro-interactions

The system employs several keyframe animations to give the interface a "living" feel, particularly within the dashboard statistics.

Key Animation Definitions

Name	Target	Effect
breathe	.stat-card	Scales the card between 1.0 and 1.02 every 4 seconds.
pulse	.cyber-title	Alternates opacity to create a glowing effect.
spin	.loading-spinner	Rotates 360 degrees for progress indicators.
shimmer	.cyber-button::before	Moves a white gradient across the button on hover.

Sources: frontend/src/App.css:140-155, frontend/src/App.css:467-479, frontend/src/App.css:662-672

This diagram outlines the CSS-driven state changes when a user interacts with primary UI elements.
Sources: frontend/src/App.css:122-125, frontend/src/App.css:149-152, frontend/src/App.css:158-161

Color System Configuration

The project defines a specific cyberpunk palette within App.css and tailwind.config.js.

// From tailwind.config.js mapping to CSS variables
colors: {
    background: 'hsl(var(--background))',
    foreground: 'hsl(var(--foreground))',
    primary: {
        DEFAULT: 'hsl(var(--primary))',
        foreground: 'hsl(var(--primary-foreground))'
    }
}

Sources: frontend/tailwind.config.js:18-35

Primary Neon Palette:

• Electric Blue: #00D4FF (Used for primary gradients and particles)
• Vibrant Purple: #9D4EDD (Used for sidebar and primary gradients)
• Hot Pink: #FF10F0 (Used for secondary accents)
• Neon Green: #00FF88 (Used for "Active" status indicators)
• Cyber Orange: #FF6B00 (Used for "Inactive" status indicators)

Sources: frontend/src/App.css:10-16

Summary

The "Cyberpunk Visual & Particle Effects" system in NEXUS is more than aesthetic; it provides a structured UI hierarchy using transparency and light. By combining a React-based Canvas particle system with advanced CSS filters and variables, the project creates a high-fidelity dashboard that meets the "cyberpunk-meets-luxury" requirement specified in the architectural goals.

Sources: test_result.md:129-130, frontend/src/App.js:101-163