$ show TablemanLiu/Rock-Radar
Rock Radar is a frontend web application for displaying multi-dimensional data using interactive radar charts. It visualizes entity attributes (such as bands or game players) across configurable dimensions with animated transitions, background particle effects, and synchronized audio playback. The application features a draggable timeline for navigating between data points, fullscreen mode for video capture, and extensive customization through a CONFIG object. Built with vanilla JavaScript and HTML5 Canvas, it implements sophisticated visual effects including multi-layer glow effects on the radar chart and a dual-type particle system. The codebase includes two variants: index.html (general purpose) and index-cs.html (specialized for Counter-Strike statistics).
The LLM identified 3 files worth highlighting for reuse:
The radar chart rendering system implements a highly customizable multi-axis radar chart with laser/glow effects, animated value transitions, percentage display options, and vertex highlighting. It uses Canvas API to draw background grids, value polygons, and sophisticated glow effects through multiple shadow layers. The system is data-driven through the CONFIG object and could be extracted as a reusable visualization component with minimal modification to externalize data dependencies.
The particle animation system creates an interactive background with two particle types (normal and nebula) featuring configurable size, opacity, and movement patterns. It includes fade-in/fade-out controls tied to application state and uses efficient rendering with requestAnimationFrame. The system demonstrates non-obvious skill in particle lifecycle management, bloom effects, and performance optimization while remaining self-contained and easily adaptable for other background animation needs.
The timeline navigation system provides a draggable progress bar with real-time tooltips showing preview information about upcoming data points. It synchronizes with audio playback and content transitions, featuring smooth scrubbing and precise time-based segment mapping. The implementation shows thoughtful UX design with hover states, click-to-seek functionality, and visual feedback, making it a reusable component for any sequenced media presentation.