Bold.Cinematic.Alive.
Atlan’s choreography system, and the intent behind every frame.
Motion principles
The camera glides; the type snaps — product moments are quick and exact, brand moments are cinematic. Stillness is part of the choreography, and so is flourish. When the estate breathes, you’re watching a system think.
And whatever the job — revealing, guiding, embellishing, or setting a mood — every animation earns its moment.
Atlan motion uncovers more than it creates. The structure was always there; the animation brings it into view and lets the viewer feel like they found it.
The system
A shared set of curves, timing, and spatial primitives that keep Atlan motion coherent across every surface. The expression is limitless — the foundations are deliberate.
Easing
All Atlan motion is built on cubic bezier curves. The shape changes depending on whether an element is entering, exiting, or shifting within the frame.
Enter
The confidence of something already on its way. Elements hit the frame moving and decelerate to rest. No wind-up, no hesitation.
cubic-bezier(0.33, 1, 0.68, 1)Exit
A breath before the leap. The element gathers itself for one barely perceptible beat, then accelerates out of frame and is gone.
cubic-bezier(0.32, 0, 0.67, 0)Shift
Breathe in, breathe out. Elements already on screen ease into motion and ease back to stillness — no jarring start, no hard stop. A change of place reads as intention.
cubic-bezier(0.33, 0, 0.67, 1)Stagger
When multiple elements enter together, stagger gives them reading order. Without it, the eye has nowhere to land.
- Interval
- 80–120 ms between elements
- Direction
- Intended reading order
Perspective tilt
We shoot the product like a physical object — panels angled in space, stacked in layers, lit from the side. Perspective gives the estate weight and makes structure tangible.
- Max rotation
- 4°
- Easing
- Ease-out on leave
Typographic animation
Text in Atlan doesn’t appear. It enters — and the way a headline enters sets the emotional register for everything that follows. Four entrances, four temperatures. Choose by what the moment should feel like.
The Settle
Fade + translate into position. Directional — can enter from any edge. The safe default.
The Emerge
Blur-to-sharp focus pull. The word materializes from nothing. For hero moments. (Variant: Dolly Out.)
Typewriter
Per-character typing. Only for body text — never headings.
Sharp Cut
Instant appearance, staggered per word. No transition — pure editorial timing.
Captions
Video captions follow a karaoke-highlight pattern. The active word gets a blue background while past and future words stay white on a translucent bar.
| Property | Value |
|---|---|
| Font | Inter, Regular |
| Text color | #FFFFFF |
| Bar background | #7C7C7C at 40% opacity |
| Active word | Blue-500 (#2026D2) background |
| Background mode | Box (full-width bar) |
| Position | Bottom-center of frame |
| Highlight timing | Synced to spoken word |
Dynamic backgrounds
The grid is the data estate itself, alive even when no one is looking. Every pulse is data moving, an agent working, a signal firing right now. It extends past the frame in every direction, and nothing in it moves alone: activity travels, connects, and resolves into structure. Two modes, dark and light, adapt to the surface.
Dark Grid
The default cinematic background. Shimmer cells pulse across a deep blue field. Used for hero sections, video intros, and dark-themed layouts.
- Play at 1x–4x speed depending on foreground motion
- Use at up to 50% opacity to avoid distracting from the subject
Light Grid
A lighter variant for product pages and content-heavy layouts. Same shimmer system, softer contrast. Pairs with the standard white overlay.
- Play at 1x–4x speed depending on foreground motion
- Use at up to 50% opacity to avoid distracting from the subject
Ambient Gradient
Diffused cyan light breathing over Atlan blue. Activity stays at the edges — the center holds quiet, built to sit behind titles.
Logo animation
The Atlan wordmark has two signature animations — one built for presence, one built for energy. Choosing the right one depends on tone and context, not personal preference.
Funk
Deconstructed letter fragments scatter across the frame, then converge through a dramatic reveal into the full wordmark. Cyan accents settle into the letterforms last. Bold, energetic, cinematic.
Use for: Hero intros, major launches, event openers, keynote opens — moments that deserve cinematic weight.
Wordmark Build
Opens on an oversized “a” logomark. Letters emerge and build outward into the full wordmark, followed by a tagline. Clean, structured, confident.
Use for: Standard outros, product videos, webinar closes, social clips — the everyday signature.
Do / Don’t
Do
- Funk for cinematic moments, Wordmark Build for everyday
- Blue or white background — match the video’s tone
- Hold the final frame 1.5s+ to register
Don't
- Custom logo animation that breaks the system
- Flash the logo for less than a second
- Clutter the closing card with social handles or QR codes