feat(registry): add pendulum-swing component - #3764
Open
rottenpen wants to merge 1 commit into
Open
Conversation
Add a motion-primitive component that hangs content from a fixed pivot and lets it settle with a damped oscillation, like a hanging sign coming to rest on its hook. The swing rides a single unitless custom property (--hf-swing-angle) that the timeline eases 1 -> 0, so only rotation animates and it stays sub-pixel under the seek-by-frame capture engine. The demo drives it with a damped-oscillation ease (a cosine inside an exponential decay, normalised to land exactly upright) so the sign passes through center several times, each pass smaller, before it rests. Four enum variables: pivot (top-center/left/right), amplitude (gentle/standard/wide), direction (right/left), tone (ink/paper/accent, each a bg/fg pair to keep AA contrast on any frame). The snippet is recipe-only and does not own its timeline; its demo carries the same variable declaration. Ran npx hyperframes lint/validate on both files, regenerated registry.json via scripts/generate-registry-items.ts and the docs via scripts/generate-catalog-pages.ts.
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
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
Add a new registry component,
pendulum-swing: a motion primitive that hangs content from a fixed pivot and lets it settle with a damped oscillation, like a hanging sign coming to rest on its hook.Why
The catalog has plenty of "arrive" primitives (slam, pop, slide, dissolve) but none that reads as a physical hanging object settling.
pendulum-swingfills that gap with a small, composable primitive that pins a top edge and swings the content in.How
pendulum-swing.htmlowns no timeline. It reads its variables, writes CSS custom props, and rotates about atransform-originpinned to the pivot. All motion rides a single unitless custom property--hf-swing-anglethat the host timeline eases1 → 0, so onlytransform: rotate()animates — sub-pixel, no layout/reflow property, safe under the seek-by-frame capture engine.1 - exp(-2.3·p)·cos(3.5π·p)— a cosine (the swings) inside an exponential decay (the damping), normalised so the tween lands exactly upright. The sign passes through center several times, each pass smaller, before resting — a real pendulum settle rather than a single overshoot.pivot(top-center/left/right),amplitude(gentle/standard/wide),direction(right/left),tone(ink/paper/accent — each a bg/fg pair to keep AA contrast on any frame). Unrecognised overrides fall back to declared defaults.dimensions/duration(per schema). The demo carries the same variable declaration as the snippet.Preview
The sign swings right → left → right, each pass smaller, settling upright.
pendulum-swing.mp4
Test plan
npx hyperframes lint+npx hyperframes validateon both HTML files — clean (only ignore-levelroot_missing_*rules fire on the bare snippet, expected)snippet == demovariable declaration parity verifiedregistry.jsonregenerated viascripts/generate-registry-items.ts(not hand-edited);catalogArtifact.revisionuntouchedscripts/generate-catalog-pages.ts(mdx +catalog-index.json+docs.jsonnav)Notes for maintainers (the two contributor-can't-finish steps)
Per
CONTRIBUTING.md, these need assets an outside contributor isn't expected to install; neither blocks review:registry/catalog-artifact/local-vectors.*) — not regenerated here (needs the 32 MB on-device embedding model). TheCatalog: search index covers the registryCI job will name the gap; it's a deterministic rebuild from this registry, so it's regenerated before merge. Until then the item is findable by word search, just not by meaning.preview.posterin the manifest points at the conventional CDN path (static.heygen.ai/.../catalog/components/pendulum-swing.png); the actual asset is published byscripts/upload-docs-images.sh(HeyGen AWS creds), so a maintainer runs the official preview + upload before merge. The MP4 above is a local render for review.