Module Exports & API Surface
Relevant source files
The following files were used as context for generating this wiki page:
The @pcstyle/motion package serves as a comprehensive utility library built on top of Framer Motion and React. It provides a structured collection of animation variants, transitions, gestures, custom hooks, and CSS keyframe definitions specifically tailored for the PCSTYLE ecosystem. The library is designed with a focus on type safety and modularity, supporting both ESM and CJS consumers.
Sources: package.json:1-5, src/index.ts:1-4
Package Architecture and Export Strategy
The library employs a tiered export strategy. The main entry point aggregates all sub-modules, while specific entry points are defined in the package configuration to allow for tree-shaking and targeted imports.
The diagram above illustrates the organizational structure of the library's exports, originating from the root index file.
Sources: package.json:10-39, src/index.ts:6-20
Entry Points
The package.json defines multiple sub-path exports to facilitate organized access to specialized animation assets:
| Export Path | Description | Key Contents |
|---|---|---|
. | Main entry point | Aggregate of all modules |
./variants | Animation Variants | Fade, Slide, Scale, Stagger, Glow, Cyber |
./transitions | Transition Presets | Spring, Tween, Inertia |
./gestures | Gesture Configs | Drag, Hover, Tap |
./hooks | React Hooks | useScrollProgress, useAnimationSequence, useReducedMotion |
./keyframes | CSS Keyframes | glitchKeyframes, pulseKeyframes, matrixKeyframes |
Sources: package.json:12-38, src/variants/index.ts:1-6, src/transitions/index.ts:1-3
Animation Hooks & Logic
The library provides several custom hooks that wrap complex Framer Motion logic into reusable API patterns.
Scroll and Sequence Control
The library includes hooks for tracking scroll progress and executing imperative animation sequences.
- useScrollProgress: Returns a
MotionValuetracking an element's scroll progress relative to the viewport. - useAnimationSequence: Provides a
runSequencefunction to execute a series of animations asynchronously.
The sequence diagram shows the internal iterative logic of the animation sequence hook.
Sources: src/hooks/useAnimationSequence.ts:22-42, src/hooks/useScrollProgress.ts:16-28
Accessibility and Reduced Motion
The useReducedMotion hook monitors the user's system preferences. useAccessibleMotion leverages this to swap complex animations for simpler ones (typically fades) when reduced motion is requested.
Sources: src/hooks/useReducedMotion.ts:11-44
Variants and Transitions API
The library exports a vast array of pre-defined Variants and Transition objects.
Cyberpunk Variants
Specialized variants for "cyber" aesthetics are provided, often utilizing the keyframe definitions.
- glitch: Rapid X/Y translations.
- scanline: Background position shifts.
- matrixRain: Vertical translation with opacity cycles.
Sources: src/variants/cyber.ts:6-55, src/keyframes/index.ts:11-40
Transition Presets
Standardized transition configurations ensure consistent feel across the UI.
| Preset | Type | Characteristics |
|---|---|---|
springSnappy | Spring | High stiffness (400), moderate damping (30) |
springBouncy | Spring | High stiffness (300), low damping (10) |
easeOut | Tween | Standard [0.4, 0, 0.2, 1] cubic bezier |
easeCyber | Tween | Sharp [0.9, 0, 0.1, 1] movement |
inertiaScroll | Inertia | Velocity 50, power 0.8 |
Sources: src/transitions/spring.ts:8-18, src/transitions/tween.ts:8-12, src/transitions/tween.ts:58-61, src/transitions/inertia.ts:8-13
Summary
The @pcstyle/motion API surface is organized into five primary domains: variants, transitions, gestures, hooks, and keyframes. By providing strongly typed presets and hooks like useAnimationSequence and useReducedMotion, the module enables developers to implement high-fidelity, accessible animations that remain consistent with the PCSTYLE design language. All public exports are routed through a central index.ts while maintaining sub-path accessibility for optimized bundling.