ext/hyperframes
2
0
Fork 0
mirror of https://github.com/heygen-com/hyperframes.git synced 2026-09-03 04:38:33 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(registry): rewrite liquid glass blocks with liquid-glass-html-in-canvas

Browse Source 
Complete rewrite of all 4 liquid glass registry blocks using
jeantimex/liquid-glass-html-in-canvas for real WebGPU glass rendering.

Architecture: Three.js aurora shader (z:0) + empty glass panels in
layoutsubtree canvas (z:1) + CSS text overlay (z:2). Text is crisp
and never passes through the glass shader.

- Renders via Brave with WebGPU + drawElementImage flags
- Continuous motion throughout — panels sweep across the screen
- liquid-glass.iife.js bundle (25KB) replaces liquid-dom (88KB)
This commit is contained in:
Miguel Ángel
2026-05-23 15:10:10 -04:00
parent 3560678bb2
commit 77588b0759
12 changed files with 6188 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
registry/blocks/liquid-glass-context-menu/liquid-glass-context-menu.html
Vendored
+375
View File
@@ -0,0 +1,375 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=1920, height=1080" />
<title>Liquid Glass Context Menu</title>
<link
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap"
rel="stylesheet"
/>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
<script src="lib/liquid-glass.iife.js"></script>
<style>
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background: #0a0218;
overflow: hidden;
font-family: "Inter", system-ui, sans-serif;
}
#root {
position: relative;
width: 1920px;
height: 1080px;
overflow: hidden;
}
#three-canvas {
position: absolute;
top: 0;
left: 0;
width: 1920px;
height: 1080px;
z-index: 0;
}
#glass-canvas {
position: absolute;
top: 0;
left: 0;
width: 1920px;
height: 1080px;
z-index: 1;
}
/* ── Glass Panel ── */
.menu-panel {
position: absolute;
width: 260px;
height: 380px;
background: rgba(255, 255, 255, 0.06);
--lg-blur: 0.22;
--lg-refraction: 0.6;
--lg-corner-radius: 16;
--lg-z-radius: 38;
--lg-specular: 0.2;
--lg-fresnel: 0.9;
--lg-edge-highlight: 0.1;
--lg-chrom-aberration: 0.05;
--lg-shadow-opacity: 0.35;
--lg-shadow-spread: 14;
--lg-shadow-offset-y: 4;
--lg-saturation: 0.25;
}
#glass-menu {
top: 200px;
left: 300px;
}
/* ── Text Overlay ── */
.text-overlay {
position: absolute;
z-index: 2;
pointer-events: none;
}
.menu-text {
width: 260px;
height: 380px;
display: flex;
flex-direction: column;
padding: 10px 0;
}
#text-menu {
top: 200px;
left: 300px;
}
.menu-item {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 18px;
font-size: 14px;
font-weight: 500;
color: #fff;
cursor: default;
}
.menu-item svg {
width: 16px;
height: 16px;
flex-shrink: 0;
stroke: rgba(255, 255, 255, 0.7);
fill: none;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
.menu-sep {
height: 1px;
margin: 6px 18px;
background: rgba(255, 255, 255, 0.1);
}
.menu-footer {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 18px;
margin-top: auto;
}
.menu-footer-item {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
font-size: 11px;
font-weight: 500;
color: rgba(255, 255, 255, 0.55);
}
.menu-footer-item svg {
width: 20px;
height: 20px;
stroke: rgba(255, 255, 255, 0.55);
fill: none;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
.menu-kbd {
margin-left: auto;
font-size: 12px;
font-weight: 500;
color: rgba(255, 255, 255, 0.3);
font-variant-numeric: tabular-nums;
}
</style>
</head>
<body>
<div
id="root"
data-composition-id="liquid-glass-context-menu"
data-width="1920"
data-height="1080"
data-start="0"
data-duration="8"
data-root="true"
>
<canvas id="three-canvas" width="1920" height="1080"></canvas>
<canvas id="glass-canvas" layoutsubtree width="1920" height="1080">
<div id="glass-menu" class="menu-panel liquid-glass"></div>
</canvas>
<div id="text-menu" class="text-overlay menu-text">
<div class="menu-item">
<svg viewBox="0 0 24 24">
<path d="M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8" />
<polyline points="16 6 12 2 8 6" />
<line x1="12" y1="2" x2="12" y2="15" />
</svg>
<span>Share</span>
</div>
<div class="menu-item">
<svg viewBox="0 0 24 24">
<path d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z" />
</svg>
<span>Add to Bookmarks</span>
</div>
<div class="menu-item">
<svg viewBox="0 0 24 24"><path d="M12 5v14M5 12h14" /></svg>
<span>Add Bookmark to...</span>
</div>
<div class="menu-sep"></div>
<div class="menu-item">
<svg viewBox="0 0 24 24">
<rect x="3" y="3" width="18" height="18" rx="2" ry="2" />
<line x1="9" y1="3" x2="9" y2="21" />
</svg>
<span>New Tab</span>
<span class="menu-kbd">&#8984;T</span>
</div>
<div class="menu-item">
<svg viewBox="0 0 24 24">
<rect x="3" y="3" width="18" height="18" rx="2" ry="2" />
<path d="M9 3v18" />
<path d="M14 9l3 3-3 3" />
</svg>
<span>New Private Tab</span>
<span class="menu-kbd">&#8679;&#8984;N</span>
</div>
<div class="menu-sep"></div>
<div class="menu-footer">
<div class="menu-footer-item">
<svg viewBox="0 0 24 24">
<path d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z" />
</svg>
<span>Bookmarks</span>
</div>
<div class="menu-footer-item">
<svg viewBox="0 0 24 24">
<rect x="3" y="3" width="7" height="7" />
<rect x="14" y="3" width="7" height="7" />
<rect x="3" y="14" width="7" height="7" />
<rect x="14" y="14" width="7" height="7" />
</svg>
<span>All Tabs</span>
</div>
</div>
</div>
<div
id="driver"
class="clip"
data-start="0"
data-duration="8"
data-track-index="0"
style="position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none"
></div>
</div>
<script>
var W = 1920,
H = 1080,
DURATION = 8;
/* ── Three.js Aurora Shader ─────────────────────────────────────── */
var vs = "varying vec2 vUv; void main() { vUv = uv; gl_Position = vec4(position, 1.0); }";
var fs = [
"precision highp float;",
"varying vec2 vUv;",
"uniform float uTime;",
"vec3 mod289(vec3 x){return x-floor(x*(1.0/289.0))*289.0;}",
"vec4 mod289(vec4 x){return x-floor(x*(1.0/289.0))*289.0;}",
"vec4 permute(vec4 x){return mod289(((x*34.0)+1.0)*x);}",
"vec4 taylorInvSqrt(vec4 r){return 1.79284291400159-0.85373472095314*r;}",
"float snoise(vec3 v){",
" const vec2 C=vec2(1.0/6.0,1.0/3.0);const vec4 D=vec4(0.0,0.5,1.0,2.0);",
" vec3 i=floor(v+dot(v,C.yyy));vec3 x0=v-i+dot(i,C.xxx);",
" vec3 g=step(x0.yzx,x0.xyz);vec3 l=1.0-g;",
" vec3 i1=min(g.xyz,l.zxy);vec3 i2=max(g.xyz,l.zxy);",
" vec3 x1=x0-i1+C.xxx;vec3 x2=x0-i2+C.yyy;vec3 x3=x0-D.yyy;",
" i=mod289(i);",
" vec4 p=permute(permute(permute(i.z+vec4(0.0,i1.z,i2.z,1.0))+i.y+vec4(0.0,i1.y,i2.y,1.0))+i.x+vec4(0.0,i1.x,i2.x,1.0));",
" float n_=0.142857142857;vec3 ns=n_*D.wyz-D.xzx;",
" vec4 j=p-49.0*floor(p*ns.z*ns.z);vec4 x_=floor(j*ns.z);vec4 y_=floor(j-7.0*x_);",
" vec4 x=x_*ns.x+ns.yyyy;vec4 y=y_*ns.x+ns.yyyy;vec4 h=1.0-abs(x)-abs(y);",
" vec4 b0=vec4(x.xy,y.xy);vec4 b1=vec4(x.zw,y.zw);",
" vec4 s0=floor(b0)*2.0+1.0;vec4 s1=floor(b1)*2.0+1.0;",
" vec4 sh=-step(h,vec4(0.0));",
" vec4 a0=b0.xzyw+s0.xzyw*sh.xxyy;vec4 a1=b1.xzyw+s1.xzyw*sh.zzww;",
" vec3 p0=vec3(a0.xy,h.x);vec3 p1=vec3(a0.zw,h.y);vec3 p2=vec3(a1.xy,h.z);vec3 p3=vec3(a1.zw,h.w);",
" vec4 norm=taylorInvSqrt(vec4(dot(p0,p0),dot(p1,p1),dot(p2,p2),dot(p3,p3)));",
" p0*=norm.x;p1*=norm.y;p2*=norm.z;p3*=norm.w;",
" vec4 m=max(0.6-vec4(dot(x0,x0),dot(x1,x1),dot(x2,x2),dot(x3,x3)),0.0);m=m*m;",
" return 42.0*dot(m*m,vec4(dot(p0,x0),dot(p1,x1),dot(p2,x2),dot(p3,x3)));",
"}",
"void main(){",
" vec2 uv=vUv;float ar=1920.0/1080.0;vec2 p=vec2(uv.x*ar,uv.y);float t=uTime*0.06;",
" float wx=snoise(vec3(p*1.4,t*0.5))*0.2;float wy=snoise(vec3(p*1.4+100.0,t*0.5))*0.2;",
" vec2 wp=p+vec2(wx,wy);",
" vec3 base=mix(vec3(0.10,0.02,0.22),vec3(0.04,0.10,0.25),smoothstep(0.0,1.0,uv.x*0.6+uv.y*0.4));",
" float angle=0.65;float ridgeUv=dot(wp,vec2(cos(angle),sin(angle)));",
" float ridge1=sin(ridgeUv*8.0+t*2.0+snoise(vec3(wp*0.8,t))*1.5);",
" float ridge2=sin(ridgeUv*5.5-t*1.4+snoise(vec3(wp*1.2+50.0,t*0.7))*2.0);",
" float ridge3=sin(ridgeUv*12.0+t*3.0+snoise(vec3(wp*0.6+80.0,t*0.4))*1.0);",
" float crease1=pow(abs(ridge1),0.35)*sign(ridge1)*0.5+0.5;",
" float crease2=pow(abs(ridge2),0.4)*sign(ridge2)*0.5+0.5;",
" float crease3=pow(abs(ridge3),0.5)*sign(ridge3)*0.5+0.5;",
" vec3 warm=mix(vec3(0.9,0.4,0.08),vec3(0.95,0.65,0.15),crease1);",
" float warmZone=smoothstep(0.15,0.75,uv.x+uv.y*0.4+snoise(vec3(uv*2.0,t))*0.3);",
" vec3 cool=mix(vec3(0.02,0.4,0.55),vec3(0.25,0.7,0.82),crease2);",
" float coolZone=smoothstep(0.25,0.85,1.2-uv.x+uv.y*0.5+snoise(vec3(uv*2.0+40.0,t*0.8))*0.25);",
" vec3 hot=mix(vec3(0.8,0.1,0.4),vec3(0.6,0.08,0.65),crease3);",
" float hotZone=smoothstep(0.5,0.9,snoise(vec3(uv*2.5+20.0,t*0.6))*0.5+0.5);",
" vec3 col=base;",
" col=mix(col,warm,warmZone*0.75*smoothstep(0.3,0.7,crease1));",
" col=mix(col,cool,coolZone*0.65*smoothstep(0.2,0.65,crease2));",
" col=mix(col,hot,hotZone*0.5*smoothstep(0.35,0.8,crease3));",
" float edgeGlow=pow(1.0-abs(ridge1),6.0)*0.4+pow(1.0-abs(ridge2),5.0)*0.25;",
" col+=edgeGlow*mix(warm,cool,uv.x)*0.8;",
" col*=1.0-pow(abs(ridge1),4.0)*0.15;",
" float vig=1.0-smoothstep(0.5,1.5,length((uv-0.5)*vec2(1.3,1.0)));",
" col*=0.65+vig*0.5;",
" float luma=dot(col,vec3(0.299,0.587,0.114));col=mix(vec3(luma),col,1.5);",
" col=clamp(col,0.0,1.0);col=pow(col,vec3(0.9));",
" gl_FragColor=vec4(col,1.0);",
"}",
].join("\n");
/* ── Three.js Setup ─────────────────────────────────────────────── */
var threeCanvas = document.getElementById("three-canvas");
var renderer = new THREE.WebGLRenderer({ canvas: threeCanvas, alpha: false });
renderer.setSize(W, H, false);
renderer.setPixelRatio(1);
var scene = new THREE.Scene();
var camera = new THREE.OrthographicCamera(-1, 1, 1, -1, 0, 1);
var uniforms = { uTime: { value: 0 } };
var mat = new THREE.ShaderMaterial({
vertexShader: vs,
fragmentShader: fs,
uniforms: uniforms,
});
var quad = new THREE.Mesh(new THREE.PlaneGeometry(2, 2), mat);
scene.add(quad);
/* ── Glass Canvas ───────────────────────────────────────────────── */
var glassCanvas = document.getElementById("glass-canvas");
var ctx = glassCanvas.getContext("2d");
var lg = new LiquidGlass.LiquidGlassCanvas(glassCanvas);
function renderGlass(time) {
uniforms.uTime.value = time;
renderer.render(scene, camera);
ctx.clearRect(0, 0, W, H);
ctx.drawImage(threeCanvas, 0, 0, W, H);
lg.renderGlassElements();
}
/* ── GSAP Timeline ──────────────────────────────────────────────── */
window.__timelines = window.__timelines || {};
var tl = gsap.timeline({ paused: true });
var gm = document.getElementById("glass-menu");
var tm = document.getElementById("text-menu");
/* Diagonal drift: top-left to bottom-right, then back */
tl.fromTo(
[gm, tm],
{ left: 260, top: 160 },
{ left: 1380, top: 160, duration: 4, ease: "sine.inOut" },
0,
);
tl.fromTo([gm, tm], { top: 160 }, { top: 540, duration: 4, ease: "power2.inOut" }, 0);
/* Return sweep */
tl.to([gm, tm], { left: 260, duration: 4, ease: "sine.inOut" }, 4);
tl.to([gm, tm], { top: 160, duration: 4, ease: "power1.inOut" }, 4);
/* Gentle vertical oscillation on top of the drift */
tl.fromTo(
[gm, tm],
{ top: "+=0" },
{ top: "+=60", duration: 1.8, ease: "sine.inOut", yoyo: true, repeat: 3 },
0,
);
/* Duration driver */
tl.to({ v: 0 }, { v: 1, duration: DURATION, ease: "none" }, 0);
tl.eventCallback("onUpdate", function () {
renderGlass(tl.time());
});
window.__timelines["liquid-glass-context-menu"] = tl;
setTimeout(function () {
renderGlass(0);
}, 0);
</script>
</body>
</html>