React Circular Stat Dashboard

This is a React Circular Stat Dashboard. It replaces a standard linear or grid-based profile view with a dynamic, radial layout. Its function is to present a user’s avatar centrally while mathematically orbiting their related statistics and quotes around them, utilizing React state to handle smooth entering and exiting transitions between different profiles.

Specs

• Weight: ~125 KB (including React and ReactDOM dependencies via CDN).
• Performance: High. The radial positioning is calculated natively by the CSS engine using calc() and transform, avoiding heavy JavaScript DOM manipulation during the transition.
• Theming / Customization: Core layout variables (--radius, --duration, --color-purple) are defined in the :root and .slide classes. The animation states are managed via custom property toggling.
• Responsiveness: Fluid. Uses clamp() for the root font size (font-size: clamp(11px, 2vmin, 18px);) and vw units for the orbital radius (--radius: 35vw;), ensuring the circle scales perfectly down to mobile screens.
• Graceful Degradation: The component relies heavily on React for rendering and CSS custom properties for positioning. Without JavaScript, the app will not mount.

Anatomy

The component leverages React to manage the DOM tree while offloading the spatial logic to CSS.

• React (The Skeleton): The <App> component manages the slideIndex state. It conditionally renders the active <Slide> and the prevSlide (for cross-fade animations). The <Slide> component maps over the stats array, injecting the inline CSS variable --i (index) into each stat node.
• CSS (The Skin): An overarching CSS Grid centers the elements. A background <svg> ring utilizes stroke-dasharray and a linear @keyframes rotation to create the spinning dashed border.
• Math (The Nervous System): The core magic lies in the .slide-stat CSS class. It reads the --i variable passed from React, calculates the fractional position (--d), and determines the rotational angle (--r). It then applies a compound transform: rotate out, translate by the radius, and rotate back to keep the text upright.

Logic

The standout technical feature is CSS Variable Driven Animation State.

.slide {
  --default-animation: fade-in;
  --name-animation: name-enter;
  /* ... */

  &[data-previous] {
    --default-animation: fade-out;
    --name-animation: name-exit;
    /* ... */
  }
}

.slide-name {
  --default-animation: var(--name-animation);
  animation: var(--default-animation) var(--duration) ease-in-out var(--delay) both;
}

Instead of writing separate CSS classes for .enter and .exit states and using JavaScript to manually toggle them on every child node, the developer defines the animation names as CSS variables at the parent .slide level. When React applies the data-previous attribute to the outgoing slide, it flips the variables at the root of that specific slide. All child elements instantly inherit the new variables and execute their respective exit @keyframes, drastically cleaning up the React component logic.

Feel

Cinematic and orbital. The transition between slides feels like a planet rotating to reveal new satellites. The staggered, radial entry of the statistics (stat-enter uses a dynamic --r-offset to sweep the elements into place) gives the interface a distinct mechanical, sci-fi HUD quality. The slow, continuous rotation of the background SVG dashes anchors the motion, ensuring the dashboard feels “alive” even when the user isn’t interacting with it.