Kinetic

Websites with a pulse.

Kinetic is a small studio that designs and codes motion for the web. Scroll. Everything on this page is live code.

What we do

Three kinds of work. The same people from the first sketch to the last commit.

Site animations

Scroll reveals, page transitions, hover states and loaders, added to the site you already have. We work inside your codebase or hand back a small component library with every timing documented.

From 1,500 USD. About two weeks.

Interactive experiences

WebGL scenes, 3D product views and shader effects, with a performance budget set before the first effect is drawn. We test on a four-year-old phone, not only on a studio laptop.

From 3,000 USD. Three to four weeks.

Launch pages

Pages where the motion explains the product: a feature moves as you read about it. We design and write them with you, then build, measure and ship.

From 2,500 USD. Three weeks.

Selected work

Three launches from the past year.

Halden

Launch page for a desktop speaker

The scroll pulls the speaker apart layer by layer, then puts it back together on the order button. Twelve sections, one continuous timeline.

  • 2.1 sto interactive on a 4G connection
  • 38%more demo requests in the first month

Brindle

Marketing site for a budgeting app

Charts that draw themselves as you read, built from the same component library the product team ships. No screenshots, so the site never goes out of date.

  • 60 fpson a 2021 mid-range Android
  • 0 kBof video. Every chart is code

Orbit

Configurator for an electric bike

Pick a frame, a battery and a color and the bike rebuilds itself in the browser. No page reload, no 3D renders to download.

  • 1.4 MBtotal page weight, fonts included
  • 11 minmedian time spent configuring

Motion graphics, cut in code

Product tours and launch films, written as React components and rendered to video. Change a line of copy, render again, done. This one is 24 seconds, 1080p, no sound.

Kinetic product tour, 24 s. The captures of this page, the type and the transitions all come from code.

We measure the boring things too.

41

sites shipped since 2019

60fps

on a 2021 mid-range Android, on every launch

1.4s

median time to interactive across last year's launches

How a project runs

Four steps, all in writing. A shared document and a preview link replace the meetings.

  1. Step 1 of 4

    Brief

    You send what you have: a Figma file, a live site or a paragraph. We reply within a day with questions, a scope, a price and a date.

  2. Step 2 of 4

    Motion prototype

    A rough but real build of the key moments, in the browser, inside the first week. You scroll it on your own phone before we polish anything.

  3. Step 3 of 4

    Build

    Clean components in your framework, a performance budget checked on every commit, and a preview link that updates as we go.

  4. Step 4 of 4

    Handover

    Documented code, a short screen recording that shows how to change timings and copy, and two weeks of fixes included.

Tell us about the project

A paragraph is enough. You'll get questions, a scope and a price within one business day.