Motion

Pulumi motion is restrained. Shapes move into place and stop there, and type never bounces or overshoots.

Logo animation

The logo has one official animation. To take the logo off screen, play it in reverse.

Every rule on the Logo page applies to every frame. The one exception is the wordmark sliding out from behind the mark, which hides part of the wordmark until it clears.

Use the animated logo sparingly. It belongs mostly in videos, as an intro or an outro. Everywhere else, use the static logo.
Use the official animation, from the downloads on this page or from AnimatedLogo in code.
Cut into and out of the logo, and hold on the finished logo long enough to read it.
Play it only on approved backgrounds: white, black, service black, brand grays, Violet 50, Violet 100, Violet 900, or Violet 950.
Don’t fade the logo, or put it inside a fade or dissolve transition.
Don’t mask, wipe, or clip the logo in or out.
Don’t make your own logo animation. That includes spinning, bouncing, scaling, or redrawing the logo.

Accent lines

Draw accent lines in violet muted. On title and end cards, use the four-line sets, tucked into two opposite corners.

Use the brand line files with their fade masks, so lines still end off canvas or fade out.
Keep every line the same stroke weight.
Don’t draw lines on, or animate their length.
Don’t overlap line sets.

Timing and easing

Use these curves and durations before you invent new ones. Entrances ease out, exits ease in, and moves ease in and out. Save overshoot for small shapes, like the logo’s ellipses.

Name	Use	`cubic-bezier()`
`out`	Entrances	`0.16, 1, 0.3, 1`
`in`	Exits	`0.55, 0, 1, 0.45`
`inOut`	Moves	`0.65, 0, 0.35, 1`
`overshoot`	Small shapes only	`0.34, 1.4, 0.64, 1`

Duration	Seconds
`quick`	0.25
`base`	0.5
`slow`	0.9
`stagger`	0.06

In the marketing-web repository, these come from @workspace/motion/tokens, and AnimatedLogo and AnimatedLines come from @workspace/motion.

Download the logo animation

Each file plays the animation once and holds on the finished logo for three seconds. Light files are for light backgrounds, and dark files are for dark ones. Cropped files leave the logo’s minimum clear space around it, and the 1920×1080 files center it in a full video frame.

MP4 for video editors and slides.
WebM with a transparent background, for web pages and slides.
GIF for email and anywhere else a video won’t play inline. It loops.
Transparent GIF, with its edges blended for white (light) or Violet 950 (dark). Use it on those backgrounds or ones close to them.