Every movement GETHAIR makes carries the same conviction as the brand itself — no shortcuts, no improvisation. Motion is craft.
Every animation has a reason to exist. If a motion doesn't serve communication or reinforce craft, it's removed. GETHAIR moves like a master hairdresser — every gesture is intentional, unhurried, precise.
Motion follows a clear hierarchy — just as the brand values "Struktur vor Talent." Elements reveal in logical order: context first, then headline, then detail. Never chaotic, never simultaneous.
Motion has physical presence. Elements decelerate with authority — they don't pop in, they land. Inspired by the retro-70s aesthetic and the tactile world of hairdressing tools: scissors, combs, hands on hair.
GETHAIR runs slower than digital-first brands. Confidence doesn't need to rush. Use this scale strictly.
Stagger Rule: When multiple elements animate in sequence, use 80–120ms delay between each. Never animate more than 3–4 elements simultaneously. Stagger from top-left to bottom-right.
The curve defines personality. GETHAIR uses weighted deceleration — fast start, elegant landing. Watch the bars animate below.
Fast enter, graceful settle. Used for all element entrances — headlines, cards, images. Confident without being aggressive. The GETHAIR default.
Strong ease-in-out. For logo reveals, scene transitions, and signature wipes. Deliberate, unhurried. Feels like turning a page in a magazine.
Never use. Spring/bounce easing reads as playful, consumer-app, and lightweight. GETHAIR is a serious professional platform — motion must carry authority.
The Monoton wordmark has internal line structure. Animation should honor its geometry — revealing with precision, not appearing with a pop.
Each typographic role has its own animation behavior. Hierarchy in time mirrors hierarchy in design.
Ausbildung entsteht nicht durch Begabung allein. Sie entsteht durch klare Abläufe, saubere Grundlagen und konsequente Wiederholung.
Sequencing rule: Eyebrow → Headline lines (staggered) → Body text → Baka Too accent (last, only when present). Never show all elements at once. Let each layer of meaning arrive separately.
Each brand asset has its own motion signature — derived from its visual logic and purpose in the system.
The red vertical line grows from top to bottom — like a scissor cut. Used as a reveal trigger or page section marker.
Each bar rises independently with 80ms stagger. References the multi-line structure of the Monoton logo. Used as a progress or loading indicator.
Buttons use a left-to-right wipe reveal — never a fade. Matches the editorial wipe language of the broader motion system.
Numbers use a slot-machine flip — referencing retro analog departure boards and the 70s typography influence. Never a CSS count-up from zero.
Photography scales max 3% over 8–12 seconds with a slow directional drift. Barely perceptible — creates warmth without distraction. Never zoom in more than 5%.
Icons scale from 80% to 100% with fade-in, staggered at 80ms. Use the same expo-out curve. Icons never spin, wiggle, or pulse on idle.
GETHAIR transitions are editorial — like magazine page turns or film cuts. Clean, decisive, never dreamy.
Never use: Cross-dissolves (reads as soft / indecisive), zoom transitions, swipe-up (too social/mobile-app), push transitions, or any transition with motion blur effects applied to the entire frame.
Apply these across every touchpoint. When unsure, ask: does this motion reflect craft, precision, and structure?
Motion adapts to context, not the other way around. Each platform has its own rhythm.