Brand

The OrbitDocs logo

A vector rebuild of the mark and wordmark, animated with Motion: the planet glows in, the ring draws itself with the satellite riding its tip, the page lands and writes its lines, and the wordmark rises letter by letter.

Idle loop

On light

96px

56px

32px

On dark

96px

56px

32px

Files

Downloads

Everything is rendered from the same vector source as the component above. Prefer the SVG wherever it fits.

Vector

Static SVG, crisp at any size. The wordmark is converted to outlines.

Video

The intro and a short idle, 1920 × 1080 at 60 fps.

Animated image

For READMEs, slides and chat: 800 px wide logo, 512 px square mark.

React

Use it in your app

A client component built on Motion. With reduced motion it shows the logo at rest.

import { AnimatedLogo } from '@/components/animated-logo';

// Full logo, plays once on mount, "Orbit" follows the .dark class.
<AnimatedLogo variant="full" size={40} />

// Mark only, starts when scrolled into view, keeps a gentle idle loop.
<AnimatedLogo variant="mark" size={96} play="inView" loop />

// Fixed colours, e.g. on an always-dark hero.
<AnimatedLogo variant="full" theme="dark" size={72} />

variant'full' | 'mark': The mark with the wordmark (default), or the mark alone.
theme'light' | 'dark' | 'auto': "Orbit" in navy or near-white. auto (default) follows the .dark class.
loopboolean: After the intro, keep the satellite orbiting, the page floating and the highlights shimmering.
sizenumber: Height in px (default 48); the width follows the aspect ratio.
play'mount' | 'inView': Start on mount (default) or the first time it scrolls into view.
timelineMotionValue<number>: Drive it yourself in seconds, to scrub or record frames.