Eric Zhang

Overview
I created this project to explore how motion can bring software icons to life. Taking standard productivity tools like spreadsheets and data management apps, I shifted them from flat, static symbols into fluid, interactive design assets. The goal was to bridge simple functionality with a modern visual style, proving how subtle micro-interactions make digital tools feel far more engaging.

​

Concept

• Core Idea: Transforming data structures into tangible, energetic forms.

• Narrative: Modern data workflows are often abstract and rigid. This design concept visualizes the structure of a spreadsheet (grids, cells, and file containers) as lightweight, luminous geometric physical objects floating in space.

  The central folder/sheet structure acts as an anchor, while dynamic elements—floating spheres representing individual data points or active selections—interact seamlessly with grid boundaries. The motion emphasizes structure, clarity, and delight, showcasing how micro-animations can make digital productivity tools feel reactive, alive, and engaging.
   

Art Direction

• Aesthetic Style: Neomorphic Glassmorphism & Cyber-Minimalism

• Color Palette:

  • Primary: Vibrant Mint Green / Cyan Gradient  — conveying fresh energy, modern productivity, and digital precision.

  • Secondary: Crisp Pure White — provides structure through grid outlines, file tabs, and interactive UI nodes.

  • Background: Deep Matte Charcoal / Near-Black — high-contrast canvas that allows neon and volumetric lighting to glow prominently without visual clutter.

• Lighting & Materiality:

  • Volumetric Glow: Subtle outer energy glows soften hard geometric edges.

  • Translucency & Layering: Semi-transparent planes stacked in 3D space create natural depth of field and spatial hierarchy.

  • Clean Lines: Sharp 90-degree corner accents frame the central composition, framing the UI layout cleanly.
     

Motion Design

• Spatial Composition:

  • Arranged in a subtle 3D isometric perspective, creating depth through layered foreground and background planes.

• Kinetic Dynamics & Mechanics:

  • Fluid Geometry: The grid lines and folder silhouettes reveal or expand using smooth easing curves (cubic-bezier acceleration), giving elements a weightless, frictionless quality.

  • Floating Data Nodes: The glowing cyan sphere acts as a primary focal point, executing smooth, buoyant floating motions above the main matrix to simulate continuous system activity.

  • Micro-Interactions: Subtle scale pulses and corner-bracket extensions accentuate user focus and hover-state feedback mechanisms.

• Pacing & Easing:

  • Snappy, expressive keyframe easing ensures animations feel responsive and high-performance rather than sluggish or ornamental.