Animations
← yank.designHow it works

How yank works

Ten animations covering the techniques that turn an arbitrary URL into a readable, editable Next.js codebase.

⌖
01 · /a/capture

Capture

Puppeteer mirrors every byte the page loads.

Open animation
◎
02 · /a/detect

Detect

Fingerprint the bundle. Identify every library.

Open animation
⌗
03 · /a/cls-map

Hash Map

Cryptic class hashes resolved to semantic names.

Open animation
{ }
04 · /a/decompile

Decompile

Minified bundle becomes authored TSX.

Open animation
⤳
05 · /a/render-to-match

Render to Match

Captured DOM with React refs wired in.

Open animation
↔
06 · /a/runtime-mirror

Runtime Mirror

Route handler proxies the original CDN.

Open animation
◐
07 · /a/shaders

Shader Extractor

GLSL lifted from bundles, compiled live.

Open animation
✦
08 · /a/fingerprint

Package Fingerprint

webpack moduleIds resolved to npm packages.

Open animation
⎇
09 · /a/fiber-walk

Fiber Walk

Framer fiber tree walked and identified.

Open animation
▸
10 · /a/pipeline

Pipeline

Mirror, analyze, reconstruct, verify.

Open animation
⌥
11 · /a/framer-schema

Framer Schema

Walk window.__framer.runtime.fiber → SchemaJSON.

Open animation
◈
12 · /a/style-tokens

Style Tokens

Hashed --token-1ujxwsf-bg → --accent-blue.

Open animation
⊞
13 · /a/breakpoints

Breakpoints

Reverse-engineer responsive variants from media queries.

Open animation
⌬
14 · /a/code-components

Code Components

__framer_codeComponent:true → /components/code/*.tsx.

Open animation
⇌
15 · /a/layout-graph

Magic Motion

Preserve layoutIds so page-to-page animations survive.

Open animation
◊
16 · /a/source-maps

Source Maps

Bundle .js.map → original .tsx files, exact lines.

Open animation
⊕
17 · /a/asset-dedup

Asset Dedup

SHA-256 dedup: 4 references → 1 file. 75% saved.

Open animation
Aa
18 · /a/fonts

Fonts

Captured .woff2 → next/font/local. Zero CLS.

Open animation
▣
19 · /a/images

Images

Raw <img> → next/image with sizes, blur, AVIF.

Open animation
↳
20 · /a/routes

Routes

URL crawl → app/ router tree with [slug] inferred.

Open animation
⊟
21 · /a/chunks

Code Splitting

Webpack chunks → real import() boundaries.

Open animation
$
22 · /a/css-in-js

CSS-in-JS

styled-components hashes → readable styled defs.

Open animation
◇
23 · /a/svg-icons

SVG Icons

Inline SVGs deduped into a typed icon library.

Open animation
#
24 · /a/meta-seo

Meta + SEO

<head> tags + JSON-LD → typed Metadata export.

Open animation
≣
25 · /a/tailwind-config

Tailwind Config

Arbitrary [17px] → theme.extend tokens.

Open animation
⏵
26 · /a/animation-graph

GSAP Recovery

Imperative .to()/.from() → authored timelines.

Open animation
yank.design — turn any URL into editable code