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: "Portal"
|
||||
description: "VFX composition block"
|
||||
---
|
||||
|
||||
import { InstallCommand } from "/snippets/install-command.jsx";
|
||||
|
||||
<iframe src="/public/catalog/preview/blocks/vfx-portal.html" className="w-full aspect-video rounded-xl border border-zinc-200 dark:border-zinc-800" loading="lazy" title="Portal 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-portal.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/vfx-portal.png" autoPlay muted loop playsInline />
|
||||
|
||||
## Install
|
||||
|
||||
<InstallCommand command="npx hyperframes add vfx-portal" />
|
||||
```bash Terminal
|
||||
npx hyperframes add vfx-portal
|
||||
```
|
||||
|
||||
That writes one file: `compositions/vfx-portal.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 10 seconds at 1920×1080. Paste this into your composition:
|
||||
|
||||
```html index.html
|
||||
<div
|
||||
data-composition-id="vfx-portal"
|
||||
data-composition-src="compositions/vfx-portal.html"
|
||||
data-start="0"
|
||||
data-duration="10"
|
||||
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,886 +45,6 @@ Set these CSS variables on the block:
|
||||
- `--bg-color` — Background. Defaults to `#000000`.
|
||||
- `--portal-color` — Portal color. Defaults to `#fafafa`.
|
||||
|
||||
## Source
|
||||
|
||||
<Accordion title={`vfx-portal.html`}>
|
||||
|
||||
```html
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=1920, height=1080" />
|
||||
<title>HTML Portal Transition</title>
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&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>
|
||||
<style>
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
body {
|
||||
background: #000;
|
||||
overflow: hidden;
|
||||
font-family: "Inter", system-ui, sans-serif;
|
||||
}
|
||||
|
||||
#root {
|
||||
position: relative;
|
||||
width: 1920px;
|
||||
height: 1080px;
|
||||
overflow: hidden;
|
||||
background: #000;
|
||||
}
|
||||
|
||||
.panel {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 1920px;
|
||||
height: 1080px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* ── Shared Site Layout ──────────────────────────────── */
|
||||
.site-wrap {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.topbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 28px 64px;
|
||||
}
|
||||
.logo {
|
||||
font-size: 24px;
|
||||
font-weight: 800;
|
||||
letter-spacing: -0.5px;
|
||||
}
|
||||
.nav {
|
||||
display: flex;
|
||||
gap: 36px;
|
||||
}
|
||||
.nav span {
|
||||
font-size: 15px;
|
||||
font-weight: 500;
|
||||
}
|
||||
.nav-cta {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
padding: 10px 24px;
|
||||
border-radius: 8px;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.hero {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
gap: 24px;
|
||||
padding: 0 200px;
|
||||
}
|
||||
.hero-title {
|
||||
font-size: 72px;
|
||||
font-weight: 800;
|
||||
letter-spacing: -2px;
|
||||
line-height: 1.05;
|
||||
}
|
||||
.hero-sub {
|
||||
font-size: 20px;
|
||||
line-height: 1.6;
|
||||
max-width: 640px;
|
||||
}
|
||||
.hero-btn {
|
||||
display: inline-block;
|
||||
padding: 16px 40px;
|
||||
border-radius: 12px;
|
||||
font-size: 17px;
|
||||
font-weight: 700;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
letter-spacing: -0.2px;
|
||||
}
|
||||
|
||||
.cards-row {
|
||||
display: flex;
|
||||
gap: 24px;
|
||||
padding: 0 64px 56px;
|
||||
}
|
||||
.feature-card {
|
||||
flex: 1;
|
||||
padding: 32px;
|
||||
border-radius: 16px;
|
||||
}
|
||||
.card-icon {
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
border-radius: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 22px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.card-title {
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
.card-desc {
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
/* ── Light Mode ──────────────────────────────────────── */
|
||||
.light .site-wrap {
|
||||
background: #fafafa;
|
||||
color: #111;
|
||||
}
|
||||
.light .logo {
|
||||
color: #111;
|
||||
}
|
||||
.light .nav span {
|
||||
color: #555;
|
||||
}
|
||||
.light .nav-cta {
|
||||
background: #7c3aed;
|
||||
color: #fff;
|
||||
}
|
||||
.light .hero-title {
|
||||
color: #111;
|
||||
}
|
||||
.light .hero-sub {
|
||||
color: #666;
|
||||
}
|
||||
.light .hero-btn {
|
||||
background: #7c3aed;
|
||||
color: #fff;
|
||||
}
|
||||
.light .feature-card {
|
||||
background: #fff;
|
||||
border: 1px solid #e5e7eb;
|
||||
}
|
||||
.light .card-icon {
|
||||
background: #f3f0ff;
|
||||
color: #7c3aed;
|
||||
}
|
||||
.light .card-title {
|
||||
color: #111;
|
||||
}
|
||||
.light .card-desc {
|
||||
color: #777;
|
||||
}
|
||||
|
||||
/* ── Dark Mode ───────────────────────────────────────── */
|
||||
.dark .site-wrap {
|
||||
background: #0a0a0f;
|
||||
color: #f0f0f5;
|
||||
}
|
||||
.dark .logo {
|
||||
background: linear-gradient(135deg, #a78bfa, #c084fc);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
.dark .nav span {
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
.dark .nav-cta {
|
||||
background: linear-gradient(135deg, #7c3aed, #a855f7);
|
||||
color: #fff;
|
||||
box-shadow: 0 0 24px rgba(124, 58, 237, 0.3);
|
||||
}
|
||||
.dark .hero-title {
|
||||
color: #f0f0f5;
|
||||
}
|
||||
.dark .hero-sub {
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
.dark .hero-btn {
|
||||
background: linear-gradient(135deg, #7c3aed, #a855f7);
|
||||
color: #fff;
|
||||
box-shadow: 0 0 32px rgba(124, 58, 237, 0.35);
|
||||
}
|
||||
.dark .feature-card {
|
||||
background: rgba(255, 255, 255, 0.03);
|
||||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||
box-shadow: 0 0 20px rgba(124, 58, 237, 0.06);
|
||||
}
|
||||
.dark .card-icon {
|
||||
background: rgba(124, 58, 237, 0.15);
|
||||
color: #a78bfa;
|
||||
}
|
||||
.dark .card-title {
|
||||
color: #f0f0f5;
|
||||
}
|
||||
.dark .card-desc {
|
||||
color: rgba(255, 255, 255, 0.45);
|
||||
}
|
||||
|
||||
#error-overlay {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: #000;
|
||||
display: none;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 100;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
color: #fff;
|
||||
}
|
||||
#error-overlay.visible {
|
||||
display: flex;
|
||||
}
|
||||
#error-overlay h2 {
|
||||
font-size: 24px;
|
||||
font-weight: 600;
|
||||
}
|
||||
#error-overlay p {
|
||||
font-size: 14px;
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
max-width: 480px;
|
||||
text-align: center;
|
||||
line-height: 1.6;
|
||||
}
|
||||
#error-overlay code {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
padding: 2px 8px;
|
||||
border-radius: 4px;
|
||||
font-size: 13px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div
|
||||
id="root"
|
||||
data-composition-id="portal-transition"
|
||||
data-width="1920"
|
||||
data-height="1080"
|
||||
data-start="0"
|
||||
data-duration="10"
|
||||
data-root="true"
|
||||
>
|
||||
<!-- Light mode panel (front) -->
|
||||
<canvas
|
||||
id="cap-light"
|
||||
layoutsubtree
|
||||
width="1920"
|
||||
height="1080"
|
||||
style="
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 1920px;
|
||||
height: 1080px;
|
||||
z-index: -1;
|
||||
pointer-events: none;
|
||||
"
|
||||
>
|
||||
<section
|
||||
class="panel light"
|
||||
id="panel-light"
|
||||
data-panel-start="0"
|
||||
data-panel-duration="10"
|
||||
style="width: 1920px; height: 1080px"
|
||||
>
|
||||
<div class="site-wrap">
|
||||
<div class="topbar">
|
||||
<div class="logo">HyperFrames</div>
|
||||
<div class="nav">
|
||||
<span>Docs</span>
|
||||
<span>Catalog</span>
|
||||
<span>GitHub</span>
|
||||
<button class="nav-cta">Sign In</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hero">
|
||||
<h1 class="hero-title">Write HTML<br />Render Video</h1>
|
||||
<p class="hero-sub">
|
||||
Ship faster with a platform that handles the hard parts. Analytics, infrastructure,
|
||||
and developer tools — all in one place.
|
||||
</p>
|
||||
<button class="hero-btn">Start Creating</button>
|
||||
</div>
|
||||
<div class="cards-row">
|
||||
<div class="feature-card">
|
||||
<div class="card-icon">⚡</div>
|
||||
<div class="card-title">Lightning Fast</div>
|
||||
<div class="card-desc">
|
||||
Sub-millisecond response times with edge deployment across 40+ regions worldwide.
|
||||
</div>
|
||||
</div>
|
||||
<div class="feature-card">
|
||||
<div class="card-icon">🔒</div>
|
||||
<div class="card-title">Secure by Default</div>
|
||||
<div class="card-desc">
|
||||
SOC2 certified. End-to-end encryption. Role-based access out of the box.
|
||||
</div>
|
||||
</div>
|
||||
<div class="feature-card">
|
||||
<div class="card-icon">🔌</div>
|
||||
<div class="card-title">Plug and Play</div>
|
||||
<div class="card-desc">
|
||||
200+ integrations. Connect your existing stack in minutes, not weeks.
|
||||
</div>
|
||||
</div>
|
||||
<div class="feature-card">
|
||||
<div class="card-icon">📈</div>
|
||||
<div class="card-title">Real-time Insights</div>
|
||||
<div class="card-desc">
|
||||
Live dashboards, anomaly detection, and AI-powered recommendations.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</canvas>
|
||||
|
||||
<!-- Dark mode panel (back) -->
|
||||
<canvas
|
||||
id="cap-dark"
|
||||
layoutsubtree
|
||||
width="1920"
|
||||
height="1080"
|
||||
style="
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 1920px;
|
||||
height: 1080px;
|
||||
z-index: -1;
|
||||
pointer-events: none;
|
||||
"
|
||||
>
|
||||
<section
|
||||
class="panel dark"
|
||||
id="panel-dark"
|
||||
data-panel-start="0"
|
||||
data-panel-duration="10"
|
||||
style="width: 1920px; height: 1080px"
|
||||
>
|
||||
<div class="site-wrap">
|
||||
<div class="topbar">
|
||||
<div class="logo">HyperFrames</div>
|
||||
<div class="nav">
|
||||
<span>Docs</span>
|
||||
<span>Catalog</span>
|
||||
<span>GitHub</span>
|
||||
<button class="nav-cta">Sign In</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hero">
|
||||
<h1 class="hero-title">Write HTML<br />Render Video</h1>
|
||||
<p class="hero-sub">
|
||||
Ship faster with a platform that handles the hard parts. Analytics, infrastructure,
|
||||
and developer tools — all in one place.
|
||||
</p>
|
||||
<button class="hero-btn">Start Creating</button>
|
||||
</div>
|
||||
<div class="cards-row">
|
||||
<div class="feature-card">
|
||||
<div class="card-icon">⚡</div>
|
||||
<div class="card-title">Lightning Fast</div>
|
||||
<div class="card-desc">
|
||||
Sub-millisecond response times with edge deployment across 40+ regions worldwide.
|
||||
</div>
|
||||
</div>
|
||||
<div class="feature-card">
|
||||
<div class="card-icon">🔒</div>
|
||||
<div class="card-title">Secure by Default</div>
|
||||
<div class="card-desc">
|
||||
SOC2 certified. End-to-end encryption. Role-based access out of the box.
|
||||
</div>
|
||||
</div>
|
||||
<div class="feature-card">
|
||||
<div class="card-icon">🔌</div>
|
||||
<div class="card-title">Plug and Play</div>
|
||||
<div class="card-desc">
|
||||
200+ integrations. Connect your existing stack in minutes, not weeks.
|
||||
</div>
|
||||
</div>
|
||||
<div class="feature-card">
|
||||
<div class="card-icon">📈</div>
|
||||
<div class="card-title">Real-time Insights</div>
|
||||
<div class="card-desc">
|
||||
Live dashboards, anomaly detection, and AI-powered recommendations.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</canvas>
|
||||
|
||||
<!-- Three.js render target -->
|
||||
<canvas
|
||||
id="theater"
|
||||
width="1920"
|
||||
height="1080"
|
||||
style="position: absolute; top: 0; left: 0; width: 1920px; height: 1080px"
|
||||
></canvas>
|
||||
|
||||
<div id="error-overlay">
|
||||
<h2>HTML-in-Canvas Required</h2>
|
||||
<p>
|
||||
This composition requires the experimental CanvasDrawElement API. Enable it in Chrome or
|
||||
Brave:
|
||||
</p>
|
||||
<p><code>chrome://flags/#canvas-draw-element</code></p>
|
||||
</div>
|
||||
|
||||
<!-- Driver clip for HyperFrames timeline sync -->
|
||||
<div
|
||||
id="driver"
|
||||
class="clip"
|
||||
data-start="0"
|
||||
data-duration="10"
|
||||
data-track-index="0"
|
||||
style="position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none"
|
||||
></div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
var theaterCanvas = document.getElementById("theater");
|
||||
var W = 1920,
|
||||
H = 1080;
|
||||
|
||||
// ── Feature Detection ──────────────────────────────────────────────
|
||||
function isSupported() {
|
||||
if (!("layoutSubtree" in document.createElement("canvas"))) return false;
|
||||
var tc = document.createElement("canvas");
|
||||
tc.setAttribute("layoutsubtree", "");
|
||||
var ctx = tc.getContext("2d");
|
||||
return ctx && typeof ctx.drawElementImage === "function";
|
||||
}
|
||||
|
||||
if (!isSupported()) {
|
||||
document.getElementById("error-overlay").classList.add("visible");
|
||||
}
|
||||
|
||||
// ── Seeded PRNG (mulberry32) ───────────────────────────────────────
|
||||
function mulberry32(seed) {
|
||||
return function () {
|
||||
seed |= 0;
|
||||
seed = (seed + 0x6d2b79f5) | 0;
|
||||
var t = Math.imul(seed ^ (seed >>> 15), 1 | seed);
|
||||
t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t;
|
||||
return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
|
||||
};
|
||||
}
|
||||
var rng = mulberry32(42);
|
||||
|
||||
// ── Canvas Capture ─────────────────────────────────────────────────
|
||||
var capLight = document.getElementById("cap-light");
|
||||
var capDark = document.getElementById("cap-dark");
|
||||
var ctxLight = capLight.getContext("2d");
|
||||
var ctxDark = capDark.getContext("2d");
|
||||
var panelLight = document.getElementById("panel-light");
|
||||
var panelDark = document.getElementById("panel-dark");
|
||||
|
||||
function capturePanels() {
|
||||
ctxLight.clearRect(0, 0, W, H);
|
||||
ctxLight.drawElementImage(panelLight, 0, 0, W, H);
|
||||
ctxDark.clearRect(0, 0, W, H);
|
||||
ctxDark.drawElementImage(panelDark, 0, 0, W, H);
|
||||
lightTexture.needsUpdate = true;
|
||||
darkTexture.needsUpdate = true;
|
||||
}
|
||||
|
||||
// ── Three.js Scene ─────────────────────────────────────────────────
|
||||
var renderer = new THREE.WebGLRenderer({
|
||||
canvas: theaterCanvas,
|
||||
antialias: false,
|
||||
alpha: false,
|
||||
powerPreference: "high-performance",
|
||||
preserveDrawingBuffer: true,
|
||||
});
|
||||
renderer.setSize(W, H, false);
|
||||
renderer.setPixelRatio(1);
|
||||
renderer.setClearColor(0x000000, 1);
|
||||
|
||||
var scene = new THREE.Scene();
|
||||
var camera = new THREE.PerspectiveCamera(50, W / H, 0.1, 100);
|
||||
camera.position.set(0, 0, 2.8);
|
||||
camera.lookAt(0, 0, 0);
|
||||
|
||||
// Calculate quad dimensions to fill the camera frustum at z=0
|
||||
var vFov = (camera.fov * Math.PI) / 180;
|
||||
var quadH = 2 * Math.tan(vFov / 2) * camera.position.z;
|
||||
var quadW = quadH * (W / H);
|
||||
|
||||
// ── Textures from Captured Canvases ────────────────────────────────
|
||||
var lightTexture = new THREE.CanvasTexture(capLight);
|
||||
lightTexture.minFilter = THREE.LinearFilter;
|
||||
lightTexture.magFilter = THREE.LinearFilter;
|
||||
lightTexture.generateMipmaps = false;
|
||||
|
||||
var darkTexture = new THREE.CanvasTexture(capDark);
|
||||
darkTexture.minFilter = THREE.LinearFilter;
|
||||
darkTexture.magFilter = THREE.LinearFilter;
|
||||
darkTexture.generateMipmaps = false;
|
||||
|
||||
// ── Back Quad: Dark Mode (sits behind) ─────────────────────────────
|
||||
var darkGeo = new THREE.PlaneGeometry(quadW, quadH);
|
||||
var darkMat = new THREE.MeshBasicMaterial({ map: darkTexture, side: THREE.FrontSide });
|
||||
var darkQuad = new THREE.Mesh(darkGeo, darkMat);
|
||||
darkQuad.position.z = -0.01;
|
||||
scene.add(darkQuad);
|
||||
|
||||
// ── Front Quad: Light Mode with Portal Shader ──────────────────────
|
||||
var portalUniforms = {
|
||||
tLight: { value: lightTexture },
|
||||
portalRadius: { value: 0.0 },
|
||||
portalCenter: { value: new THREE.Vector2(0.5, 0.5) },
|
||||
edgeWidth: { value: 0.06 },
|
||||
glowColor: { value: new THREE.Vector3(0.486, 0.227, 0.929) },
|
||||
glowColor2: { value: new THREE.Vector3(0.29, 0.565, 1.0) },
|
||||
chromaticStrength: { value: 0.025 },
|
||||
distortionStrength: { value: 0.04 },
|
||||
time: { value: 0.0 },
|
||||
energyIntensity: { value: 1.0 },
|
||||
};
|
||||
|
||||
var portalVertShader = [
|
||||
"varying vec2 vUv;",
|
||||
"void main() {",
|
||||
" vUv = uv;",
|
||||
" gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);",
|
||||
"}",
|
||||
].join("\n");
|
||||
|
||||
var portalFragShader = [
|
||||
"uniform sampler2D tLight;",
|
||||
"uniform float portalRadius;",
|
||||
"uniform vec2 portalCenter;",
|
||||
"uniform float edgeWidth;",
|
||||
"uniform vec3 glowColor;",
|
||||
"uniform vec3 glowColor2;",
|
||||
"uniform float chromaticStrength;",
|
||||
"uniform float distortionStrength;",
|
||||
"uniform float time;",
|
||||
"uniform float energyIntensity;",
|
||||
"varying vec2 vUv;",
|
||||
"",
|
||||
"float hash(vec2 p) {",
|
||||
" return fract(sin(dot(p, vec2(127.1, 311.7))) * 43758.5453);",
|
||||
"}",
|
||||
"",
|
||||
"float noise(vec2 p) {",
|
||||
" vec2 i = floor(p);",
|
||||
" vec2 f = fract(p);",
|
||||
" f = f * f * (3.0 - 2.0 * f);",
|
||||
" float a = hash(i);",
|
||||
" float b = hash(i + vec2(1.0, 0.0));",
|
||||
" float c = hash(i + vec2(0.0, 1.0));",
|
||||
" float d = hash(i + vec2(1.0, 1.0));",
|
||||
" return mix(mix(a, b, f.x), mix(c, d, f.x), f.y);",
|
||||
"}",
|
||||
"",
|
||||
"void main() {",
|
||||
" vec2 uv = vUv;",
|
||||
" vec2 aspect = vec2(" + (W / H).toFixed(4) + ", 1.0);",
|
||||
" vec2 centered = (uv - portalCenter) * aspect;",
|
||||
" float dist = length(centered);",
|
||||
"",
|
||||
" // Noise-modulated edge for organic tear look",
|
||||
" float angle = atan(centered.y, centered.x);",
|
||||
" float edgeNoise = noise(vec2(angle * 3.0, time * 2.0)) * 0.03 * energyIntensity;",
|
||||
" float portalEdge = portalRadius + edgeNoise;",
|
||||
"",
|
||||
" // Distortion near portal edge: warp UVs radially",
|
||||
" float edgeDist = abs(dist - portalEdge);",
|
||||
" float distortMask = smoothstep(edgeWidth * 1.5, 0.0, edgeDist) * distortionStrength;",
|
||||
" vec2 distortDir = normalize(centered + 0.0001);",
|
||||
" vec2 distortedUv = uv + distortDir * distortMask * sin(angle * 8.0 + time * 5.0);",
|
||||
"",
|
||||
" // Chromatic aberration near portal edge",
|
||||
" float chromaMask = smoothstep(edgeWidth * 2.0, 0.0, edgeDist) * chromaticStrength;",
|
||||
" vec2 chromaOffset = distortDir * chromaMask;",
|
||||
" float r = texture2D(tLight, distortedUv + chromaOffset).r;",
|
||||
" float g = texture2D(tLight, distortedUv).g;",
|
||||
" float b = texture2D(tLight, distortedUv - chromaOffset).b;",
|
||||
" vec3 lightColor = vec3(r, g, b);",
|
||||
"",
|
||||
" // Portal mask: inside = transparent (show dark behind), outside = light",
|
||||
" float mask = smoothstep(portalEdge - 0.008, portalEdge + 0.008, dist);",
|
||||
"",
|
||||
" // Glow ring at portal edge",
|
||||
" float glowInner = smoothstep(edgeWidth, 0.0, edgeDist);",
|
||||
" float glowOuter = smoothstep(edgeWidth * 2.5, edgeWidth * 0.5, edgeDist);",
|
||||
" float glow = glowInner * glowOuter * energyIntensity;",
|
||||
"",
|
||||
" // Animated color cycling along the ring",
|
||||
" float colorPhase = fract(angle / 6.2832 + time * 0.4);",
|
||||
" vec3 ringColor = mix(glowColor, glowColor2, sin(colorPhase * 6.2832) * 0.5 + 0.5);",
|
||||
"",
|
||||
" // Secondary energy sparks",
|
||||
" float sparks = noise(vec2(angle * 12.0, time * 8.0));",
|
||||
" sparks = pow(sparks, 4.0) * glowInner * energyIntensity * 2.0;",
|
||||
"",
|
||||
" vec3 finalColor = lightColor * mask;",
|
||||
" finalColor += ringColor * glow * 2.5;",
|
||||
" finalColor += vec3(1.0, 0.9, 1.0) * sparks;",
|
||||
"",
|
||||
" // When portal is large enough, alpha fades out completely",
|
||||
" float alpha = mask + glow * 0.5 + sparks * 0.3;",
|
||||
" alpha = clamp(alpha, 0.0, 1.0);",
|
||||
"",
|
||||
" gl_FragColor = vec4(finalColor, alpha);",
|
||||
"}",
|
||||
].join("\n");
|
||||
|
||||
var frontGeo = new THREE.PlaneGeometry(quadW, quadH);
|
||||
var frontMat = new THREE.ShaderMaterial({
|
||||
uniforms: portalUniforms,
|
||||
vertexShader: portalVertShader,
|
||||
fragmentShader: portalFragShader,
|
||||
transparent: true,
|
||||
side: THREE.FrontSide,
|
||||
depthWrite: false,
|
||||
});
|
||||
var frontQuad = new THREE.Mesh(frontGeo, frontMat);
|
||||
frontQuad.position.z = 0.0;
|
||||
scene.add(frontQuad);
|
||||
|
||||
// ── Animation State ────────────────────────────────────────────────
|
||||
var animState = {
|
||||
portalRadius: 0.0,
|
||||
cameraZ: 2.8,
|
||||
energyIntensity: 0.0,
|
||||
chromaticStrength: 0.0,
|
||||
distortionStrength: 0.0,
|
||||
edgeWidth: 0.06,
|
||||
time: 0.0,
|
||||
};
|
||||
|
||||
// ── GSAP Timeline ──────────────────────────────────────────────────
|
||||
window.__timelines = window.__timelines || {};
|
||||
var tl = gsap.timeline({ paused: true });
|
||||
|
||||
// Phase 1: Hold on light mode (0 - 1.5s)
|
||||
// Subtle energy buildup at center before portal opens
|
||||
tl.to(
|
||||
animState,
|
||||
{
|
||||
energyIntensity: 0.3,
|
||||
duration: 1.2,
|
||||
ease: "power2.in",
|
||||
},
|
||||
0.3,
|
||||
);
|
||||
|
||||
// Phase 2: Portal tears open (1.5 - 5.0s)
|
||||
tl.to(
|
||||
animState,
|
||||
{
|
||||
portalRadius: 0.85,
|
||||
duration: 3.5,
|
||||
ease: "power2.inOut",
|
||||
},
|
||||
1.5,
|
||||
);
|
||||
|
||||
tl.to(
|
||||
animState,
|
||||
{
|
||||
energyIntensity: 1.0,
|
||||
duration: 0.6,
|
||||
ease: "power3.out",
|
||||
},
|
||||
1.5,
|
||||
);
|
||||
|
||||
tl.to(
|
||||
animState,
|
||||
{
|
||||
chromaticStrength: 0.035,
|
||||
duration: 2.0,
|
||||
ease: "power2.in",
|
||||
},
|
||||
1.5,
|
||||
);
|
||||
|
||||
tl.to(
|
||||
animState,
|
||||
{
|
||||
distortionStrength: 0.06,
|
||||
duration: 2.5,
|
||||
ease: "power2.inOut",
|
||||
},
|
||||
1.5,
|
||||
);
|
||||
|
||||
tl.to(
|
||||
animState,
|
||||
{
|
||||
edgeWidth: 0.08,
|
||||
duration: 2.0,
|
||||
ease: "sine.inOut",
|
||||
},
|
||||
2.0,
|
||||
);
|
||||
|
||||
// Phase 3: Camera pushes through portal (3.5 - 6.5s)
|
||||
tl.to(
|
||||
animState,
|
||||
{
|
||||
cameraZ: 1.4,
|
||||
duration: 3.0,
|
||||
ease: "power2.inOut",
|
||||
},
|
||||
3.5,
|
||||
);
|
||||
|
||||
// Phase 4: Portal overshoots to cover full screen (5.0 - 7.0s)
|
||||
tl.to(
|
||||
animState,
|
||||
{
|
||||
portalRadius: 1.8,
|
||||
duration: 2.0,
|
||||
ease: "power3.in",
|
||||
},
|
||||
5.0,
|
||||
);
|
||||
|
||||
// Energy peaks then fades as we emerge
|
||||
tl.to(
|
||||
animState,
|
||||
{
|
||||
energyIntensity: 1.5,
|
||||
duration: 0.8,
|
||||
ease: "power2.in",
|
||||
},
|
||||
5.0,
|
||||
);
|
||||
|
||||
tl.to(
|
||||
animState,
|
||||
{
|
||||
energyIntensity: 0.0,
|
||||
duration: 1.2,
|
||||
ease: "power2.out",
|
||||
},
|
||||
6.2,
|
||||
);
|
||||
|
||||
// Chromatic aberration peaks during push-through
|
||||
tl.to(
|
||||
animState,
|
||||
{
|
||||
chromaticStrength: 0.06,
|
||||
duration: 1.0,
|
||||
ease: "power3.in",
|
||||
},
|
||||
5.5,
|
||||
);
|
||||
|
||||
tl.to(
|
||||
animState,
|
||||
{
|
||||
chromaticStrength: 0.0,
|
||||
duration: 1.0,
|
||||
ease: "power2.out",
|
||||
},
|
||||
6.8,
|
||||
);
|
||||
|
||||
// Distortion fades
|
||||
tl.to(
|
||||
animState,
|
||||
{
|
||||
distortionStrength: 0.0,
|
||||
duration: 1.0,
|
||||
ease: "power2.out",
|
||||
},
|
||||
6.5,
|
||||
);
|
||||
|
||||
// Phase 5: Settle in dark mode (7.0 - 10s)
|
||||
// Camera eases to final position
|
||||
tl.to(
|
||||
animState,
|
||||
{
|
||||
cameraZ: 2.8,
|
||||
duration: 2.5,
|
||||
ease: "power2.out",
|
||||
},
|
||||
7.0,
|
||||
);
|
||||
|
||||
// ── Render Loop via Timeline ───────────────────────────────────────
|
||||
tl.to(
|
||||
{ v: 0 },
|
||||
{
|
||||
v: 1,
|
||||
duration: 10,
|
||||
ease: "none",
|
||||
onUpdate: function () {
|
||||
var t = tl.time();
|
||||
animState.time = t;
|
||||
|
||||
// Update portal shader uniforms
|
||||
portalUniforms.portalRadius.value = animState.portalRadius;
|
||||
portalUniforms.edgeWidth.value = animState.edgeWidth;
|
||||
portalUniforms.chromaticStrength.value = animState.chromaticStrength;
|
||||
portalUniforms.distortionStrength.value = animState.distortionStrength;
|
||||
portalUniforms.time.value = t;
|
||||
portalUniforms.energyIntensity.value = animState.energyIntensity;
|
||||
|
||||
// Update camera Z for push-through effect
|
||||
camera.position.z = animState.cameraZ;
|
||||
|
||||
// Recalculate quad scale to always fill the view at current camera Z
|
||||
var currentVFov = (camera.fov * Math.PI) / 180;
|
||||
var currentH = 2 * Math.tan(currentVFov / 2) * camera.position.z;
|
||||
var currentW = currentH * (W / H);
|
||||
frontQuad.scale.set(currentW / quadW, currentH / quadH, 1);
|
||||
darkQuad.scale.set(currentW / quadW, currentH / quadH, 1);
|
||||
|
||||
renderer.render(scene, camera);
|
||||
},
|
||||
},
|
||||
0,
|
||||
);
|
||||
|
||||
window.__timelines["portal-transition"] = tl;
|
||||
|
||||
// ── Deferred Init ──────────────────────────────────────────────────
|
||||
setTimeout(function () {
|
||||
if (isSupported()) {
|
||||
capturePanels();
|
||||
}
|
||||
tl.seek(0);
|
||||
}, 0);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
</Accordion>
|
||||
|
||||
## Usage
|
||||
|
||||
After installing, add the block to your host composition:
|
||||
|
||||
```html
|
||||
<div data-composition-id="vfx-portal" data-composition-src="compositions/vfx-portal.html" data-start="0" data-duration="10" 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