wehub-resource-sync
85453da49f
regression / regression-shards (style-16-prod style-9-prod style-17-prod iframe-render-compat variables-prod mp4-h265-sdr, shard-4) (push) Has been cancelled
regression / regression-shards (style-4-prod style-11-prod style-2-prod animejs-adapter typegpu-adapter parallel-capture-regression, shard-5) (push) Has been cancelled
regression / regression-shards (style-7-prod style-8-prod style-10-prod css-spinner-render-compat webm-transparency mp4-h264-sdr webm-vp9, shard-3) (push) Has been cancelled
regression / regression-shards (sub-composition-video style-18-prod raf-ball-render-compat font-variant-numeric sub-comp-t0 sub-comp-id-selector, shard-7) (push) Has been cancelled
Windows render verification / Detect changes (push) Has been cancelled
Windows render verification / Preflight (lint + format) (push) Has been cancelled
Windows render verification / Render on windows-latest (push) Has been cancelled
Windows render verification / Tests on windows-latest (push) Has been cancelled
CI / Detect changes (push) Has been cancelled
CI / Build (push) Has been cancelled
CI / Lint (push) Has been cancelled
CI / Fallow audit (push) Has been cancelled
CI / Format (push) Has been cancelled
CI / Typecheck (push) Has been cancelled
CI / Test (push) Has been cancelled
CI / Producer: integration tests (push) Has been cancelled
CI / Producer: unit tests (push) Has been cancelled
CI / File size check (push) Has been cancelled
CI / Test: skills (push) Has been cancelled
CI / Skills: manifest in sync (push) Has been cancelled
CI / CLI: npx shim (macos-latest) (push) Has been cancelled
CI / CLI: npx shim (ubuntu-latest) (push) Has been cancelled
CI / CLI: npx shim (windows-latest) (push) Has been cancelled
CI / SDK: unit + contract + smoke (push) Has been cancelled
CI / Test: runtime contract (push) Has been cancelled
CI / Studio: load smoke (push) Has been cancelled
CI / Smoke: global install (push) Has been cancelled
CI / CLI smoke (required) (push) Has been cancelled
CI / Semantic PR title (push) Has been cancelled
Player perf / Detect changes (push) Has been cancelled
Player perf / Preflight (lint + format) (push) Has been cancelled
Player perf / player-perf (push) Has been cancelled
Player perf / Perf: drift (push) Has been cancelled
Player perf / Perf: fps (push) Has been cancelled
Player perf / Perf: parity (push) Has been cancelled
Player perf / Perf: scrub (push) Has been cancelled
Player perf / Perf: load (push) Has been cancelled
preview-regression / Detect changes (push) Has been cancelled
preview-regression / Preflight (lint + format) (push) Has been cancelled
preview-regression / Preview parity (push) Has been cancelled
preview-regression / preview-regression (push) Has been cancelled
regression / regression (push) Has been cancelled
regression / Detect changes (push) Has been cancelled
regression / Preflight (lint + format) (push) Has been cancelled
regression / regression-shards (hdr-regression style-5-prod style-3-prod mov-prores, shard-1) (push) Has been cancelled
regression / regression-shards (overlay-montage-prod style-12-prod chat missing-host-comp-id png-sequence portrait-edge-bleed, shard-6) (push) Has been cancelled
regression / regression-shards (style-13-prod style-6-prod vignelli-stacking gsap-letters-render-compat audio-mux-parity, shard-8) (push) Has been cancelled
regression / regression-shards (style-15-prod hdr-hlg-regression style-1-prod many-cuts vfr-screen-recording render-symlinked-assets, shard-2) (push) Has been cancelled
CodeQL / Analyze (actions) (push) Has been cancelled
CodeQL / Analyze (javascript-typescript) (push) Has been cancelled
CodeQL / Analyze (python) (push) Has been cancelled
Docs / Validate docs (push) Has been cancelled
Sync skills to ClawHub / Publish changed skills (push) Has been cancelled
367 lines
13 KiB
HTML
Vendored
367 lines
13 KiB
HTML
Vendored
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
|
|
<style>
|
|
@import url("https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&family=Bebas+Neue&family=JetBrains+Mono:wght@400;700&family=Lato:wght@400;700&display=block");
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
html,
|
|
body {
|
|
width: 1920px;
|
|
height: 1080px;
|
|
overflow: hidden;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div
|
|
id="root"
|
|
data-composition-id="main"
|
|
data-start="0"
|
|
data-duration="4"
|
|
data-width="1920"
|
|
data-height="1080"
|
|
>
|
|
<style>
|
|
[data-composition-id="main"] {
|
|
width: 1920px;
|
|
height: 1080px;
|
|
overflow: hidden;
|
|
position: relative;
|
|
background: #293241;
|
|
}
|
|
|
|
/* Blueprint grid */
|
|
.bp-grid {
|
|
position: absolute;
|
|
inset: 0;
|
|
background-image:
|
|
linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
|
|
linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
|
|
background-size: 40px 40px;
|
|
pointer-events: none;
|
|
}
|
|
|
|
/* Layout */
|
|
.bp-left {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
bottom: 0;
|
|
width: 1200px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
.bp-right {
|
|
position: absolute;
|
|
right: 0;
|
|
top: 0;
|
|
bottom: 0;
|
|
width: 720px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
padding: 60px 60px 60px 40px;
|
|
}
|
|
.bp-divider {
|
|
position: absolute;
|
|
left: 1200px;
|
|
top: 60px;
|
|
bottom: 60px;
|
|
width: 1px;
|
|
background: #ee6c4d;
|
|
opacity: 0.15;
|
|
}
|
|
.bp-number {
|
|
font-family: "Space Mono", monospace;
|
|
font-size: 14px;
|
|
font-weight: 700;
|
|
letter-spacing: 0.4em;
|
|
text-transform: uppercase;
|
|
position: absolute;
|
|
top: 40px;
|
|
left: 60px;
|
|
color: #ee6c4d;
|
|
}
|
|
|
|
/* Right panel typography */
|
|
.bp-name {
|
|
font-family: "Bebas Neue", sans-serif;
|
|
font-size: 38px;
|
|
letter-spacing: 0.08em;
|
|
margin-bottom: 20px;
|
|
color: #ee6c4d;
|
|
}
|
|
.bp-plabel {
|
|
font-family: "Space Mono", monospace;
|
|
font-size: 11px;
|
|
font-weight: 700;
|
|
letter-spacing: 0.3em;
|
|
text-transform: uppercase;
|
|
margin-bottom: 10px;
|
|
color: #ee6c4d;
|
|
opacity: 0.5;
|
|
}
|
|
.bp-prompt {
|
|
font-family: "JetBrains Mono", monospace;
|
|
font-size: 20px;
|
|
line-height: 1.6;
|
|
padding: 16px 20px;
|
|
border-radius: 6px;
|
|
margin-bottom: 20px;
|
|
color: #ee6c4d;
|
|
background: rgba(238, 108, 77, 0.06);
|
|
border: 1px solid rgba(238, 108, 77, 0.12);
|
|
}
|
|
.bp-desc {
|
|
font-family: "Lato", sans-serif;
|
|
font-size: 17px;
|
|
line-height: 1.6;
|
|
color: #98c1d9;
|
|
opacity: 0.55;
|
|
}
|
|
|
|
/* GL scenes (hidden, just for texture capture) */
|
|
.scene {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 1200px;
|
|
height: 1080px;
|
|
overflow: hidden;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
.scene-label {
|
|
font-family: "Bebas Neue", sans-serif;
|
|
font-size: 140px;
|
|
letter-spacing: 0.06em;
|
|
opacity: 0.12;
|
|
}
|
|
</style>
|
|
|
|
<div class="bp-grid"></div>
|
|
<div class="bp-divider"></div>
|
|
<div class="bp-number">09 / 14</div>
|
|
|
|
<!-- GL demo scenes (captured as textures, then hidden) -->
|
|
<div id="s1" class="scene" style="background: #293241">
|
|
<div class="scene-label" style="color: #ee6c4d">SCENE A</div>
|
|
</div>
|
|
<div id="s2" class="scene" style="background: #ee6c4d; opacity: 0">
|
|
<div class="scene-label" style="color: #293241">SCENE B</div>
|
|
</div>
|
|
|
|
<!-- GL canvas (left panel only) -->
|
|
<canvas
|
|
id="gl-canvas"
|
|
width="1200"
|
|
height="1080"
|
|
style="
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 1200px;
|
|
height: 1080px;
|
|
z-index: 10;
|
|
pointer-events: none;
|
|
display: none;
|
|
"
|
|
>
|
|
</canvas>
|
|
|
|
<!-- Right panel metadata -->
|
|
<div class="bp-right">
|
|
<div class="bp-name">Glitch</div>
|
|
<div class="bp-plabel">Prompt</div>
|
|
<div class="bp-prompt">"use glitch shader transition"</div>
|
|
<div class="bp-desc">
|
|
Scan lines, block scramble, chromatic aberration, brightness flicker, and color
|
|
posterization.
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
id="driver"
|
|
class="clip"
|
|
data-start="0"
|
|
data-duration="4"
|
|
data-track-index="0"
|
|
style="position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none"
|
|
></div>
|
|
</div>
|
|
|
|
<script>
|
|
window.__timelines = window.__timelines || {};
|
|
var glCanvas = document.getElementById("gl-canvas");
|
|
var gl = glCanvas.getContext("webgl", { preserveDrawingBuffer: true });
|
|
if (!gl) {
|
|
console.warn("WebGL not available");
|
|
window.__timelines["main"] = gsap.timeline({ paused: true });
|
|
} else {
|
|
gl.viewport(0, 0, 1200, 1080);
|
|
gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, false);
|
|
var sceneTextures = {};
|
|
|
|
function captureScene(sceneId) {
|
|
var scene = document.getElementById(sceneId);
|
|
var origOpacity = scene.style.opacity;
|
|
var origZ = scene.style.zIndex;
|
|
scene.style.opacity = "1";
|
|
scene.style.zIndex = "999";
|
|
scene.offsetHeight;
|
|
var c = document.createElement("canvas");
|
|
c.width = 1200;
|
|
c.height = 1080;
|
|
var ctx = c.getContext("2d");
|
|
ctx.fillStyle = window.getComputedStyle(scene).backgroundColor;
|
|
ctx.fillRect(0, 0, 1200, 1080);
|
|
var sr = scene.getBoundingClientRect();
|
|
var els = scene.querySelectorAll("*");
|
|
for (var i = 0; i < els.length; i++) {
|
|
var el = els[i],
|
|
cs = window.getComputedStyle(el);
|
|
if (cs.display === "none" || cs.visibility === "hidden") continue;
|
|
var r = el.getBoundingClientRect();
|
|
if (r.width < 1 || r.height < 1) continue;
|
|
var x = r.left - sr.left,
|
|
y = r.top - sr.top,
|
|
w = r.width,
|
|
h = r.height;
|
|
ctx.save();
|
|
ctx.globalAlpha = parseFloat(cs.opacity) || 1;
|
|
var bg = cs.backgroundColor;
|
|
if (bg && bg !== "rgba(0, 0, 0, 0)" && bg !== "transparent") {
|
|
ctx.fillStyle = bg;
|
|
ctx.fillRect(x, y, w, h);
|
|
}
|
|
var hasChildEls = el.querySelector("div,span,img,video");
|
|
var text = "";
|
|
for (var j = 0; j < el.childNodes.length; j++)
|
|
if (el.childNodes[j].nodeType === 3) text += el.childNodes[j].textContent;
|
|
text = text.trim();
|
|
if (text && !hasChildEls) {
|
|
ctx.font = cs.fontWeight + " " + cs.fontSize + " " + cs.fontFamily;
|
|
ctx.fillStyle = cs.color;
|
|
if (cs.letterSpacing && cs.letterSpacing !== "normal")
|
|
ctx.letterSpacing = cs.letterSpacing;
|
|
ctx.textAlign = "center";
|
|
ctx.textBaseline = "middle";
|
|
ctx.fillText(text, x + w / 2, y + h / 2);
|
|
}
|
|
ctx.restore();
|
|
}
|
|
scene.style.opacity = origOpacity;
|
|
scene.style.zIndex = origZ;
|
|
var tex = gl.createTexture();
|
|
gl.bindTexture(gl.TEXTURE_2D, tex);
|
|
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
|
|
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
|
|
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
|
|
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
|
|
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, c);
|
|
sceneTextures[sceneId] = tex;
|
|
}
|
|
|
|
var vertSrc =
|
|
"attribute vec2 a_pos; varying vec2 v_uv; void main(){" +
|
|
"v_uv=a_pos*0.5+0.5; v_uv.y=1.0-v_uv.y; gl_Position=vec4(a_pos,0,1);}";
|
|
var quadBuf = gl.createBuffer();
|
|
gl.bindBuffer(gl.ARRAY_BUFFER, quadBuf);
|
|
gl.bufferData(
|
|
gl.ARRAY_BUFFER,
|
|
new Float32Array([-1, -1, 1, -1, -1, 1, 1, 1]),
|
|
gl.STATIC_DRAW,
|
|
);
|
|
function compileShader(src, type) {
|
|
var s = gl.createShader(type);
|
|
gl.shaderSource(s, src);
|
|
gl.compileShader(s);
|
|
if (!gl.getShaderParameter(s, gl.COMPILE_STATUS))
|
|
console.error("Shader:", gl.getShaderInfoLog(s));
|
|
return s;
|
|
}
|
|
function mkProg(fragSrc) {
|
|
var p = gl.createProgram();
|
|
gl.attachShader(p, compileShader(vertSrc, gl.VERTEX_SHADER));
|
|
gl.attachShader(p, compileShader(fragSrc, gl.FRAGMENT_SHADER));
|
|
gl.linkProgram(p);
|
|
if (!gl.getProgramParameter(p, gl.LINK_STATUS))
|
|
console.error("Link:", gl.getProgramInfoLog(p));
|
|
return p;
|
|
}
|
|
|
|
var H =
|
|
"precision mediump float;" +
|
|
"varying vec2 v_uv;" +
|
|
"uniform sampler2D u_from, u_to;" +
|
|
"uniform float u_progress;" +
|
|
"uniform vec2 u_resolution;\n";
|
|
|
|
var progPass = mkProg(H + "void main(){gl_FragColor=texture2D(u_from,v_uv);}");
|
|
var progTrans = mkProg(
|
|
H +
|
|
"float rand(vec2 co){return fract(sin(dot(co,vec2(12.9898,78.233)))*43758.5453);}void main(){float inten=u_progress*(1.-u_progress)*4.;float lineY=floor(v_uv.y*60.)/60.;float lineDisp=(rand(vec2(lineY,floor(u_progress*17.)))-.5)*.18*inten;vec2 block=floor(v_uv*vec2(12.,8.));float br=rand(block+vec2(floor(u_progress*11.)));float ba=step(.83,br)*inten;vec2 bd=(vec2(rand(block*2.1),rand(block*3.7))-.5)*.35*ba;vec2 uv=clamp(v_uv+vec2(lineDisp,0.)+bd,0.,1.);float shift=inten*.035;float r=texture2D(u_from,uv+vec2(shift,0.)).r;float g=texture2D(u_from,uv).g;float b=texture2D(u_from,uv-vec2(shift,0.)).b;vec3 col=vec3(r,g,b);col-=step(.5,fract(v_uv.y*u_resolution.y*.5))*.05*inten;col*=1.+(rand(vec2(floor(u_progress*23.)))-.5)*.3*inten;float levels=mix(256.,8.,inten*.5);col=floor(col*levels)/levels;gl_FragColor=mix(vec4(col,1.),texture2D(u_to,v_uv),u_progress);}",
|
|
);
|
|
|
|
function renderShader(prog, texFrom, texTo, progress) {
|
|
gl.useProgram(prog);
|
|
gl.activeTexture(gl.TEXTURE0);
|
|
gl.bindTexture(gl.TEXTURE_2D, texFrom);
|
|
gl.uniform1i(gl.getUniformLocation(prog, "u_from"), 0);
|
|
gl.activeTexture(gl.TEXTURE1);
|
|
gl.bindTexture(gl.TEXTURE_2D, texTo);
|
|
gl.uniform1i(gl.getUniformLocation(prog, "u_to"), 1);
|
|
gl.uniform1f(gl.getUniformLocation(prog, "u_progress"), progress);
|
|
gl.uniform2f(gl.getUniformLocation(prog, "u_resolution"), 1200, 1080);
|
|
var pos = gl.getAttribLocation(prog, "a_pos");
|
|
gl.bindBuffer(gl.ARRAY_BUFFER, quadBuf);
|
|
gl.enableVertexAttribArray(pos);
|
|
gl.vertexAttribPointer(pos, 2, gl.FLOAT, false, 0, 0);
|
|
gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
|
|
}
|
|
|
|
function easeInOut(p) {
|
|
return p < 0.5 ? 2 * p * p : 1 - Math.pow(-2 * p + 2, 2) / 2;
|
|
}
|
|
|
|
captureScene("s1");
|
|
captureScene("s2");
|
|
glCanvas.style.display = "block";
|
|
renderShader(progPass, sceneTextures["s1"], sceneTextures["s1"], 0);
|
|
document.querySelectorAll(".scene").forEach(function (s) {
|
|
s.style.opacity = "0";
|
|
});
|
|
|
|
var tl = gsap.timeline({
|
|
paused: true,
|
|
onUpdate: function () {
|
|
var t = tl.time();
|
|
if (t >= 1.0 && t < 3.0) {
|
|
renderShader(
|
|
progTrans,
|
|
sceneTextures["s1"],
|
|
sceneTextures["s2"],
|
|
easeInOut((t - 1.0) / 2.0),
|
|
);
|
|
} else if (t >= 3.0) {
|
|
renderShader(progPass, sceneTextures["s2"], sceneTextures["s2"], 0);
|
|
} else {
|
|
renderShader(progPass, sceneTextures["s1"], sceneTextures["s1"], 0);
|
|
}
|
|
},
|
|
});
|
|
tl.to({ v: 0 }, { v: 1, duration: 4, ease: "none" }, 0);
|
|
window.__timelines["main"] = tl;
|
|
} // end if (gl)
|
|
</script>
|
|
</body>
|
|
</html>
|