Visual Effects and Animations
Relevant source files
The following files were used as context for generating this wiki page:
Visual Effects and Animations in the Solo System project are designed to create an immersive, gamified interface inspired by the "Solo Leveling" series. The system utilizes CSS3 transitions, radial gradients, and dynamic DOM manipulation to provide real-time feedback on user progress, rank changes, and task completion. The primary goal is to simulate a "system" interface that reacts to user achievements and penalties through high-contrast colors and smooth state transitions.
The visual architecture is built upon a dark-mode foundation with a signature "System Blue" accent color. It features a responsive layout that adapts level badges, experience bars, and rank displays based on the user's current points. Sources: index.html:10-25, Quest.html:10-25
Core Visual Components
The interface relies on several key components to convey information through visual styling. These include the stats panel, the progress-based XP bar, and task-specific status cards.
Stats Panel and Rank Display
The stats panel serves as the central hub for user information. It uses a high-contrast rank-value display that changes color based on the user's current tier. The getRankConfig function dynamically returns color codes and shadows that are applied to the rank text, creating a glowing "power" effect for higher ranks.
| Component | Visual Style | Logic Trigger |
|---|---|---|
lvl-badge | Blue background, bold text | calculateLevel(pts) |
rank-value | Dynamic color/shadow | getRankConfig(pts).color |
xp-bar | Linear gradient (Blue/Dark Blue) | (tempPts / displayReq) * 100 |
penalty-msg | Red text (--penalty-red) | systemData.lastPenalty > 0 |
Sources: index.html:26-64, Quest.html:100-112
Task State Animations
Tasks are represented by cards that change appearance based on their completion state. When a task is toggled, it uses CSS transitions to modify its opacity and grayscale filters, providing immediate visual confirmation of the action.
Sources: index.html:61-70, Quest.html:61-70
XP Bar and Progress Logic
The experience (XP) bar is a critical visual element that provides feedback on the user's journey to the next level. It utilizes CSS transition: width 0.6s ease-in-out to animate growth whenever points are added.
Progression Calculation
The visual width of the bar is calculated relative to the requirements of the current level. If a user is at a low level, the requirements are fixed (5 points), but they scale according to the rank-info configuration as the user progresses.
Sources: index.html:101-110, Quest.html:101-110
Dynamic Status Messaging
The system uses conditional rendering for status messages. If a penalty is detected (e.g., from a missed daily cycle), the message container transitions to a "Penalty" state using a specific red color scheme.
- Standard Reward Msg: Displays potential rewards and failures in
var(--system-blue). - Penalty Alert: Displays a warning icon and the deduction amount in
var(--penalty-red).
Sources: index.html:113-122, Quest.html:113-122
Global Visual Themes
The overall aesthetic is maintained through CSS variables defined in the :root selector, ensuring consistency across all visual effects.
:root {
--system-blue: #00d2ff;
--system-dark: #050510;
--penalty-red: #ff4d4d;
}
The background uses a radial-gradient that creates a spotlight effect from the top of the screen, enhancing the "system screen" atmosphere. Sources: index.html:10-18, Quest.html:10-18
Conclusion
Visual Effects and Animations in the Solo System project are tightly integrated with the application's state management. By using CSS transitions for XP updates and filters for task completion, the project successfully translates numerical data (points and levels) into a reactive and engaging user interface. These elements work together to reinforce the "system" theme central to the application's design.