Hover Interactions
Relevant source files
The following files were used as context for generating this wiki page:
Hover interactions in the @pcstyle/motion library provide a collection of pre-defined animation targets and variants designed for high-fidelity user interfaces. These interactions leverage framer-motion to handle state transitions between initial and hover states, focusing heavily on cyberpunk-themed aesthetics such as glow effects, chromatic aberration, and subtle transform adjustments.
The system is modularly exported, allowing developers to apply specific hover behaviors like scaling, lifting, or glowing to React components. It also integrates with accessibility features to respect user preferences regarding motion.
Sources: src/gestures/hover.ts:1-5, package.json:1-10, src/index.ts:1-20
Core Hover Gestures
The library defines several standalone gesture objects using the TargetAndTransition type. These are direct animation targets applied when a pointer hovers over an element.
Transform and Visual Feedback
Basic hover interactions involve physical transformations or simple visual filters to indicate interactivity.
- Scale and Rotation: Subtle changes to size (
whileHoverScale) or orientation (whileHoverRotate) provide immediate tactile feedback. - Vertical Displacement: The
whileHoverLifteffect moves elements upward on the Y-axis to simulate depth. - Brightness:
whileHoverBrightuses CSS filters to increase the luminosity of the hovered element.
Glow and Border Highlights
Specialized cyberpunk aesthetics are achieved through box-shadow and border manipulations.
- Standard Glow:
whileHoverGlowapplies a magenta-tinted shadow. - Cyan Glow:
whileHoverCyanprovides a secondary color option for alternative UI elements. - Premium Interaction:
whileHoverPremiumcombines scaling, box-shadow, and border-color transitions into a single complex state.
Sources: src/gestures/hover.ts:8-53
| Export Constant | Property | Value |
|---|---|---|
whileHoverScale | scale | 1.05 |
whileHoverLift | y | -4 |
whileHoverGlow | boxShadow | 0 0 30px rgba(255, 0, 255, 0.3) |
whileHoverBorder | borderColor | rgba(255, 0, 255, 0.8) |
whileHoverBright | filter | brightness(1.1) |
Sources: src/gestures/hover.ts:9-45
Advanced Hover Variants
Beyond simple gesture targets, the library includes Variants which define distinct initial and hover states. These are intended for use with Framer Motion's variants prop.
Glow Variants
The glow module contains complex shadow transitions that move from transparent to fully realized glow states.
The glowHover and glowCyan variants manage this transition by explicitly defining the initial and hover keys.
Sources: src/variants/glow.ts:6-10, src/variants/glow.ts:31-35
Cyber and Chromatic Effects
The cyber variant set introduces high-contrast visual shifts, such as the chromatic effect which adds magenta and cyan text shadows to simulate RGB splitting on hover.
Sources: src/variants/cyber.ts:86-92
Accessibility and Motion Control
To ensure a comfortable experience for users with motion sensitivities, the hover system interacts with the useReducedMotion hook. This hook monitors the prefers-reduced-motion media query.
The useAccessibleMotion hook allows the system to swap complex hover animations for simpler transitions (like pure opacity fades) when reduced motion is requested.
Sources: src/hooks/useReducedMotion.ts:9-45
Implementation Flow
The following diagram illustrates how a hover interaction is processed from the package export to the rendered component state.
Summary
Hover interactions in this project serve as the primary mechanism for interactive feedback. By providing a wide range of presets—from simple scale adjustments in src/gestures/hover.ts to complex chromatic shifts in src/variants/cyber.ts—the library ensures a consistent cyberpunk aesthetic while maintaining accessibility through the useAccessibleMotion logic in src/hooks/useReducedMotion.ts.