Masterka Motion Identity System Brand Board
Motion Identity System

Animated Logo
Showcase

Six motion narratives. Each animation tells a micro-story about the brand through intentional pacing, typographic awareness, and layered secondary motion.

2.6s · Masked stagger
01 / Mask Rise — Wordmark + Dot Clip reveal · Baseline mask
Masterka
Visual Designer & Creative Soul
Concept
Curtain Reveal
Each letter lives behind its own invisible mask (overflow:hidden). The character slides upward from below the baseline into its final position — like theatre curtains rising. Clean hard edge, no blur, no fade. Pure motion.
Detail
Stagger & Easing
Tight 0.04s stagger creates a wave without being a "wave effect". Each char uses power4.out for a fast initial push that decelerates elegantly. The dot appears last with a slight scale-up.
Logo Variant
Masterka. — Dot Wordmark
Primary brand mark. Hover triggers the signature dot→star morph with a subtle anticipation squeeze before the expansion. The morph represents precision → creativity.
2.8s · Scale settle
02 / Soft Imprint — Wordmark on Paper Opacity + scale · Editorial
Masterka
Visual Designer & Creative Soul
Concept
Ink Settling on Paper
The wordmark starts slightly oversized (scale 1.06) and at zero opacity. Over 2 seconds it simultaneously fades in and scales down to 1.0 — like ink bleeding onto paper then sharpening as it dries. Deliberately slow.
Detail
Unified Movement
All characters move together as a single unit — no per-character stagger. The wordmark is treated as one typographic object. The dot has a separate delayed entrance with a back.out ease.
Logo Variant
Masterka. — Paper Light
Light-mode wordmark on #F4F4F0 paper. Designed for editorial contexts, print-adjacent media, and presentations where restraint signals confidence.
3.4s · Color transition
03 / Chromatic Shift — Glow Star Lockup Accent → white · Radiant glow
Masterka
Visual Designer & Creative Soul
Concept
Creative Energy → Refined Form
Characters appear in the accent color (#FF4400) — raw creative energy — then gradually shift to white as the form crystallizes. The color journey mirrors the design process: from hot idea to polished result.
Detail
Staggered Color Wave
Each character begins its color shift 0.08s after the previous, creating a wave of color traveling through the wordmark. The ✦ star appears last and its glow drop-shadow breathes from 0→12px→8px.
Logo Variant
Masterka ✦ — Glowing Inverse
Dark-mode star lockup with neon glow emission. The star's radiance is the final punctuation — it signals the brand's creative energy at rest but still alive.
3.2s · Tracking shift
04 / Cinematic Unfold — Star Lockup Tracking · Typographic breath
Masterka
Visual Designer & Creative Soul
Concept
Typographic Breath
The wordmark starts spread wide (tracking 0.35em) and contracts to its final tight kerning — like a held breath slowly releasing. The space between letters IS the animation.
Detail
Parallel Tracks
Track 1: Global letter-spacing 0.35em → 0. Track 2: Characters fade from 0 → 1 with 0.06s stagger. Track 3: Star rotates 180° during contraction, landing at 0° when spacing locks.
Logo Variant
Masterka ✦ — Star Lockup
Standard star lockup. Hover: the wordmark breathes — tracking subtly expands and contracts rhythmically. A meditative, responsive interaction.
3.2s · Stroke → Fill
05 / Line Construct — Monogram Emblem SVG draw · Precision
M
Kinetic Monogram
Concept
Precision Before Expression
Blueprint environment appears first (axes, rings). Then the M materializes from transparency with a deliberate vertical mask — top to bottom, like a print reveal. The star is placed with exact precision, no bounce.
Detail
Layered Environment
The concentric rings and crosshair axes create architectural context before the letterform appears. Every element has an intentional delay. The star arrives 0.6s after the M — a considered pause.
Logo Variant
M + ✦ Monogram Emblem
The serif italic M paired with the 4-point accent star. Hover: the M subtly shifts to accent color while the star rotates exactly 90° — revealing the negative space geometry.
3.0s · Path morph
06 / Form Genesis — Pure ✦ Accent Dot → Star · Brand narrative
Precision → Creativity
Concept
The Brand Story in One Shape
A perfect circle (dot = precision) appears at center. It holds for a beat. Then it slowly morphs into the 4-point star (creativity). The transformation IS the brand narrative — controlled craft becoming expressive imagination.
Detail
Deliberate Timing
The dot arrives and pauses (0.8s hold). The morph itself takes 1.2s with a smooth ease-in-out — no rush. After morphing, a single precise 90° rotation. Each moment is earned, not thrown.
Logo Variant
Standalone ✦ Icon
Pure accent star with gradient. The most reduced brand form — raw creative energy. Hover: slow 45° rotation revealing the square negative space inherent in the star geometry.