Logo
Loading0%
UI Motion & Brand Design
YEAR // 2024–present
CLIENT // Herond Labs
DELIVERABLES
Motion Design3D ModelingFront-End ConceptsASO & Campaign Creative

HerondBrowser

Rebranding, motion assets, 3D systems, interactive front-end concepts, and day-to-day creative during Herond's transition to an agentic rewards-focused browser model.

Herond Browser
[ NARRATIVE_FOCUS ] // PRJ_002

Herond was rebranding when I joined — new visual direction, tight timelines, a lot of ground to cover. I sat across motion, 3D, front-end, and day-to-day marketing creative. Not because the role was defined that way, but because that's what was needed.

// THE OBJECTIVE WAS TO DEFINE STRUCTURAL MOVEMENT WITH AN EDITORIAL WHITE SPACE BIAS.
// DYNAMICS GOVERNED BY CUSTOM SPRING EQUATIONS IN REAL-TIME.
VIDEO_SOURCE

UI Film

Hero animation showcase for the landing page. Built to work as both a cinematic product showcase and a functional UI explainer, taking the project from storyboard to final render.

VIDEO_REF // 3
01
DELIVERABLE_SPEC

Onboarding Renders

High-fidelity static renders created for the app's onboarding flow, maintaining visual styling under a unified direction.

SLIDE_01 // 03
INTERACTIVE_SHOWCASE

Herond Point Orb

The Orb sits at the centre of Herond's rewards system. I took it from ideation to final look solo, ensuring it felt rewarding while remaining coherent with a brand that was still being defined. Hover over the frames on the right to see the design progression from rough sketch to final 3D look.

SELECT_FRAME // INTERACTIVE
FRAME_01 // SRC_VALUE● ACTIVE
FRAME_02 // SRC_VALUE○ HOVER_TO_VIEW
FRAME_03 // SRC_VALUE○ HOVER_TO_VIEW
ANIMATION_LOGIC.ts
01const motion = {
02 stiffness: 180,
03 damping: 14,
04 mass: 1.25,
05 restSpeed: 0.005
06};
07// Spring interpolation
08const value = useSpring(x, motion);
INTERPOLATION_METRICS
INTEGRATOR: RUNGE_KUTTA_4
FPS_LOCK: 120_VSYNC
https://sandbox.works/preview/ai-agent-interface
TIMELINE_SEQUENCE_CHOREOGRAPHY

Day-to-day & Other Contributions

FRAME_COUNT: 04 // TYPE: KEYFRAME_LAYERS
INDEX // 0100:00:00
INDEX // 0200:00:15
INDEX // 0300:00:30
INDEX // 0400:01:00
STATE_MONITOR //ACTIVE_FRAME: 01 → x: 0.0, opacity: 0.0
RULER:├─────┼─────┼─────┼─────┤
PROJECT_OVERVIEW
CLIENT // Herond Labs
ROLE // Multimedia Marketing & Motion Designer
YEAR // 2024–present

* All design system configurations and source interactions are dynamically processed in-browser.