Visual Effects (Lamp & Glow)
Relevant source files
The following files were used as context for generating this wiki page:
The Visual Effects system in the SuperClaude Website project comprises high-impact UI components designed to enhance user engagement through motion and light simulation. These effects primarily consist of the LampContainer for hero sections and the GlowingEffect for interactive cards and containers.
These components utilize framer-motion and custom CSS variable manipulation to create dynamic, theme-aware lighting environments. The system is designed to respond to user pointer movements and scroll events, ensuring a responsive and modern aesthetic across different sections of the application, such as the HomePage.
Sources: src/pages/HomePage.js:1-10, src/components/ui/lamp.js:1-15
Lamp Effect System
The Lamp effect is primarily implemented via the LampContainer component. It creates a "light beam" effect at the top of the viewport, typically used to frame the main heading of a page.
Architecture and Logic
The LampContainer uses motion.div from Framer Motion to animate the width and opacity of conic gradients. It is context-aware, fetching the current theme from ThemeContext to switch between dark (slate/cyan/blue) and light (gray/yellow/orange) color palettes.
The diagram shows how the LampContainer processes theme data to drive Framer Motion animations for gradient beams.
Sources: src/components/ui/lamp.js:10-40
Styling Configuration
The component utilizes CSS variables and Tailwind classes to define the shape and intensity of the light beams.
| Element | Dark Mode Colors | Light Mode Colors | Animation State |
|---|---|---|---|
| Gradient Beams | cyan-500 to blue-600 | yellow-400 to orange-500 | width 10rem -> 30rem |
| Core Glow | cyan-400 to blue-500 | yellow-300 to orange-400 | width 4rem -> 12rem |
| Background | slate-950 | gray-100 | static |
Sources: src/components/ui/lamp.js:28-100
Glowing Effect Component
The GlowingEffect is a highly configurable component that adds a cursor-following or static glow border to its parent container. It is used extensively in DocCard, InfoCard, and TeamMemberCard.
Interactive Logic
The component tracks the user's pointer position using a pointermove event listener. It calculates the distance from the center of the element and the angle of the cursor to update CSS variables that control the gradient's position.
Sequence representing the calculation of the dynamic glow angle based on pointer coordinates.
Sources: src/components/ui/glowing-effect.js:30-70, src/components/GlowingEffect.js:30-70
Configuration Properties
The component accepts several props to customize the visual behavior.
| Prop | Type | Default | Description |
|---|---|---|---|
blur | number | 0 | The blur radius in pixels. |
inactiveZone | number | 0.7 | Radius around center where glow is disabled. |
proximity | number | 0 | Detection range for cursor activation. |
spread | number | 20 | The angular spread of the light beam. |
glow | boolean | false | Master toggle for visibility. |
borderWidth | number | 1 | Thickness of the glowing border. |
Sources: src/components/ui/glowing-effect.js:10-25
Implementation Patterns
Card Integration
The GlowingEffect is wrapped inside a relative container. A nested absolute div with a higher z-index typically contains the content, ensuring the glow remains a border effect.
// Pattern seen in DocCard and InfoCard
<div className="relative ...">
<GlowingEffect
spread={40}
glow={true}
disabled={false}
proximity={64}
inactiveZone={0.01}
borderWidth={3}
/>
<div className="relative bg-background ...">
{/* Content */}
</div>
</div>
Sources: src/components/DocCard.js:5-20, src/components/InfoCard.js:5-20
Grid Deployment
The GlowingEffectDemo component maps a list of features into a grid where each item utilizes the glow effect. This demonstrates the component's scalability and performance when multiple instances are rendered simultaneously.
Sources: src/components/glowing-effect-demo.js:10-30
Conclusion
The Lamp and Glow effects constitute a central part of the project's visual identity. By combining framer-motion for large-scale hero animations (LampContainer) and low-level pointer event handling for micro-interactions (GlowingEffect), the system provides a high-performance, interactive user experience that adapts seamlessly to both light and dark themes.