mirror of
https://github.com/heygen-com/hyperframes.git
synced 2026-09-10 22:20:14 +00:00
Miguel Ángel
632731b076
* fix(player): replay from start when play is pressed after video ends When a non-looping composition reaches its end, pressing play again had no effect because the playhead stayed at the final frame. Now play() detects the ended state and seeks to 0 before resuming. * chore: fix pre-existing format issues in registry files
753 lines
27 KiB
HTML
Vendored
753 lines
27 KiB
HTML
Vendored
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=1920, height=1080" />
|
|
<title>Liquid Glass Parallax</title>
|
|
<link
|
|
href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap"
|
|
rel="stylesheet"
|
|
/>
|
|
<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/three@0.147.0/build/three.min.js"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/three@0.147.0/examples/js/shaders/CopyShader.js"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/three@0.147.0/examples/js/shaders/LuminosityHighPassShader.js"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/three@0.147.0/examples/js/postprocessing/EffectComposer.js"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/three@0.147.0/examples/js/postprocessing/RenderPass.js"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/three@0.147.0/examples/js/postprocessing/ShaderPass.js"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/three@0.147.0/examples/js/postprocessing/UnrealBloomPass.js"></script>
|
|
<style>
|
|
*,
|
|
*::before,
|
|
*::after {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
body {
|
|
background: #030407;
|
|
overflow: hidden;
|
|
font-family: "Inter", system-ui, sans-serif;
|
|
}
|
|
#root {
|
|
position: relative;
|
|
width: 1920px;
|
|
height: 1080px;
|
|
overflow: hidden;
|
|
background: #030407;
|
|
}
|
|
|
|
.text-source {
|
|
width: 1920px;
|
|
height: 1080px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: linear-gradient(160deg, #030407 0%, #0a1020 40%, #070910 70%, #030407 100%);
|
|
text-align: center;
|
|
padding: 0 120px;
|
|
gap: 32px;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
.text-source::before {
|
|
content: "";
|
|
position: absolute;
|
|
width: 700px;
|
|
height: 700px;
|
|
border-radius: 50%;
|
|
background: radial-gradient(circle, rgba(0, 212, 255, 0.06) 0%, transparent 70%);
|
|
top: -150px;
|
|
right: -100px;
|
|
pointer-events: none;
|
|
}
|
|
.text-source::after {
|
|
content: "";
|
|
position: absolute;
|
|
width: 500px;
|
|
height: 500px;
|
|
border-radius: 50%;
|
|
background: radial-gradient(circle, rgba(124, 58, 237, 0.05) 0%, transparent 70%);
|
|
bottom: -100px;
|
|
left: -50px;
|
|
pointer-events: none;
|
|
}
|
|
.badge {
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
letter-spacing: 3px;
|
|
text-transform: uppercase;
|
|
color: rgba(0, 212, 255, 0.8);
|
|
}
|
|
.text-source h1 {
|
|
font-size: 148px;
|
|
font-weight: 900;
|
|
line-height: 0.9;
|
|
color: rgba(248, 249, 253, 0.96);
|
|
text-shadow: 0 0 60px rgba(255, 255, 255, 0.15);
|
|
letter-spacing: -5px;
|
|
max-width: 1400px;
|
|
}
|
|
.text-source h1 span {
|
|
background: linear-gradient(135deg, #00d4ff, #a855f7);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
}
|
|
.subtitle {
|
|
font-size: 28px;
|
|
font-weight: 400;
|
|
color: rgba(255, 255, 255, 0.35);
|
|
max-width: 800px;
|
|
line-height: 1.5;
|
|
}
|
|
.stats {
|
|
display: flex;
|
|
gap: 48px;
|
|
margin-top: 16px;
|
|
}
|
|
.stat {
|
|
text-align: center;
|
|
}
|
|
.stat-val {
|
|
font-size: 42px;
|
|
font-weight: 800;
|
|
color: #00d4ff;
|
|
letter-spacing: -1px;
|
|
}
|
|
.stat-label {
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
color: rgba(255, 255, 255, 0.3);
|
|
text-transform: uppercase;
|
|
letter-spacing: 2px;
|
|
margin-top: 4px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div
|
|
id="root"
|
|
data-composition-id="liquid-glass"
|
|
data-width="1920"
|
|
data-height="1080"
|
|
data-start="0"
|
|
data-duration="20"
|
|
data-root="true"
|
|
>
|
|
<canvas
|
|
id="cap-text"
|
|
layoutsubtree
|
|
width="1920"
|
|
height="1080"
|
|
style="
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 1920px;
|
|
height: 1080px;
|
|
z-index: -1;
|
|
pointer-events: none;
|
|
"
|
|
>
|
|
<div class="text-source">
|
|
<div class="badge">Write HTML → Render Video</div>
|
|
<h1>Ship videos <span>10x faster</span></h1>
|
|
<div class="subtitle">
|
|
HTML is the source of truth for video. No timeline editors, no After Effects — just
|
|
code.
|
|
</div>
|
|
<div class="stats">
|
|
<div class="stat">
|
|
<div class="stat-val">47x</div>
|
|
<div class="stat-label">Faster than AE</div>
|
|
</div>
|
|
<div class="stat">
|
|
<div class="stat-val">12.4K</div>
|
|
<div class="stat-label">Creators</div>
|
|
</div>
|
|
<div class="stat">
|
|
<div class="stat-val">2.4M</div>
|
|
<div class="stat-label">Videos Rendered</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</canvas>
|
|
|
|
<canvas
|
|
id="theater"
|
|
width="1920"
|
|
height="1080"
|
|
style="position: absolute; top: 0; left: 0; width: 1920px; height: 1080px"
|
|
></canvas>
|
|
|
|
<div
|
|
id="driver"
|
|
class="clip"
|
|
data-start="0"
|
|
data-duration="20"
|
|
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 = 20,
|
|
ASPECT = W / H;
|
|
var TEXT_Z = -3.08;
|
|
|
|
// ── Seeded PRNG ────────────────────────────────────────────────────
|
|
function seededRandom(seed) {
|
|
var v = seed >>> 0;
|
|
return function () {
|
|
v += 0x6d2b79f5;
|
|
var m = v;
|
|
m = Math.imul(m ^ (m >>> 15), m | 1);
|
|
m ^= m + Math.imul(m ^ (m >>> 7), m | 61);
|
|
return ((m ^ (m >>> 14)) >>> 0) / 4294967296;
|
|
};
|
|
}
|
|
|
|
// ── Voronoi (self-contained, no d3) ────────────────────────────────
|
|
function polygonArea(pts) {
|
|
var a = 0;
|
|
for (var i = 0; i < pts.length; i++) {
|
|
var j = (i + 1) % pts.length;
|
|
a += pts[i][0] * pts[j][1] - pts[j][0] * pts[i][1];
|
|
}
|
|
return a * 0.5;
|
|
}
|
|
|
|
function polygonCentroid(pts) {
|
|
var sa = polygonArea(pts) || 1;
|
|
var cx = 0,
|
|
cy = 0;
|
|
for (var i = 0; i < pts.length; i++) {
|
|
var j = (i + 1) % pts.length;
|
|
var f = pts[i][0] * pts[j][1] - pts[j][0] * pts[i][1];
|
|
cx += (pts[i][0] + pts[j][0]) * f;
|
|
cy += (pts[i][1] + pts[j][1]) * f;
|
|
}
|
|
return { x: cx / (6 * sa), y: cy / (6 * sa) };
|
|
}
|
|
|
|
function clipPoly(poly, px, py, nx, ny) {
|
|
var out = [];
|
|
for (var i = 0; i < poly.length; i++) {
|
|
var c = poly[i],
|
|
n = poly[(i + 1) % poly.length];
|
|
var dc = (c[0] - px) * nx + (c[1] - py) * ny;
|
|
var dn = (n[0] - px) * nx + (n[1] - py) * ny;
|
|
if (dc <= 0) out.push(c);
|
|
if (dc <= 0 !== dn <= 0) {
|
|
var t = dc / (dc - dn);
|
|
out.push([c[0] + t * (n[0] - c[0]), c[1] + t * (n[1] - c[1])]);
|
|
}
|
|
}
|
|
return out;
|
|
}
|
|
|
|
function computeVoronoi(points, xmin, ymin, xmax, ymax) {
|
|
var cells = [];
|
|
for (var i = 0; i < points.length; i++) {
|
|
var px = points[i][0],
|
|
py = points[i][1];
|
|
var poly = [
|
|
[xmin, ymin],
|
|
[xmax, ymin],
|
|
[xmax, ymax],
|
|
[xmin, ymax],
|
|
];
|
|
for (var j = 0; j < points.length; j++) {
|
|
if (i === j) continue;
|
|
var qx = points[j][0],
|
|
qy = points[j][1];
|
|
var mx = (px + qx) * 0.5,
|
|
my = (py + qy) * 0.5;
|
|
poly = clipPoly(poly, mx, my, qx - px, qy - py);
|
|
if (poly.length < 3) break;
|
|
}
|
|
cells.push(poly.length >= 3 ? poly : null);
|
|
}
|
|
return cells;
|
|
}
|
|
|
|
// ── Feature Detection ──────────────────────────────────────────────
|
|
function canCapture() {
|
|
var tc = document.createElement("canvas");
|
|
if (!("layoutSubtree" in tc)) return false;
|
|
tc.setAttribute("layoutsubtree", "");
|
|
var ctx = tc.getContext("2d");
|
|
return ctx && typeof ctx.drawElementImage === "function";
|
|
}
|
|
var apiOk = canCapture();
|
|
|
|
// ── Capture backdrop ───────────────────────────────────────────────
|
|
var capCanvas = document.getElementById("cap-text");
|
|
var capCtx = capCanvas.getContext("2d");
|
|
var textEl = capCanvas.querySelector(".text-source");
|
|
|
|
function captureBackdrop() {
|
|
capCtx.clearRect(0, 0, W, H);
|
|
if (apiOk) {
|
|
capCtx.drawElementImage(textEl, 0, 0, W, H);
|
|
} else {
|
|
var g = capCtx.createLinearGradient(0, 0, W, H);
|
|
g.addColorStop(0, "#030407");
|
|
g.addColorStop(0.5, "#070910");
|
|
g.addColorStop(1, "#030407");
|
|
capCtx.fillStyle = g;
|
|
capCtx.fillRect(0, 0, W, H);
|
|
capCtx.textAlign = "center";
|
|
capCtx.textBaseline = "middle";
|
|
capCtx.font = "900 172px Inter, system-ui, sans-serif";
|
|
capCtx.shadowColor = "rgba(255,255,255,0.22)";
|
|
capCtx.shadowBlur = 20;
|
|
capCtx.fillStyle = "rgba(248,249,253,0.94)";
|
|
capCtx.fillText("Liquid Glass", W / 2, H / 2 - 80);
|
|
capCtx.fillText("Design", W / 2, H / 2 + 90);
|
|
}
|
|
}
|
|
|
|
// ── Three.js Renderer ──────────────────────────────────────────────
|
|
var theaterCanvas = document.getElementById("theater");
|
|
var renderer = new THREE.WebGLRenderer({
|
|
canvas: theaterCanvas,
|
|
antialias: true,
|
|
alpha: false,
|
|
powerPreference: "high-performance",
|
|
preserveDrawingBuffer: true,
|
|
});
|
|
renderer.setSize(W, H, false);
|
|
renderer.setPixelRatio(1);
|
|
renderer.outputEncoding = THREE.sRGBEncoding;
|
|
renderer.toneMapping = THREE.ACESFilmicToneMapping;
|
|
renderer.toneMappingExposure = 1.08;
|
|
renderer.setClearColor(0x030407, 1);
|
|
|
|
var scene = new THREE.Scene();
|
|
scene.background = new THREE.Color(0x030407);
|
|
|
|
// ── Environment Map (procedural) ───────────────────────────────────
|
|
var envCanvas = document.createElement("canvas");
|
|
envCanvas.width = 1024;
|
|
envCanvas.height = 512;
|
|
var ectx = envCanvas.getContext("2d");
|
|
var eg = ectx.createLinearGradient(0, 0, 1024, 512);
|
|
eg.addColorStop(0, "#020307");
|
|
eg.addColorStop(0.18, "#ffffff");
|
|
eg.addColorStop(0.24, "#7fdcff");
|
|
eg.addColorStop(0.42, "#07101c");
|
|
eg.addColorStop(0.58, "#ffffff");
|
|
eg.addColorStop(0.64, "#ffc4a6");
|
|
eg.addColorStop(0.82, "#0b0c12");
|
|
eg.addColorStop(1, "#020307");
|
|
ectx.fillStyle = eg;
|
|
ectx.fillRect(0, 0, 1024, 512);
|
|
ectx.globalCompositeOperation = "screen";
|
|
var envRng = seededRandom(999);
|
|
for (var ei = 0; ei < 9; ei++) {
|
|
var ey = 36 + ei * 52;
|
|
ectx.fillStyle = "rgba(255,255,255," + (ei % 3 === 0 ? 0.22 : 0.1) + ")";
|
|
ectx.fillRect((ei % 2) * 120, ey, 1024 * 0.72, 4 + (ei % 3) * 2);
|
|
}
|
|
var envTex = new THREE.CanvasTexture(envCanvas);
|
|
envTex.mapping = THREE.EquirectangularReflectionMapping;
|
|
var pmrem = new THREE.PMREMGenerator(renderer);
|
|
var envMap = pmrem.fromEquirectangular(envTex);
|
|
scene.environment = envMap.texture;
|
|
envTex.dispose();
|
|
pmrem.dispose();
|
|
|
|
// ── Camera ─────────────────────────────────────────────────────────
|
|
var CAM_Z = 9.35;
|
|
var camera = new THREE.PerspectiveCamera(34, ASPECT, 0.1, 80);
|
|
camera.position.set(0, 0, CAM_Z);
|
|
|
|
// ── Scene Groups ───────────────────────────────────────────────────
|
|
var rig = new THREE.Group();
|
|
scene.add(rig);
|
|
var textRig = new THREE.Group();
|
|
rig.add(textRig);
|
|
|
|
// ── Backdrop Plane (text behind glass) ─────────────────────────────
|
|
var backdropTex = new THREE.CanvasTexture(capCanvas);
|
|
backdropTex.minFilter = THREE.LinearFilter;
|
|
backdropTex.magFilter = THREE.LinearFilter;
|
|
backdropTex.generateMipmaps = false;
|
|
|
|
function viewportAtZ(z) {
|
|
var d = camera.position.z - z;
|
|
var h = 2 * Math.tan(THREE.MathUtils.degToRad(camera.fov * 0.5)) * d;
|
|
return { w: h * camera.aspect, h: h };
|
|
}
|
|
var vp = viewportAtZ(TEXT_Z);
|
|
var backdropMesh = new THREE.Mesh(
|
|
new THREE.PlaneGeometry(vp.w * 1.18, vp.h * 1.18),
|
|
new THREE.MeshBasicMaterial({ map: backdropTex, depthWrite: true, depthTest: true }),
|
|
);
|
|
backdropMesh.position.z = TEXT_Z;
|
|
backdropMesh.renderOrder = -4;
|
|
textRig.add(backdropMesh);
|
|
|
|
// ── Light Bands ────────────────────────────────────────────────────
|
|
var bandSpecs = [
|
|
[-2.8, 1.45, -1.78, 3.2, 0.035, 0.13, 0x9edaff, 0.24],
|
|
[2.7, -1.24, -1.76, 3.0, 0.032, -0.1, 0xffd1b5, 0.18],
|
|
[0.0, 2.05, -1.82, 5.2, 0.026, 0.02, 0xffffff, 0.13],
|
|
[-0.55, -1.92, -1.8, 4.2, 0.024, -0.03, 0xc7f6ff, 0.1],
|
|
];
|
|
bandSpecs.forEach(function (s) {
|
|
var m = new THREE.Mesh(
|
|
new THREE.PlaneGeometry(s[3], s[4]),
|
|
new THREE.MeshBasicMaterial({
|
|
color: s[6],
|
|
transparent: true,
|
|
opacity: s[7],
|
|
blending: THREE.AdditiveBlending,
|
|
depthWrite: false,
|
|
}),
|
|
);
|
|
m.position.set(s[0], s[1], s[2]);
|
|
m.rotation.z = s[5];
|
|
rig.add(m);
|
|
});
|
|
|
|
// ── Glass Shards (Voronoi fracture) ────────────────────────────────
|
|
var LAYOUT = { width: 9.7, height: 5.78, cols: 9, rows: 6, seed: 5297 };
|
|
var rng = seededRandom(LAYOUT.seed);
|
|
var seedPoints = [];
|
|
var cw = LAYOUT.width / LAYOUT.cols,
|
|
ch = LAYOUT.height / LAYOUT.rows;
|
|
|
|
for (var row = 0; row < LAYOUT.rows; row++) {
|
|
for (var col = 0; col < LAYOUT.cols; col++) {
|
|
var cp =
|
|
1 -
|
|
Math.min(
|
|
0.62,
|
|
Math.hypot((col + 0.5) / LAYOUT.cols - 0.5, (row + 0.5) / LAYOUT.rows - 0.5),
|
|
);
|
|
var jx = (rng() - 0.5) * cw * (0.58 + cp * 0.16);
|
|
var jy = (rng() - 0.5) * ch * (0.58 + cp * 0.16);
|
|
seedPoints.push([(col + 0.5) * cw + jx, (row + 0.5) * ch + jy]);
|
|
}
|
|
}
|
|
|
|
var voronoiCells = computeVoronoi(seedPoints, 0, 0, LAYOUT.width, LAYOUT.height);
|
|
|
|
var glassRig = new THREE.Group();
|
|
glassRig.scale.setScalar(1.025);
|
|
glassRig.position.set(0, 0, 0.08);
|
|
rig.add(glassRig);
|
|
|
|
var panes = [];
|
|
var GAP_SCALE = 0.954;
|
|
|
|
for (var pi = 0; pi < voronoiCells.length; pi++) {
|
|
var cell = voronoiCells[pi];
|
|
if (!cell || cell.length < 3) continue;
|
|
|
|
var worldPts = cell.map(function (p) {
|
|
return [p[0] - LAYOUT.width / 2, LAYOUT.height / 2 - p[1]];
|
|
});
|
|
var area = Math.abs(polygonArea(worldPts));
|
|
if (area < 0.034) continue;
|
|
|
|
var cent = polygonCentroid(worldPts);
|
|
var rad = new THREE.Vector2(cent.x, cent.y);
|
|
var radLen = Math.max(rad.length(), 0.001);
|
|
rad.divideScalar(radLen);
|
|
|
|
var localPts = worldPts.map(function (p) {
|
|
return [(p[0] - cent.x) * GAP_SCALE, (p[1] - cent.y) * GAP_SCALE];
|
|
});
|
|
var outward = 0.046 + rng() * 0.105;
|
|
var depthLift = (area / (LAYOUT.width * LAYOUT.height)) * 1.42;
|
|
var phase = pi * 0.71 + rng() * 4;
|
|
var depth = 0.18 + rng() * 0.1;
|
|
var bevel = Math.min(0.108, Math.sqrt(area) * 0.095);
|
|
var roughness = pi % 7 === 0 ? 0.08 + rng() * 0.035 : 0.012 + rng() * 0.038;
|
|
var thickness = 1.45 + rng() * 1.25;
|
|
|
|
// Geometry
|
|
var shape = new THREE.Shape();
|
|
localPts.forEach(function (p, idx) {
|
|
idx === 0 ? shape.moveTo(p[0], p[1]) : shape.lineTo(p[0], p[1]);
|
|
});
|
|
shape.closePath();
|
|
var geo = new THREE.ExtrudeGeometry(shape, {
|
|
depth: depth,
|
|
bevelEnabled: true,
|
|
bevelThickness: bevel,
|
|
bevelSize: bevel,
|
|
bevelSegments: 9,
|
|
curveSegments: 2,
|
|
steps: 2,
|
|
});
|
|
geo.center();
|
|
geo.computeVertexNormals();
|
|
|
|
// Material
|
|
var mat = new THREE.MeshPhysicalMaterial({
|
|
color: 0xf7fbff,
|
|
metalness: 0,
|
|
roughness: roughness,
|
|
transmission: 1,
|
|
thickness: thickness,
|
|
ior: 1.55,
|
|
attenuationColor: new THREE.Color(0xe5f8ff),
|
|
attenuationDistance: 12,
|
|
clearcoat: 1,
|
|
clearcoatRoughness: Math.min(0.12, roughness + 0.035),
|
|
specularIntensity: 1,
|
|
envMapIntensity: 2.1,
|
|
transparent: true,
|
|
opacity: 0.76,
|
|
side: THREE.DoubleSide,
|
|
});
|
|
|
|
var pane = new THREE.Group();
|
|
var mesh = new THREE.Mesh(geo, mat);
|
|
mesh.renderOrder = 4 + pi;
|
|
pane.add(mesh);
|
|
|
|
// Edge highlights (white + cyan + pink for chromatic aberration look)
|
|
var edgeGeo = new THREE.EdgesGeometry(geo, 18);
|
|
var whiteEdge = new THREE.LineSegments(
|
|
edgeGeo,
|
|
new THREE.LineBasicMaterial({
|
|
color: 0xffffff,
|
|
transparent: true,
|
|
opacity: roughness > 0.08 ? 0.32 : 0.44,
|
|
blending: THREE.AdditiveBlending,
|
|
depthWrite: false,
|
|
}),
|
|
);
|
|
pane.add(whiteEdge);
|
|
var cyanEdge = new THREE.LineSegments(
|
|
edgeGeo.clone(),
|
|
new THREE.LineBasicMaterial({
|
|
color: 0x72e8ff,
|
|
transparent: true,
|
|
opacity: 0.18,
|
|
blending: THREE.AdditiveBlending,
|
|
depthWrite: false,
|
|
}),
|
|
);
|
|
cyanEdge.position.set(0.008, -0.002, -0.008);
|
|
pane.add(cyanEdge);
|
|
var pinkEdge = new THREE.LineSegments(
|
|
edgeGeo.clone(),
|
|
new THREE.LineBasicMaterial({
|
|
color: 0xff6f8d,
|
|
transparent: true,
|
|
opacity: 0.14,
|
|
blending: THREE.AdditiveBlending,
|
|
depthWrite: false,
|
|
}),
|
|
);
|
|
pinkEdge.position.set(-0.009, 0.003, 0.006);
|
|
pane.add(pinkEdge);
|
|
|
|
var basePos = new THREE.Vector3(
|
|
cent.x + rad.x * outward,
|
|
cent.y + rad.y * outward,
|
|
0.28 + depthLift + rng() * 0.18,
|
|
);
|
|
var baseRot = new THREE.Euler(
|
|
(rng() - 0.5) * 0.074,
|
|
(rng() - 0.5) * 0.086,
|
|
(rng() - 0.5) * 0.052,
|
|
);
|
|
pane.position.copy(basePos);
|
|
pane.rotation.copy(baseRot);
|
|
|
|
pane.userData = {
|
|
basePos: basePos.clone(),
|
|
baseRot: { x: baseRot.x, y: baseRot.y, z: baseRot.z },
|
|
phase: phase,
|
|
speed: 0.28 + rng() * 0.16,
|
|
drift: new THREE.Vector3(
|
|
0.02 + rng() * 0.026,
|
|
0.018 + rng() * 0.024,
|
|
0.068 + rng() * 0.092,
|
|
),
|
|
rotDrift: new THREE.Vector3(
|
|
0.016 + rng() * 0.026,
|
|
0.018 + rng() * 0.03,
|
|
0.008 + rng() * 0.016,
|
|
),
|
|
ptrWeight: 0.04 + rng() * 0.052,
|
|
rad: rad.clone(),
|
|
baseOpacity: 0.76,
|
|
baseRoughness: roughness,
|
|
glassMat: mat,
|
|
edgeW: whiteEdge.material,
|
|
edgeC: cyanEdge.material,
|
|
edgeP: pinkEdge.material,
|
|
edgeWBase: whiteEdge.material.opacity,
|
|
edgeCBase: cyanEdge.material.opacity,
|
|
edgePBase: pinkEdge.material.opacity,
|
|
};
|
|
|
|
panes.push(pane);
|
|
glassRig.add(pane);
|
|
}
|
|
|
|
// ── Lighting ───────────────────────────────────────────────────────
|
|
scene.add(new THREE.HemisphereLight(0xe8f0ff, 0x07040b, 1.1));
|
|
var keyLight = new THREE.DirectionalLight(0xffffff, 3.4);
|
|
keyLight.position.set(-3.8, 4.4, 5.6);
|
|
scene.add(keyLight);
|
|
var edgeLight = new THREE.PointLight(0x8bdcff, 14, 12);
|
|
edgeLight.position.set(3.1, 1.4, 3.4);
|
|
scene.add(edgeLight);
|
|
var warmLight = new THREE.PointLight(0xffc8a8, 7, 12);
|
|
warmLight.position.set(-4.4, -2.2, 3.2);
|
|
scene.add(warmLight);
|
|
|
|
// ── Post-Processing ────────────────────────────────────────────────
|
|
var GrainShader = {
|
|
uniforms: { tDiffuse: { value: null }, time: { value: 0 }, strength: { value: 0.024 } },
|
|
vertexShader:
|
|
"varying vec2 vUv; void main(){ vUv=uv; gl_Position=projectionMatrix*modelViewMatrix*vec4(position,1.0); }",
|
|
fragmentShader: [
|
|
"uniform sampler2D tDiffuse; uniform float time; uniform float strength; varying vec2 vUv;",
|
|
"float n(vec2 v){ return fract(sin(dot(v+time,vec2(12.9898,78.233)))*43758.5453); }",
|
|
"void main(){",
|
|
" vec4 c=texture2D(tDiffuse,vUv);",
|
|
" c.rgb+=(n(vUv*vec2(1520.0,940.0))-0.5)*strength;",
|
|
" c.rgb=pow(max(c.rgb,vec3(0.0)),vec3(0.985));",
|
|
" gl_FragColor=c;",
|
|
"}",
|
|
].join("\n"),
|
|
};
|
|
|
|
var composer = new THREE.EffectComposer(renderer);
|
|
composer.addPass(new THREE.RenderPass(scene, camera));
|
|
var bloomPass = new THREE.UnrealBloomPass(new THREE.Vector2(W, H), 0.32, 0.4, 0.86);
|
|
composer.addPass(bloomPass);
|
|
var grainPass = new THREE.ShaderPass(GrainShader);
|
|
composer.addPass(grainPass);
|
|
|
|
// ── Pointer State (GSAP-animated, replaces mouse) ──────────────────
|
|
var ptr = { x: 0.16, y: 0.04 };
|
|
var REVEAL_R = 2.18;
|
|
var PTR_WORLD = new THREE.Vector2();
|
|
|
|
function updatePtrWorld() {
|
|
PTR_WORLD.set(ptr.x * 4.86, ptr.y * 2.84);
|
|
}
|
|
|
|
// ── Render Function (deterministic, seekable) ──────────────────────
|
|
function renderScene(elapsed) {
|
|
updatePtrWorld();
|
|
|
|
camera.position.x = ptr.x * 0.38;
|
|
camera.position.y = -ptr.y * 0.27;
|
|
camera.position.z = CAM_Z;
|
|
camera.lookAt(0, 0, 0);
|
|
|
|
textRig.position.x = -ptr.x * 0.56;
|
|
textRig.position.y = ptr.y * 0.36;
|
|
textRig.position.z = Math.sin(elapsed * 0.28) * 0.018;
|
|
textRig.rotation.x = ptr.y * 0.028;
|
|
textRig.rotation.y = ptr.x * 0.042;
|
|
|
|
glassRig.rotation.x = -ptr.y * 0.064;
|
|
glassRig.rotation.y = ptr.x * 0.078;
|
|
|
|
edgeLight.position.x = 3.1 + ptr.x * 0.9;
|
|
edgeLight.position.y = 1.4 + ptr.y * 0.55;
|
|
warmLight.position.x = -4.4 - ptr.x * 0.65;
|
|
|
|
for (var i = 0; i < panes.length; i++) {
|
|
var pane = panes[i];
|
|
var d = pane.userData;
|
|
var t = elapsed * d.speed + d.phase;
|
|
var ptrDist = PTR_WORLD.distanceTo(new THREE.Vector2(d.basePos.x, d.basePos.y));
|
|
var reveal = Math.pow(Math.max(0, 1 - ptrDist / REVEAL_R), 2);
|
|
var shatter = reveal * 0.36;
|
|
var awayX = d.basePos.x - PTR_WORLD.x;
|
|
var awayY = d.basePos.y - PTR_WORLD.y;
|
|
var awayLen = Math.max(Math.hypot(awayX, awayY), 0.001);
|
|
var revealSpread = reveal * 0.24;
|
|
var shatterSpread = shatter * 0.68;
|
|
var pSlide = d.ptrWeight * 1.9;
|
|
|
|
pane.position.x =
|
|
d.basePos.x +
|
|
Math.sin(t * 0.42) * d.drift.x +
|
|
ptr.x * pSlide +
|
|
(awayX / awayLen) * (revealSpread + shatterSpread);
|
|
pane.position.y =
|
|
d.basePos.y +
|
|
Math.cos(t * 0.38) * d.drift.y -
|
|
ptr.y * pSlide * 0.72 +
|
|
(awayY / awayLen) * (revealSpread + shatterSpread * 0.84);
|
|
pane.position.z =
|
|
d.basePos.z + Math.sin(t * 0.52 + i) * d.drift.z + reveal * 0.32 + shatter * 0.74;
|
|
|
|
pane.rotation.x =
|
|
d.baseRot.x +
|
|
Math.sin(t * 0.46) * d.rotDrift.x -
|
|
ptr.y * d.ptrWeight * 1.15 +
|
|
reveal * (awayY / awayLen) * 0.16 +
|
|
shatter * (awayY / awayLen) * 0.58;
|
|
pane.rotation.y =
|
|
d.baseRot.y +
|
|
Math.cos(t * 0.43) * d.rotDrift.y +
|
|
ptr.x * d.ptrWeight * 1.38 -
|
|
reveal * (awayX / awayLen) * 0.2 -
|
|
shatter * (awayX / awayLen) * 0.66;
|
|
pane.rotation.z =
|
|
d.baseRot.z +
|
|
Math.sin(t * 0.34) * d.rotDrift.z +
|
|
reveal * Math.sin(t + i) * 0.028 +
|
|
shatter * (d.rad.x * awayY - d.rad.y * awayX) * 0.18;
|
|
|
|
d.glassMat.opacity = d.baseOpacity + shatter * 0.14;
|
|
d.glassMat.roughness = Math.min(0.14, d.baseRoughness + shatter * 0.048);
|
|
d.edgeW.opacity = d.edgeWBase + shatter * 0.34;
|
|
d.edgeC.opacity = d.edgeCBase + shatter * 0.22;
|
|
d.edgeP.opacity = d.edgePBase + shatter * 0.2;
|
|
}
|
|
|
|
grainPass.uniforms.time.value = elapsed;
|
|
composer.render();
|
|
}
|
|
|
|
// ── GSAP Timeline ──────────────────────────────────────────────────
|
|
window.__timelines = window.__timelines || {};
|
|
var tl = gsap.timeline({ paused: true });
|
|
|
|
tl.to({ _: 0 }, { _: 1, duration: DURATION, ease: "none" }, 0);
|
|
|
|
// Pointer choreography — smooth wandering reveal
|
|
tl.set(ptr, { x: 0.16, y: 0.04 }, 0);
|
|
tl.to(ptr, { x: 0.45, y: -0.15, duration: 3.5, ease: "sine.inOut" }, 0.5);
|
|
tl.to(ptr, { x: -0.35, y: 0.25, duration: 3.5, ease: "sine.inOut" }, 4);
|
|
tl.to(ptr, { x: 0.15, y: -0.35, duration: 3, ease: "sine.inOut" }, 7.5);
|
|
tl.to(ptr, { x: -0.45, y: 0.05, duration: 3, ease: "sine.inOut" }, 10.5);
|
|
tl.to(ptr, { x: 0.3, y: 0.2, duration: 3, ease: "sine.inOut" }, 13.5);
|
|
tl.to(ptr, { x: -0.1, y: -0.1, duration: 2.5, ease: "sine.inOut" }, 16.5);
|
|
tl.to(ptr, { x: 0.16, y: 0.04, duration: 1, ease: "power2.inOut" }, 19);
|
|
|
|
tl.eventCallback("onUpdate", function () {
|
|
renderScene(tl.time());
|
|
});
|
|
|
|
window.__timelines["liquid-glass"] = tl;
|
|
|
|
setTimeout(function () {
|
|
captureBackdrop();
|
|
backdropTex.needsUpdate = true;
|
|
tl.seek(0);
|
|
}, 0);
|
|
</script>
|
|
</body>
|
|
</html>
|