Keyframes System

Relevant source files

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

• src/keyframes/index.ts
• src/hooks/useAnimationSequence.ts
• src/variants/cyber.ts
• src/variants/scale.ts
• src/variants/glow.ts
• src/index.ts

The Keyframes System in @pcstyle/motion provides a collection of predefined CSS-compatible keyframe definitions primarily focused on achieving cyberpunk and high-tech visual effects. These keyframes serve as the building blocks for complex animations, allowing developers to apply sequences of values to CSS properties like transform, opacity, and filter.

This system is designed to work seamlessly with Framer Motion's animation engine, specifically intended for use with the animate function, Variants objects, or specialized hooks like useAnimationSequence. By decoupling the raw keyframe data from the transition logic, the system enables highly reusable and composable animation patterns across the library.
Sources: src/keyframes/index.ts:1-5 , src/index.ts:1-20

Core Keyframe Definitions

The system exports various constant objects representing specific animation behaviors. These are categorized by their visual impact, ranging from UI feedback to thematic "Cyberpunk" effects.

Cyberpunk Effects

The library features heavy emphasis on "glitch," "matrix," and "hologram" aesthetics through multi-step value arrays.

Keyframe Constant	Targeted Properties	Typical Values / Behavior
glitchKeyframes	x, y	Rapid offset shifts between -2 and 2 units.
matrixKeyframes	y, opacity	Vertical translation from -100% to 100% with fading.
scanlineKeyframes	backgroundPositionY	Smooth vertical sweep from 0% to 100%.
rgbShiftKeyframes	textShadow	Alternating red and cyan shadows for chromatic aberration.
hologramKeyframes	filter, opacity	360-degree hue rotation combined with opacity pulsing.

Sources: src/keyframes/index.ts:7-53

Standard UI Keyframes

Common interaction keyframes used for general feedback and visibility.

• pulseKeyframes: Oscillates opacity (0.5 to 1.0) and scale (1 to 1.02).
• flickerKeyframes: Rapidly varies opacity between 0.8 and 1.0 to simulate unstable lighting.
• shakeKeyframes: Horizontal translation (x) from -10 to 10 for error states.
• spinKeyframes: Simple rotate transition from 0 to 360 degrees.

Sources: src/keyframes/index.ts:13-42

Architecture and Integration

The Keyframes System is integrated into the broader motion library through hooks and variant definitions.

Data Flow Diagram

The following diagram illustrates how raw keyframe data is consumed by the animation engine.

The Keyframes System provides the raw data that feeds into higher-level abstractions like Variants and Hooks before being processed by Framer Motion.
Sources: src/variants/cyber.ts:6-14, src/hooks/useAnimationSequence.ts:25-45

Sequence Execution

The useAnimationSequence hook allows for the execution of multiple keyframe sets in a serial fashion. It iterates through an array of AnimationStep objects, applying keyframes to specified targets using the animate function.

This hook facilitates complex multi-stage animations by awaiting the completion of one keyframe set before starting the next.
Sources: src/hooks/useAnimationSequence.ts:25-45

Practical Application in Variants

Keyframes are frequently embedded directly within Variants to create infinite loops or hover states.

• Infinite Glitch: The glitch variant uses glitchKeyframes data (x/y arrays) with a repeat: Infinity transition.
• Pulse Animation: The pulse variant in the scale module utilizes an array [1, 1.05, 1] to create a continuous scaling effect.
• Glow Pulsing: The glowPulse variant cycles through a range of boxShadow values to simulate a breathing neon light.

// Example of keyframe usage in a Variant
export const glitch: Variants = {
  initial: { x: 0, y: 0 },
  animate: {
    x: [0, -2, 2, -2, 0], // glitchKeyframes.x
    y: [0, 2, -2, 2, 0], // glitchKeyframes.y
    transition: { duration: 0.3, repeat: Infinity, repeatDelay: 3 },
  },
};

Sources: src/variants/cyber.ts:6-14, src/variants/scale.ts:46-53, src/variants/glow.ts:13-22

Summary

The Keyframes System provides the foundational visual data for the @pcstyle/motion library. By centralizing cyberpunk and standard UI keyframe definitions in src/keyframes/index.ts, the library ensures visual consistency across its variants and hooks. This structure allows developers to easily implement complex, professional animations like Matrix-style rain or holographic shimmers by leveraging pre-calculated property arrays.
Sources: src/keyframes/index.ts, src/index.ts