Cyber Style

Relevant source files

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

• src/variants/cyber.ts
• src/keyframes/index.ts
• src/variants/glow.ts
• src/transitions/tween.ts
• src/hooks/useAnimationSequence.ts
• package.json

Cyber Style is a specialized collection of animation variants, keyframes, and transitions designed to implement a "cyberpunk" aesthetic within the PCSTYLE motion library. It leverages Framer Motion to provide high-performance visual effects such as glitches, scanlines, holographic shimmers, and chromatic aberration.

The module is part of the @pcstyle/motion package, which provides standardized motion utilities for React applications. Cyber Style specifically focuses on high-contrast, digital-interference-themed animations that are often utilized in terminal-like interfaces or futuristic UI components.
Sources: package.json:1-5, src/variants/cyber.ts:1-5, src/keyframes/index.ts:1-5

Animation Architecture

The Cyber Style system is built on three layers: raw CSS keyframes, Framer Motion Variants, and specialized transition presets. This layered approach allows developers to use simple pre-defined animations or compose complex sequences using hooks.

Core Keyframe Definitions

Keyframes define the raw values for properties like opacity, scale, and textShadow that create the digital distortion effect.

Keyframe Set	Properties Animated	Common Use Case
glitchKeyframes	x, y	Rapid positional jitter
rgbShiftKeyframes	textShadow	Chromatic aberration on text
scanlineKeyframes	backgroundPositionY	Moving CRT scanline effect
hologramKeyframes	filter, opacity	Hue-shifting holographic shimmer
matrixKeyframes	y, opacity	Vertical digital rain movement

Sources: src/keyframes/index.ts:8-12, src/keyframes/index.ts:31-34, src/keyframes/index.ts:60-65, src/keyframes/index.ts:68-71

Animation Logic Flow

The following diagram illustrates how raw keyframe data flows through the library's variant system to produce a final animation.

The system integrates easing functions specifically tuned for cyber aesthetics, such as easeCyber, which uses a sharp cubic-bezier curve [0.9, 0, 0.1, 1].
Sources: src/transitions/tween.ts:58-61, src/hooks/useAnimationSequence.ts:25-30

Variants and Visual Effects

The cyber variant file exports pre-configured Framer Motion Variants objects. These are categorized by their visual behavior: interference effects, data display effects, and environmental effects.

Interference Effects

These variants simulate hardware or signal failure:

• glitch: Rapidly oscillates the X and Y coordinates with a repeatDelay of 3 seconds to simulate periodic interference.
• cyberBlink: A rapid opacity toggle (1 to 0 to 1) that repeats 3 times with a 2-second delay.
• chromatic: Applies a dual-color textShadow (#ff00ff and #00ffff) specifically on hover.

Sources: src/variants/cyber.ts:7-14, src/variants/cyber.ts:58-64, src/variants/cyber.ts:73-78

Data Display Effects

These variants simulate terminal and digital data streams:

• terminalType: Animates the width from 0 to auto to simulate text being typed. It uses a dynamic delay based on an index i.
• dataStream: Animates an element's y position from -10 to 10 while pulsing opacity.
• matrixRain: A linear animation moving elements from -100% to 100% vertically.

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, src/variants/cyber.ts:22-29, src/variants/cyber.ts:40-47

Environmental Effects

These variants provide atmospheric glow and pulses:

• gridPulse: Gently pulses the opacity of background elements between 0.3 and 0.6.
• glowPulse: Animates boxShadow using magenta (rgba(255, 0, 255, ...)).
• neonFlicker: Simulates a failing neon light by rapidly fluctuating opacity between 0.8 and 1.0.

Sources: src/variants/cyber.ts:66-71, src/variants/glow.ts:11-19, src/variants/glow.ts:21-27

Implementation via Hooks

Complex cyber animations are often managed via the useAnimationSequence hook. This allows for multi-step animations (e.g., a terminal glitching before typing out text).

The runSequence function iterates through an array of AnimationStep objects, applying stagger or specific duration overrides defined in the step options.
Sources: src/hooks/useAnimationSequence.ts:18-42

Summary

Cyber Style provides a robust set of visual tools for creating immersive, futuristic interfaces. By combining raw CSS-like keyframes for performance with Framer Motion's declarative variants, it ensures that complex effects like chromatic aberration and glitching are easily accessible and performant. The inclusion of specialized easing functions like easeCyber ensures that movement feels appropriately sharp and mechanical.
Sources: src/variants/cyber.ts, src/keyframes/index.ts, src/transitions/tween.ts