Bucharest --:--:--

Software engineer & web developer · Romania

He builds websites, and the pipeline that studies how award-winning ones move: it records them frame by frame, measures every curve and builds new sites from the numbers.

See the work Live sites ↗

[ About ]

Web developmentfrom measured motion

Most animation on the web is guessed: a duration that felt right, an ease copied from a tutorial. George's pipeline measures it instead. It has analysed 88 award-winning sites and collected 644 easing curves from their recordings, and every site on this page was built from those numbers.

[01]

Crawl

It opens Awwwards Sites of the Day in a real browser, scrolls them, clicks through their pages and keeps the frames: 1,096 reference images so far.

[02]

Measure

Every transition is recorded frame by frame. Each moving element gets a timeline: property, from and to, delay, duration and a cubic-bezier fitted to the real motion.

[03]

Build

A builder studies one backbone site in depth, writes a design spec, then codes the site in Vite and plain JavaScript from the measured values.

[04]

Rate

A browser test checks every page at laptop and phone sizes, an independent critic scores it against the reference sites, and the next round fixes what it found.

How the pipeline works

The pipeline

Étienne-Jules Marey, 1882His chronophotographic gun took twelve exposures a second and laid them on one plate. George's crawler does the same to websites: its screencast samples a page every 50 to 100 milliseconds, and every picture on this site is drawn that way.

One effect, measured

01 / 04

01 · RecordedA route change on TRAME, a site from the pipeline: a 200vmax orange square swings in and covers the page.

02 · ExposedEvery frame on one plate. Where the square slows down, the exposures pile up; where it is fast, they spread apart.

03 · TracedThe square’s centre, followed through 24 frames a second. The gaps between the dots are the easing.

04 · FittedThe numbers TRAME was built with, measured on good-fella, the site it borrowed the square from.

Property
translate
rotate
From → to
−150vmax, 60vmax → 0
−89.6° → 0°
Delay · duration
39 · 885 ms
0 · 924 ms
cubic-bezier
.695, −.329, .175, .941
.685, .076, .15, 1.001

Selected sites · 13

Work

The pipeline first, then twelve of the sites it built. Each picture is that site's own page transition, exposed frame by frame with its measured curve.

  1. [00] design-crawler The pipeline that built every other site on this page. Page load, recorded
  2. [01] STILLE Radio Observatory A radio observatory's "Listening Nights", tuned like a receiver. CRT power off / on
  3. [02] ARDEI A fermented hot sauce, drawn as packaging. Crest grows into the curtain
  4. [03] VASCA A hand-marbling atelier in Oltrarno, Florence. Marbled sheet unveil
  5. [04] FIAMMA A Turin neon workshop that fills only pure neon. Split red curtain
  6. [05] TIERCE FOUNDRY A Stroud bell foundry shown like an architecture studio. Strickle-sweep curtain
  7. [06] DRUM Riso Press A Rotterdam risograph studio, printed pass by pass. Ink passes, stacked wipes
  8. [07] NADIR An Earth-observation company; the one colour is near-infrared crimson. 10 × 10 mosaic
  9. [08] ISOCHRONE A Besançon watchmaking atelier that makes one hand-finished calibre. Concentric-ring iris
  10. [09] ZUGZWANG Editions A Basel press that prints one historic chess game per book. Checkerboard closing
  11. [10] TRAME A Jacquard weaving studio in Lyon's Croix-Rousse. Rotating orange square
  12. [11] TACK & HALYARD A Leith loft that hand-sews the International Code of Signals. Flag-tile mosaic
  13. [12] LUSTRE A London cleaning company where blur is dirt and focus is clean. Squeegee pass

All of them, running

Every site here
is live

Loaders, curtains, pinned scenes and all, at cosh.go.ro:8443.

Open cosh.go.ro:8443 ↗