An Editorial Website Redesign Gallery
A silent 95-second browser trailer moves from one polished personal site through many design iterations, then compares desktop and mobile treatments.
Starter prompt / by Refs
The creator shared no short prompt. This is ours for making a film like it with Claude.
Explore redesigns of my personal site {SITE_URL} in several distinct directions, critiquing and refining each round until the tone feels {DESIRED_TONE}. Then build a trailer that lives inside the final site: a 90-second looping in-browser sequence that flips through every iteration, pushes in on details like type, portrait frames and navigation, and labels each version with a short caption and smooth transitions. Give it play and fullscreen keyboard shortcuts, then record it with headless Chrome at 2560×1440 and encode with ffmpeg.Field notes / why it works
The finished homepage appears at 0:00, and a pullback around 0:05 reveals that it is one of many directions. Article and theme studies at 0:30–0:48, followed by desktop and mobile comparisons through 1:22, make the redesign process visible without narration. A portrait close-up after 1:22 visually returns to the opening frame.
Plate 01 / The format in one breath
A quiet, editorial website showcase opens on one polished homepage, pulls back to reveal many design directions, visits a few in detail, compares desktop and mobile, then returns to the opening identity. The post supplies the premise that an AI coding model explored and critiqued multiple redesigns; the video supplies visual proof of the range.
Why it works
- The finished page is visible from 0:00, so the first frame is a result-first hook; the portrait, oversized serif name, and tiny UI labels make it immediately recognizable.
- At about 0:05, the camera pulls back into a grid of many drafts. One screen becomes a set of possibilities without requiring narration.
- Detail views around 0:31–0:46 and desktop/mobile comparisons around 0:48–1:20 turn a mood board into evidence of actual page states. The return to the original portrait at 1:22–1:32 closes the loop.
Plate 02 / Format card
| Platform · aspect · length | X · 16:9 · 95.5 s · source capture 1272×720 at 56.71 fps |
| Pace | One continuous screen recording; 0 confirmed cuts, three uncertain boundaries, 20 measured internal changes; about 12.6 picture changes/min. A conventional average shot length is unhelpful here: the sole shot lasts 95.47 s. |
| Script | No spoken script; a few site labels, post titles, version names, and editorial phrases carry the information. |
| Voice | None. |
| On screen | 100% animated/composited website UI: single-page hero, gallery wall, page details, variant comparisons, mobile previews, and portrait close-up. |
| Captions | No subtitles. Small UI labels and occasional design-name chips, set in tracked small caps. |
| Sound | No audio track, music, or effects. |
| Structure | 7 visual beats; first result at 0:00, range reveal at ~0:05, detailed proof at ~0:31, responsive proof at ~1:15, visual return at ~1:22. No in-video CTA. |
Pro / 13 plates + recipe
The first plates are open. The full dissection is Pro.
Get the timed shots, type and sound specs, and the runnable recipe.
Open the full blueprint- Plate 03 / The hook, frame by frame (first 3 seconds)Pro
- Plate 04 / Structure (beat sheet)Pro
- Plate 05 / Shot grammarPro
- Plate 06 / Visual style guidePro
- Plate 07 / Voice and deliveryPro
- Plate 08 / Sound designPro
- Plate 09 / PackagingPro
- Plate 10 / Script templatePro
- Plate 11 / Production planPro
- Plate 12 / PromptsPro
- Plate 13 / Edit recipePro
- Plate 14 / QA checklistPro
- Plate 15 / Make it yoursPro
- Recipe / runnable promptPro