Motion · Product Design

Products that move.

Brand motion, UI transitions, micro-interactions and scroll-driven prototypes, built in Figma. Every animation has a job to do.

Scroll is the playhead

cubic-bezier(0.23, 1, 0.32, 1)

Purposeful. Motion explains where you came from, what changed and what to do next. If it explains nothing, it goes.

Branded. Timing and easing belong to the brand, like a colour does. This site runs on the one curve above.

Production-ready. Prototypes an engineer can read: Smart Animate, variables and real states, not a video of a screen.

Selected motion work

Six pieces. Press play.

Pieces
6
Primary tool
Figma
Core technique
Smart Animate
Product Design01

MoCreative Concept, motion reel

A 16-second brand reel cut to a 128 BPM grid. One gold point of light, the lit edge of the mark, travels through seven chapters: kinetic type, the agent grid, Mocreative Studio and the mark itself, and lands as the full stop in the name. Built in code with HyperFrames and GSAP. The music and one camera move were generated with AI.

  • Brand reel
  • Motion in code
  • GSAP
Vertical cut (9:16)HTML · GSAP · MP4
Product DesignConcept02

Fanta, brand motion

A bold brand motion concept for Fanta. Expressive interactions and animated transitions built around the brand's playful identity.

  • Brand motion
  • Smart Animate
  • Figma
Open in FigmaFigma · MP4
Product DesignStudy03

Liquid Glass

A glass UI motion study. Translucent layers, depth-driven blur and liquid transitions.

  • Glass UI
  • UI motion
  • Visual design
Open in FigmaFigma prototype
Product DesignStudy04

SmallClosedWorld

Detail-rich motion at a small scale. Micro-interactions and a contained world, built through animated UI flows.

  • Motion story
  • Interaction design
Open in FigmaFigma · MP4
Product DesignConcept05

Fanta, animation cut

A second direction for the same concept. Tighter timing, faster transitions and a different pace.

  • Brand motion
  • Animation
Open in FigmaFigma · MP4
Product Design06

Interactive category carousel

A gesture-driven category slider. Animated card transitions, clear active states and fluid swipes.

  • Carousel
  • Smart Animate
  • Interaction
Ask about itFigma · MP4

What I animate

Motion is part of the product, not a layer on top.

It sits in the Product Design pillar. The same hands that design the flow build the transitions, so nothing gets lost between a prototype and the shipped interface.

  • 01Scroll transitions
  • 02Micro-interactions
  • 03Smart Animate
  • 04Brand motion
  • 05Figma variables
  • 06Animated onboarding
  • 07Prototype-ready handoff
  • 08AI-driven flows
  • 09Motion in code (GSAP)

Contact

Need an interface that moves with a purpose?

Motion work is booked as a Product Design engagement. Booking 20 to 25 hours a week. Lagos, WAT, working with teams anywhere.

hello@mocreativeconcept.com