Hover a board tile to reveal its action buttons, click it, and scale the image up into a lightbox
Study the source, inspect the editable build, then adapt the treatment to your own content.
What the source does
An app window shows a left text column and a five-by-three image board. The pointer rests on one tile; at ~f10 two small round action buttons appear on the tile's top corners. At ~f30 the pointer clicks and the tile grows into a centred lightbox with prev/next arrows and an action bar beneath, the board fading behind it (~f30–f45). Around ~f80 the left column's text is replaced with a new paragraph while the lightbox stays.
Hover-disclosed tile actions, then a click that scales the tile into a lightbox overlay while the side column updates asynchronously.
Phase notes
- Frame 0 — Pointer resting on tile
- Frame 10 — Tile action buttons appear
- Frame 30 — Click: tile scales into lightbox
- Frame 45 — Lightbox settled
- Frame 80 — Left column text swaps
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.