← All work

Zyp

Internship · Zyp, Inc. · Summer 2026

Zyp

The motion and the 3D on Zyp's public website: a hero you scrub with the scroll, and a globe drawn on a canvas.

See it live (opens in a new tab)
The first frame of the zyp.co hero: an open-plan office, with a laptop on a white desk by the window and people working at the desks behind
The hero of www.zyp.co, played by your scroll as it is on the site: the shot moves in from the office to the laptop. The first frame of the hero on www.zyp.co. On the site, the scroll moves the shot in from the office to the laptop.
Role
Software engineering intern, Zyp, Inc.
My part
The motion and the 3D on the public marketing site
When
Summer 2026, August to September
Stack
Astro, HTML canvas, Playwright, axe

The site

In summer 2026 I worked on Zyp's public marketing site, www.zyp.co, on its motion and its 3D.

The site is an Astro static site with a scroll-scrubbed 97-frame hero sequence, a canvas globe with payment arcs, a product-video takeover, and Playwright and axe end-to-end tests. Three of those pieces follow, each named for what it is.

  1. The scroll-scrubbed hero Motion
  2. The canvas globe 3D
  3. The tests that hold it together Tests

Motion

The scroll-scrubbed hero

The home page opens on an office, and the scroll is the playhead. The hero is a 97-frame sequence scrubbed by scroll position: reading down pushes the shot in from the room to the laptop on the desk, and scrolling back up plays it in reverse. The reader sets the pace.

The top of www.zyp.co: an office with a laptop on a white desk, under the headline 'The back office management platform for global companies.' and a Launch demo button
The first screen, at the top of the page.
Further into the hero sequence: the shot has moved in to the laptop on the desk, its screen showing the product dashboard
A little further down: the shot has moved in to the laptop.

3D

The canvas globe

Further down, under the heading “Coverage where it matters”, the page draws a globe on an HTML canvas: the land as a field of dots, with payment arcs across it. The heading states the idea and the globe draws it, in 3D, live in the browser rather than as a static image.

The section 'Coverage where it matters' on www.zyp.co: a pale globe with its land drawn as a field of dots
“Coverage where it matters”, and the globe under it.

Tests

The tests that hold it together

Motion breaks quietly: a sequence that stops short, or a control the keyboard cannot reach, throws no error anyone sees. The site has end-to-end tests in Playwright, which loads it in a real browser, and axe, which checks what renders for accessibility problems. They are what let the motion change without breaking the page.

The Team section of www.zyp.co: a dark product window with playback controls under it, beside the heading 'Team' and a list of what it does
The Team section, with its product window.

What I learned

People come to a company's public site for the product, not for the effects. Motion there has to carry the message and then step aside, so the interesting decisions were about what moves, how far and when, more than how. End-to-end tests are what make it safe to keep revisiting them.

See it live (opens in a new tab)