mirror of
https://github.com/heygen-com/hyperframes.git
synced 2026-09-12 15:20:13 +00:00
This reverts commit 3b53bfd2f7.
This commit is contained in:
Miguel Ángel
@@ -3,21 +3,40 @@ title: "Magnetic"
|
||||
description: "VFX composition block"
|
||||
---
|
||||
|
||||
import { InstallCommand } from "/snippets/install-command.jsx";
|
||||
|
||||
<iframe src="/public/catalog/preview/blocks/vfx-magnetic.html" className="w-full aspect-video rounded-xl border border-zinc-200 dark:border-zinc-800" loading="lazy" title="Magnetic preview" />
|
||||
<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/vfx-magnetic.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/vfx-magnetic.png" autoPlay muted loop playsInline />
|
||||
|
||||
## Install
|
||||
|
||||
<InstallCommand command="npx hyperframes add vfx-magnetic" />
|
||||
```bash Terminal
|
||||
npx hyperframes add vfx-magnetic
|
||||
```
|
||||
|
||||
That writes one file: `compositions/vfx-magnetic.html`.
|
||||
|
||||
<Danger>
|
||||
<Warning>
|
||||
Live preview needs the `chrome://flags/#canvas-draw-element` flag switched on.
|
||||
Without it this item's screen renders black. Rendering from the CLI switches
|
||||
it on for you. [How it works](/guides/html-in-canvas)
|
||||
</Danger>
|
||||
Rendering from the CLI switches it on for you. [How it
|
||||
works](/guides/html-in-canvas)
|
||||
</Warning>
|
||||
|
||||
## Add it to your video
|
||||
|
||||
It runs for 15 seconds at 1920×1080. Paste this into your composition:
|
||||
|
||||
```html index.html
|
||||
<div
|
||||
data-composition-id="vfx-magnetic"
|
||||
data-composition-src="compositions/vfx-magnetic.html"
|
||||
data-start="0"
|
||||
data-duration="15"
|
||||
data-track-index="1"
|
||||
data-width="1920"
|
||||
data-height="1080"
|
||||
></div>
|
||||
```
|
||||
|
||||
Move it in time with `data-start`. Put it on a different timeline row with
|
||||
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
|
||||
|
||||
## Change the colors
|
||||
|
||||
@@ -26,487 +45,6 @@ Set these CSS variables on the block:
|
||||
- `--bg-color` — Background. Defaults to `#0c0c0c`.
|
||||
- `--text-color` — Text color. Defaults to `#e8e8e8`.
|
||||
|
||||
## Source
|
||||
|
||||
<Accordion title={`vfx-magnetic.html`}>
|
||||
|
||||
```html
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=1920, height=1080" />
|
||||
<title>Magnetic Cursor — HTML-in-Canvas</title>
|
||||
<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
|
||||
<style>
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
body {
|
||||
background: #0c0c0c;
|
||||
overflow: hidden;
|
||||
font-family:
|
||||
system-ui,
|
||||
-apple-system,
|
||||
sans-serif;
|
||||
color: #e8e8e8;
|
||||
}
|
||||
#root {
|
||||
position: relative;
|
||||
width: 1920px;
|
||||
height: 1080px;
|
||||
overflow: hidden;
|
||||
background: #0c0c0c;
|
||||
}
|
||||
canvas {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.page-content {
|
||||
width: 1920px;
|
||||
height: 1080px;
|
||||
overflow: hidden;
|
||||
font-family:
|
||||
system-ui,
|
||||
-apple-system,
|
||||
sans-serif;
|
||||
color: #e8e8e8;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.page-inner {
|
||||
max-width: 900px;
|
||||
padding: 0 48px;
|
||||
}
|
||||
.heading {
|
||||
font-size: 64px;
|
||||
font-weight: 700;
|
||||
line-height: 1.15;
|
||||
letter-spacing: -0.03em;
|
||||
color: #f0f0f0;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
.heading em {
|
||||
font-style: normal;
|
||||
color: #70c7ed;
|
||||
}
|
||||
.body-text {
|
||||
font-size: 22px;
|
||||
line-height: 1.7;
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
.body-text:last-of-type {
|
||||
margin-bottom: 48px;
|
||||
}
|
||||
.hint {
|
||||
font-size: 15px;
|
||||
color: rgba(255, 255, 255, 0.3);
|
||||
font-family: ui-monospace, "SF Mono", monospace;
|
||||
margin-bottom: 48px;
|
||||
letter-spacing: 0.02em;
|
||||
}
|
||||
.card-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 20px;
|
||||
}
|
||||
.card {
|
||||
background: rgba(255, 255, 255, 0.04);
|
||||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||
border-radius: 14px;
|
||||
padding: 24px;
|
||||
}
|
||||
.card-icon {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 10px;
|
||||
margin-bottom: 14px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 20px;
|
||||
background: rgba(112, 199, 237, 0.12);
|
||||
}
|
||||
.card-title {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: rgba(255, 255, 255, 0.85);
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.card-desc {
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
color: rgba(255, 255, 255, 0.4);
|
||||
}
|
||||
|
||||
/* Subtitles */
|
||||
.subtitle-bar {
|
||||
position: absolute;
|
||||
bottom: 60px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
z-index: 10;
|
||||
pointer-events: none;
|
||||
}
|
||||
.subtitle {
|
||||
font-size: 28px;
|
||||
font-weight: 500;
|
||||
color: white;
|
||||
text-align: center;
|
||||
background: rgba(0, 0, 0, 0.7);
|
||||
padding: 12px 32px;
|
||||
border-radius: 8px;
|
||||
backdrop-filter: blur(8px);
|
||||
white-space: nowrap;
|
||||
opacity: 0;
|
||||
font-family:
|
||||
system-ui,
|
||||
-apple-system,
|
||||
sans-serif;
|
||||
}
|
||||
|
||||
/* Cursor dot */
|
||||
.cursor-dot {
|
||||
position: absolute;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-radius: 50%;
|
||||
background: rgba(112, 199, 237, 0.8);
|
||||
box-shadow:
|
||||
0 0 20px rgba(112, 199, 237, 0.5),
|
||||
0 0 40px rgba(112, 199, 237, 0.3);
|
||||
z-index: 10;
|
||||
pointer-events: none;
|
||||
transform: translate(-50%, -50%);
|
||||
opacity: 0;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div
|
||||
id="root"
|
||||
data-composition-id="magnetic-cursor"
|
||||
data-width="1920"
|
||||
data-height="1080"
|
||||
data-start="0"
|
||||
data-duration="15"
|
||||
data-root="true"
|
||||
>
|
||||
<canvas
|
||||
id="gl-canvas"
|
||||
layoutsubtree
|
||||
width="1920"
|
||||
height="1080"
|
||||
style="position: absolute; top: 0; left: 0; width: 1920px; height: 1080px"
|
||||
>
|
||||
<div class="page-content" id="content" style="width: 1920px; height: 1080px">
|
||||
<div class="page-inner">
|
||||
<h1 class="heading">Pixels bend toward<br />your <em>cursor</em></h1>
|
||||
<p class="body-text">
|
||||
Move your mouse across this page. Every pixel is drawn through a WebGL shader that
|
||||
warps space toward your cursor position, like a magnet pulling iron filings beneath a
|
||||
thin rubber sheet.
|
||||
</p>
|
||||
<p class="body-text">
|
||||
The distortion follows a Gaussian falloff — strong at close range, tapering smoothly
|
||||
to nothing. The text remains readable even under deformation.
|
||||
</p>
|
||||
<p class="hint">HTML-in-Canvas API + WebGL2 shader distortion</p>
|
||||
<div class="card-grid">
|
||||
<div class="card">
|
||||
<div class="card-icon">⚡</div>
|
||||
<div class="card-title">Real-time</div>
|
||||
<div class="card-desc">
|
||||
60fps distortion on live DOM content via texElementImage2D
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-icon">🔌</div>
|
||||
<div class="card-title">Native API</div>
|
||||
<div class="card-desc">
|
||||
No html2canvas. Browser's own rasterizer at full fidelity.
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-icon">🎨</div>
|
||||
<div class="card-title">GPU Shaders</div>
|
||||
<div class="card-desc">
|
||||
Gaussian warp + chromatic aberration in one fragment shader pass.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</canvas>
|
||||
|
||||
<!-- Visible cursor dot -->
|
||||
<div class="cursor-dot" id="cursor-dot"></div>
|
||||
|
||||
<!-- Subtitles -->
|
||||
<div class="subtitle-bar">
|
||||
<div class="subtitle" id="sub1">
|
||||
The HTML-in-Canvas API renders live DOM as a WebGL texture
|
||||
</div>
|
||||
<div class="subtitle" id="sub2">A magnetic shader warps every pixel toward the cursor</div>
|
||||
<div class="subtitle" id="sub3">
|
||||
Chromatic aberration splits RGB channels at the distortion site
|
||||
</div>
|
||||
<div class="subtitle" id="sub4">
|
||||
Impossible without native drawElementImage — no polyfill exists
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
id="driver"
|
||||
class="clip"
|
||||
data-start="0"
|
||||
data-duration="15"
|
||||
data-track-index="0"
|
||||
style="position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none"
|
||||
></div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
var W = 1920,
|
||||
H = 1080;
|
||||
var canvas = document.getElementById("gl-canvas");
|
||||
var content = document.getElementById("content");
|
||||
var cursorDot = document.getElementById("cursor-dot");
|
||||
|
||||
function isSupported() {
|
||||
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";
|
||||
}
|
||||
|
||||
// ── WebGL2 Setup ─────────────────────────────────────────────────
|
||||
var gl = canvas.getContext("webgl2", { alpha: false, preserveDrawingBuffer: true });
|
||||
|
||||
function compile(type, src) {
|
||||
var s = gl.createShader(type);
|
||||
gl.shaderSource(s, src);
|
||||
gl.compileShader(s);
|
||||
if (!gl.getShaderParameter(s, gl.COMPILE_STATUS)) console.error(gl.getShaderInfoLog(s));
|
||||
return s;
|
||||
}
|
||||
function link(vsSrc, fsSrc) {
|
||||
var p = gl.createProgram();
|
||||
gl.attachShader(p, compile(gl.VERTEX_SHADER, vsSrc));
|
||||
gl.attachShader(p, compile(gl.FRAGMENT_SHADER, fsSrc));
|
||||
gl.linkProgram(p);
|
||||
return p;
|
||||
}
|
||||
|
||||
var VS = [
|
||||
"#version 300 es",
|
||||
"in vec2 a_pos;",
|
||||
"out vec2 v_uv;",
|
||||
"void main() {",
|
||||
" v_uv = vec2(a_pos.x * 0.5 + 0.5, 0.5 - a_pos.y * 0.5);",
|
||||
" gl_Position = vec4(a_pos, 0.0, 1.0);",
|
||||
"}",
|
||||
].join("\n");
|
||||
|
||||
var FS = [
|
||||
"#version 300 es",
|
||||
"precision highp float;",
|
||||
"in vec2 v_uv;",
|
||||
"out vec4 fragColor;",
|
||||
"uniform sampler2D u_content;",
|
||||
"uniform vec2 u_mouse;",
|
||||
"uniform vec2 u_resolution;",
|
||||
"uniform float u_repel;",
|
||||
"uniform float u_strength;",
|
||||
"",
|
||||
"void main() {",
|
||||
" vec2 uv = v_uv;",
|
||||
" float aspect = u_resolution.x / u_resolution.y;",
|
||||
" vec2 delta = u_mouse - uv;",
|
||||
" vec2 aspectDelta = delta * vec2(aspect, 1.0);",
|
||||
" float dist = length(aspectDelta);",
|
||||
" float strength = exp(-dist * dist * 20.0) * 0.04 * u_strength;",
|
||||
" float direction = mix(1.0, -1.0, u_repel);",
|
||||
" vec2 displaced = uv + delta * strength * direction;",
|
||||
" displaced = clamp(displaced, vec2(0.0), vec2(1.0));",
|
||||
" float aberration = strength * 0.6;",
|
||||
" vec2 aberDir = normalize(delta + 0.0001) * aberration;",
|
||||
" float r = texture(u_content, displaced + aberDir * 0.3).r;",
|
||||
" float g = texture(u_content, displaced).g;",
|
||||
" float b = texture(u_content, displaced - aberDir * 0.3).b;",
|
||||
" fragColor = vec4(r, g, b, 1.0);",
|
||||
"}",
|
||||
].join("\n");
|
||||
|
||||
var prog = link(VS, FS);
|
||||
|
||||
// Quad
|
||||
var vao = gl.createVertexArray();
|
||||
gl.bindVertexArray(vao);
|
||||
var buf = gl.createBuffer();
|
||||
gl.bindBuffer(gl.ARRAY_BUFFER, buf);
|
||||
gl.bufferData(
|
||||
gl.ARRAY_BUFFER,
|
||||
new Float32Array([-1, -1, 1, -1, -1, 1, 1, 1]),
|
||||
gl.STATIC_DRAW,
|
||||
);
|
||||
var aPos = gl.getAttribLocation(prog, "a_pos");
|
||||
gl.enableVertexAttribArray(aPos);
|
||||
gl.vertexAttribPointer(aPos, 2, gl.FLOAT, false, 0, 0);
|
||||
|
||||
// Texture
|
||||
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);
|
||||
|
||||
// Uniforms
|
||||
gl.useProgram(prog);
|
||||
var U = {};
|
||||
["u_content", "u_mouse", "u_resolution", "u_repel", "u_strength"].forEach(function (n) {
|
||||
U[n] = gl.getUniformLocation(prog, n);
|
||||
});
|
||||
|
||||
// ── Capture + Render ─────────────────────────────────────────────
|
||||
var captured = false;
|
||||
|
||||
function captureContent() {
|
||||
if (!isSupported()) return;
|
||||
gl.bindTexture(gl.TEXTURE_2D, tex);
|
||||
gl.texElementImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, content);
|
||||
captured = true;
|
||||
}
|
||||
|
||||
// Also support drawElementImage fallback via 2D context capture
|
||||
function captureVia2D() {
|
||||
var tc = document.createElement("canvas");
|
||||
tc.setAttribute("layoutsubtree", "");
|
||||
tc.width = W;
|
||||
tc.height = H;
|
||||
// Can't use drawElementImage from a different canvas — skip fallback
|
||||
}
|
||||
|
||||
function render(mouseX, mouseY, repel, strength) {
|
||||
gl.viewport(0, 0, W, H);
|
||||
gl.useProgram(prog);
|
||||
gl.bindVertexArray(vao);
|
||||
gl.activeTexture(gl.TEXTURE0);
|
||||
gl.bindTexture(gl.TEXTURE_2D, tex);
|
||||
gl.uniform1i(U.u_content, 0);
|
||||
gl.uniform2f(U.u_mouse, mouseX, mouseY);
|
||||
gl.uniform2f(U.u_resolution, W, H);
|
||||
gl.uniform1f(U.u_repel, repel);
|
||||
gl.uniform1f(U.u_strength, strength);
|
||||
gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
|
||||
}
|
||||
|
||||
// ── Animation State ──────────────────────────────────────────────
|
||||
var S = {
|
||||
mouseX: 0.5,
|
||||
mouseY: 0.5,
|
||||
repel: 0,
|
||||
strength: 0,
|
||||
progress: 0,
|
||||
};
|
||||
|
||||
// ── GSAP Timeline ────────────────────────────────────────────────
|
||||
window.__timelines = window.__timelines || {};
|
||||
var tl = gsap.timeline({ paused: true });
|
||||
|
||||
// Driver tween
|
||||
tl.to(
|
||||
S,
|
||||
{
|
||||
progress: 1,
|
||||
duration: 15,
|
||||
ease: "none",
|
||||
onUpdate: function () {
|
||||
// Update cursor dot position
|
||||
cursorDot.style.left = S.mouseX * W + "px";
|
||||
cursorDot.style.top = S.mouseY * H + "px";
|
||||
render(S.mouseX, S.mouseY, S.repel, S.strength);
|
||||
},
|
||||
},
|
||||
0,
|
||||
);
|
||||
|
||||
// Cursor appears
|
||||
tl.to(cursorDot, { opacity: 1, duration: 0.3 }, 0.5);
|
||||
tl.to(S, { strength: 1, duration: 0.5, ease: "power2.out" }, 0.5);
|
||||
|
||||
// Cursor path: smooth figure-8 across the page
|
||||
// Phase 1: sweep across heading
|
||||
tl.to(S, { mouseX: 0.35, mouseY: 0.3, duration: 2, ease: "power1.inOut" }, 1);
|
||||
tl.to(S, { mouseX: 0.6, mouseY: 0.35, duration: 2, ease: "power1.inOut" }, 3);
|
||||
|
||||
// Phase 2: circle around text
|
||||
tl.to(S, { mouseX: 0.4, mouseY: 0.5, duration: 1.5, ease: "sine.inOut" }, 5);
|
||||
tl.to(S, { mouseX: 0.55, mouseY: 0.55, duration: 1.5, ease: "sine.inOut" }, 6.5);
|
||||
|
||||
// Phase 3: repel pulse
|
||||
tl.to(S, { repel: 1, duration: 0.2, ease: "power4.out" }, 8);
|
||||
tl.to(S, { repel: 0, duration: 0.5, ease: "power2.out" }, 8.5);
|
||||
|
||||
// Phase 4: sweep across cards
|
||||
tl.to(S, { mouseX: 0.3, mouseY: 0.75, duration: 2, ease: "power1.inOut" }, 9);
|
||||
tl.to(S, { mouseX: 0.65, mouseY: 0.72, duration: 2, ease: "power1.inOut" }, 11);
|
||||
|
||||
// Phase 5: exit
|
||||
tl.to(S, { mouseX: 0.8, mouseY: 0.2, duration: 1.5, ease: "power2.inOut" }, 13);
|
||||
tl.to(S, { strength: 0, duration: 0.5 }, 14);
|
||||
tl.to(cursorDot, { opacity: 0, duration: 0.3 }, 14.2);
|
||||
|
||||
// Subtitles
|
||||
tl.to("#sub1", { opacity: 1, duration: 0.3 }, 1);
|
||||
tl.to("#sub1", { opacity: 0, duration: 0.3 }, 3.5);
|
||||
tl.to("#sub2", { opacity: 1, duration: 0.3 }, 4);
|
||||
tl.to("#sub2", { opacity: 0, duration: 0.3 }, 6.5);
|
||||
tl.to("#sub3", { opacity: 1, duration: 0.3 }, 7.5);
|
||||
tl.to("#sub3", { opacity: 0, duration: 0.3 }, 9.5);
|
||||
tl.to("#sub4", { opacity: 1, duration: 0.3 }, 10.5);
|
||||
tl.to("#sub4", { opacity: 0, duration: 0.3 }, 13);
|
||||
|
||||
window.__timelines["magnetic-cursor"] = tl;
|
||||
|
||||
// Paint event for texture upload
|
||||
canvas.onpaint = function () {
|
||||
if (!captured) {
|
||||
gl.bindTexture(gl.TEXTURE_2D, tex);
|
||||
gl.texElementImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, content);
|
||||
captured = true;
|
||||
}
|
||||
};
|
||||
|
||||
setTimeout(function () {
|
||||
if (isSupported()) {
|
||||
canvas.requestPaint();
|
||||
}
|
||||
tl.seek(0);
|
||||
}, 0);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
</Accordion>
|
||||
|
||||
## Usage
|
||||
|
||||
After installing, add the block to your host composition:
|
||||
|
||||
```html
|
||||
<div data-composition-id="vfx-magnetic" data-composition-src="compositions/vfx-magnetic.html" data-start="0" data-duration="15" data-track-index="1" data-width="1920" data-height="1080"></div>
|
||||
```
|
||||
|
||||
{/* hf:generated-footer */}
|
||||
|
||||
Tagged `html-in-canvas` `webgl`.
|
||||
|
||||
Reference in New Issue
Block a user