Core Architecture
Relevant source files
The following files were used as context for generating this wiki page:
The @pcstyle/motion library is a specialized collection of Framer Motion variants, transitions, and animation utilities tailored for the PCSTYLE ecosystem. It serves as an abstraction layer over framer-motion and react, providing pre-configured animation logic, cyberpunk-themed keyframes, and specialized React hooks to simplify complex motion implementation in web applications.
The architecture is modular, exporting five primary categories of assets: Variants, Transitions, Gestures, Hooks, and Keyframes. This structure allows developers to import only the specific animation logic required, while ensuring a consistent visual language across the platform.
Sources: package.json:5-7, src/index.ts:7-20
Module Structure and Export Strategy
The project employs a clear hierarchical export strategy defined in the entry point and individual module indexes. Each functional area is isolated into its own directory, with a central src/index.ts re-exporting all sub-modules for public consumption.
The diagram shows the modular structure where index.ts acts as the primary gateway to specialized animation sub-systems.
Sources: src/index.ts:1-20, src/variants/index.ts:1-6, src/transitions/index.ts:1-3, src/hooks/index.ts:1-3
Technical Foundation and Standards
The library is built using TypeScript (ES2020) and targets modern browser environments. It enforces strict type safety through its configuration, ensuring that public APIs have explicit return types and no "any" types are utilized.
| Component | Specification | Description |
|---|---|---|
| Runtime Dependencies | framer-motion (>=10), react (>=18) | Peer dependencies required for the library to function. |
| Module System | ESM (ECMAScript Modules) | Configured for modern bundlers with type: module. |
| Type Safety | Strict Mode | tsconfig.json enables strict: true and declaration: true. |
| Validation Rules | STRICT_TYPES, ESM_STANDARDS | Custom rules defined in cubic.yaml to maintain code quality. |
Sources: package.json:34-37, tsconfig.json:3-15, cubic.yaml:26-31
Key Architectural Components
Animation Variants and Keyframes
Variants are pre-defined motion states (e.g., hidden, visible, initial, animate) that simplify the application of complex animations. The library specifically focuses on "Cyberpunk" aesthetics, utilizing raw CSS keyframes for effects like glitches, matrix rain, and holographic shimmers.
- Cyber Variants: Includes effects like
glitch,scanline, andterminalType. - Keyframes: Direct export of
DOMKeyframesDefinitioncompatible values for repeat-heavy animations.
Sources: src/keyframes/index.ts:7-80, src/variants/cyber.ts:6-85
Hook-Based Logic Controllers
The library provides custom React hooks to manage complex animation lifecycles and environmental states.
1. Sequence and Trigger Management
The useAnimationSequence hook utilizes Framer Motion's useAnimate to execute ordered steps of animations. It allows for target-based animation triggering with custom durations, delays, and staggering.
This diagram illustrates how the useAnimationSequence hook manages asynchronous animation steps.
Sources: src/hooks/useAnimationSequence.ts:21-44
2. Scroll and Transform Tracking
useScrollProgress and useScrollTransform allow elements to react to scroll positions. The architecture supports tracking both global scroll and element-specific scroll offsets using MotionValue.
Sources: src/hooks/useScrollProgress.ts:17-43
3. Accessibility (Reduced Motion)
The useReducedMotion hook monitors the CSS media query (prefers-reduced-motion: reduce). The useAccessibleMotion hook serves as a conditional wrapper, automatically substituting complex variants with simple fades if the user prefers reduced motion.
Sources: src/hooks/useReducedMotion.ts:11-47
Gesture and Transition Presets
The architecture decouples the "what" (variants) from the "how" (transitions) and "when" (gestures).
- Transitions: Provides standardized spring physics (
springSnappy,springBouncy) and easing functions (easeCyber,easeElastic). - Gestures: Provides pre-configured objects for
drag,hover, andtapinteractions, ensuring consistent feedback across the UI.
Sources: src/transitions/spring.ts:8-48, src/gestures/hover.ts:8-48, src/gestures/drag.ts:8-44
Summary
The @pcstyle/motion core architecture provides a strictly typed, modular framework for building motion-rich React applications. By centralizing cyberpunk-themed variants, physics-based transitions, and accessibility-aware hooks, it enables a consistent and performant animation system that adheres to modern web standards.