---
name: query-panels
description: Animate one query into two to four image-rich result panels with editable HTML, SVG, GSAP and HyperFrames.
version: 0.1.1
---

# Query Panels

Use this parameterized renderer to show how a single question leads to distinct result channels. It does not rank the channels or claim that illustrative results came from a live search.

Prepare a JSON brief with `phrase` (1–56 characters), `palette` (`harbor`, `plum`, `clay`, `ink`), `caption`, `fontFile`, `fontLicense`, and 2–4 `views`. Each view needs `heading` (up to 18 characters), `raster`, `alt`, and `rights`. Resolve media paths beside the brief. Provide a licensed TTF or WOFF2 with coverage for the actual text. Supply complete, readable result-page screenshots containing real photographic material when the subject calls for it; do not use placeholder lines, copied brand assets or unrelated screenshots.

Install with Node.js 22+: `npm install`. Create a fresh project with `node scripts/create.mjs brief.json new-project`. Run `npx hyperframes check new-project`, then `npx hyperframes render new-project --fps 30 --quality high --strict --output new-project/film.mp4`. FFmpeg and a supported Chrome installation are required by the rendering toolchain.

The project preserves local images, font license, editable HTML/SVG, and its paused GSAP timeline. The phrase appears in discrete units. Channel headings precede their own downward reveals; the assembled row settles before the final reading hold. Inspect the source images for crop losses before accepting output. Query text and headings remain editable; pixels inside supplied screenshots do not.

Inspect entry, every handoff and the final hold at native resolution. Validate forward and backward seeks, CJK coverage, image decoding, readable text, and the complete encoded film at normal speed. Audio is not generated by this package. If adding audio, retain the editable cue timeline and verify the final mixed file separately. Measured rendering and playback results belong in the accompanying release report; these instructions alone do not establish acceptance.