ReadUse casesTeardownsPricingDocsMCPOpen the chatSign inRecipesWhat we never takeOpt out a siteChangelogStatusvorluno.dev
CASEHow the code is made
UPDATED21 / 09 / 2026
READSfree, 2 a day
SEARCHhow does mvoom work
USE CASE / 13

How mvoom turns a measurement into a component — and what it never takes

A generated component is only as good as the measurement behind it. This is the pipeline, pass by pass, and the two rules that shape everything: the numbers are measured, never guessed; and the content never leaves the page.

FIVE PASSES

Scout: the page is opened at 1440 pixels wide in a real browser and every moving element is found and named. Read: the animation engine is asked what is running — declared animations come back exact. Trigger: hover, click and viewport transitions are fired on the piece and measured. Scrub: scroll-linked effects are driven through their range and recorded. Sample: whatever the engine did not declare — JavaScript loops, springs, canvas — is sampled on a controlled clock and fitted.

Each recipe records where its numbers came from. Teardowns shows that as a single figure: how much of a piece was read straight from the engine.

THE SANITISER, BEFORE ANYTHING IS STORED

Text is destroyed and replaced by placeholders of the same length. Images, video and fonts are removed; their boxes, aspect ratios and object-fit stay, because a frame is design and a photo is content. Class names and ids are renamed so nothing carries the site's vocabulary. The origin URL is stored apart from the spec, tied to the quote, never inside the artifact.

A probe walks every output path with sixteen real pieces looking for a URL, a font, an embedded image or the site's name. The generated code is checked against the origin domain before it is delivered.

THE GENERATOR

One recipe per mechanism: elements that move the same way share it and carry their own delay, so a 186-card grid is one line and a list of delays. The component mounts recipes with the Web Animations API; scroll-linked ones with a scroll listener; viewport-triggered ones with an IntersectionObserver. Measured colours, type sizes, spacing and radii are written as CSS custom properties in a tokens file. Media holes are filled with an SVG in the page's own palette so the piece can be judged moving; you replace them with your images.

HOW IT GOES, STEP BY STEP
  1. 01
    Read

    Free: the recipe and the brief.

  2. 02
    Judge

    The piece runs live on the measured numbers, next to the recipe, before you pay anything.

  3. 03
    Buy

    1,200–12,000 credits by mechanisms, curves, groups and reach. If generation fails, the credits come back on their own.

WHAT YOU GET
  • Component.tsx, .recipes.ts, .motion.ts, .tokens.css, .preview.html, README, LICENSE
  • No dependencies: React and the browser
  • Free recompiles for 90 days
QUESTIONS PEOPLE ASK

Why is the price a range?

The price is computed from what the piece does: distinct mechanisms, unique curves, coordinated groups, how many elements move, and whether it needs the GPU. Between 1,200 and 12,000 credits per piece (100 credits are one dollar), always shown before you pay.

What if the generated component does not match?

If generation fails you are refunded automatically. Within 90 days a recompile is free, and a piece you bought can be measured against the reference with mvoom diff.

RELATED
NEXT

Reading is free and needs no account. Everything above is what runs today — nothing here is a roadmap.

WHAT WE NEVER TAKE →