Variant System

Relevant source files

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

• src/variants/index.ts
• src/variants/cyber.ts
• src/variants/glow.ts
• src/variants/scale.ts
• src/variants/stagger.ts
• src/variants/slide.ts
• src/variants/fade.ts
• src/hooks/useReducedMotion.ts

The Variant System in @pcstyle/motion provides a structured collection of pre-defined animation states and transitions built on top of Framer Motion. It enables developers to apply complex, reusable animation logic—ranging from standard UI transitions like fades and scales to specialized "Cyberpunk" effects—by simply referencing named variants.

The system is designed for high composability, supporting container-level orchestration (staggering), interactive states (hover/tap), and accessibility through automated reduced-motion fallback mechanisms.

Sources: src/variants/index.ts, package.json:28-29

Core Architecture and Organization

The system organizes animations into domain-specific modules, all exported through a central registry. Each module exports Variants objects that define states like initial, animate, exit, hidden, or visible.

The diagram above shows the modular structure of the variant library.
Sources: src/variants/index.ts:1-6

Standard UI Variants

The library provides fundamental building blocks for common interface transitions:

• Fade Variants: Manage opacity and subtle directional movements (e.g., fadeInUp with a y: 20 offset).
• Slide Variants: Handle large-scale positional changes, often using percentage-based strings (e.g., x: "100%").
• Scale Variants: Control element sizing, including "pop" and "zoom" effects using spring physics.

Sources: src/variants/fade.ts:6-42, src/variants/slide.ts:6-49, src/variants/scale.ts:6-55

Cyberpunk and Glow Effects

A key feature of the system is the inclusion of "Cyberpunk-style" animations. These variants often utilize array-based keyframes for continuous or repeating effects.

Variant	Effect Type	Key Properties
glitch	Transform	Random x and y shifts with repeat: Infinity.
scanline	Background	Animates backgroundPosition from top to bottom.
hologram	Filter	Cycles hue-rotate and opacity.
glowPulse	Box Shadow	Pulses shadow intensity and spread.

Sources: src/variants/cyber.ts:6-76, src/variants/glow.ts:13-22

The Terminal Type Variant

The terminalType variant demonstrates dynamic variant generation, accepting a custom index i to calculate staggered delays for character-by-character typing effects.

export const terminalType: Variants = {
  hidden: { opacity: 0, width: 0 },
  visible: (i: number = 1) => ({
    opacity: 1,
    width: "auto",
    transition: { delay: i * 0.05 },
  }),
};

Sources: src/variants/cyber.ts:31-38

Orchestration and Staggering

The system includes specialized "container" variants designed to orchestrate the animation of children. By setting staggerChildren in the transition, parent components can control the timing of child entry sequences.

This flow illustrates how a container variant triggers a sequential animation for its nested items.
Sources: src/variants/stagger.ts:6-12

Accessibility and Integration

The Variant System integrates with the useAccessibleMotion hook to ensure compliance with user system preferences. This hook intercepts variants and swaps them for simplified versions (typically just opacity fades) if the user has enabled "Reduced Motion" settings.

Accessibility Flow

Summary of Variant Modules

Module	Description	Key Files
Basic	Essential fade, scale, and slide transitions.	fade.ts, scale.ts, slide.ts
Advanced FX	Thematic cyberpunk, glitch, and neon glow effects.	cyber.ts, glow.ts
Orchestration	Container-level staggering and child item variants.	stagger.ts

The Variant System provides a highly structured approach to animation, separating visual definitions from component logic while maintaining strict type safety through Framer Motion's Variants type.

Sources: src/variants/index.ts, src/variants/cyber.ts:1