Installation & Requirements
Relevant source files
The following files were used as context for generating this wiki page:
@pcstyle/motion is a specialized library providing Framer Motion variants, transitions, and animation utilities specifically designed for the PCSTYLE ecosystem. It functions as an SDK package focusing on strict type safety and clean API exports to ensure consistent motion design across applications.
The library is built as an ESM-first package that targets modern browser environments. It leverages React and Framer Motion as core peer dependencies, ensuring that the consumer application maintains control over the specific versions of these foundational libraries while benefiting from the pre-defined cyberpunk and utility-focused motion assets.
Sources: package.json:1-5, cubic.yaml:12-13, src/index.ts:1-5
System Requirements & Dependencies
The project defines strict versioning requirements for its environment and peer dependencies to ensure compatibility with React's modern rendering features (like Server Components) and Framer Motion's latest animation APIs.
Peer Dependencies
To use @pcstyle/motion, the host project must satisfy the following peer dependency requirements:
| Dependency | Version Requirement | Description |
|---|---|---|
framer-motion | >=10 | The primary animation engine used for variants and transitions. |
react | >=18 | Required for Hook support (e.g., useScrollProgress, useReducedMotion). |
Sources: package.json:37-40
Development Dependencies
The library is developed using TypeScript 5 and targets React 19 for internal typing and testing.
| Tool | Version | Purpose |
|---|---|---|
typescript | ^5 | Static type checking and transpilation. |
@types/react | ^19 | Type definitions for React components and hooks. |
framer-motion | ^12 | Development version of the motion library. |
Sources: package.json:41-46
Build and Compilation Configuration
The library uses a specific TypeScript configuration to ensure output compatibility with modern web bundlers and strict type safety standards.
TypeScript Configuration (tsconfig.json)
The project compiles source code from src to a dist directory with the following critical settings:
- Target:
ES2020for modern JavaScript features. - Module:
ESNextwithbundlerresolution to support modern build tools. - JSX:
react-jsxfor React 17+ transform compatibility. - Strict Mode: Enabled to enforce full type safety across the codebase.
Sources: tsconfig.json:3-15
Distribution Structure
The package exports multiple entry points, allowing consumers to import only the specific modules they need (e.g., just hooks or just transitions).
The diagram shows the modular export structure defined in package.json for ESM consumers.
Sources: package.json:8-32
Installation Lifecycle
The development and build lifecycle is managed through standard NPM scripts.
The flow represents the progression from source code to the distributed production build.
Sources: package.json:33-36
Available Commands
- Build:
tsc- Transpiles the project into thedistfolder. - Dev:
tsc --watch- Continuous compilation during development. - Typecheck:
tsc --noEmit- Validates types without producing output files.
Sources: package.json:33-36
Architecture & Integration Standards
As defined in the project's repository configuration, the library adheres to specific architectural rules:
- Strict Type Safety: The library prohibits the use of
anytypes or non-null assertions to ensure deep type safety for public APIs. - ESM Standards: High priority is placed on satisfying both ESM and CJS consumers via correct package exports.
- Client-Side Execution: Hooks like
useReducedMotionanduseScrollProgressare explicitly marked with the"use client"directive to ensure compatibility with Next.js App Router and other React Server Component environments.
Sources: cubic.yaml:20-25, src/hooks/useReducedMotion.ts:1, src/hooks/useScrollProgress.ts:1
Summary
Installing @pcstyle/motion requires a React 18+ environment with Framer Motion 10 or higher. The library is structured as a modern ESM package with modular exports, allowing for optimized bundle sizes. Developers must adhere to the strict TypeScript standards defined in the configuration when contributing to the codebase, ensuring that all animation utilities remain type-safe and performant.