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

fix(catalog): keep the recorded video for canvas drawElement previews (#3171)

Browse Source 
Eight blocks paint DOM into a canvas with ctx.drawElementImage(), which sits
behind chrome://flags/#canvas-draw-element. A reader without the flag gets a
preview that mounts, plays, and shows an empty canvas, which is what the 3D
device blocks were doing even after their models were embedded correctly.

The recorded video was captured by a renderer that has the capability, so it is
the only preview these items can honestly show. All eight have a published mp4
and poster.
This commit is contained in:
Miguel Ángel
2026-08-10 18:30:28 -04:00
committed by GitHub
parent 470f802d9f
commit 0f76305191
46 changed files with 26 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/catalog/blocks/ios26-liquid-glass.mdx
+1 -6
View File
@@ -3,12 +3,7 @@ title: "iOS 26 Liquid Glass Home Screen"
description: "3D iPhone with a normal iOS 26 home screen, liquid glass app icons, shader wallpaper, dock, and fluid glass notifications that drop from the status area onto a GLTF device model."
---
<iframe
className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
title="ios26-liquid-glass preview"
loading="lazy"
srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@0.7/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/ios26-liquid-glass.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/ios26-liquid-glass.png");document.body.appendChild(p)});<\/script></body></html>`}
/>
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/ios26-liquid-glass.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/ios26-liquid-glass.png" autoPlay muted loop playsInline />
## Install