Tap & Click
Relevant source files
The following files were used as context for generating this wiki page:
The Tap & Click module provides a standardized set of gesture-based animations for user interactions. Built as part of the @pcstyle/motion library, it leverages Framer Motion's TargetAndTransition types to define consistent visual feedback for "press" and "tap" events across the PCSTYLE ecosystem.
The module focuses on providing tactile feedback through scale adjustments, opacity changes, and specialized effects like color inversion and glow pulses. These presets ensure that interactive elements respond predictably to user input, enhancing the overall user experience.
Sources: src/gestures/tap.ts:1-41, src/index.ts:1-17
Architecture and Core Components
The Tap system is architected as a collection of exported constants that conform to Framer Motion's animation specifications. These are categorized into scaling effects, feedback combinations, and stylized visual filters.
Animation Presets
The library categorizes tap interactions into several intensities and styles:
| Preset Name | Animation Property | Description |
|---|---|---|
whileTapScale | scale: 0.95 | Standard scale down on tap. |
whileTapDeep | scale: 0.9 | A more pronounced downward scale for deeper presses. |
whileTapSubtle | scale: 0.98 | Minimal scaling for light feedback. |
whileTapDim | opacity: 0.8 | Reduces visibility to indicate a press state. |
whileTapFeedback | scale: 0.95, opacity: 0.9 | Combines scaling and opacity for a tactile feel. |
whileTapInvert | filter: "invert(1)" | Inverts colors for high-contrast feedback. |
whileTapGlow | boxShadow: "0 0 40px..." | Adds a neon glow effect during the tap. |
Sources: src/gestures/tap.ts:8-41
Interaction Flow
When a user interacts with a component using these presets, the state transitions from its initial style to the defined whileTap state.
The diagram shows the transition from a default state to various tap-triggered visual states before returning to the base state upon release.
Sources: src/gestures/tap.ts:8-41
Integration with Transitions
While the tap gestures define the target state, the feel of the interaction is often dictated by the transition settings. Snappy UI interactions typically pair these gestures with high-stiffness spring transitions.
Recommended Transitions
For responsive feedback, the following spring configurations are relevant:
- Snappy:
stiffness: 400,damping: 30(Ideal forwhileTapScale) - Stiff:
stiffness: 500,damping: 25(For immediate physical feedback)
Sources: src/transitions/spring.ts:8-12, src/transitions/spring.ts:32-36
Programmatic Animation Triggers
For complex interactions where a simple tap gesture is insufficient, the system provides hooks like useAnimateTrigger and useAnimationSequence. These allow developers to manually trigger the tap animations or chain them with other effects.
// Example of a manual trigger for a tap-like effect
const { scope, trigger } = useAnimateTrigger();
const handleClick = () => {
trigger(".button", { scale: 0.95 }, 0.1);
};
Sources: src/hooks/useAnimationSequence.ts:47-59
Implementation Details
The module is part of the broader gesture system exported by the library, which also includes drag and hover capabilities.
The diagram illustrates how Tap animations sit alongside Hover and Drag within the gestures directory.
Sources: src/gestures/index.ts:1-3, src/gestures/hover.ts:1-45, src/gestures/drag.ts:1-55
Export Structure
The tap module is exported through a central index to allow for clean imports in consuming applications.
- Entry point:
src/index.ts - Gesture directory:
src/gestures/index.ts - Feature implementation:
src/gestures/tap.ts
Sources: src/index.ts:12, src/gestures/index.ts:3
Summary
The Tap & Click module provides a curated set of whileTap animation objects. By standardizing values such as scale: 0.95 for feedback and scale: 0.9 for deep presses, the project maintains a consistent "mechanical" feel across all interactive UI components. These presets are designed to be used with Framer Motion's whileTap prop and can be further customized with the library's spring transition presets.