Performance Mode

Relevant source files

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

• hooks/usePerformanceMode.ts
• App.tsx
• index.html
• pages/Stats.tsx
• components/ui/WakaTimeDashboard.tsx
• components/ui/ProjectMatrix.tsx

Performance Mode is a system-level optimization feature within the PCSTYLE digital portfolio designed to ensure a consistent user experience across varying hardware capabilities. It programmatically detects the environmental constraints of the user's device—such as processing power, memory availability, and accessibility preferences—to adjust the intensity of visual effects and animations.

The system primarily operates through a centralized React hook that interfaces with browser-standard APIs to determine if the application should enter a "Low Performance" state. When active, this mode allows the UI to prioritize functional responsiveness over resource-heavy cyberpunk aesthetics like intensive motion or complex background renders.

System Architecture and Logic

The core logic of Performance Mode resides in the usePerformanceMode hook. This hook evaluates three primary heuristics to determine the performance state: user motion preferences, logical processor count, and physical device memory.

Detection Heuristics

The system evaluates the following hardware and software signals:

1. User Preference: Checks the prefers-reduced-motion media query. If a user has requested reduced motion at the OS level, Performance Mode is automatically engaged.
2. Hardware Concurrency: Analyzes navigator.hardwareConcurrency. Devices with 4 or fewer logical processors are flagged as low-performance targets.
3. Device Memory: Inspects navigator.deviceMemory. Devices with 4GB of RAM or less are considered low-performance.

Sources: hooks/usePerformanceMode.ts:1-33

Logic Flow Diagram

The following flowchart illustrates the step-by-step evaluation process used by the system to determine the performance state.

The logic prioritizes user accessibility preferences before checking hardware limitations. Sources: hooks/usePerformanceMode.ts:7-29

Integration with Global UI

The Performance Mode state is integrated into the global application wrapper and individual high-fidelity components. This allows for conditional rendering and styling adjustments across the entire DOM tree.

Global Visual Adjustments

While the App.tsx handles global state and experimental "Super Hacker" filters, the index.html provides the foundational CSS environment that Performance Mode interacts with, particularly regarding cursor behavior and scrollbars.

Metric / Feature	Source API / Constant	Low Performance Threshold
Motion Preference	window.matchMedia	reduce
Processor Threads	navigator.hardwareConcurrency	$\le 4$
Device Memory	navigator.deviceMemory	$\le 4GB$

Sources: hooks/usePerformanceMode.ts:10-25, index.html:36-45

Component-Level Impact

Individual components utilize animation and transition logic that can be throttled or disabled based on performance needs. Components like the WakaTimeDashboard, ProjectMatrix, and Stats utilize framer-motion for complex UI transitions.

• ProjectMatrix: Implements a "Moving Scanline" and "Parallel Core Alloc" visualization. In high-performance scenarios, these include complex animate properties for position and opacity.
• Stats Page: Features a "Background Scanner" that performs infinite linear translations and gradient skewing.
• App Layout: Manages the MatrixBackground and CRTOverlay, which are the primary candidates for suppression in low-performance environments.

Sources: components/ui/ProjectMatrix.tsx:23-30, pages/Stats.tsx:26-31, App.tsx:28-36

Data Flow and Performance Lifecycle

The Performance Mode status is determined once during the component mount phase via a useEffect hook.

The sequence ensures that performance checks are non-blocking and happen during the initial rendering cycle of the application. Sources: hooks/usePerformanceMode.ts:7-31, App.tsx:150-160

Technical Implementation Details

The implementation leverages the useState and useEffect hooks for local state management of the performance flag.

Implementation Snippet

// hooks/usePerformanceMode.ts
export const usePerformanceMode = () => {
    const [isLowPerformance, setIsLowPerformance] = useState(false);

    useEffect(() => {
        const checkPerformance = () => {
            const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
            if (prefersReducedMotion) return true;

            if (navigator.hardwareConcurrency && navigator.hardwareConcurrency <= 4) return true;

            // @ts-ignore
            if (navigator.deviceMemory && navigator.deviceMemory <= 4) return true;

            return false;
        };
        setIsLowPerformance(checkPerformance());
    }, []);

    return isLowPerformance;
};

Sources: hooks/usePerformanceMode.ts:3-33

Summary

Performance Mode acts as the "nervous system" for the application's visual fidelity. By abstracting hardware detection into a reusable hook, the project maintains its cyberpunk aesthetic for high-end devices while remaining accessible and functional for users on legacy hardware or those with specific accessibility requirements. Its reliance on hardwareConcurrency and deviceMemory ensures that the most resource-intensive features, such as the MatrixBackground and complex framer-motion grids, do not compromise system stability.