Eric Zhang

Overview

This project is a high-fidelity motion graphics and game UI/UX prototyping designed to explore interactive military telemetry and armored vehicle HUD mechanics in After Effects. Inspired by tactical tank displays, target lock-on systems, and high-tech combat UI, this breakdown covers the concept, visual identity, and motion systems built into the prototype.

​​

​

Concept

• Diegetic Armored HUD: Instead of static overlay UI, the interface is designed as an in-cockpit tactical monitor embedded directly within an armored unit's viewport (featuring dynamic vehicle metadata like Leopard 2A7A1).

• Tactile Combat Telemetry: Every reticle, status badge, and progress meter serves an immediate gameplay function—ranging from real-time target identification to critical deployment feedback (ACHIEVEMENT UNLOCKED, ALL SET, LAUNCH).

• Responsive Command Feedback: Blends high-visibility combat telemetry with ambient grid visuals to give players instant visual and tactile confirmation during intense gameplay state transitions.

​

​

Art Direction

• High-Luminance Emerald Palette: Uses glowing tactical green against a dark charcoal background to channel classic night-vision scopes and cathode-ray military screens while keeping text crisp and easy to read.

• Layout & Framing: Side telemetry tracks and vehicle metadata frame the viewport, keeping the main targeting reticle anchored right in the center.

• Retro-Futuristic Display Pass: Built with CRT elements like vector scanlines (Venetian Blinds), subtle chromatic aberration along the screen edges, and radial vignettes to simulate an authentic tactical monitor output.

• Vector & Pixel Hybrid: Combines clean vector shapes from Illustrator with pixelated header fonts to balance high-tech precision with rugged military hardware aesthetics.

​

Motion Design

• Dynamic Lock-On Sweeps: Target reticles and radar sweeps animate using Trim Paths keyframing paired with simple rotational expressions (time * 120).

• Expression-Driven Spring Physics: Uses damped spring equations on Position and Scale properties to give modal pop-ups and button interactions a natural overshoot and settling bounce:​

​

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.

​

​

• Procedural Signal Glitch: Top-level adjustment layers driven by Turbulent Displace and 1-frame RGB channel splits (Set Channels) simulate quick digital interference and screen glitches during target lock-ons.​

​