Skip to content

feat(registry): effect-grid — compare color grades and media effects in one shot - #6020

Open
r0ckerboy wants to merge 5 commits into
heygen-com:mainfrom
r0ckerboy:feat/registry-effect-grid
Open

r0ckerboy wants to merge 5 commits into
heygen-com:mainfrom
r0ckerboy:feat/registry-effect-grid

Conversation

@r0ckerboy

Copy link
Copy Markdown

effect-grid — side-by-side grid of one frame under several grades

A block that shows one frame under multiple color grades and media effects, each cell graded independently via data-color-grading. Useful for comparing looks in a single shot instead of re-rendering a project per candidate.

What it ships

  • 6 cells (3×2), each with its own name, strength value, and grade
  • Grading is per-cell: data-color-grading on each cell's <img>
  • Ships with a monochrome placeholder as a PNG data URI, so the grid renders and grades correctly out of the box — point src at your own frame to compare real looks
  • Accent marks exactly one cell (the first), per the placeholder-material rule

Notes for reviewers

  • The placeholder is a PNG data URI, not SVG: WebGL grading cannot load SVG (texImage2D: bad image data).
  • All element IDs use the eg- prefix; data-composition-id matches the timeline registry key.
  • No Math.random(), no Date.now(), one paused timeline.

Gates

  • hyperframes lint → 0 errors, 0 warnings
  • hyperframes check --no-contrast → 0 console errors
  • node scripts/lint-registry-items.mjs effect-grid → passed, 0 errors
  • npx oxfmt --check registry/blocks/effect-grid/ → correct format
  • registry/registry.json regenerated via scripts/generate-registry-items.ts (456 → 457 items)

Preview: attached MP4 + poster below (external contributor — catalog PNG to be uploaded by a maintainer).

Preview MP4: effect-grid-preview.mp4

@r0ckerboy

Copy link
Copy Markdown
Author

Preview MP4 and catalog poster for effect-grid (external contributor — catalog PNG to be uploaded by a maintainer).

@r0ckerboy

Copy link
Copy Markdown
Author

Preview MP4:

The block reads a frameSrc variable via getVariables() and declares it with
data-composition-variables in the composition. Blocks that expose variables
also list them in registry-item.json, so the variable is editable in Studio
and appears in the catalog payload. Without it the variable is only
reachable through data-variable-values on a hand-written host.

This branch has not been deployed

No deployments
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant