Skip to content
id0
Interface Collection
Developer card

All works Concept

Kadr

Motion design school on an editing timeline

Scrub a title built from keyframes, compare three courses week by week, try easing curves, calculate payment in parts, and apply for a cohort.

Next.js · React · TypeScript

Kadr: first screen on a desktop
Kadr: first screen on a phone

Design problem

Before paying for a motion course, a visitor needs to judge how it is taught. A list of topics says little about timing and curves, so the site lets them try both.

Down the page

Kadr on a desktop, further down the page, frame 1Kadr on a desktop, further down the page, frame 2Kadr on a desktop, further down the page, frame 3Kadr on a desktop, further down the page, frame 4
Kadr on a phone, further down the page, frame 1Kadr on a phone, further down the page, frame 2Kadr on a phone, further down the page, frame 3

Main user flow

  1. Scrub the title

    Drag the playhead to run the opening title back and forth; the letters change width and weight at each keyframe.

  2. Compare the courses

    Three tracks show each course's length in weeks, and the programme lists what each week teaches and what to hand in.

  3. Try a curve and apply

    Shape an easing curve, render a title card with it, check the monthly payment, and fill in the application with the course already chosen.

Next work Vatt Energy management for office buildings