A beautiful reference.A design to understand.

Organize sites and investigate their visual language.

Reads reference sites' design and measures their motion.

Desktop appDesign researchPersonal

Tauri 2
React 19
Node.js
Playwright

Reference
galleriesStack and
brandingOrganized
research

A beautiful reference.A design to understand.

Organize sites and investigate their visual language.

Tauri 2
React 19
Node.js
Playwright

Reads reference sites' design and measures their motion.

Desktop appDesign researchPersonal

Tauri 2
React 19
Node.js
Playwright

PortfolioMotor Design

The recording

A screenshot doesn't show how a page moves.

Part of a site's animations runs through a path the browser doesn't list, springs, mainly. So the engine reads each piece's position every frame and measures what it saw: how long it lasted, whether it overshot and which curve it is. Record one of the three curves: the measurement below happens right now, on this page, with the same rule.

Live measurement

Pick a curve: the piece moves and the trace appears while it travels.

What the project's test recorded

InputThe engine measured
Spring, 600 ms600 ms · 15.1% overshoot
Linear, 300 ms300 ms · high confidence
Cubic ease-out, 400 ms367 ms · about 8% short

The ease-out comes out short on purpose: it reaches 99.9% of the way at 90% of the time, and the engine measures when the motion stops, not the number someone typed. The reading has one frame of uncertainty (16.7 ms).

The passes

Each site, read layer by layer.

For each address in the queue, the engine opens the page and goes over it several times, each time looking for one thing. Pick a pass to see what it reads and the format its result takes in the report.

Structure
Colour and type
Motion

The nine passes

What it readsWhat the page was built with: Framer, GSAP and ScrollTrigger, Lenis, Motion, Three.js, WebGL, Lottie and the tag of whatever generated the site.

Report excerpt (example values)

{"tipo":"stack","dados":{"framer":true,"gsap":false,
 "scrollTrigger":false,"lenis":true,"motion":true,
 "three":false,"webgl":false,"lottie":false,
 "generator":"Framer"}}

Each site produces a folder with the readable report, the full data, a full-page picture and the design tokens file. The excerpts above show the format; the values are examples.

Project scene: the letters Aa in glass, a five-colour palette and the program open on a monitor

Colour. Type. Motion. Every detail counts.

A reading of stack, branding and interactions.

StackBrandingAnimations and interactions

The identity pass counts every colour, typeface and corner on the page, and the engine writes the result to a tokens file in the open format design tools read. Below, the same reading done right now, on this page.

This page's colours, by use

Reading the page…

The type

The corners

design-tokens.json

The engine doesn't invent roles for the colours ("primary", "accent"): the name is the ranking position and the colour code, because assigning a role would be a guess.

The cursor

Four stops to find the effect.

Cards that move with the mouse don't show up standing still. The probe takes the cursor to the centre, the left, the right and the left again, and compares: did it move between left and right and come back the same? It follows the cursor. Did it move but not come back the same? It moves on its own. Tap or hover over the stage, then run the probe.

Centre
Left
Right
Left again

What the probe concluded

The background lightsWaiting for the probe.
The cardWaiting for the probe.
The ringWaiting for the probe.
The text linesWaiting for the probe.

The maths and thresholds are the project code's (minimum reaction of 1.5 px or 0.4°; the second left must repeat within half of that). Running here, it measures this stage's layers.

Project scene: the settings panel on a monitor, with a 1440 by 900 ruler and a glass pause button

Set up the analysis. Follow every step.

Viewport, hover and scroll settings, with a step-by-step mode.

Configurable viewportHover and scrollStep-by-step mode

The panel builds the configuration, calls the engine and reads what it writes, one line per event. With step mode on, the queue stops at each loaded site and waits for a Continue. Run the example queue.

The settings

Window size: 1440 × 900
Scroll stops: 8
Hover targets: 12
Wait between sites: 3 – 8 s

Step-by-step mode (stops before each site)

What the engine writes · what the panel shows

The engine hasn't said anything yet.

The screens

The lines follow the project's event contract (a test fails if the engine and the panel disagree). The wait between sites is deliberate and shouldn't be set to zero; the queue's sites are example addresses.

The technologies

What it is made of, piece by piece

A desktop panel that drives an engine: the screen is React 19 inside Tauri 2, Rust starts the engine process and relays every line it writes, and the Node.js engine opens the pages in a real browser (Playwright) to measure what they do. Pick a piece to see what it does here and which file it is in.

11technologies, in 3 layers

Panel

Window

Engine

1Re19.2

Layer: Panel

React 19.2

The site queue, the settings, the coloured log and the Continue and Abort buttons.

Where it is in the code

src/App.tsx

Layer: Panel

TypeScript 5.9

The event contract between the engine and the panel, checked by a test.

Where it is in the code

engine/eventos.d.ts

Layer: Panel

Vite 6.4

Builds the screen and serves it during development.

Where it is in the code

vite.config.ts

Layer: Panel

lucide-react 0.468

The icons for each pass and the buttons.

Where it is in the code

src/App.tsx

Layer: Window

Tauri 2.11

Starts the engine, relays the lines, sends Continue and stops everything on request.

Where it is in the code

src-tauri/src/lib.rs

Layer: Window

Rust 2021

The window's 10 commands: run, stop, open the folder, install the browser.

Where it is in the code

src-tauri/src/lib.rs

Layer: Window

Diálogo e área de transferência plugins 2

Choosing the engine and the output folder; copying the configuration.

Where it is in the code

src/App.tsx

Layer: Engine

Node.js 18+

The queue, step mode and one line per event on the output.

Where it is in the code

engine/run.mjs

Layer: Engine

Playwright 1.61

Opens each page in a real browser, hovers, scrolls and reads what moves.

Where it is in the code

engine/extrator.mjs

Layer: Engine

Babel 7.29

Reads the pages' code as a tree, without guessing from text.

Where it is in the code

engine/conversor-n1.mjs

Layer: Engine

Prettier 3.9

Makes readable the code that arrives on a single line.

Where it is in the code

engine/reconstrutor.mjs

Next project45 / 51

Creative and developer toolsModuleForgeA desktop app that catalogs modules extracted from React/Next.js projects (files, Prisma models and instructions) and generates ready-to-reuse packagesElectron 33AdmZipElectron BuilderReact 18

← PreviousEncoding Checker

Home