Glow Effects
Relevant source files
The following files were used as context for generating this wiki page:
Glow effects in the @pcstyle/motion library provide a suite of visual enhancements centered around luminosity, depth, and cyberpunk-inspired aesthetics. These effects are primarily implemented as Framer Motion variants and keyframe definitions, allowing developers to apply complex shadow, border, and opacity animations to UI components through simple prop-based triggers.
The system encompasses multiple interaction models, including hover-triggered glows, continuous pulse animations, and gesture-based feedback. These effects are designed to work in tandem with the project's broader animation ecosystem, including Cyber Variants and custom Transitions.
Sources: src/variants/glow.ts, src/keyframes/index.ts, package.json
Architecture and Core Components
The glow system is built upon three primary architectural pillars: static variants for state transitions, keyframes for continuous animations, and gesture-based triggers for interactive elements.
Variant-Based Glows
The core of the system resides in predefined Variants that manipulate CSS properties such as boxShadow, borderColor, and opacity. These are categorized by their visual intent (e.g., "Cyan", "White", "Neon").
The diagram above illustrates how variants define the transition from a hidden or neutral state to a luminant state.
Sources: src/variants/glow.ts:6-45
Pulse and Keyframe Logic
For non-interactive or persistent effects, the library uses keyframe arrays to define looping animations. The pulseKeyframes and glowPulse variant utilize multi-step shadow definitions to create a breathing effect.
| Variant/Keyframe | Property | Effect Description |
|---|---|---|
glowPulse | boxShadow | Cycles between 10px and 25px shadow spread with 0.2 to 0.4 opacity. |
pulseKeyframes | opacity, scale | Standard pulse ranging from 0.5 to 1.0 opacity and 1.0 to 1.02 scale. |
neonFlicker | opacity | Rapidly alternates opacity values (1, 0.8, 0.9, 0.85) to simulate gas-discharge lighting. |
flickerKeyframes | opacity | Core keyframe definition for flickering effects. |
Sources: src/variants/glow.ts:13-28, src/keyframes/index.ts:13-17, src/keyframes/index.ts:28-31
Interaction and Gestures
Glow effects are frequently integrated into user interaction handlers, specifically for hover and tap gestures.
Hover Interactions
Hover-based glows enhance component affordance by increasing the luminosity of borders and box shadows when the pointer enters the element's hit area.
Tap Feedback
The whileTapGlow gesture provides high-intensity visual feedback during a press event, typically using a higher opacity or larger spread than standard hover states.
Sources: src/gestures/tap.ts:38-41
Implementation Details
Key Definitions
The following table summarizes the primary glow-related objects available for export:
| Export Name | File Path | Type | Key Properties |
|---|---|---|---|
glowHover | src/variants/glow.ts | Variants | boxShadow (Magenta) |
glowCyan | src/variants/glow.ts | Variants | boxShadow (Cyan) |
glowPulse | src/variants/glow.ts | Variants | transition: { repeat: Infinity } |
whileHoverPremium | src/gestures/hover.ts | TargetAndTransition | scale, boxShadow, borderColor |
chromatic | src/variants/cyber.ts | Variants | textShadow (RGB Shift) |
Sources: src/variants/glow.ts, src/gestures/hover.ts:28-33, src/variants/cyber.ts:68-73
Manual Animation Control
For complex scenarios where glow effects must be synchronized with other animations, the useAnimationSequence hook allows for programmatic control over the glow targets.
// Example derived from hook structure
const { animate } = useAnimationSequence();
animate(".glow-target", { boxShadow: "0 0 20px #ff00ff" }, { duration: 0.5 });
Sources: src/hooks/useAnimationSequence.ts:24-44
Summary
The Glow Effects module provides a robust set of visual tools for creating depth and interactive highlights. By combining CSS shadow properties with Framer Motion's transition engine and custom keyframes, the library enables both subtle UI enhancements (like shadowLift) and intense stylistic choices (like neonFlicker or glowCyan). These effects are centralized in the variants directory and extended through specialized gesture configurations.
Sources: src/variants/glow.ts, src/gestures/hover.ts, src/keyframes/index.ts