Loading

The numbers

scripts/build/logo-motion.json holds the logo’s measures and, for each beat, a table of where each moving end stands at 240 samples a second. They are the numbers the published videos were rendered from.

The generator

pnpm build:logo-motion runs scripts/build/logo-motion.mjs, which writes GtLogoMotion.geometry.ts and GtLogoMotion.css. Neither file is edited by hand, and --check fails when either differs from what the script would write.

The loader

The loader animates custom properties registered with @property, a dash’s length and its start along its path for each moving line. The keyframes keep only the samples that a straight line between their neighbours misses.

The hover

The hover transitions each dash’s own stroke-dasharray and stroke-dashoffset, with the beat’s course written as a CSS linear() easing. A leave halfway runs back from where it is.

The WebKit rule

Transitions sit on each dash’s own properties, never on a registered custom property. Safari runs a transition of a registered custom property but paints the var() that reads it at the end value, so there the hover jumped to its end.

Only the moving line moves

The still layer is the logo’s own path. The motion layer paints that same path and a mask takes it away only where a line has been undrawn, where the logo without that line shows instead. The layers add with plus-lighter in an isolated group under masks that partition the frame, so wherever nothing is undrawn the frame is the logo pixel for pixel.

The ring and the meridian

No mask reaches the ring, so the ring is the logo’s own path in every frame. The meridian is only drawn and undrawn along its own ellipse at the logo’s width, and its cut faces stay where the logo’s are until the draw-back reaches them.

Dash lengths

The dashes run on their paths’ own lengths, with no pathLength. Chrome scaled a pathLength dash by a coarser measure of the path than it dashes by, which put a dash’s end up to half a unit short of its numbers, the G’s landing among them.

Browsers

The motion needs @property, linear() easing and plus-lighter: Chrome 113, Safari 17.2 and Firefox 128 or later.

import GtLogoMotion from '@/components/brand/GtLogoMotion';

<Link href='/'>
  <GtLogoMotion mode='hover' size={18} />
</Link>;
<GtLogoMotion mode='loader' size={56} label='Loading the prototype' />;

Hand-off

At the start of the hover and of the loader, at the end of the leave and at every seam of the lap, the motion layer is the still logo with no pixel different.

Still

In every frame, every pixel is the logo where the meridian is drawn and the logo without its meridian where it has been undrawn, except within two pixels of the end that moves.

Ring

In every frame the ring’s core and outer edge, and its inner edge away from where a line merges into it, are the logo’s own pixels.

End pose

The draw-back ends on the logo without its meridian.

Tip

Through the whole loop the G’s tip is the logo’s, except while the G’s own lap runs over it.

Meridian

Wherever the meridian shows, every pixel it adds lies on the logo’s meridian ellipse at the logo’s width, and each cut face stands where the logo’s does within 0.05 units until the undrawn stretch reaches it.

Steps

No move starts or lands with a pop, and no step inside a move holds a frame.

Course

Every dash stands where the generator’s course puts it at that time, within 0.05 units, and no dash end jumps or stalls where the course does not.

• The loader is drawn only from mount on and only over a pane still loading, so it never stands over a page that is already there.
• It leaves on the frame’s load event. A failed load can fire no load event at all, as Safari and Firefox did for a dropped connection, so each loader also leaves after 15 seconds and the pane shows whatever the browser drew.