CreatorMotion · Quadrant Focus

Build a two-dimensional decision map, then frame the region you want to discuss. Axes appear before labeled points enter at their supplied coordinates; a dashed rectangle and caption arrive later without moving the points. This nine-second effect presents a chosen focus region, rather than calculating the best decision or classifying the points automatically.

What you get

  • A local generator, editable HyperFrames effect and motion/review instructions. Generate a 1920×1080 project and render a 30 fps map-to-focus segment.
  • Two axes labels, points with label/x/y, a focusRegion rectangle and focusLabel. Coordinates are intended to lie between -1 and 1; the rectangle uses [minimumX,minimumY,maximumX,maximumY].
  • Axes construction from 0.16 seconds, ordered point arrivals from 1.70 seconds and a masked boundary reveal at 4.80 seconds. The focus caption follows at 5.50 seconds while the full map remains visible.
  • Four palettes preserve geometry and timing: White & Yellow (white-yellow), Charcoal & Lime (charcoal-lime), Paper & Orange (paper-orange) and Black & White (midnight-ice). Semantic overrides need a contrast check; dark canvases keep a fine static grid. Bundled local fonts include Inter, IBM Plex Mono for measurements/ordinals, Smiley Sans and Noto Sans SC. Chinese content automatically uses Smiley Sans, including Latin words; --zh-font noto-sans-sc selects the plainer face and --font embeds your own. Inspect wrapping after changes.

Before you choose

Define the axes before placing a point. A precise-looking map can lend authority to subjective scores, so distinguish measured coordinates from illustrative judgements and explain why the framed region matters.

Good fit

  • A creator explaining a small set of options on two clearly defined dimensions.
  • A short teaching passage where a selected spatial region helps describe a decision criterion.
  • A series using consistent axis geometry, point labels and typography.

Not for

  • Automatically scoring options, choosing the focus region or verifying that the coordinates represent measured data.
  • Interpreting point color as region membership. The current code alternates point colors by array position independently of the rectangle.
  • Automatic full-film editing, generated presenter performances or music, or copying another creator’s identity and materials.

How to use

You say/creatormotion-comparison-quadrant-focus Turn my supplied explanation into a white-yellow B-roll scene using the Quadrant Focus effect. Use the text, data and media I provide, and ask for any required input that is missing.
  1. Prepare two axes labels and labeled points with x/y in the documented -1 to 1 range. Define what each dimension and its positive direction mean; the default Effort/Potential example is illustrative.

  2. Choose focusRegion and focusLabel deliberately. Verify that the rectangle encloses the intended points; it does not filter them or automatically alter their styles. Point colors alternate by input index, so explain membership through the boundary rather than treating accent color as a selected/not-selected code.

  3. Read the motion specification and keep the point set compact. Points reveal at fixed 0.55-second spacing before a fixed boundary cue, so a larger set may still be arriving when the region appears. No presenter, alpha matte or raster image is used.

  4. Prepare Node.js 22+, FFmpeg and the documented HyperFrames CLI 0.8.30. Run node scripts/create.mjs --out PROJECT --data CONTENT.json with your chosen --style from the extracted package, adding semantic --overrides if needed. Read the motion specification and image policy before adapting materials.

  5. Lint, validate and inspect the generated HyperFrames project, then render at 1920×1080 and 30 fps using the pinned CLI. Review actual MP4 frames at entry, each change and final hold for bounds, contrast and correct labels. Preserve at least 1.2 seconds of final reading time when editing and check all palettes with identical content after module changes. Narration, music and film assembly remain separate work. Inspect label collisions, axis clarity, rectangle bounds and the final caption. The horizontal and vertical pixel scales differ, so use the map to explain independent dimensions rather than reading Euclidean distance as an extra metric.

Requirements and costs

You bring
axes: provide your own content or retain the illustrative default. · points: provide your own content or retain the illustrative default. · focusRegion: provide your own content or retain the illustrative default. · focusLabel: provide your own content or retain the illustrative default.
Dependencies
HyperFrames CLI 0.8.30 or compatible — required · Node.js 22 or newer — required · FFmpeg — required
Outside costs
Not collected yet
Tools used
HyperFrames
Publisher testing
v1.0.1 — Claude Code / Claude Desktop / Cowork / Codex / ChatGPT

FAQ

User reviews

—0 reviews

Select a star to share your experience.

No reviews yet. Ratings appear once readers share real experiences.

Similar Skills

View all skills