Introduction

Relevant source files

The following files were used as context for generating this wiki page:

• package.json
• src/index.ts
• src/hooks/index.ts
• src/variants/index.ts
• src/transitions/index.ts
• src/gestures/index.ts
• src/keyframes/index.ts

@pcstyle/motion is a specialized animation library designed for the PCSTYLE ecosystem, providing a collection of Framer Motion variants, transitions, and utility hooks. The project focuses on creating a cohesive motion design language, particularly emphasizing cyberpunk-themed visual effects and accessible user interactions.

The library is structured as a TypeScript-based ESM package, exporting modular sets of animation definitions. It leverages framer-motion (version 10+) and react (version 18+) as peer dependencies to provide a high-performance animation framework for React-based web applications.

Sources: package.json:1-40, src/index.ts:1-25

Library Architecture

The library is organized into five primary modules, each serving a specific role in the animation lifecycle. These modules are exported through a central entry point, allowing developers to import specific animation primitives or hooks as needed.

Core Modules

1. Variants

Variants define named animation states (e.g., initial, animate, hidden, visible) that can be used across multiple components. The library provides both standard UI transitions and specialized "cyber" themes.

• Cyberpunk Variants: Includes glitch, scanline, and hologram effects.
• UI Variants: Includes standard fadeIn, slideUp, and stagger containers.

Sources: src/variants/index.ts:1-10, src/variants/cyber.ts:6-60

2. Transitions

Transitions define the movement characteristics between states, such as timing and physics.

• Spring: Physics-based animations like springSnappy and springBouncy.
• Tween: Duration-based easings including easeOut, easeInOut, and specialized easeCyber.
• Inertia: Deceleration presets for drag and scroll interactions.

Sources: src/transitions/index.ts:1-5, src/transitions/spring.ts:1-50, src/transitions/tween.ts:1-60

3. Gestures

Gestures provide predefined interaction animations for user inputs.

• Hover: Effects like whileHoverScale and whileHoverGlow.
• Tap: Interaction feedback such as whileTapScale and whileTapDeep.
• Drag: Configuration objects for constrained or free dragging, including dragSlider and dragFree.

Sources: src/gestures/index.ts:1-5, src/gestures/hover.ts:5-45, src/gestures/drag.ts:5-40

4. Hooks

Hooks provide programmatic control and environment-aware logic.

Hook	Purpose
useReducedMotion	Detects user system preference for reduced motion.
useAccessibleMotion	Switches between full and simplified variants based on user preferences.
useScrollProgress	Tracks element scroll progress as a 0-1 MotionValue.
useAnimationSequence	Executes a series of imperative animation steps using useAnimate.

Sources: src/hooks/index.ts:1-5, src/hooks/useReducedMotion.ts:1-40, src/hooks/useScrollProgress.ts:1-25

5. Keyframes

Raw keyframe definitions for CSS-in-JS or advanced Framer Motion usage. These include low-level definitions for effects like pulseKeyframes, matrixKeyframes, and rgbShiftKeyframes.

Sources: src/keyframes/index.ts:1-75

Technical Standards

The project is built with strict TypeScript configurations to ensure type safety across the SDK.

• Module System: ESM-native (module: ESNext) with dual-purpose type definitions.
• Type Safety: The configuration explicitly forbids any types and non-null assertions for public APIs to ensure consumer reliability.
• Platform: Designed for "use client" environments in modern React frameworks.

Sources: tsconfig.json:1-18, cubic.yaml:12-25, package.json:5-10

Conclusion

The @pcstyle/motion library serves as a comprehensive toolkit for implementing the PCSTYLE design language. By abstracting complex Framer Motion configurations into reusable variants, transitions, and hooks, it allows for rapid development of high-fidelity, accessible, and performance-oriented web interfaces.