mirror of
https://github.com/heygen-com/hyperframes.git
synced 2026-09-12 23:29:50 +00:00
feat(registry): add VFX and Captions block categories
Add 12 new registry blocks across two new categories: **VFX Blocks (7):** - vfx-text-cursor: dramatic text reveal with cursor glow and chromatic shadows - vfx-liquid-background: organic liquid simulation with vertex displacement - vfx-iphone-device: real GLTF iPhone + MacBook with live HTML screens - vfx-magnetic: magnetic field particle visualization - vfx-portal: dimension breach portal transition - vfx-liquid-glass: Voronoi glass fracture with parallax reveal - vfx-shatter: glass shatter with physics-driven fragments **Caption Blocks (5):** - captions-slam: bold uppercase scale-pop with back.out overshoot - captions-karaoke: word-by-word color reveal on frosted glass pill - captions-minimal: clean Netflix-subtitle style fade - captions-bounce: playful elastic bounce with colorful word pills - captions-cinematic: elegant slow fade with letter-spacing animation All blocks include registry-item.json and are registered in registry.json. VFX blocks use experimental stability, caption blocks use stable.
This commit is contained in:
Miguel Ángel
@@ -0,0 +1,14 @@
|
||||
{
|
||||
"$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
|
||||
"name": "vfx-liquid-glass",
|
||||
"type": "hyperframes:block",
|
||||
"title": "Liquid Glass",
|
||||
"description": "VFX composition block",
|
||||
"stability": "experimental",
|
||||
"dimensions": { "width": 1920, "height": 1080 },
|
||||
"duration": 20,
|
||||
"tags": ["vfx", "html-in-canvas", "webgl"],
|
||||
"files": [
|
||||
{ "path": "vfx-liquid-glass.html", "target": "compositions/vfx-liquid-glass.html", "type": "hyperframes:composition" }
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,518 @@
|
||||
<!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: grid;
|
||||
place-items: center;
|
||||
background: linear-gradient(180deg, #030407 0%, #070910 52%, #030407 100%);
|
||||
text-align: center;
|
||||
padding: 0 60px;
|
||||
}
|
||||
.text-source h1 {
|
||||
font-size: 172px;
|
||||
font-weight: 900;
|
||||
line-height: 0.88;
|
||||
color: rgba(248, 249, 253, 0.96);
|
||||
text-shadow: 0 0 40px rgba(255, 255, 255, 0.22);
|
||||
letter-spacing: -4px;
|
||||
max-width: 1600px;
|
||||
}
|
||||
</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">
|
||||
<h1>Liquid Glass Design</h1>
|
||||
</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>
|
||||
Reference in New Issue
Block a user