Overview
A teal stroke sweeps in from the left and draws the path of the ribbon, which fills in behind it. The two arches rise into place, then the mark steps aside for the wordmark. The film uses the official logo geometry with the inverse white ink on charcoal.
Motion breakdown
- 0–1.8s
1. Lead with a gesture
After a quiet beat, one teal stroke enters and traces the ribbon of the mark, revealing it as it travels.
- 1.2–3.6s
2. Build the lockup
The arches rise with a slight dip and a controlled settle; the mark moves left and the wordmark follows letter by letter.
- 3.6–8s
3. Let it read
The complete logo holds for more than three seconds, then fades to the same quiet frame the loop begins with.
Open the scene
Download and unzip the project, then open it with your installed Mografy CLI.
Download scene projectmografy dev ./mografy-brandIn the Mografy source repository, the same project lives at examples/mografy-brand. Animation code stays in scenes/main.ts with its helpers in scenes/kit.ts. The ZIP includes the Inter font files and license.
Original prompt
Read the creative brief
Create an 8-second brand introduction for Mografy using the supplied official logo. Use a deep-charcoal background, the original logo colors, and restrained teal #12B5A5 accents. Preserve the logo’s exact shape and proportions. Begin with a quiet frame. Introduce a short teal motion gesture that leads naturally into the logo reveal. Reveal the mark first, followed by the Mografy wordmark with a slight timing offset. Let both settle into a strong, centered composition. Make the motion confident, precise, and memorable, with gentle anticipation and a controlled settle. Keep the complete logo clearly visible for the final 2 seconds, then transition cleanly into the next loop. Avoid redesigning the logo, excessive glow, generic particle explosions, and unrelated decorative objects. Do not include video controls, website card labels, or audio.