June 2024

The Claw Animation

The Claw Animation

The Claw Animation

The Claw Animation

A playful, professional illustration designed for a website hero and brought to life through subtle micro-animation.
While the full layout is protected under NDA, this case study highlights the complete creative and motion process.

// The Creative Ask

// The Creative Ask

The task was to design a custom illustration that visually represents the idea of “selecting the right industry,” and animate it in a way that feels alive without distracting from the site’s content.

The outcome needed to be lightweight, clean, and aligned with the brand’s tone.

The task was to design a custom illustration that visually represents the idea of “selecting the right industry,” and animate it in a way that feels alive without distracting from the site’s content.

The outcome needed to be lightweight, clean, and aligned with the brand’s tone.

Role

Creative Designert

Creative Designert

Scope

Illustration

Micro-Animation

Concept visiuals

Identity Collaterals Website Product Interface

Identity Collaterals Website

Product Interface

Duration

3 days

3 days

// Concept & Direction

// Concept & Direction

// Concept & Direction

The illustration was designed to convey a playful yet refined tone. The core idea was a mechanical claw selecting industries, used as a visual metaphor for the platform’s ability to help investors identify relevant opportunities. Early sketches focused on shape rhythm, motion cues, and hierarchy to ensure the illustration remained expressive and readable before animation was introduced.

// From Illustration to Motion

// From Illustration to Motion

// From Illustration to Motion

The illustration was built to be balanced and modular, ensuring it could animate smoothly without unnecessary complexity. The micro-animation used gentle movements, soft easing, and controlled pacing to add life to the layout without pulling focus from the hero content. The claw’s hover, pick, and release motions were timed to loop seamlessly, keeping the interaction natural and unobtrusive.

// Final Animation

// Final Animation

// Final Animation

The final output is a lightweight, looping animation optimized for web performance.
When placed in the hero section, it adds personality and visual interest without overwhelming the user experience.