ext/hyperframes
2
0
Fork 0
mirror of https://github.com/heygen-com/hyperframes.git synced 2026-09-12 15:20:13 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(registry): add parallax-zoom and parallax-unzoom components

Browse Source 
Two companion components inspired by the eBay Playbook hero transition:

- parallax-zoom: center card scales up to fill the frame while siblings
  parallax outward. Single CSS variable (--pz-progress 0→1), fully
  seekable and deterministic.

- parallax-unzoom: the reverse — focus card starts at full-frame scale
  and shrinks back into its grid position while siblings parallax inward.
  Uses --pu-progress with the pu prefix to avoid variable collisions when
  both components live in the same composition.

Designed to chain: zoom INTO a card in scene 1, unzoom OUT of it in
scene 2 to reveal a fresh grid underneath.

Includes demo compositions, registry manifests, and catalog pages.
Preview assets rendered and uploaded to CDN.

Co-authored-by: Kanyini <onebenson@gmail.com>
This commit is contained in:
Miguel Ángel
2026-05-22 18:42:50 -04:00
co-authored by Kanyini
parent 154359d95d
commit babf9dc15a
9 changed files with 978 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
registry/components/parallax-zoom/registry-item.json
+18
View File
@@ -0,0 +1,18 @@
{
"$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
"name": "parallax-zoom",
"type": "hyperframes:component",
"title": "Parallax Zoom",
"description": "Center card scales up to fill the frame while siblings parallax outward — inspired by the eBay Playbook hero transition",
"tags": ["transition", "zoom", "parallax", "grid", "hero"],
"files": [
{
"path": "parallax-zoom.html",
"target": "compositions/components/parallax-zoom.html",
"type": "hyperframes:snippet"
}
],
"preview": {
"poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/parallax-zoom.png"
}
}