Cómo FlatMotion captura la verdadera dirección artística de una marca desde una sola URL

FlatMotion's signature feature is a promise: paste your URL, and the video that comes out looks like your brand, not like a template wearing your logo. That only works if the system truly sees the site: the real accent color, the real fonts, the real product. Here is how the extraction pipeline works, and the traps I fell into building it.

One URL in, a brand kit out

The site is rendered in a headless browser, because most modern sites paint their identity with JavaScript: logos in background images, colors in computed styles. From that render we pull candidate signals: a color palette, font stacks with their roles, the logo, full page screenshots, headings and copy. An LLM pass then distills the copy into a value proposition and three real features. The result is a frozen BrandKit object, the contract the video engine consumes.

Colors: the API lies, pixels do not

First trap: the branding data a scraping API returns is a guess. On one test site the API's top color was a red that appears in a config payload and almost nowhere on screen, while the real accent, the green of every button, ranked low.

The fix is ground truth: we sample the pixels of the stored full page screenshot and re-rank every candidate by how much of the screen it actually covers. Colors that exist in theory but not on screen get halved. Dominant colors the API missed get adopted. The site's own CSS votes too: a custom property named --primary or --brand is the strongest signal there is.

Fonts: trust the CSS, not the payload

Fonts get cross checked against the font families actually declared in the site's stylesheets. A font that shows up in the API payload but nowhere in the CSS loses. We also keep a stoplist of library noise: one site kept reporting KaTeX, the math typesetting font, as its brand typeface because a formula widget loaded it. The stoplist killed it and the real font surfaced.

Logos: never invisible

Logos are the messiest signal. The pipeline has seven fallback strategies, from decoding SVG data URIs to retrying favicon services when a firewall blocks the scrape. The nastiest bug: white logos. A white SVG wordmark on a white video card is technically present and completely invisible.

So the extractor measures the logo's luminance at store time, and the engine forces contrast per surface: a white logo turns ink on a white card, a dark logo inverts on a dark scene. The rule is absolute: never an invisible logo in a client video.

The anti invention guard

The LLM writing the video copy has one strict constraint: it is not allowed to invent. Every badge and button label must be a literal substring of the scraped corpus, and the headline must cover the site's own words, or the scene dies.

What it adds up to

Run the same engine on three very different sites and you get three videos in three intact brand worlds: a light SaaS with a green glow, a pitch black dev tool with lime accents, a playful consumer brand. Same rhythm, same cuts, three identities. That is the whole product thesis in one test.

• Still open: capturing real button labels at extraction time (a legitimate "Get started" currently dies with the guard), and smarter screenshot anchors for the product scenes.
• Next up: the motion brick quality sprint. The scraper sees the brand, now the video has to deserve it.