---
name: polygon-bridge
description: Create a 6.8-second photo-to-title-to-photo edit using complementary diagonal polygon shutters, editable HTML/CSS and GSAP, rendered with HyperFrames.
version: 1.0.2
category: video
delivery: download-only
---

# Polygon Bridge

Use for a clear before → editorial bridge → after transition. This is a parameterized renderer, not arbitrary prompt-to-film generation. Choose meaningful images that communicate a state change; do not claim unrelated stock images document a real transformation.

Read [direction](references/direction.md), [input contract](references/input.md) and [licenses](references/runtime.md). Require two local licensed raster images. There are no themed defaults in this package. Never replace a photo with a CSS placeholder. If an appropriate image is missing, disclose the gap; paid generation requires authorization.

1. Author a JSON brief using the input reference. Keep images beside it or use absolute local paths.
2. Run `node scripts/build.mjs /absolute/brief.json /absolute/new-project` from this Skill. The output directory must be new.
3. Install the pinned renderer with `npm install` in this Skill (Node 22+, Chrome, FFmpeg required).
4. Run `npx --no-install hyperframes check /absolute/new-project` and `npx --no-install hyperframes render /absolute/new-project --fps 30 --quality high --strict --workers 1 --output /absolute/film.mp4`.
5. Inspect native frames densely around 0.94–1.54 and 3.94–4.56 seconds, then play the encoded video at 1×. Check crops, typography, contrast and reverse seeking. Extract a poster from the actual encoded film.

Preserve the 1920×1080, 30fps, 6.8-second timeline. Two opaque complementary triangles enter from opposite corners, switch content only under full cover at 1.22 and 4.22 seconds, then exit. Keep the centered condensed uppercase stamp and unboxed ordinal. Final reading hold is intentional. No arbitrary zooms, jiggle or ambient movement. Exports are deliberately silent. An audio extension needs a real licensed track and separate validation.

Generated projects contain local images, local fonts, GSAP, editable HTML, brief and build hashes. To revise content, edit the brief and build into a fresh folder; to author a new composition beyond the two layouts, edit HTML/CSS/GSAP and revalidate. Keep demo media outside the reusable Skill ZIP.

Human CLI diagnostics default to English. Add `--lang zh-CN` (`zh` is an alias) for Chinese diagnostics; unsupported locales use English. JSON keys, tool flags and paths remain stable.