Motion

The way we move shapes our identity as a familiar brand. This strategic approach aims to evoke the same satisfying experiences users enjoy with Moises products, known for their dynamic and straightforward nature. It plays a crucial role in shaping how the brand is perceived.

Core Principles

Our motion flows in harmony with the musician’s soul—guided by elegance, precision, and intention. Inspired by the moment an instrument is played and its lingering resonance, each animation favors clarity over excess, respecting the silence between notes. Every action has purpose, every detail meaning.

Purposeful

Every movement is intentional—serving a clear function and guiding users, much like each note in a melody has purpose.

Elegant

Inspired by the subtlety of musicians, our motion is refined and fluid, with transitions that flow like curved lines and gentle reverberations.

Clear

We prioritize clarity, using motion to simplify complex actions, direct focus, and create intuitive steps without clutter.

Tuneful

Motion bridges scenes and ideas using smooth timings, creating harmony between different moments and elements.

Typography animation

The text moves quickly, simply, and in a straight line, with slight feathering at the start and gentle inertia that softens its arrival.

Horizontal Entry

Always moves from right to left. For short texts, words can animate individually; for longer texts, entire lines move together.

Vertical Entry

Text animates upward, rising from the bottom. Short texts can appear word by word, while longer passages transition as full lines.

Transitions

Scene or element transitions prioritize simplicity and agility, using linear movements that accelerate and decelerate progressively, finishing with a subtle feather. Hard cuts between images can also be used as exits for elements.

Slider Movements

Slider movements are welcome, both vertical and horizontal, as long as they are paired with smooth ease-in and ease-out.

Rounded Shape Transitions

Transitions featuring rounded polygonal shapes offer an elegant way to bridge scenes and graphical elements.

Summary Checklist

Use animations to guide user attention and provide visual feedback on interactions.

Avoid abrupt movements that might confuse or distract the user.

Every motion element should have a clear purpose, aiding navigation or enhancing usability.

Use the icon on its own only when it's clearly associated with Moises, like app icons or social avatars.