Reconstruct the emblemo portfolio shell from frozen video evidence

emblemo-portfolio · frozen-evidence · medium · pilot · VIDEO · captured 2026-08-18 · research-only

research-only. The reference captures on this page are derived from third-party media held under a research boundary. They are published so results can be checked, and must not be redistributed or reused as source assets.

Findings

Every recorded attempt. Pin two to four runs to compare captures checkpoint by checkpoint.

Filtermodelruntimestatus3 / 3

Date	Agent	Variant	Status	Trust	Visual	Func.	Overall	Time	Cost
2026-08-18	claude_code/sonnet · high	prompt=baseline matrix	running	dev / untrusted	—	—	—	—	—
2026-08-18	codex/gpt-5.6-sol · high	prompt=baseline matrix	running	dev / untrusted	—	—	—	—	—
2026-08-18	codex/gpt-5.6-sol · high	prompt=baseline pilot	completed	dev / untrusted	86.6	90.9	85.7	8m 27s	—

Provenance

How the case was traced from a discovery link to an authoritative ground truth.

012026-08-18discovery inspora.design
022026-08-18original-post x.com
032026-08-18video-mirror media.inspora.design
042026-08-18live-version-comparison emblemo.space
052026-08-18reference-capture

Ground truthVIDEO

The creator's 17.6-second post video is the only observable record of the demonstrated portfolio. The design shown was a work in progress built in Claude; it is not deployed at the creator's current site or GitHub, so the video is the primary visual and behavioral ground truth and the current live site is only version-comparison context.

Captured: 2026-08-18
Rights: research-only

Discoveryinspora.design
Original postx.com

Post vs live

The current https://emblemo.space/ is a single-screen Framer page with different layout, copy, and branding; it does not contain the demonstrated MENU drawer, dark playground overlay, or 'Product design & Illustration' hero.
The recording is a zoomed, panning crop: the right ends of the three hero paragraphs, all mobile behavior, and the interior content of Works/About/Contact/playground cards are never shown.

Frozen evidence (4)

evidence capture: reconstruction-home-dark — **E01** reconstruction-home-dark

evidence capture: reconstruction-home — **E02** reconstruction-home

evidence capture: reconstruction-menu-open — **E03** reconstruction-menu-open

evidence capture: reconstruction-playground — **E04** reconstruction-playground

Evaluation matrix

Deterministic. No vision-model judge.

Score composition

Install and build are gates, not weighted components — a failed build scores zero. Raw visual similarity at or below the case floor of 0.16 earns no credit; the remainder is linearly normalized, then weighted 75% visual / 25% functional.

normalized_visual = max(0, (visual - 0.16) / 0.84)
overall = 0.75 * normalized_visual + 0.25 * functional

Visual checkpoints (4)

reference capture for home — Fig. 01home1440×900 · / · full page · motion reduce

reference capture for playground — Fig. 02playground1440×900 · /playground · full page · motion reduce

reference capture for home-menu-open — Fig. 03home-menu-openstate · click · on home · viewport

reference capture for playground-close — Fig. 04playground-closestate · click · on playground · viewport

Deterministic checks (4, total weight 5.0)

Check	Kind	Target	Weight
home-heading	text	home	1.0
menu-expands	attribute_after_click	home	1.5
playground-breadcrumb	text	playground	1.0
playground-close-returns-home	click_text_change	playground	1.5

Check selectors and thresholds are sealed. Only the identifier, kind, target and weight are published.

Reproduce

Everything a candidate sees is public. The oracle references, grader code and thresholds are not.

skills injected design-case-implementer

1 · Get the workspace

npx degit dairui1/reconbench/cases/emblemo-portfolio/task emblemo-portfolio-task

Pulls only cases/emblemo-portfolio/task/ — the public brief, permitted evidence and the starter codebase.

2 · Copy the prompt

Runtime-agnostic. Paste into any coding agent. Skill files are referenced conditionally so the prompt still makes sense without them.

Use the ReconBench candidate skills `design-case-implementer` in that order. Read those skill files if your workspace provides them, and otherwise follow the same process with your own tools.

You are the candidate in ReconBench task `emblemo-portfolio` (Reconstruct the emblemo portfolio shell from frozen video evidence).

Read `task/brief.md` and every other file under `task/` before changing code.
Implement the result only under `submission/`. The starter may be replaced when the task allows it.
Do not inspect parent directories, benchmark harness files, grader code, reference images, or any oracle material.
Do not call write endpoints belonging to a reference site. Keep forms, counters, and similar behavior local.

Before finishing:
1. Run the requested build command.
2. Start the app and check every target viewport in the task.
3. Exercise the required interactions and inspect browser console errors.
4. Write `submission/submission.json` using the contract in the implementer skill.

The harness will evaluate the filesystem after this process exits. Do not leave a dev server running.

As rendered by the harness for the Codex CLI, including injected skill references.

Use $design-case-implementer.

You are the candidate in ReconBench task `emblemo-portfolio` (Reconstruct the emblemo portfolio shell from frozen video evidence).

Read `task/brief.md` and every other file under `task/` before changing code.
Implement the result only under `submission/`. The starter may be replaced when the task allows it.
Do not inspect parent directories, benchmark harness files, grader code, reference images, or any oracle material.
Do not call write endpoints belonging to a reference site. Keep forms, counters, and similar behavior local.

Before finishing:
1. Run the requested build command.
2. Start the app and check every target viewport in the task.
3. Exercise the required interactions and inspect browser console errors.
4. Write `submission/submission.json` using the contract in the implementer skill.

The harness will evaluate the filesystem after this process exits. Do not leave a dev server running.

As rendered by the harness for Claude Code, including injected skill references.

/design-case-implementer

You are the candidate in ReconBench task `emblemo-portfolio` (Reconstruct the emblemo portfolio shell from frozen video evidence).

Read `task/brief.md` and every other file under `task/` before changing code.
Implement the result only under `submission/`. The starter may be replaced when the task allows it.
Do not inspect parent directories, benchmark harness files, grader code, reference images, or any oracle material.
Do not call write endpoints belonging to a reference site. Keep forms, counters, and similar behavior local.

Before finishing:
1. Run the requested build command.
2. Start the app and check every target viewport in the task.
3. Exercise the required interactions and inspect browser console errors.
4. Write `submission/submission.json` using the contract in the implementer skill.

The harness will evaluate the filesystem after this process exits. Do not leave a dev server running.

3 · Launch

ReconBench harnessReproduces a graded run end to end. The native backend is development-only and untrusted.

uv run reconbench run \
  --task emblemo-portfolio \
  --agent cc/sonnet \
  --evaluate \
  --allow-untrusted-native

uv run reconbench run \
  --task emblemo-portfolio \
  --agent codex/gpt-5.6-sol \
  --evaluate \
  --allow-untrusted-native

Codex CLI (manual)No grading. You get the same workspace the harness would hand a candidate.

cd emblemo-portfolio-task
codex --model gpt-5.6-sol
# then paste the "Codex" prompt above

Claude Code (manual)No grading. Project skills are discovered from ./skills if you copy them in.

cd emblemo-portfolio-task
claude --model sonnet
# then paste the "Claude Code" prompt above

Launch snippets are composed by this site from the case id and the agent selectors present in the bundle. They are a convenience, not a graded contract.

Appendix ATask brief — exactly what the candidate agent receives

emblemo portfolio shell reconstruction

Build a high-fidelity, functional reconstruction in the existing Vite/React starter under submission/. This is a frozen-evidence task: the files in task/ are the complete permitted reference set. Do not browse or fetch the original social post, the discovery entry, or any live site.

Frozen evidence

Read source-report.json and source-notes.md for the curator's source chain, ground-truth selection, version comparison, and rights boundary.
evidence/reconstruction-home.jpg — light home at 1440x900 (full view).
evidence/reconstruction-menu-open.jpg — the blue menu drawer open over the light home, viewport crop at 1440x900.
evidence/reconstruction-playground.jpg — the dark /playground view, full document height at 1440 wide.
evidence/reconstruction-home-dark.jpg — the dark home theme (see "Ungraded observed behavior").
evidence/acceptance.md and evidence/case.json — the observed layout, behavior, and interaction contract, including which details are observed versus curator-supplied.
evidence/research-log.md — the public, auditable authoring rationale.

What to build

A two-view desktop portfolio shell at 1440x900:

Home (/, light). Grid-paper background; an edge-mounted vertical MENU tab button on the left; a smiley-face logo mark plus the emblemo wordmark at the top left; a right-of-center text column with the h1 and three paragraphs.
Menu drawer. Clicking the MENU tab slides a blue drawer in from the left and pushes the page content to the right. The drawer holds a white two-icon pill at the top left, a vertical tick strip, and the items Home, Works, Playground, About, Contact. The item for the current view is visually de-emphasized. Playground navigates to /playground; Home navigates to /; the other three items are inert (their destinations were never observed).
Playground (/playground, dark). A dark theme of the same shell with a breadcrumb header ☺ emblemo / Playground ✕ and a card grid: About (tags BIO, DESIGN), Works (PORTFOLIO, CASE STUDIES), Playgrounds (SVG, INTERACTIONS), My skills (TOOLS, STACK) in one row, and Contact (no tag row) starting a second row. Card titles sit top-left and tag rows bottom-right. The ✕ control returns to /.

Required copy

Use this copy verbatim. The heading and all fragments up to each paragraph's visible cut are observed; the remainder of each paragraph is curator-supplied fixture text (see acceptance.md), so identical copy keeps grading fair.

h1: Product design & Illustration
Paragraph 1: Hey, I'm Paweł. I've spent 15+ years making interfaces and illustrations. Started with illustration, moved to UI, now I'm deep in motion and interactions.
Paragraph 2: Drawing is where I started. Still do it. That eye for shape and detail shows up in every screen. Check Behance or Dribbble. (Behance and Dribbble render as links; keep them inert.)
Paragraph 3: AI lets me experiment like never before. Now I'm exploring what happens when art meets code.

Observable requirements

The menu control is a button whose accessible name contains menu; it carries aria-expanded reflecting the drawer state and toggles it on click.
The playground close control is a button whose accessible name contains close; clicking it returns to the home view.
Inside main on /playground, the Playground breadcrumb element carries aria-current="page".
/playground must render directly when loaded as a fresh URL, not only via the menu.
Use semantic HTML; the drawer is a nav; each view renders inside main.
Drawer and page-push use a short slide transition; honor prefers-reduced-motion by disabling transitions.
No horizontal scrolling at 1440x900 in either view.

Ungraded observed behavior

The source recording also shows the pill's first icon switching the home view to a dark theme (reconstruction-home-dark.jpg). Implementing it is part of a faithful reconstruction but is not graded; the second pill icon is decorative.

Safety and rights

Never call any external network endpoint; keep every interaction local.
Recreate the smiley mark and all graphics as original code or inline SVG. Do not embed third-party media, fonts, credentials, or analytics.
The demonstrated design and copy remain the creator's property; this reconstruction is research-only.
Use the platform font stack "Inter", "Helvetica Neue", system-ui, -apple-system, "Segoe UI", sans-serif without downloading font binaries.

Completion contract

npm run build must succeed. The app must start with:

npm run dev -- --host 127.0.0.1 --port 4173

Before finishing, write submission/submission.json with the start command, build command, implemented routes, evidence paths, known deviations, and whether any research-only assets are present. The supplied source report and notes are curator-owned inputs; do not reproduce them as submission outputs. The result must remain a real webpage: do not submit a screenshot, canvas capture, iframe, or mirrored copy of any original page.