feat(registry): colorama-wipe - #4277
Merged
Merged
Conversation
…eal for headlines
A hyperframes:component recreating the After Effects "shiny wipe": masked text +
Compound Blur + Colorama over a moving gradient, with a crisp duplicate fading on top.
One call per text element:
attachColoramaWipe("#headline", tl, { at, in, hold, out, cycle, feather, tilt, blur })
adds a single linear clock tween to the host timeline and paints the effect on two
canvases over the element's box; the element is hidden (visibility) with its layout
kept. All sizes scale from the element's font size. Deterministic: hash noise keyed by
frame, no Math.random, no clocks; seeks outside the window paint an empty stage.
registry/registry.json, docs/docs.json and docs/public/catalog-index.json were
regenerated with the two generator scripts as the contributing guide asks; they also
pick up drift already present on main.
Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
|
Preview deployment for your docs. Learn more about Mintlify Previews.
💡 Tip: Enable Automations to automatically generate PRs for you. |
This was referenced Sep 22, 2026
Merged
ksong151
pushed a commit
to ksong151/hyperframes
that referenced
this pull request
Sep 23, 2026
heygen-com#4264 added the week-in-merges block and its registry.json entry. heygen-com#4277 regenerated registry.json from a branch that predated heygen-com#4264, which removed the entry again. The block directory, catalog page and docs nav link all remained, so the catalog advertises a block that `hyperframes add week-in-merges` rejects with "Item not found in registry".
This branch was successfully deployed
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What\n\n
colorama-wipe— ahyperframes:component. A headline reveals through a feathered, leaning wipe front that is blurred and colour-mapped as it passes, then settles to clean type and wipes off again. It is the After Effects "shiny wipe" (masked text + Compound Blur + Colorama over a moving gradient, crisp duplicate on top) as a deterministic canvas effect on any text element.\n\njs\nattachColoramaWipe("#headline", tl, { at: 0.3, in: 0.75, hold: 2.0, out: 0.55 });\nwindow.__timelines["my-comp"] = tl;\n\n\nOne call per element adds a single linear clock tween to the host timeline. The component measures the element, hides it (visibility, layout untouched) and paints on two canvases over its box for[at, at + in + hold + out]. Options: colour cycle, feather, tilt, blur, trail, noise, crisp overlay, render scale. All sizes derive from the element's font size, so it works at any type size and aspect ratio.\n\nDeterministic: hash noise keyed by frame, noMath.random, no clocks; a seek anywhere outside the window paints an empty stage.\n\n## Preview\n\nReference build (three headlines, 10 s, 1920×1080, finish-pass grade on top): https://hyperframes.dev/p/fabab042-1661-4a63-9143-3a6bf2034a76 — published from the demo project. Preview MP4 attached in a comment below; catalog PNG/MP4 to be uploaded by a maintainer.\n\n## Checks\n\n-hyperframes checkon the reference build: 0 lint errors, runtime / layout / motion clean\n-npx oxfmt --check registry/components/colorama-wipe/*.htmlpasses\n-registry/registry.json,docs/docs.json,docs/public/catalog-index.jsonregenerated with the two generator scripts (not hand-edited). The regeneration also picks up drift already on main (example items, docs nav groups); happy to split that into its own commit if preferred.\n\n## Notes for reviewers\n\n- The source text is hidden withvisibility: hiddenrather thancolor: transparenton purpose: the layout audit flags transparent text as unpainted.\n- The effect canvas' alpha follows raw glyph coverage, not the noised intensity, so no-ink pixels stay transparent over any background.\n- Two canvases (half-res effect + full-res crisp copy); cost is a per-pixel loop over the padded element box per frame — fine for headlines, heavy for paragraph-sized targets.\n\n🤖 Generated with Claude Code\n\n\n\nSupersedes #4273 by the same author\nThe check-docs-catalog week-in-merges sidebar failure is pre-existing on main.\n