Fade a theme pill into the corner, then hard-swap the page field from black to navy
Study the source, inspect the editable build, then adapt the treatment to your own content.
What the source does
A browser window on a light grey desktop shows a coding assistant with a white sidebar and a black page: a three-line 80px serif-style headline with the last word in green, an italic subline and a row of small green tags; a rounded webcam inset overlaps the bottom-right corner. At ~f12 a small white pill with a blue dot and 'change to light mode' fades in at the top-right of the page. At ~f15 the whole page field switches from black to deep navy in a single frame; the type stays white. Everything holds to the end.
Control appears first, then the state change: a soft pill fade-in followed by a one-frame background colour swap with the typography untouched.
Phase notes
- Frame 0 — Black page holds
- Frame 12 — Theme pill fades in top-right
- Frame 15 — Page field hard-swaps to navy
- Frame 59 — Hold
Use this example
- Watch the source and draft at normal speed. Compare the order of actions, the held states, and the transition into the result.
- Download the project and read its README before changing inputs. The package includes its implementation and declared dependencies.
- Replace the sample content through the package's documented input or content builder. Keep source footage in the research comparison.
- Render your adaptation and inspect text fit, framing, intermediate states, and entry and exit frames.
The source and remake are different assets. The original code-based illustration remains editable; source footage is a research reference. Read the retained findings below before using the choreography.
Recorded limits
- Visual fidelity is an authored draft judgement from sampled source frames; no independent blind review or native Resolve execution.