Background Effects
Relevant source files
The following files were used as context for generating this wiki page:
Background Effects define the visual styling, glass surfaces, and atmospheric animations of the personal website. These effects include standard UI components like glass panels and focus rings, as well as complex "Easter Egg" states that modify the entire page environment.
The system uses standard CSS and Tailwind CSS utilities to apply effects based on data attributes and theme states. Sources: src/assets/styles/global.css:4-6, src/assets/styles/effects.css:1-5
Glass Surface System
The glass effect provides a frosted, semi-transparent layer for UI components. It uses a combination of background colors, multiple box shadows, and backdrop filters. The system supports different opacity levels and a solid state for high-contrast needs or reduced motion preferences.
Glass Variations
The system provides three primary glass states controlled via the data-glass attribute:
| State | Attribute | Opacity | Description |
|---|---|---|---|
| Default | (None) | 64% | Standard semi-transparent background. |
| Clear | [data-glass='clear'] | 32% | High transparency for minimal obstruction. |
| Solid | [data-glass='solid'] | 100% | Opaque background; disables backdrop filters. |
Sources: src/assets/styles/effects.css:2-10, src/assets/styles/effects.css:17-25
Implementation Logic
The .glass utility uses pseudo-elements to layer effects without creating new stacking context issues for children. The ::before element handles the blurred backdrop, while the ::after element provides the inner highlight and glass tint.
Sources: src/assets/styles/effects.css:27-56
Easter Egg Environments
The application includes two major background overrides triggered by the data-easter-egg attribute on the html element: Aurora and Lamp.
Aurora Effect
The Aurora effect creates a moving atmospheric background using large, animated radial gradients and floating "firefly" particles.
- Aurora Wash: A slow, infinite animation that shifts radial gradients across the screen. Sources: src/components/EasterEggs/eggs/aurora.css:7-27
- Fireflies: Small circular elements that wander using independent X and Y axis animations (
aurora-firefly-wander-xandaurora-firefly-wander-y). Sources: src/components/EasterEggs/eggs/aurora.css:48-69
Lamp Effect
The Lamp effect obscures the page content behind a dark veil, revealing components only within a circular "lamp" radius that follows the user's cursor.
Visual Utilities
Technical styling for specific UI interactions and accessibility.
Focus Management
The focus-ring utility provides consistent visible focus indicators across the site, adapting to light and dark themes.
- Light Mode: Uses
primary-900outline. - Dark Mode: Uses
primary-50outline.
Sources: src/assets/styles/effects.css:65-67
Layered Transitions
Dialogs and popovers use the glass-dialog utility to fade components. This utility ensures that border colors, shadows, and interior content transition together to prevent the panel from becoming a backdrop root during entry animations. Sources: src/assets/styles/effects.css:78-100
Accessibility and Motion
The system respects system-level accessibility settings through media queries.
- Reduced Motion: Disables firefly wandering and aurora washing animations. The glass effect removes backdrop filters to prevent rendering lag. Sources: src/components/EasterEggs/eggs/aurora.css:108-117, src/assets/styles/effects.css:70-76
- Reduced Transparency: Forces the glass
::beforeelement to use an opaquevar(--glass-bg-fallback)background. Sources: src/assets/styles/effects.css:70-76 - Print Media: Automatically hides decorative background effects, fireflies, and easter egg veils during printing. Sources: src/components/EasterEggs/eggs/aurora.css:124-129, src/components/EasterEggs/eggs/lamp.css:192-197
Background effects in this project combine utility-first CSS with dynamic data attributes to provide an immersive, accessible experience that ranges from standard glass UI components to experimental atmospheric animations.