Eric Zhang

Overview

A high-fidelity motion graphics and UI/UX prototyping project exploring interactive game interface mechanics in Adobe After Effects. Based on sci-fi telemetry graphics, responsive micro-interactions, and modal state transitions, this study focuses on building dynamic game UI assets for modern production pipelines.

​​

​

Concept

• Diegetic HUD Telemetry: Seamlessly blends functional in-game telemetry—such as targeting reticles, active radar sweeps, and live velocity/altitude readouts—with ambient spatial grid visuals to create an immersive, tactical HUD overlay.

• Spatial Depth & 3D Viewport: Integrates a high-contrast 3D wireframe vehicle display ("Northrop T-38 Talon") featuring multi-axis rotation and dynamic focal planes to establish tangible spatial depth inside a 2D interface.

• Tactile State Transitions: Applies physics-driven spring dynamics to modal banner drops ("ACHIEVEMENT UNLOCKED"), button states, and notification badges so micro-interactions feel responsive, physical, and weighted.

​

​

Art Direction

• High-Contrast Sci-Fi Palette: Built on a deep charcoal/black canvas (#05080E) paired with high-luminance vector elements and cyan/blue emissive accents to maximize visual hierarchy and clarity.

• Retro-Futuristic Surface FX: Multi-layered display aesthetics featuring vector CRT scanlines, subtle chromatic aberration along screen margins, and radial vignette lighting to simulate a tactical monitor output.

• Vector Precision: Scalable vector shapes and sharp typography designed in Adobe Illustrator to maintain crisp, high-tech line weight across continuous camera zoom and scale passes.

​

​

Motion Design

• Expression-Driven Spring Physics: Utilizes damped spring equations on Position and Scale properties to produce natural overshoot and settling on modal pop-ups and button interactions:

  (JavaScript)

 

​

amp = .04; freq = 5.0; decay = 7.0;
n = 0;
if (numKeys > 0){
  n = nearestKey(time).index;
  if (key(n).time > time) { n--; }
}
if (n == 0) { t = 0; } else { t = time - key(n).time; }
if (n > 0 && t < 1){
  v = velocityAtTime(key(n).time - .001);
  value + v*amp*Math.sin(freq*t*2*Math.pi)/Math.exp(decay*t);
} else { value; }

​

// This After Effects expression creates an automatic overshoot, bounce, or elastic spring physics effect whenever an animated property passes a keyframe. Instead of requiring you to manually plot out complex easing keyframes to simulate a bounce or settling movement, it calculates a decaying sine wave based on how fast the object was moving right before it hit the keyframe.

​

​

• Rotational Sweeps & Reticle Builds: Concentric ring components build out via Trim Paths keyframing paired with continuous rotational math expressions (time * 120), while the 3D aircraft maintains continuous Y-axis rotation (value + time * 25).

• Procedural Signal Glitch: A top-level adjustment layer driven by Turbulent Displace and 1-frame RGB channel splits (Set Channels) to simulate sporadic digital interference and signal noise.

​​

​