mirror of
https://github.com/heygen-com/hyperframes.git
synced 2026-09-03 04:38:33 +00:00
refactor: migrate templates/ → registry/examples/ (#253)
## What PR 2/17 of the catalog system rollout. **Physical directory rename.** Stacks on #252. - `git mv templates/ registry/examples/` — all 8 example directories (`decision-tree`, `kinetic-type`, `nyt-graph`, `play-mode`, `product-promo`, `swiss-grid`, `vignelli`, `warm-grain`) plus `templates.json` - `packages/cli/src/templates/remote.ts` — `TEMPLATES_DIR` constant from `"templates"` → `"registry/examples"`, exported for regression testing - `scripts/generate-template-previews.ts` — `remoteTemplatesDir` resolved to the new path - Comment updates in `packages/cli/src/templates/generators.ts` and `packages/cli/src/commands/init.ts` - New regression test `packages/cli/src/templates/remote.test.ts` pinning the path constants so future reverts fail a test instead of silently breaking installed CLIs Design doc: [Hyperframes Catalog System](https://www.notion.so/heygen/Hyperframes-Catalog-System-Design-Plan-341449792c69813f899dcd53b4c0383a). ## Why The current `templates/` directory is a flat "things that scaffold projects" bucket. The catalog model splits content into three tiers: **examples** (full projects — what today's templates are), **blocks** (sub-compositions), and **components** (effect snippets). `registry/examples/` is the canonical home for what was previously at `templates/`, and this PR makes room for `registry/blocks/` and `registry/components/` in future PRs without top-level clutter. ## How - `git mv` preserves file history — GitHub renders these as renames, not deletions + additions. - Remote template fetch via giget reads `TEMPLATES_DIR`, so updating that one constant is sufficient for the CLI's remote code path. - The CLI's **internal** `packages/cli/src/templates/` directory (which holds the `blank` and `_shared` bundled assets plus `generators.ts`/`remote.ts`) is a separate concept and is **not** touched here. Renaming that module belongs to PR 3 where the abstraction changes to a registry resolver. - `templates.json` keeps its existing shape and location (now at `registry/examples/templates.json`). **PR 3 will transform it** to the new `registry.json` shape introduced in PR 1 and generate a per-item `registry-item.json` for each example. Leaving the shape change to PR 3 keeps this PR a pure physical move. ## ⚠️ Breaking change for previously-installed CLIs (`hyperframes@0.1.0` – `0.3.0`) **What happens:** every published CLI version has `TEMPLATES_DIR = "templates"` baked in. After this PR lands on `main`, those CLIs will 404 on: - `raw.githubusercontent.com/heygen-com/hyperframes/main/templates/templates.json` (manifest list) — caught silently in `listRemoteTemplates`, so the template picker falls back to showing only `blank` - `github:heygen-com/hyperframes/templates/<id>#main` (giget download) — raises "Template downloaded but missing index.html" **Decision: accept the break.** Hyperframes is pre-1.0 OSS with a small installed base; complex mitigations (dual-path fetch, redirect stubs, manifest-at-old-path with empty array) add permanent maintenance cost for a one-time rename. **Rollout plan:** 1. Merge #252 (PR 1 — types & schemas) first 2. Merge this PR (#253) 3. Ship a patched CLI release (`hyperframes@0.3.1`) in the same work-day. Already-pinned old CLIs break on remote examples, but upgrading restores full functionality 4. Note the break in release notes + `CHANGELOG.md` under the `0.3.1` entry Users still on an older CLI will see the failure only if they invoke `hyperframes init` with `--template <non-blank>`; `--template blank` (bundled) continues to work offline on every version. ## Test plan - [x] `bun run test` in `packages/cli`: **57 passed** (was 55 on main, +2 regression tests for the path constants). Same 4 pre-existing failures (SRT/VTT whisper normalizer + `lintProject` clean-project test) — unchanged from main. No regressions - [x] **Manual smoke test**: `hyperframes init /tmp/x --template blank` works (bundled code path, unchanged) - [x] `bunx oxfmt --check` + `bunx oxlint`: clean - [x] `bun run typecheck` (core + studio, pre-commit hook): clean - [ ] **Manual smoke test for remote fetch (`--template warm-grain`)** — not verifiable locally before merge. Remote fetch resolves `github:heygen-com/hyperframes/registry/examples/<id>#main`, which doesn't exist until this PR lands. Will work on `main` immediately after merge. ## Breaking / migration - Internal repo path changes only. `--template` CLI flag continues to accept the same template names. - See "Breaking change for previously-installed CLIs" above — decision is to ship a simultaneous CLI release rather than add a compat shim. ## Commits 1. `d691bd1` — initial rename + CLI path constant update 2. `fc0c642` — review feedback: docstring fix, regression tests, clarifying comment in `init.ts`, export constants for testing ## Stacks on #252 — base branch. When #252 merges, this rebases onto `main`. ## Next in stack PR 3 — `feat(cli): registry resolver + installer`. Transforms `templates.json` to the new `registry.json` shape (from PR 1's schema), generates `registry-item.json` for every existing example, introduces `packages/cli/src/registry/{resolver,installer,remote}.ts`, renames the `packages/cli/src/templates/` CLI module, and refactors `init` to call through the new abstraction. 🤖 Generated with [Claude Code](https://claude.com/claude-code)
This commit is contained in:
James Russo
@@ -0,0 +1,434 @@
|
||||
<template id="decision-tree-template">
|
||||
<div data-composition-id="decision-tree" data-width="1920" data-height="1080" data-duration="12">
|
||||
<div class="canvas">
|
||||
<svg class="connectors" width="1920" height="1080" viewBox="0 0 1920 1080">
|
||||
<!-- Level 1 to 2 -->
|
||||
<path
|
||||
id="path-1-L"
|
||||
class="connector"
|
||||
d="M 960 130 L 960 200 L 600 200 L 600 270"
|
||||
fill="none"
|
||||
stroke="#333"
|
||||
stroke-width="4"
|
||||
/>
|
||||
<path
|
||||
id="path-1-R"
|
||||
class="connector"
|
||||
d="M 960 130 L 960 200 L 1320 200 L 1320 270"
|
||||
fill="none"
|
||||
stroke="#333"
|
||||
stroke-width="4"
|
||||
/>
|
||||
|
||||
<!-- Level 2 to 3 (Left side) -->
|
||||
<path
|
||||
id="path-2-LL"
|
||||
class="connector"
|
||||
d="M 600 330 L 600 400 L 400 400 L 400 470"
|
||||
fill="none"
|
||||
stroke="#333"
|
||||
stroke-width="4"
|
||||
/>
|
||||
<path
|
||||
id="path-2-LR"
|
||||
class="connector"
|
||||
d="M 600 330 L 600 400 L 800 400 L 800 470"
|
||||
fill="none"
|
||||
stroke="#333"
|
||||
stroke-width="4"
|
||||
/>
|
||||
|
||||
<!-- Level 2 to 3 (Right side) -->
|
||||
<path
|
||||
id="path-2-RL"
|
||||
class="connector"
|
||||
d="M 1320 330 L 1320 400 L 1120 400 L 1120 470"
|
||||
fill="none"
|
||||
stroke="#333"
|
||||
stroke-width="4"
|
||||
/>
|
||||
<path
|
||||
id="path-2-RR"
|
||||
class="connector"
|
||||
d="M 1320 330 L 1320 400 L 1520 400 L 1520 470"
|
||||
fill="none"
|
||||
stroke="#333"
|
||||
stroke-width="4"
|
||||
/>
|
||||
</svg>
|
||||
|
||||
<div id="label-yes" class="connector-label">Yes</div>
|
||||
<div id="label-not-sure" class="connector-label">Not sure</div>
|
||||
|
||||
<!-- Level 1 -->
|
||||
<div id="node-root" class="node sticky yellow" style="left: 960px; top: 100px">
|
||||
Should I learn to code?
|
||||
</div>
|
||||
|
||||
<!-- Level 2 -->
|
||||
<div id="node-yes" class="node sticky green" style="left: 600px; top: 300px">Yes</div>
|
||||
<div id="node-not-sure" class="node sticky peach" style="left: 1320px; top: 300px">
|
||||
Not sure
|
||||
</div>
|
||||
|
||||
<!-- Level 3 -->
|
||||
<div id="node-python" class="node sticky lavender" style="left: 400px; top: 500px">
|
||||
<div style="position: relative; display: inline-block">
|
||||
<span id="python-text">Start with Pythom</span>
|
||||
<svg class="squiggle-container" width="64" height="6" viewBox="0 0 64 6">
|
||||
<path
|
||||
id="squiggle"
|
||||
d="M 0 3 Q 2 0 4 3 T 8 3 T 12 3 T 16 3 T 20 3 T 24 3 T 28 3 T 32 3 T 36 3 T 40 3 T 44 3 T 48 3 T 52 3 T 56 3 T 60 3 T 64 3"
|
||||
fill="none"
|
||||
stroke="#E53935"
|
||||
stroke-width="2"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<div id="node-nocode" class="node sticky blue" style="left: 800px; top: 500px">
|
||||
Try no-code first
|
||||
</div>
|
||||
<div id="node-website" class="node sticky pink" style="left: 1120px; top: 500px">
|
||||
Build a personal website
|
||||
</div>
|
||||
<div id="node-course" class="node sticky yellow" style="left: 1520px; top: 500px">
|
||||
Take a free intro course
|
||||
</div>
|
||||
|
||||
<!-- Cursor -->
|
||||
<div id="cursor" class="cursor-container">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none">
|
||||
<path
|
||||
d="M5.65376 12.3673H5.46026L5.31717 12.4976L0.500002 16.8829L0.500002 1.19841L11.7841 12.3673H5.65376Z"
|
||||
fill="white"
|
||||
stroke="black"
|
||||
/>
|
||||
</svg>
|
||||
<div class="cursor-tag">You</div>
|
||||
</div>
|
||||
|
||||
<!-- Emoji -->
|
||||
<div id="emoji-thumb" class="emoji">👍</div>
|
||||
|
||||
<!-- Overlay -->
|
||||
<div id="fade-overlay"></div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
[data-composition-id="decision-tree"] {
|
||||
width: 1920px;
|
||||
height: 1080px;
|
||||
background-color: #ffffff;
|
||||
background-image: radial-gradient(#e5e5e5 1px, transparent 1px);
|
||||
background-size: 20px 20px;
|
||||
position: absolute;
|
||||
overflow: hidden;
|
||||
font-family: "Inter", sans-serif;
|
||||
}
|
||||
|
||||
[data-composition-id="decision-tree"] .canvas {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
transform: scale(1.2);
|
||||
transform-origin: 960px 300px;
|
||||
}
|
||||
|
||||
[data-composition-id="decision-tree"] .node {
|
||||
position: absolute;
|
||||
transform: translate(-50%, -50%) scale(0);
|
||||
padding: 16px 24px;
|
||||
border-radius: 12px;
|
||||
font-size: 18px;
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
||||
white-space: nowrap;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
[data-composition-id="decision-tree"] .node.yellow {
|
||||
background-color: #e8d44d;
|
||||
}
|
||||
[data-composition-id="decision-tree"] .node.green {
|
||||
background-color: #c2e8a0;
|
||||
}
|
||||
[data-composition-id="decision-tree"] .node.peach {
|
||||
background-color: #f5c5a3;
|
||||
}
|
||||
[data-composition-id="decision-tree"] .node.lavender {
|
||||
background-color: #d4c5f9;
|
||||
}
|
||||
[data-composition-id="decision-tree"] .node.blue {
|
||||
background-color: #a8d8f0;
|
||||
}
|
||||
[data-composition-id="decision-tree"] .node.pink {
|
||||
background-color: #f8b4c8;
|
||||
}
|
||||
|
||||
[data-composition-id="decision-tree"] .connectors {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 5;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
[data-composition-id="decision-tree"] .connector {
|
||||
stroke-dasharray: 1000;
|
||||
stroke-dashoffset: 1000;
|
||||
}
|
||||
|
||||
[data-composition-id="decision-tree"] .connector-label {
|
||||
position: absolute;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
background: white;
|
||||
padding: 2px 6px;
|
||||
border-radius: 4px;
|
||||
opacity: 0;
|
||||
z-index: 6;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
#label-yes {
|
||||
left: 780px;
|
||||
top: 230px;
|
||||
}
|
||||
#label-not-sure {
|
||||
left: 1140px;
|
||||
top: 230px;
|
||||
}
|
||||
|
||||
[data-composition-id="decision-tree"] .cursor-container {
|
||||
position: absolute;
|
||||
left: 1920px;
|
||||
top: 1080px;
|
||||
z-index: 100;
|
||||
pointer-events: none;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
[data-composition-id="decision-tree"] .cursor-tag {
|
||||
background-color: #9747ff;
|
||||
color: white;
|
||||
padding: 2px 8px;
|
||||
border-radius: 4px;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
margin-left: 4px;
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
[data-composition-id="decision-tree"] .squiggle-container {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: -4px;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
[data-composition-id="decision-tree"] .emoji {
|
||||
position: absolute;
|
||||
font-size: 32px;
|
||||
left: 510px;
|
||||
top: 500px;
|
||||
transform: translate(-50%, -50%) scale(0);
|
||||
z-index: 20;
|
||||
}
|
||||
|
||||
[data-composition-id="decision-tree"] #fade-overlay {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: white;
|
||||
opacity: 0;
|
||||
z-index: 1000;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.selection-border {
|
||||
position: absolute;
|
||||
top: -4px;
|
||||
left: -4px;
|
||||
right: -4px;
|
||||
bottom: -4px;
|
||||
border: 2px solid #0b84f3;
|
||||
border-radius: 16px;
|
||||
pointer-events: none;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.text-highlight {
|
||||
background-color: #d0e4ff;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
|
||||
<script>
|
||||
(function () {
|
||||
const tl = gsap.timeline({ paused: true });
|
||||
|
||||
// 1. Root node scales from 0→100% over 0.4s
|
||||
tl.to("#node-root", { scale: 1, duration: 0.4, ease: "power2.out" });
|
||||
|
||||
// 2. Hold 0.6s
|
||||
tl.addLabel("hold1", "+=0.6");
|
||||
|
||||
// 3. Two elbow connectors draw downward-left and downward-right simultaneously (0.5s)
|
||||
tl.to(
|
||||
".connector#path-1-L, .connector#path-1-R",
|
||||
{
|
||||
strokeDashoffset: 0,
|
||||
duration: 0.5,
|
||||
ease: "none",
|
||||
},
|
||||
"hold1",
|
||||
);
|
||||
|
||||
// Labels fade in at midpoint
|
||||
tl.to(
|
||||
"#label-yes, #label-not-sure",
|
||||
{
|
||||
opacity: 1,
|
||||
duration: 0.2,
|
||||
},
|
||||
"hold1+=0.25",
|
||||
);
|
||||
|
||||
// 4. Level 2 nodes scale in at endpoints with 0.2s stagger
|
||||
tl.to("#node-yes", { scale: 1, duration: 0.4, ease: "back.out(1.7)" }, "hold1+=0.4");
|
||||
tl.to("#node-not-sure", { scale: 1, duration: 0.4, ease: "back.out(1.7)" }, "hold1+=0.6");
|
||||
|
||||
// 5. Hold 0.5s
|
||||
tl.addLabel("hold2", "+=0.5");
|
||||
|
||||
// 6. Four connectors draw down from level 2 (0.4s)
|
||||
tl.to(
|
||||
".connector#path-2-LL, .connector#path-2-LR, .connector#path-2-RL, .connector#path-2-RR",
|
||||
{
|
||||
strokeDashoffset: 0,
|
||||
duration: 0.4,
|
||||
ease: "none",
|
||||
},
|
||||
"hold2",
|
||||
);
|
||||
|
||||
// 7. Four leaf nodes scale in with 0.15s stagger
|
||||
const leafNodes = ["#node-python", "#node-nocode", "#node-website", "#node-course"];
|
||||
leafNodes.forEach((id, i) => {
|
||||
tl.to(id, { scale: 1, duration: 0.4, ease: "back.out(1.7)" }, `hold2+=${0.3 + i * 0.15}`);
|
||||
});
|
||||
|
||||
// Red wavy underline appears with text
|
||||
tl.to(".squiggle-container", { opacity: 1, duration: 0.1 }, "hold2+=0.3");
|
||||
|
||||
// 8. Hold 0.8s
|
||||
tl.addLabel("hold3", "+=0.8");
|
||||
|
||||
// 9. Cursor drifts in from bottom-right (1s) to lavender sticky
|
||||
tl.to(
|
||||
"#cursor",
|
||||
{
|
||||
left: 450,
|
||||
top: 540,
|
||||
duration: 1,
|
||||
ease: "power1.inOut",
|
||||
},
|
||||
"hold3",
|
||||
);
|
||||
|
||||
// 10. Cursor clicks. Selection border appears.
|
||||
tl.add(() => {
|
||||
const node = document.querySelector("#node-python");
|
||||
if (!node) return;
|
||||
if (!node.querySelector(".selection-border")) {
|
||||
const border = document.createElement("div");
|
||||
border.className = "selection-border";
|
||||
node.appendChild(border);
|
||||
}
|
||||
gsap.set(".selection-border", { opacity: 1 });
|
||||
}, "hold3+=1");
|
||||
|
||||
// Visual click feedback
|
||||
tl.to(
|
||||
"#cursor",
|
||||
{ scale: 0.8, duration: 0.05, yoyo: true, repeat: 1, overwrite: "auto" },
|
||||
"hold3+=1",
|
||||
);
|
||||
|
||||
// 11. Hold 0.3s
|
||||
tl.addLabel("hold4", "+=0.3");
|
||||
|
||||
// 12. Cursor double-clicks "Pythom" — highlight in blue
|
||||
tl.to(
|
||||
"#cursor",
|
||||
{ scale: 0.8, duration: 0.05, yoyo: true, repeat: 3, overwrite: "auto" },
|
||||
"hold4",
|
||||
);
|
||||
tl.add(() => {
|
||||
const textEl = document.querySelector("#python-text");
|
||||
if (!textEl) return;
|
||||
textEl.innerHTML = 'Start with <span class="text-highlight">Pythom</span>';
|
||||
}, "hold4+=0.1");
|
||||
|
||||
// 13. Hold 0.2s
|
||||
tl.addLabel("hold5", "+=0.2");
|
||||
|
||||
// 14. Highlighted text deletes and "Python" types in (fast)
|
||||
// Squiggle disappears when last char lands
|
||||
const typingStart = tl.labels["hold5"];
|
||||
const words = ["P", "Py", "Pyt", "Pyth", "Pytho", "Python"];
|
||||
words.forEach((word, i) => {
|
||||
tl.add(
|
||||
() => {
|
||||
const el = document.querySelector("#python-text");
|
||||
if (el) el.innerHTML = `Start with <span class="text-highlight">${word}</span>`;
|
||||
},
|
||||
typingStart + i * 0.05,
|
||||
);
|
||||
});
|
||||
|
||||
// Remove highlight and squiggle at the end of typing
|
||||
const typingEnd = typingStart + words.length * 0.05;
|
||||
tl.add(() => {
|
||||
const pyEl = document.querySelector("#python-text");
|
||||
if (pyEl) pyEl.innerHTML = "Start with Python";
|
||||
gsap.set(".squiggle-container", { opacity: 0 });
|
||||
}, typingEnd);
|
||||
|
||||
// 15. Hold 0.5s
|
||||
tl.addLabel("hold6", typingEnd + 0.5);
|
||||
|
||||
// 16. Cursor moves slightly and clicks away to deselect
|
||||
tl.to("#cursor", { left: 500, top: 580, duration: 0.3, overwrite: "auto" }, "hold6");
|
||||
tl.to(
|
||||
"#cursor",
|
||||
{ scale: 0.8, duration: 0.05, yoyo: true, repeat: 1, overwrite: "auto" },
|
||||
"hold6+=0.3",
|
||||
);
|
||||
tl.to(".selection-border", { opacity: 0, duration: 0.1 }, "hold6+=0.3");
|
||||
|
||||
// 17. 👍 emoji pops in
|
||||
tl.to("#emoji-thumb", { scale: 1, duration: 0.15, ease: "back.out(2)" }, "hold6+=0.4");
|
||||
|
||||
// 18. Hold 2s
|
||||
tl.addLabel("hold7", "+=2");
|
||||
|
||||
// 19. Fade entire screen to white over 0.5s
|
||||
tl.to("#fade-overlay", { opacity: 1, duration: 0.5 }, "hold7");
|
||||
|
||||
window.__timelines = window.__timelines || {};
|
||||
window.__timelines["decision-tree"] = tl;
|
||||
})();
|
||||
</script>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,56 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=1920, height=1080" />
|
||||
<title>Decision Tree</title>
|
||||
<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
html,
|
||||
body {
|
||||
margin: 0;
|
||||
width: 1920px;
|
||||
height: 1080px;
|
||||
overflow: hidden;
|
||||
background: #ffffff;
|
||||
font-family: "Inter", sans-serif;
|
||||
}
|
||||
</style>
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=block"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
</head>
|
||||
<body>
|
||||
<div
|
||||
id="root"
|
||||
data-composition-id="main"
|
||||
data-start="0"
|
||||
data-duration="15"
|
||||
data-width="1920"
|
||||
data-height="1080"
|
||||
>
|
||||
<div
|
||||
id="decision-tree-comp"
|
||||
data-composition-id="decision-tree"
|
||||
data-composition-src="compositions/decision_tree.html"
|
||||
data-start="0"
|
||||
data-duration="15"
|
||||
data-track-index="0"
|
||||
data-width="1920"
|
||||
data-height="1080"
|
||||
></div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
window.__timelines = window.__timelines || {};
|
||||
const tl = gsap.timeline({ paused: true });
|
||||
window.__timelines["main"] = tl;
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,589 @@
|
||||
<template id="main-graphics-template">
|
||||
<div
|
||||
data-composition-id="main-graphics"
|
||||
data-width="1920"
|
||||
data-height="1080"
|
||||
data-duration="14.72"
|
||||
>
|
||||
<!-- A-Roll Video -->
|
||||
<video
|
||||
id="a-roll-video"
|
||||
src="https://gen-os-static.s3.us-east-2.amazonaws.com/astral_assets/uploaded_assets/67cf5a05_e134ec83a57042b38776c952da595870.mp4"
|
||||
style="
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
opacity: 1;
|
||||
z-index: 0;
|
||||
"
|
||||
crossorigin="anonymous"
|
||||
></video>
|
||||
|
||||
<!-- Scene 1: Hook -->
|
||||
<div
|
||||
id="white-wipe"
|
||||
style="
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: white;
|
||||
z-index: 15;
|
||||
"
|
||||
></div>
|
||||
<div id="scene-1" class="scene">
|
||||
<div class="hook-container">
|
||||
<div class="hook-what-if">What if</div>
|
||||
<div class="hook-motion-graphics">motion graphics</div>
|
||||
<div class="hook-wrote-themselves">wrote themselves?</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Scene 2: Swiss Style -->
|
||||
<div id="scene-2" class="scene">
|
||||
<div class="swiss-panel">
|
||||
<div class="swiss-grid">
|
||||
<div class="grid-line horizontal" style="top: 25%"></div>
|
||||
<div class="grid-line horizontal" style="top: 50%"></div>
|
||||
<div class="grid-line horizontal" style="top: 75%"></div>
|
||||
<div class="grid-line vertical" style="left: 25%"></div>
|
||||
<div class="grid-line vertical" style="left: 50%"></div>
|
||||
<div class="grid-line vertical" style="left: 75%"></div>
|
||||
<div class="swiss-circle"></div>
|
||||
<div class="swiss-square"></div>
|
||||
</div>
|
||||
<div class="swiss-content">
|
||||
<div class="swiss-title">HyperFrames</div>
|
||||
<div class="swiss-subtitle">turns code into</div>
|
||||
<div class="swiss-main-text">
|
||||
<span class="word">production-ready</span>
|
||||
<span class="word">video</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Scene 3: Figma Config Style -->
|
||||
<div id="scene-3" class="scene">
|
||||
<div class="dark-overlay"></div>
|
||||
<div class="figma-container">
|
||||
<div class="figma-item" id="figma-animations">
|
||||
<div class="glyph-container">
|
||||
<div class="glyph-ring ring-unified"></div>
|
||||
<div class="glyph-diamond"></div>
|
||||
</div>
|
||||
<div class="figma-label">animations</div>
|
||||
</div>
|
||||
<div class="figma-item" id="figma-transitions">
|
||||
<div class="glyph-container">
|
||||
<div class="glyph-rect rect-unified"></div>
|
||||
<div class="glyph-wipe"></div>
|
||||
</div>
|
||||
<div class="figma-label">transitions</div>
|
||||
</div>
|
||||
<div class="figma-item" id="figma-typography">
|
||||
<div class="glyph-container">
|
||||
<div class="glyph-tri tri-unified"></div>
|
||||
<div class="glyph-lines">
|
||||
<div class="line"></div>
|
||||
<div class="line"></div>
|
||||
<div class="line"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="figma-label">typography</div>
|
||||
</div>
|
||||
<div class="figma-footer">all generated from a single prompt</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Scene 4: David Carson Style -->
|
||||
<div id="scene-4" class="scene">
|
||||
<div class="carson-overlay"></div>
|
||||
<div class="carson-container">
|
||||
<div class="carson-line-1">No timeline<span class="red-dot">.</span></div>
|
||||
<div class="carson-line-2">no After Effects.</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Scene 5: Wes Anderson -->
|
||||
<div id="scene-5" class="scene">
|
||||
<div class="wes-bg"></div>
|
||||
<div class="wes-container">
|
||||
<div class="wes-text-top">Just describe the motion</div>
|
||||
<div class="wes-rule"></div>
|
||||
<div class="wes-text-bottom">and render.</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Scene 6: Vignelli Style -->
|
||||
<div id="scene-6" class="scene">
|
||||
<div
|
||||
id="scene-6-overlay"
|
||||
style="
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: black;
|
||||
z-index: -1;
|
||||
"
|
||||
></div>
|
||||
<div class="vignelli-container">
|
||||
<div class="vignelli-title">HyperFrames</div>
|
||||
<div class="vignelli-subtitle">is here.</div>
|
||||
<div class="vignelli-rule"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Black Out -->
|
||||
<div
|
||||
id="black-out"
|
||||
style="
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: black;
|
||||
z-index: 100;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
"
|
||||
></div>
|
||||
|
||||
<style>
|
||||
[data-composition-id="main-graphics"] {
|
||||
background: black;
|
||||
font-family: "Inter", sans-serif;
|
||||
color: white;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.scene {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
opacity: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
/* Scene 1: Hook */
|
||||
#scene-1 {
|
||||
background-color: #0a0a0f;
|
||||
z-index: 10;
|
||||
opacity: 1;
|
||||
}
|
||||
.hook-container {
|
||||
text-align: center;
|
||||
}
|
||||
.hook-what-if {
|
||||
font-size: 32px;
|
||||
font-weight: 400;
|
||||
opacity: 0;
|
||||
}
|
||||
.hook-motion-graphics {
|
||||
font-size: 120px;
|
||||
font-weight: 900;
|
||||
text-transform: uppercase;
|
||||
margin-top: 10px;
|
||||
transform: scale(0);
|
||||
}
|
||||
.hook-wrote-themselves {
|
||||
font-size: 48px;
|
||||
font-style: italic;
|
||||
color: #00e5ff;
|
||||
margin-top: 10px;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
/* Scene 2: Swiss Style */
|
||||
.swiss-panel {
|
||||
position: absolute;
|
||||
right: 100px;
|
||||
width: 800px;
|
||||
height: 400px;
|
||||
background: #ffffff;
|
||||
border-radius: 4px;
|
||||
display: flex;
|
||||
padding: 40px;
|
||||
color: black;
|
||||
z-index: 2;
|
||||
}
|
||||
.swiss-grid {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
pointer-events: none;
|
||||
}
|
||||
.grid-line {
|
||||
position: absolute;
|
||||
background: #e53935;
|
||||
}
|
||||
.grid-line.horizontal {
|
||||
width: 100%;
|
||||
height: 2px;
|
||||
}
|
||||
.grid-line.vertical {
|
||||
height: 100%;
|
||||
width: 2px;
|
||||
}
|
||||
|
||||
.swiss-circle {
|
||||
position: absolute;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
background: #e53935;
|
||||
border-radius: 50%;
|
||||
top: 20%;
|
||||
left: 10%;
|
||||
opacity: 0;
|
||||
}
|
||||
.swiss-square {
|
||||
position: absolute;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
background: black;
|
||||
bottom: 15%;
|
||||
right: 15%;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.swiss-content {
|
||||
position: relative;
|
||||
z-index: 3;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
.swiss-title {
|
||||
font-family: "Inter", sans-serif;
|
||||
font-size: 64px;
|
||||
font-weight: 900;
|
||||
opacity: 0;
|
||||
}
|
||||
.swiss-subtitle {
|
||||
font-size: 24px;
|
||||
color: #666;
|
||||
margin-top: 10px;
|
||||
opacity: 0;
|
||||
}
|
||||
.swiss-main-text {
|
||||
font-size: 48px;
|
||||
font-weight: 900;
|
||||
margin-top: 20px;
|
||||
display: flex;
|
||||
gap: 15px;
|
||||
}
|
||||
.swiss-main-text .word {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
/* Scene 3: Figma Config Style */
|
||||
.dark-overlay {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(0, 0, 0, 0.55);
|
||||
z-index: 1;
|
||||
}
|
||||
.figma-container {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
width: 1200px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.figma-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 20px;
|
||||
opacity: 0;
|
||||
}
|
||||
.glyph-container {
|
||||
position: relative;
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.glyph-ring {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 50%;
|
||||
border: 8px solid transparent;
|
||||
}
|
||||
.ring-unified {
|
||||
background:
|
||||
linear-gradient(black, black) padding-box,
|
||||
linear-gradient(to right, #f24e1e, #a259ff) border-box;
|
||||
}
|
||||
.glyph-diamond {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background: white;
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
.glyph-rect {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 8px;
|
||||
background: linear-gradient(to bottom right, #f24e1e, #a259ff);
|
||||
}
|
||||
.glyph-wipe {
|
||||
position: absolute;
|
||||
width: 0%;
|
||||
height: 100%;
|
||||
background: rgba(255, 255, 255, 0.3);
|
||||
left: 0;
|
||||
}
|
||||
.glyph-tri {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background: linear-gradient(to bottom right, #f24e1e, #a259ff);
|
||||
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
|
||||
}
|
||||
.glyph-lines {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
width: 60px;
|
||||
}
|
||||
.glyph-lines .line {
|
||||
height: 4px;
|
||||
background: white;
|
||||
width: 0;
|
||||
}
|
||||
.figma-label {
|
||||
font-size: 40px;
|
||||
font-weight: bold;
|
||||
}
|
||||
.figma-footer {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
font-size: 22px;
|
||||
margin-top: 60px;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
/* Scene 4: David Carson Style */
|
||||
.carson-overlay {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
z-index: 1;
|
||||
}
|
||||
.carson-container {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.carson-line-1 {
|
||||
position: absolute;
|
||||
top: 20%;
|
||||
left: 10%;
|
||||
font-size: 140px;
|
||||
font-weight: 900;
|
||||
transform: translateY(200px);
|
||||
z-index: 2;
|
||||
}
|
||||
.carson-line-1 .red-dot {
|
||||
color: #ff0000;
|
||||
font-size: 240px;
|
||||
position: absolute;
|
||||
top: -40px;
|
||||
left: 80%;
|
||||
z-index: 1;
|
||||
opacity: 0.8;
|
||||
}
|
||||
.carson-line-2 {
|
||||
position: absolute;
|
||||
bottom: 30%;
|
||||
right: 10%;
|
||||
font-size: 80px;
|
||||
font-weight: 400;
|
||||
opacity: 0;
|
||||
z-index: 3;
|
||||
transform: rotate(-5deg);
|
||||
}
|
||||
|
||||
/* Scene 5: Wes Anderson */
|
||||
.wes-bg {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: #f5f0e8;
|
||||
z-index: -1;
|
||||
}
|
||||
.wes-bg::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
opacity: 0.05;
|
||||
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
|
||||
}
|
||||
.wes-container {
|
||||
text-align: center;
|
||||
color: #2c1e16;
|
||||
overflow: hidden;
|
||||
}
|
||||
.wes-text-top {
|
||||
font-family: "Libre Baskerville", serif;
|
||||
font-size: 44px;
|
||||
font-style: italic;
|
||||
transform: translateY(-100px);
|
||||
}
|
||||
.wes-rule {
|
||||
width: 0;
|
||||
height: 1px;
|
||||
background: #2c1e16;
|
||||
margin: 20px auto;
|
||||
}
|
||||
.wes-text-bottom {
|
||||
font-family: "Libre Baskerville", serif;
|
||||
font-size: 44px;
|
||||
transform: translateY(100px);
|
||||
}
|
||||
|
||||
/* Scene 6: Vignelli Style */
|
||||
.vignelli-container {
|
||||
text-align: center;
|
||||
}
|
||||
.vignelli-title {
|
||||
font-family: "Inter", sans-serif;
|
||||
font-size: 120px;
|
||||
font-weight: 900;
|
||||
letter-spacing: -0.02em;
|
||||
opacity: 0;
|
||||
}
|
||||
.vignelli-subtitle {
|
||||
font-family: "Inter", sans-serif;
|
||||
font-size: 32px;
|
||||
color: #00e5ff;
|
||||
margin-top: 20px;
|
||||
opacity: 0;
|
||||
}
|
||||
.vignelli-rule {
|
||||
width: 0;
|
||||
height: 2px;
|
||||
background: white;
|
||||
margin: 30px auto 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
|
||||
<script>
|
||||
const tl = gsap.timeline({ paused: true });
|
||||
|
||||
const video = document.getElementById("a-roll-video");
|
||||
|
||||
// --- Initial Setup ---
|
||||
tl.set(
|
||||
video,
|
||||
{ width: "100%", height: "100%", left: 0, top: 0, borderRadius: 0, scale: 1, opacity: 0 },
|
||||
0,
|
||||
);
|
||||
tl.set("#white-wipe", { xPercent: -100 }, 0);
|
||||
|
||||
// --- Scene 1: Hook (0s - 2.0s) ---
|
||||
tl.set("#scene-1", { opacity: 1, clipPath: "none" }, 0);
|
||||
tl.to(".hook-what-if", { opacity: 1, y: -30, duration: 0.8, ease: "power3.out" }, 0.2);
|
||||
tl.to(".hook-motion-graphics", { scale: 1, duration: 0.8, ease: "back.out(1.7)" }, 0.5);
|
||||
tl.fromTo(
|
||||
".hook-wrote-themselves",
|
||||
{ x: 100, opacity: 0 },
|
||||
{ x: 0, opacity: 1, duration: 0.6, ease: "power2.out" },
|
||||
0.9,
|
||||
);
|
||||
|
||||
// --- Transition to Scene 2 (2.0s - 2.4s) ---
|
||||
tl.to("#white-wipe", { xPercent: 0, duration: 0.2, ease: "power2.in" }, 2.0);
|
||||
tl.set("#scene-1", { opacity: 0 }, 2.2);
|
||||
tl.set(video, { opacity: 1 }, 2.2);
|
||||
tl.to("#white-wipe", { xPercent: 100, duration: 0.2, ease: "power2.out" }, 2.2);
|
||||
|
||||
// --- Scene 2: Swiss Style (2.0s - 5.0s) ---
|
||||
gsap.set(".swiss-panel", { xPercent: 100 });
|
||||
tl.to("#scene-2", { opacity: 1, duration: 0.1 }, 2.2);
|
||||
tl.to(".swiss-panel", { xPercent: 0, duration: 0.8, ease: "expo.out" }, 2.3);
|
||||
tl.to(".swiss-title", { opacity: 1, duration: 0.1 }, 2.5);
|
||||
tl.to(".swiss-subtitle", { opacity: 1, y: 0, duration: 0.4 }, 2.7);
|
||||
tl.to(
|
||||
".swiss-main-text .word",
|
||||
{ opacity: 1, y: 0, stagger: 0.15, duration: 0.5, ease: "power2.out" },
|
||||
3.0,
|
||||
);
|
||||
tl.to(".swiss-circle", { opacity: 1, scale: 1.2, duration: 0.6, ease: "back.out" }, 3.2);
|
||||
tl.to(".swiss-square", { opacity: 1, rotation: 45, duration: 0.6, ease: "back.out" }, 3.4);
|
||||
tl.to(".swiss-panel", { xPercent: 120, duration: 0.7, ease: "expo.in" }, 4.7);
|
||||
tl.to("#scene-2", { opacity: 0, duration: 0.1 }, 5.0);
|
||||
|
||||
// --- Scene 3: Figma Config Style (5.3s - 9.6s) ---
|
||||
tl.to("#scene-3", { opacity: 1, duration: 0.3 }, 5.3);
|
||||
tl.to("#figma-animations", { opacity: 1, y: 0, duration: 0.6 }, 5.5);
|
||||
tl.to(".glyph-diamond", { rotation: 225, duration: 2, repeat: 1, ease: "power2.inOut" }, 5.5);
|
||||
|
||||
tl.to("#figma-transitions", { opacity: 1, y: 0, duration: 0.6 }, 6.2);
|
||||
tl.to(".glyph-wipe", { width: "100%", duration: 1, ease: "power2.inOut" }, 6.2);
|
||||
|
||||
tl.to("#figma-typography", { opacity: 1, y: 0, duration: 0.6 }, 6.9);
|
||||
tl.to(".glyph-lines .line", { width: "100%", stagger: 0.2, duration: 0.5 }, 7.1);
|
||||
|
||||
tl.to(".figma-footer", { opacity: 1, y: -20, duration: 0.8 }, 7.8);
|
||||
tl.to("#scene-3", { opacity: 0, duration: 0.5 }, 9.1);
|
||||
|
||||
// --- Scene 4: David Carson Style (9.6s - 11.7s) ---
|
||||
tl.to("#scene-4", { opacity: 1, duration: 0.1 }, 9.6);
|
||||
tl.to(".carson-line-1", { y: 0, duration: 0.6, ease: "expo.out" }, 9.7);
|
||||
tl.to(".carson-line-2", { opacity: 1, x: -50, duration: 0.5, ease: "back.out" }, 10.2);
|
||||
tl.to(".carson-container", { y: 300, duration: 0.6, ease: "expo.in" }, 11.4);
|
||||
tl.to("#scene-4", { opacity: 0, duration: 0.1 }, 11.7);
|
||||
|
||||
// --- Scene 5: Wes Anderson (11.7s - 13.5s) ---
|
||||
tl.to(video, { opacity: 0, duration: 0.4 }, 11.7);
|
||||
tl.to("#scene-5", { opacity: 1, duration: 0.1 }, 11.7);
|
||||
tl.to(".wes-text-top", { y: 0, duration: 0.6, ease: "back.out(1.2)" }, 12.0);
|
||||
tl.to(".wes-rule", { width: 400, duration: 0.6 }, 12.3);
|
||||
tl.to(".wes-text-bottom", { y: 0, duration: 0.6, ease: "back.out(1.2)" }, 12.6);
|
||||
tl.to("#scene-5", { opacity: 0, duration: 0.5 }, 13.0);
|
||||
|
||||
// --- Scene 6: Vignelli Style (13.5s - 14.72s) ---
|
||||
tl.set(video, { opacity: 1 }, 13.5);
|
||||
tl.set("#scene-6", { opacity: 1 }, 13.5);
|
||||
tl.set("#scene-6-overlay", { opacity: 1 }, 13.5);
|
||||
|
||||
tl.to("#scene-6-overlay", { opacity: 0.6, duration: 0.4 }, 13.5);
|
||||
|
||||
tl.to(".vignelli-title", { opacity: 1, duration: 0.5 }, 13.8);
|
||||
tl.to(".vignelli-subtitle", { opacity: 1, duration: 0.5 }, 14.0);
|
||||
tl.to(".vignelli-rule", { width: 300, duration: 0.4 }, 14.2);
|
||||
|
||||
tl.to("#scene-6-overlay", { opacity: 0, duration: 0.3 }, 14.4);
|
||||
|
||||
tl.set("#black-out", { opacity: 1 }, 14.7);
|
||||
|
||||
window.__timelines = window.__timelines || {};
|
||||
window.__timelines["main-graphics"] = tl;
|
||||
</script>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,61 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=1920, height=1080" />
|
||||
<title>Kinetic Type</title>
|
||||
<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,400;0,700;0,900;1,400&family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&display=block"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<style>
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
html,
|
||||
body {
|
||||
margin: 0;
|
||||
width: 1920px;
|
||||
height: 1080px;
|
||||
overflow: hidden;
|
||||
background-color: #0a0a0f;
|
||||
font-family:
|
||||
"Inter",
|
||||
-apple-system,
|
||||
sans-serif;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div
|
||||
id="root"
|
||||
data-composition-id="main"
|
||||
data-start="0"
|
||||
data-duration="15"
|
||||
data-width="1920"
|
||||
data-height="1080"
|
||||
>
|
||||
<div
|
||||
id="graphics-layer"
|
||||
data-composition-id="main-graphics"
|
||||
data-composition-src="compositions/main-graphics.html"
|
||||
data-start="0"
|
||||
data-duration="15"
|
||||
data-track-index="1"
|
||||
data-width="1920"
|
||||
data-height="1080"
|
||||
></div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
window.__timelines = window.__timelines || {};
|
||||
const tl = gsap.timeline({ paused: true });
|
||||
window.__timelines["main"] = tl;
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,451 @@
|
||||
<template id="nyt-chart-template">
|
||||
<div data-composition-id="nyt-chart" data-width="1920" data-height="1080" data-duration="15">
|
||||
<!-- Google Fonts Import -->
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css2?family=Libre+Baskerville:wght@400;700&family=Libre+Franklin:wght@300;400;600&display=block"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
|
||||
<div class="chart-container">
|
||||
<!-- Header Section -->
|
||||
<div class="header">
|
||||
<h1 class="headline">Monthly Revenue vs. Conversion Rate</h1>
|
||||
<p class="subtitle">Jan–Jun 2024, in thousands</p>
|
||||
<div class="key">
|
||||
<div class="key-item">
|
||||
<div class="key-box revenue-box"></div>
|
||||
<span class="key-text">Revenue</span>
|
||||
</div>
|
||||
<div class="key-item">
|
||||
<div class="key-line conversion-line"></div>
|
||||
<span class="key-text">Conversion Rate</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- SVG Chart Area -->
|
||||
<svg class="chart-svg" viewBox="0 0 1600 700" preserveAspectRatio="xMidYMid meet">
|
||||
<!-- Gridlines Group -->
|
||||
<g class="gridlines"></g>
|
||||
|
||||
<!-- X-Axis Labels -->
|
||||
<g class="x-axis-labels"></g>
|
||||
|
||||
<!-- Bars Group (Revenue) -->
|
||||
<g class="bars-group"></g>
|
||||
|
||||
<!-- Bar Labels Group -->
|
||||
<g class="bar-labels-group"></g>
|
||||
|
||||
<!-- Line Group (Conversion Rate) -->
|
||||
<g class="line-group">
|
||||
<path class="conversion-path" fill="none" stroke="#326FA8" stroke-width="1.5" />
|
||||
<circle class="line-dot" r="5" fill="#326FA8" style="opacity: 0" />
|
||||
</g>
|
||||
|
||||
<!-- Line Labels Group -->
|
||||
<g class="line-labels-group"></g>
|
||||
|
||||
<!-- Baseline -->
|
||||
<line x1="100" y1="600" x2="1500" y2="600" stroke="black" stroke-width="1" />
|
||||
</svg>
|
||||
|
||||
<!-- Source Line -->
|
||||
<div class="source">Source: Internal analytics</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
[data-composition-id="nyt-chart"] {
|
||||
width: 1920px;
|
||||
height: 1080px;
|
||||
background-color: #faf9f6;
|
||||
font-family: "Libre Franklin", sans-serif;
|
||||
color: #333;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
[data-composition-id="nyt-chart"] .chart-container {
|
||||
width: 1600px;
|
||||
height: 900px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
transform: scale(1.15);
|
||||
transform-origin: center center;
|
||||
}
|
||||
|
||||
[data-composition-id="nyt-chart"] .header {
|
||||
margin-bottom: 40px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
[data-composition-id="nyt-chart"] .headline {
|
||||
font-family: "Libre Baskerville", serif;
|
||||
font-size: 42px;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
clip-path: inset(0 100% 0 0);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
[data-composition-id="nyt-chart"] .subtitle {
|
||||
font-size: 16px;
|
||||
color: #d4d4d4;
|
||||
margin: 8px 0 16px 0;
|
||||
clip-path: inset(0 100% 0 0);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
[data-composition-id="nyt-chart"] .key {
|
||||
display: flex;
|
||||
gap: 24px;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
[data-composition-id="nyt-chart"] .key-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
[data-composition-id="nyt-chart"] .key-box {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background-color: #5c5c5c;
|
||||
}
|
||||
|
||||
[data-composition-id="nyt-chart"] .key-line {
|
||||
width: 16px;
|
||||
height: 1.5px;
|
||||
background-color: #326fa8;
|
||||
}
|
||||
|
||||
[data-composition-id="nyt-chart"] .key-text {
|
||||
font-size: 13px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
[data-composition-id="nyt-chart"] .chart-svg {
|
||||
width: 100%;
|
||||
height: 600px;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
[data-composition-id="nyt-chart"] .source {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
font-size: 11px;
|
||||
color: #999;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
[data-composition-id="nyt-chart"] .grid-line {
|
||||
stroke: #e8e8e8;
|
||||
stroke-width: 0.5px;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
[data-composition-id="nyt-chart"] .axis-label {
|
||||
font-size: 14px;
|
||||
fill: #666;
|
||||
text-anchor: middle;
|
||||
}
|
||||
|
||||
[data-composition-id="nyt-chart"] .bar {
|
||||
fill: #5c5c5c;
|
||||
}
|
||||
|
||||
[data-composition-id="nyt-chart"] .bar-label {
|
||||
font-size: 14px;
|
||||
fill: #333;
|
||||
text-anchor: middle;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
[data-composition-id="nyt-chart"] .line-label {
|
||||
font-size: 14px;
|
||||
fill: #326fa8;
|
||||
font-weight: 600;
|
||||
text-anchor: middle;
|
||||
opacity: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
(function initChart() {
|
||||
// Wait for DOM — the runtime may not have cloned the template content yet
|
||||
const svg = document.querySelector(`[data-composition-id="nyt-chart"] .chart-svg`);
|
||||
if (!svg) {
|
||||
setTimeout(initChart, 50);
|
||||
return;
|
||||
}
|
||||
const tl = gsap.timeline({ paused: true });
|
||||
|
||||
// Data
|
||||
const months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun"];
|
||||
const revenueData = [8, 12, 15, 11, 18, 22]; // in thousands
|
||||
const conversionData = [2.1, 2.8, 3.2, 2.9, 3.8, 4.2]; // in percentage
|
||||
|
||||
// Chart Dimensions
|
||||
const chartWidth = 1400;
|
||||
const chartHeight = 500;
|
||||
const startX = 100;
|
||||
const startY = 600;
|
||||
const barWidth = 80;
|
||||
const spacing = (chartWidth - barWidth * months.length) / (months.length + 1);
|
||||
|
||||
// Scales
|
||||
const maxRevenue = 25;
|
||||
const maxConversion = 5;
|
||||
|
||||
const getBarY = (val) => startY - (val / maxRevenue) * chartHeight;
|
||||
const getLineY = (val) => startY - (val / maxConversion) * chartHeight;
|
||||
const getX = (i) => startX + spacing + i * (barWidth + spacing) + barWidth / 2;
|
||||
|
||||
// 1. Setup Elements (svg already found above)
|
||||
const gridGroup = svg.querySelector(".gridlines");
|
||||
const xAxisGroup = svg.querySelector(".x-axis-labels");
|
||||
const barsGroup = svg.querySelector(".bars-group");
|
||||
const barLabelsGroup = svg.querySelector(".bar-labels-group");
|
||||
const lineLabelsGroup = svg.querySelector(".line-labels-group");
|
||||
const conversionPath = svg.querySelector(".conversion-path");
|
||||
const lineDot = svg.querySelector(".line-dot");
|
||||
|
||||
// Create Gridlines (5 lines)
|
||||
for (let i = 1; i <= 5; i++) {
|
||||
const y = startY - i * (chartHeight / 5);
|
||||
const line = document.createElementNS("http://www.w3.org/2000/svg", "line");
|
||||
line.setAttribute("x1", startX);
|
||||
line.setAttribute("y1", y);
|
||||
line.setAttribute("x2", startX + chartWidth);
|
||||
line.setAttribute("y2", y);
|
||||
line.setAttribute("class", "grid-line");
|
||||
gridGroup.appendChild(line);
|
||||
}
|
||||
|
||||
// Create X-Axis Labels & Bars & Bar Labels
|
||||
const linePoints = [];
|
||||
months.forEach((month, i) => {
|
||||
const x = getX(i);
|
||||
|
||||
// X-Axis Label
|
||||
const label = document.createElementNS("http://www.w3.org/2000/svg", "text");
|
||||
label.setAttribute("x", x);
|
||||
label.setAttribute("y", startY + 30);
|
||||
label.setAttribute("class", "axis-label");
|
||||
label.textContent = month;
|
||||
xAxisGroup.appendChild(label);
|
||||
|
||||
// Bar
|
||||
const barHeight = (revenueData[i] / maxRevenue) * chartHeight;
|
||||
const bar = document.createElementNS("http://www.w3.org/2000/svg", "rect");
|
||||
bar.setAttribute("x", x - barWidth / 2);
|
||||
bar.setAttribute("y", startY);
|
||||
bar.setAttribute("width", barWidth);
|
||||
bar.setAttribute("height", 0);
|
||||
bar.setAttribute("class", "bar");
|
||||
barsGroup.appendChild(bar);
|
||||
|
||||
// Bar Label
|
||||
const barLabel = document.createElementNS("http://www.w3.org/2000/svg", "text");
|
||||
barLabel.setAttribute("x", x);
|
||||
barLabel.setAttribute("y", getBarY(revenueData[i]) - 10);
|
||||
barLabel.setAttribute("class", "bar-label");
|
||||
barLabel.textContent = `$${revenueData[i]}K`;
|
||||
barLabelsGroup.appendChild(barLabel);
|
||||
|
||||
// Line Point
|
||||
linePoints.push(`${x},${getLineY(conversionData[i])}`);
|
||||
|
||||
// Line Label
|
||||
const lineLabel = document.createElementNS("http://www.w3.org/2000/svg", "text");
|
||||
lineLabel.setAttribute("x", x);
|
||||
lineLabel.setAttribute("y", getLineY(conversionData[i]) - 15);
|
||||
lineLabel.setAttribute("class", "line-label");
|
||||
lineLabel.textContent = `${conversionData[i]}%`;
|
||||
lineLabelsGroup.appendChild(lineLabel);
|
||||
});
|
||||
|
||||
// Set Path Data
|
||||
conversionPath.setAttribute("d", `M ${linePoints.join(" L ")}`);
|
||||
const pathLength = conversionPath.getTotalLength();
|
||||
conversionPath.style.strokeDasharray = pathLength;
|
||||
conversionPath.style.strokeDashoffset = pathLength;
|
||||
|
||||
// --- ANIMATION TIMELINE ---
|
||||
|
||||
// 2. Headline & Subtitle (Draw on left-to-right)
|
||||
tl.to(
|
||||
`[data-composition-id="nyt-chart"] .headline`,
|
||||
{
|
||||
clipPath: "inset(0 0% 0 0)",
|
||||
duration: 1.2,
|
||||
ease: "power1.inOut",
|
||||
},
|
||||
0,
|
||||
);
|
||||
|
||||
tl.to(
|
||||
`[data-composition-id="nyt-chart"] .subtitle`,
|
||||
{
|
||||
clipPath: "inset(0 0% 0 0)",
|
||||
duration: 1.2,
|
||||
ease: "power1.inOut",
|
||||
},
|
||||
0.2,
|
||||
);
|
||||
|
||||
// 3. Inline Key
|
||||
tl.to(
|
||||
`[data-composition-id="nyt-chart"] .key`,
|
||||
{
|
||||
opacity: 1,
|
||||
duration: 0.4,
|
||||
ease: "power2.out",
|
||||
},
|
||||
1.0,
|
||||
);
|
||||
|
||||
// 4. Gridlines (Stagger bottom to top)
|
||||
tl.to(
|
||||
`[data-composition-id="nyt-chart"] .grid-line`,
|
||||
{
|
||||
opacity: 1,
|
||||
duration: 0.5,
|
||||
stagger: 0.25,
|
||||
ease: "power2.out",
|
||||
},
|
||||
0.5,
|
||||
);
|
||||
|
||||
// 5. Bars (Revenue)
|
||||
const bars = barsGroup.querySelectorAll(".bar");
|
||||
const barLabels = barLabelsGroup.querySelectorAll(".bar-label");
|
||||
|
||||
bars.forEach((bar, i) => {
|
||||
const barHeight = (revenueData[i] / maxRevenue) * chartHeight;
|
||||
const startTime = 1.5 + i * 0.5; // 0.8s duration, 0.3s overlap (0.8 - 0.3 = 0.5 step)
|
||||
|
||||
tl.to(
|
||||
bar,
|
||||
{
|
||||
attr: {
|
||||
height: barHeight,
|
||||
y: startY - barHeight,
|
||||
},
|
||||
duration: 0.8,
|
||||
ease: "power2.out",
|
||||
},
|
||||
startTime,
|
||||
);
|
||||
|
||||
// 6. Bar Labels
|
||||
tl.to(
|
||||
barLabels[i],
|
||||
{
|
||||
opacity: 1,
|
||||
duration: 0.3,
|
||||
ease: "power2.out",
|
||||
},
|
||||
startTime + 0.8,
|
||||
);
|
||||
});
|
||||
|
||||
// 7. Line (Conversion Rate)
|
||||
// Starts 0.5s after the last bar begins
|
||||
const lastBarStartTime = 1.5 + (months.length - 1) * 0.5;
|
||||
const lineStartTime = lastBarStartTime + 0.5;
|
||||
|
||||
tl.to(
|
||||
conversionPath,
|
||||
{
|
||||
strokeDashoffset: 0,
|
||||
duration: 3,
|
||||
ease: "none",
|
||||
},
|
||||
lineStartTime,
|
||||
);
|
||||
|
||||
// 8. Line Dot & 9. Line Labels
|
||||
// We need to sync the dot and labels with the path drawing
|
||||
tl.set(
|
||||
lineDot,
|
||||
{ opacity: 1, attr: { cx: getX(0), cy: getLineY(conversionData[0]) } },
|
||||
lineStartTime,
|
||||
);
|
||||
|
||||
const lineLabels = lineLabelsGroup.querySelectorAll(".line-label");
|
||||
months.forEach((_, i) => {
|
||||
if (i > 0) {
|
||||
const x = getX(i);
|
||||
const y = getLineY(conversionData[i]);
|
||||
tl.to(
|
||||
lineDot,
|
||||
{
|
||||
attr: {
|
||||
cx: x,
|
||||
cy: y,
|
||||
},
|
||||
duration: 3 / (months.length - 1),
|
||||
ease: "none",
|
||||
},
|
||||
lineStartTime + ((i - 1) / (months.length - 1)) * 3,
|
||||
);
|
||||
}
|
||||
|
||||
const labelTime = lineStartTime + (i / (months.length - 1)) * 3 + 0.2;
|
||||
|
||||
// Set initial text to 0.0%
|
||||
lineLabels[i].textContent = "0.0%";
|
||||
|
||||
// Fade in
|
||||
tl.to(
|
||||
lineLabels[i],
|
||||
{
|
||||
opacity: 1,
|
||||
duration: 0.1,
|
||||
ease: "power2.out",
|
||||
},
|
||||
labelTime,
|
||||
);
|
||||
|
||||
// Animate value
|
||||
const dummy = { val: 0 };
|
||||
tl.to(
|
||||
dummy,
|
||||
{
|
||||
val: conversionData[i],
|
||||
duration: 0.8,
|
||||
ease: "power2.out",
|
||||
onUpdate: () => {
|
||||
lineLabels[i].textContent = dummy.val.toFixed(1) + "%";
|
||||
},
|
||||
},
|
||||
labelTime,
|
||||
);
|
||||
});
|
||||
|
||||
// 11. Source Line
|
||||
tl.to(
|
||||
`[data-composition-id="nyt-chart"] .source`,
|
||||
{
|
||||
opacity: 1,
|
||||
duration: 0.5,
|
||||
ease: "power2.out",
|
||||
},
|
||||
">+0.5",
|
||||
);
|
||||
|
||||
// Register timeline
|
||||
window.__timelines = window.__timelines || {};
|
||||
window.__timelines["nyt-chart"] = tl;
|
||||
})();
|
||||
</script>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,51 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=1920, height=1080" />
|
||||
<title>NYT Graph</title>
|
||||
<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
html,
|
||||
body {
|
||||
margin: 0;
|
||||
width: 1920px;
|
||||
height: 1080px;
|
||||
overflow: hidden;
|
||||
background-color: #faf9f6;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div
|
||||
id="root"
|
||||
data-composition-id="main"
|
||||
data-start="0"
|
||||
data-duration="15"
|
||||
data-width="1920"
|
||||
data-height="1080"
|
||||
>
|
||||
<div
|
||||
id="nyt-chart-comp"
|
||||
data-composition-id="nyt-chart"
|
||||
data-composition-src="compositions/nyt-chart.html"
|
||||
data-start="0"
|
||||
data-duration="15"
|
||||
data-track-index="0"
|
||||
data-width="1920"
|
||||
data-height="1080"
|
||||
></div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
window.__timelines = window.__timelines || {};
|
||||
const tl = gsap.timeline({ paused: true });
|
||||
window.__timelines["main"] = tl;
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,164 @@
|
||||
<template id="captions-template">
|
||||
<div
|
||||
data-composition-id="captions"
|
||||
data-width="1920"
|
||||
data-height="1080"
|
||||
data-duration="__VIDEO_DURATION__"
|
||||
>
|
||||
<div id="captions-container"></div>
|
||||
|
||||
<style>
|
||||
[data-composition-id="captions"] {
|
||||
width: 1920px;
|
||||
height: 1080px;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
[data-composition-id="captions"] #captions-container {
|
||||
position: absolute;
|
||||
bottom: 100px; /* Position in bottom 1/3 */
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: 150px; /* Fixed height for the caption box */
|
||||
}
|
||||
|
||||
.caption-box {
|
||||
position: absolute; /* Stacked in the same place */
|
||||
background-color: #ff2d8a;
|
||||
color: white;
|
||||
padding: 20px 40px;
|
||||
border-radius: 16px;
|
||||
font-family: "Nunito", sans-serif;
|
||||
font-weight: 900; /* Nunito Black */
|
||||
font-size: 64px;
|
||||
text-align: center;
|
||||
display: inline-block;
|
||||
white-space: nowrap;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transform: scale(0);
|
||||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
</style>
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
|
||||
<script>
|
||||
(function () {
|
||||
const TRANSCRIPT = [
|
||||
{ text: "We", start: 0.119, end: 0.259 },
|
||||
{ text: "asked", start: 0.319, end: 0.479 },
|
||||
{ text: "what", start: 0.519, end: 0.659 },
|
||||
{ text: "you", start: 0.699, end: 0.819 },
|
||||
{ text: "needed.", start: 0.859, end: 1.819 },
|
||||
{ text: "Forty-seven", start: 1.839, end: 2.299 },
|
||||
{ text: "percent", start: 2.399, end: 2.679 },
|
||||
{ text: "of", start: 2.7, end: 2.799 },
|
||||
{ text: "you", start: 2.839, end: 2.939 },
|
||||
{ text: "said", start: 3.039, end: 3.179 },
|
||||
{ text: "motion", start: 3.24, end: 3.559 },
|
||||
{ text: "graphics.", start: 3.579, end: 4.639 },
|
||||
{ text: "Sixty-two", start: 4.659, end: 5.179 },
|
||||
{ text: "percent", start: 5.299, end: 5.759 },
|
||||
{ text: "said", start: 5.859, end: 5.98 },
|
||||
{ text: "static", start: 6.099, end: 6.399 },
|
||||
{ text: "content", start: 6.46, end: 6.879 },
|
||||
{ text: "was", start: 6.92, end: 7.079 },
|
||||
{ text: "costing", start: 7.099, end: 7.48 },
|
||||
{ text: "you", start: 7.5, end: 7.579 },
|
||||
{ text: "attention,", start: 7.679, end: 8.659 },
|
||||
{ text: "and", start: 8.699, end: 8.86 },
|
||||
{ text: "three", start: 8.88, end: 9.06 },
|
||||
{ text: "out", start: 9.079, end: 9.18 },
|
||||
{ text: "of", start: 9.199, end: 9.34 },
|
||||
{ text: "four", start: 9.38, end: 9.799 },
|
||||
{ text: "said", start: 9.84, end: 10.0 },
|
||||
{ text: "you", start: 10.019, end: 10.159 },
|
||||
{ text: "know", start: 10.179, end: 10.36 },
|
||||
{ text: "the", start: 10.38, end: 10.479 },
|
||||
{ text: "look", start: 10.52, end: 10.699 },
|
||||
{ text: "you", start: 10.739, end: 10.859 },
|
||||
{ text: "want", start: 10.98, end: 11.34 },
|
||||
{ text: "but", start: 11.359, end: 11.52 },
|
||||
{ text: "don't", start: 11.56, end: 11.779 },
|
||||
{ text: "have", start: 11.819, end: 11.94 },
|
||||
{ text: "the", start: 11.96, end: 12.06 },
|
||||
{ text: "editing", start: 12.079, end: 12.4 },
|
||||
{ text: "skills", start: 12.52, end: 12.86 },
|
||||
{ text: "to", start: 12.88, end: 13.0 },
|
||||
{ text: "get", start: 13.019, end: 13.18 },
|
||||
{ text: "there.", start: 13.22, end: 14.22 },
|
||||
{ text: "So", start: 14.239, end: 14.399 },
|
||||
{ text: "we", start: 14.42, end: 14.52 },
|
||||
{ text: "built", start: 14.619, end: 14.88 },
|
||||
{ text: "Hyperframes", start: 15.079, end: 15.42 },
|
||||
];
|
||||
const container = document.getElementById("captions-container");
|
||||
const tl = gsap.timeline({ paused: true });
|
||||
|
||||
// Group transcript into lines (max 5 words)
|
||||
const lines = [];
|
||||
for (let i = 0; i < TRANSCRIPT.length; i += 5) {
|
||||
lines.push(TRANSCRIPT.slice(i, i + 5));
|
||||
}
|
||||
|
||||
lines.forEach((lineWords, index) => {
|
||||
const lineText = lineWords.map((w) => w.text).join(" ");
|
||||
const startTime = lineWords[0].start;
|
||||
const endTime = lineWords[lineWords.length - 1].end;
|
||||
|
||||
// Create element
|
||||
const el = document.createElement("div");
|
||||
el.className = "caption-box";
|
||||
el.textContent = lineText;
|
||||
el.id = `caption-line-${index}`;
|
||||
container.appendChild(el);
|
||||
|
||||
// Animation: Pop in with scale-up bounce (0% to 110% to 100%)
|
||||
tl.to(
|
||||
el,
|
||||
{
|
||||
autoAlpha: 1,
|
||||
scale: 1.1,
|
||||
duration: 0.2,
|
||||
ease: "power2.out",
|
||||
},
|
||||
startTime,
|
||||
);
|
||||
|
||||
tl.to(
|
||||
el,
|
||||
{
|
||||
scale: 1,
|
||||
duration: 0.1,
|
||||
ease: "power2.inOut",
|
||||
},
|
||||
startTime + 0.2,
|
||||
);
|
||||
|
||||
// Stay visible until next line or end of its duration
|
||||
// We hide it when the next line starts or at its own end time
|
||||
const hideTime =
|
||||
index < lines.length - 1 ? Math.min(endTime, lines[index + 1][0].start) : endTime;
|
||||
|
||||
tl.to(
|
||||
el,
|
||||
{
|
||||
autoAlpha: 0,
|
||||
scale: 0,
|
||||
duration: 0.15,
|
||||
ease: "power2.in",
|
||||
},
|
||||
hideTime,
|
||||
);
|
||||
});
|
||||
|
||||
window.__timelines = window.__timelines || {};
|
||||
window.__timelines["captions"] = tl;
|
||||
})();
|
||||
</script>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,108 @@
|
||||
<template id="intro-template">
|
||||
<div
|
||||
id="intro-comp"
|
||||
data-composition-id="intro"
|
||||
data-start="0"
|
||||
data-duration="__VIDEO_DURATION__"
|
||||
data-width="1920"
|
||||
data-height="1080"
|
||||
>
|
||||
<div class="intro-container">
|
||||
<h1 class="title">HYPERFRAMES</h1>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
@import url("https://fonts.googleapis.com/css2?family=Nunito:wght@900&display=swap");
|
||||
|
||||
[data-composition-id="intro"] .intro-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
[data-composition-id="intro"] .title {
|
||||
font-family: "Nunito", sans-serif;
|
||||
font-weight: 900;
|
||||
font-size: 180px;
|
||||
color: #ff2d8a; /* Hot Pink */
|
||||
text-transform: uppercase;
|
||||
transform: rotate(-5deg); /* Tilted 5 degrees */
|
||||
margin: 0;
|
||||
padding: 20px;
|
||||
/* Layered offset shadow for depth without suffocating letterforms */
|
||||
filter: drop-shadow(8px 8px 0 #ffffff) drop-shadow(15px 15px 0 rgba(0, 0, 0, 0.1));
|
||||
opacity: 0;
|
||||
scale: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
|
||||
<script>
|
||||
(function () {
|
||||
const tl = gsap.timeline({ paused: true });
|
||||
|
||||
// --- INTRO SEQUENCE ---
|
||||
// Animation: Scale-up bounce (0% to 110% to 100%) with elastic overshoot
|
||||
// Starts at 0.5s, lasts until 3s
|
||||
tl.to('[data-composition-id="intro"] .title', {
|
||||
opacity: 1,
|
||||
scale: 1.1,
|
||||
duration: 0.6,
|
||||
ease: "back.out(1.7)",
|
||||
delay: 0.5,
|
||||
})
|
||||
.to('[data-composition-id="intro"] .title', {
|
||||
scale: 1,
|
||||
duration: 0.4,
|
||||
ease: "elastic.out(1, 0.3)",
|
||||
})
|
||||
// Ambient motion
|
||||
.to(
|
||||
'[data-composition-id="intro"] .title',
|
||||
{
|
||||
rotation: "-3deg",
|
||||
duration: 1,
|
||||
repeat: 1,
|
||||
yoyo: true,
|
||||
ease: "sine.inOut",
|
||||
},
|
||||
"-=0.5",
|
||||
)
|
||||
// Exit intro
|
||||
.to(
|
||||
'[data-composition-id="intro"] .title',
|
||||
{
|
||||
opacity: 0,
|
||||
scale: 0.5,
|
||||
duration: 0.3,
|
||||
ease: "power2.in",
|
||||
},
|
||||
1.4,
|
||||
);
|
||||
|
||||
// --- END CARD SEQUENCE ---
|
||||
// Appears at 14.619s (after Moment 3 finishes exiting at 14.239 + 0.3)
|
||||
tl.to(
|
||||
'[data-composition-id="intro"] .title',
|
||||
{
|
||||
opacity: 1,
|
||||
scale: 1.1,
|
||||
duration: 0.6,
|
||||
ease: "back.out(1.7)",
|
||||
},
|
||||
14.619,
|
||||
).to('[data-composition-id="intro"] .title', {
|
||||
scale: 1,
|
||||
duration: 0.4,
|
||||
ease: "elastic.out(1, 0.3)",
|
||||
});
|
||||
|
||||
window.__timelines = window.__timelines || {};
|
||||
window.__timelines["intro"] = tl;
|
||||
})();
|
||||
</script>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,388 @@
|
||||
<template id="stats-template">
|
||||
<div
|
||||
data-composition-id="stats"
|
||||
data-width="1920"
|
||||
data-height="1080"
|
||||
data-duration="__VIDEO_DURATION__"
|
||||
>
|
||||
<div id="stats-container">
|
||||
<!-- Moment 1: 47% NEED MOTION GRAPHICS -->
|
||||
<div id="moment-1" class="moment" style="opacity: 0; transform: scale(0) rotate(8deg)">
|
||||
<div class="sticker-stack">
|
||||
<div class="sticker-bg blue-bg"></div>
|
||||
<div class="sticker-content white-bg blue-border">
|
||||
<div class="stat-number blue-text">47%</div>
|
||||
<div class="stat-label blue-text">NEED MOTION GRAPHICS</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Decorative shapes -->
|
||||
<div
|
||||
class="shape circle pink-bg"
|
||||
style="top: -40px; left: -40px; width: 80px; height: 80px"
|
||||
></div>
|
||||
<div
|
||||
class="shape pill lime-bg"
|
||||
style="bottom: -30px; right: -50px; width: 120px; height: 40px; transform: rotate(-15deg)"
|
||||
></div>
|
||||
</div>
|
||||
|
||||
<!-- Moment 2: 62% STRUGGLE WITH STATIC CONTENT -->
|
||||
<div id="moment-2" class="moment" style="opacity: 0; transform: scale(0) rotate(-5deg)">
|
||||
<div class="sticker-stack">
|
||||
<div class="sticker-bg white-bg"></div>
|
||||
<div class="sticker-content blue-bg white-border">
|
||||
<div class="stat-number white-text">62%</div>
|
||||
<div class="stat-label white-text">STRUGGLE WITH STATIC CONTENT</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Decorative shapes -->
|
||||
<div
|
||||
class="shape blob yellow-bg"
|
||||
style="
|
||||
top: -50px;
|
||||
right: -30px;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%;
|
||||
"
|
||||
></div>
|
||||
<div
|
||||
class="shape circle pink-bg"
|
||||
style="bottom: -20px; left: -40px; width: 60px; height: 60px"
|
||||
></div>
|
||||
</div>
|
||||
|
||||
<!-- Moment 3: 75% LACK EDITING SKILLS -->
|
||||
<div id="moment-3" class="moment" style="opacity: 0; transform: scale(0) rotate(3deg)">
|
||||
<div class="sticker-stack">
|
||||
<div class="sticker-bg pink-bg"></div>
|
||||
<div class="sticker-content white-bg pink-border">
|
||||
<div class="stat-number pink-text">75%</div>
|
||||
<div class="stat-label pink-text">LACK EDITING SKILLS</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Decorative shapes -->
|
||||
<div
|
||||
class="shape pill blue-bg"
|
||||
style="
|
||||
top: -30px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%) rotate(5deg);
|
||||
width: 150px;
|
||||
height: 45px;
|
||||
"
|
||||
></div>
|
||||
<div
|
||||
class="shape circle yellow-bg"
|
||||
style="bottom: -40px; right: -20px; width: 90px; height: 90px"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
[data-composition-id="stats"] {
|
||||
width: 1920px;
|
||||
height: 1080px;
|
||||
position: relative;
|
||||
font-family: "Nunito", sans-serif;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
[data-composition-id="stats"] #stats-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
[data-composition-id="stats"] .moment {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 40px;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
/* Layout Positions */
|
||||
[data-composition-id="stats"] #moment-1 {
|
||||
top: 200px;
|
||||
right: 150px; /* Right side when A-roll is Left */
|
||||
width: 600px;
|
||||
}
|
||||
|
||||
[data-composition-id="stats"] #moment-2 {
|
||||
top: 250px;
|
||||
left: 100px; /* Left side when A-roll is Right */
|
||||
width: 700px;
|
||||
}
|
||||
|
||||
[data-composition-id="stats"] #moment-3 {
|
||||
bottom: 100px; /* Below A-roll when centered */
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 800px;
|
||||
}
|
||||
|
||||
/* Sticker Stack Effect */
|
||||
[data-composition-id="stats"] .sticker-stack {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
padding: 40px;
|
||||
filter: drop-shadow(0 15px 0 rgba(0, 87, 255, 0.2));
|
||||
}
|
||||
|
||||
[data-composition-id="stats"] .sticker-bg {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 40px;
|
||||
z-index: -1;
|
||||
transform: rotate(-2deg);
|
||||
}
|
||||
|
||||
[data-composition-id="stats"] .sticker-content {
|
||||
position: relative;
|
||||
padding: 40px;
|
||||
border-radius: 35px;
|
||||
border: 8px solid currentColor;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* Colors */
|
||||
[data-composition-id="stats"] .blue-bg {
|
||||
background-color: #0057ff;
|
||||
}
|
||||
[data-composition-id="stats"] .pink-bg {
|
||||
background-color: #ff2d8a;
|
||||
}
|
||||
[data-composition-id="stats"] .lime-bg {
|
||||
background-color: #7fff00;
|
||||
}
|
||||
[data-composition-id="stats"] .yellow-bg {
|
||||
background-color: #ffe500;
|
||||
}
|
||||
[data-composition-id="stats"] .white-bg {
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
[data-composition-id="stats"] .blue-text {
|
||||
color: #0057ff;
|
||||
}
|
||||
[data-composition-id="stats"] .white-text {
|
||||
color: #ffffff;
|
||||
}
|
||||
[data-composition-id="stats"] .pink-text {
|
||||
color: #ff2d8a;
|
||||
}
|
||||
|
||||
[data-composition-id="stats"] .blue-border {
|
||||
border-color: #0057ff;
|
||||
}
|
||||
[data-composition-id="stats"] .white-border {
|
||||
border-color: #ffffff;
|
||||
}
|
||||
[data-composition-id="stats"] .pink-border {
|
||||
border-color: #ff2d8a;
|
||||
}
|
||||
|
||||
/* Typography */
|
||||
[data-composition-id="stats"] .stat-number {
|
||||
font-size: 180px;
|
||||
font-weight: 900;
|
||||
line-height: 1;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
[data-composition-id="stats"] .stat-label {
|
||||
font-size: 48px;
|
||||
font-weight: 900;
|
||||
line-height: 1.1;
|
||||
max-width: 500px;
|
||||
}
|
||||
|
||||
/* Shapes */
|
||||
[data-composition-id="stats"] .shape {
|
||||
position: absolute;
|
||||
z-index: -2;
|
||||
border-radius: 50%;
|
||||
}
|
||||
[data-composition-id="stats"] .pill {
|
||||
border-radius: 100px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
(function () {
|
||||
const TRANSCRIPT = [
|
||||
{ text: "We", start: 0.119, end: 0.259 },
|
||||
{ text: "asked", start: 0.319, end: 0.479 },
|
||||
{ text: "what", start: 0.519, end: 0.659 },
|
||||
{ text: "you", start: 0.699, end: 0.819 },
|
||||
{ text: "needed.", start: 0.859, end: 1.819 },
|
||||
{ text: "Forty-seven", start: 1.839, end: 2.299 },
|
||||
{ text: "percent", start: 2.399, end: 2.679 },
|
||||
{ text: "of", start: 2.7, end: 2.799 },
|
||||
{ text: "you", start: 2.839, end: 2.939 },
|
||||
{ text: "said", start: 3.039, end: 3.179 },
|
||||
{ text: "motion", start: 3.24, end: 3.559 },
|
||||
{ text: "graphics.", start: 3.579, end: 4.639 },
|
||||
{ text: "Sixty-two", start: 4.659, end: 5.179 },
|
||||
{ text: "percent", start: 5.299, end: 5.759 },
|
||||
{ text: "said", start: 5.859, end: 5.98 },
|
||||
{ text: "static", start: 6.099, end: 6.399 },
|
||||
{ text: "content", start: 6.46, end: 6.879 },
|
||||
{ text: "was", start: 6.92, end: 7.079 },
|
||||
{ text: "costing", start: 7.099, end: 7.48 },
|
||||
{ text: "you", start: 7.5, end: 7.579 },
|
||||
{ text: "attention,", start: 7.679, end: 8.659 },
|
||||
{ text: "and", start: 8.699, end: 8.86 },
|
||||
{ text: "three", start: 8.88, end: 9.06 },
|
||||
{ text: "out", start: 9.079, end: 9.18 },
|
||||
{ text: "of", start: 9.199, end: 9.34 },
|
||||
{ text: "four", start: 9.38, end: 9.799 },
|
||||
{ text: "said", start: 9.84, end: 10.0 },
|
||||
{ text: "you", start: 10.019, end: 10.159 },
|
||||
{ text: "know", start: 10.179, end: 10.36 },
|
||||
{ text: "the", start: 10.38, end: 10.479 },
|
||||
{ text: "look", start: 10.52, end: 10.699 },
|
||||
{ text: "you", start: 10.739, end: 10.859 },
|
||||
{ text: "want", start: 10.98, end: 11.34 },
|
||||
{ text: "but", start: 11.359, end: 11.52 },
|
||||
{ text: "don't", start: 11.56, end: 11.779 },
|
||||
{ text: "have", start: 11.819, end: 11.94 },
|
||||
{ text: "the", start: 11.96, end: 12.06 },
|
||||
{ text: "editing", start: 12.079, end: 12.4 },
|
||||
{ text: "skills", start: 12.52, end: 12.86 },
|
||||
{ text: "to", start: 12.88, end: 13.0 },
|
||||
{ text: "get", start: 13.019, end: 13.18 },
|
||||
{ text: "there.", start: 13.22, end: 14.22 },
|
||||
{ text: "So", start: 14.239, end: 14.399 },
|
||||
{ text: "we", start: 14.42, end: 14.52 },
|
||||
{ text: "built", start: 14.619, end: 14.88 },
|
||||
{ text: "Hyperframes", start: 15.079, end: 15.42 },
|
||||
];
|
||||
const tl = gsap.timeline({ paused: true });
|
||||
|
||||
// Helper to find word timing
|
||||
function getWordTime(wordText) {
|
||||
const word = TRANSCRIPT.find((w) =>
|
||||
w.text
|
||||
.toLowerCase()
|
||||
.replace(/[.,\/#!$%\^&\*;:{}=\-_`~()]/g, "")
|
||||
.startsWith(wordText.toLowerCase()),
|
||||
);
|
||||
return word ? word.start : null;
|
||||
}
|
||||
|
||||
// Timings from transcript
|
||||
const t1 = getWordTime("Forty-seven") || 1.839;
|
||||
const t2 = getWordTime("Sixty-two") || 4.659;
|
||||
const t3 = getWordTime("three") || 8.88;
|
||||
|
||||
// Moment 1 Animation (approx 5s)
|
||||
tl.to(
|
||||
"#moment-1",
|
||||
{
|
||||
opacity: 1,
|
||||
scale: 1,
|
||||
duration: 0.8,
|
||||
ease: "elastic.out(1, 0.6)",
|
||||
onStart: () => gsap.set("#moment-1", { transformOrigin: "center center" }),
|
||||
},
|
||||
t1,
|
||||
);
|
||||
|
||||
// Moment 1 Exit (before Moment 2)
|
||||
tl.to(
|
||||
"#moment-1",
|
||||
{
|
||||
opacity: 0,
|
||||
scale: 0.5,
|
||||
duration: 0.3,
|
||||
ease: "back.in(1.7)",
|
||||
},
|
||||
t2 - 0.4,
|
||||
);
|
||||
|
||||
// Moment 2 Animation (approx 9s)
|
||||
tl.to(
|
||||
"#moment-2",
|
||||
{
|
||||
opacity: 1,
|
||||
scale: 1,
|
||||
duration: 0.8,
|
||||
ease: "elastic.out(1, 0.6)",
|
||||
onStart: () => gsap.set("#moment-2", { transformOrigin: "center center" }),
|
||||
},
|
||||
t2,
|
||||
);
|
||||
|
||||
// Moment 2 Exit (before Moment 3)
|
||||
tl.to(
|
||||
"#moment-2",
|
||||
{
|
||||
opacity: 0,
|
||||
scale: 0.5,
|
||||
duration: 0.3,
|
||||
ease: "back.in(1.7)",
|
||||
},
|
||||
t3 - 0.4,
|
||||
);
|
||||
|
||||
// Moment 3 Animation (approx 13s)
|
||||
tl.to(
|
||||
"#moment-3",
|
||||
{
|
||||
opacity: 1,
|
||||
scale: 1,
|
||||
duration: 0.8,
|
||||
ease: "elastic.out(1, 0.6)",
|
||||
onStart: () => gsap.set("#moment-3", { transformOrigin: "center center" }),
|
||||
},
|
||||
t3,
|
||||
);
|
||||
|
||||
// Moment 3 Exit: 3 words before 'Hyperframes'
|
||||
// 'Editor' is at 15.079. 3 words before is 'So' at 14.239.
|
||||
tl.to(
|
||||
"#moment-3",
|
||||
{
|
||||
opacity: 0,
|
||||
scale: 0.5,
|
||||
duration: 0.3,
|
||||
ease: "back.in(1.7)",
|
||||
},
|
||||
14.239,
|
||||
);
|
||||
|
||||
// Ambient Motion (Finite)
|
||||
const totalDuration = 16.04;
|
||||
gsap.utils.toArray(".shape").forEach((shape, i) => {
|
||||
const stepDuration = 2 + i * 0.2;
|
||||
const steps = Math.ceil(totalDuration / stepDuration);
|
||||
for (let s = 0; s < steps; s++) {
|
||||
tl.to(
|
||||
shape,
|
||||
{
|
||||
y: s % 2 === 0 ? 15 : -15,
|
||||
rotation: s % 2 === 0 ? 5 : -5,
|
||||
duration: stepDuration,
|
||||
ease: "sine.inOut",
|
||||
},
|
||||
s * stepDuration,
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
window.__timelines = window.__timelines || {};
|
||||
window.__timelines["stats"] = tl;
|
||||
})();
|
||||
</script>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,229 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Hyperframes - Play Mode</title>
|
||||
<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
|
||||
<style>
|
||||
body,
|
||||
html {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 1920px;
|
||||
height: 1080px;
|
||||
overflow: hidden;
|
||||
background-color: #ffffff;
|
||||
font-family: "Nunito", sans-serif;
|
||||
}
|
||||
|
||||
#main-composition {
|
||||
width: 1920px;
|
||||
height: 1080px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#bg-comp,
|
||||
#aroll-comp,
|
||||
#intro-comp,
|
||||
#stats-comp,
|
||||
#captions-comp {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#bg-comp {
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
#aroll-comp {
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
#intro-comp {
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
#stats-comp {
|
||||
z-index: 150;
|
||||
}
|
||||
|
||||
#captions-comp {
|
||||
z-index: 200;
|
||||
}
|
||||
|
||||
#aroll-container {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
#short_mag_cut {
|
||||
border-radius: 16px;
|
||||
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
|
||||
border: 8px solid #ffffff;
|
||||
}
|
||||
|
||||
#background-layer {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: #ffffff;
|
||||
z-index: 0;
|
||||
}
|
||||
</style>
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css2?family=Nunito:wght@900&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
</head>
|
||||
<body>
|
||||
<div
|
||||
id="main-composition"
|
||||
data-composition-id="main-video"
|
||||
data-start="0"
|
||||
data-duration="__VIDEO_DURATION__"
|
||||
data-width="1920"
|
||||
data-height="1080"
|
||||
>
|
||||
<!-- Background Layer Composition -->
|
||||
<div
|
||||
id="bg-comp"
|
||||
data-composition-id="background"
|
||||
data-start="0"
|
||||
data-duration="__VIDEO_DURATION__"
|
||||
data-width="1920"
|
||||
data-height="1080"
|
||||
data-track-index="1"
|
||||
>
|
||||
<div id="background-layer"></div>
|
||||
<style>
|
||||
#background-layer {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
(function () {
|
||||
const tl = gsap.timeline({ paused: true });
|
||||
const bg = document.getElementById("background-layer");
|
||||
// Sync with A-roll framing 3 (4.659s)
|
||||
tl.to(bg, { backgroundColor: "#0057FF", duration: 0.5 }, 4.659);
|
||||
// Sync with A-roll framing 4 (8.88s)
|
||||
tl.to(bg, { backgroundColor: "#FFFFFF", duration: 0.5 }, 8.88);
|
||||
window.__timelines["background"] = tl;
|
||||
})();
|
||||
</script>
|
||||
</div>
|
||||
|
||||
<!-- A-roll Layer Composition -->
|
||||
<div
|
||||
id="aroll-comp"
|
||||
data-composition-id="aroll-layer"
|
||||
data-duration="__VIDEO_DURATION__"
|
||||
data-width="1920"
|
||||
data-height="1080"
|
||||
data-track-index="10"
|
||||
>
|
||||
<div id="aroll-container">
|
||||
<video
|
||||
id="short_mag_cut"
|
||||
src="__VIDEO_SRC__"
|
||||
muted
|
||||
playsinline
|
||||
data-start="0"
|
||||
data-duration="__VIDEO_DURATION__"
|
||||
data-track-index="1"
|
||||
style="width: 100%; height: auto"
|
||||
></video>
|
||||
</div>
|
||||
<audio
|
||||
id="a-roll-audio"
|
||||
src="__VIDEO_SRC__"
|
||||
data-start="0"
|
||||
data-duration="__VIDEO_DURATION__"
|
||||
data-track-index="5"
|
||||
data-volume="1"
|
||||
></audio>
|
||||
<style>
|
||||
#aroll-container {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
#short_mag_cut {
|
||||
border-radius: 16px;
|
||||
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
|
||||
border: 8px solid #ffffff;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
(function () {
|
||||
const tl = gsap.timeline({ paused: true });
|
||||
const container = document.getElementById("aroll-container");
|
||||
gsap.set(container, { y: -1100, scale: 0.8 });
|
||||
tl.to(container, { y: 0, duration: 1.2, ease: "elastic.out(1, 0.6)" }, 0);
|
||||
tl.to(container, { scale: 1.4, x: -300, duration: 1, ease: "back.out(1.7)" }, 1.839);
|
||||
tl.to(container, { scale: 0.7, x: 400, duration: 1, ease: "back.out(1.7)" }, 4.659);
|
||||
tl.to(container, { scale: 0.9, x: 0, duration: 1, ease: "back.out(1.7)" }, 8.88);
|
||||
window.__timelines["aroll-layer"] = tl;
|
||||
})();
|
||||
</script>
|
||||
</div>
|
||||
|
||||
<!-- Compositions -->
|
||||
<div
|
||||
id="intro-comp"
|
||||
data-composition-id="intro"
|
||||
data-composition-src="compositions/intro.html"
|
||||
data-start="0"
|
||||
data-duration="__VIDEO_DURATION__"
|
||||
data-width="1920"
|
||||
data-height="1080"
|
||||
data-track-index="100"
|
||||
></div>
|
||||
<div
|
||||
id="captions-comp"
|
||||
data-composition-id="captions"
|
||||
data-composition-src="compositions/captions.html"
|
||||
data-start="0"
|
||||
data-duration="__VIDEO_DURATION__"
|
||||
data-width="1920"
|
||||
data-height="1080"
|
||||
data-track-index="200"
|
||||
></div>
|
||||
<div
|
||||
id="stats-comp"
|
||||
data-composition-id="stats"
|
||||
data-composition-src="compositions/stats.html"
|
||||
data-start="0"
|
||||
data-duration="__VIDEO_DURATION__"
|
||||
data-width="1920"
|
||||
data-height="1080"
|
||||
data-track-index="150"
|
||||
></div>
|
||||
|
||||
<script>
|
||||
window.__timelines = window.__timelines || {};
|
||||
const tl = gsap.timeline({ paused: true });
|
||||
window.__timelines["main-video"] = tl;
|
||||
</script>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,30 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1920 1080" width="1920" height="1080">
|
||||
<defs>
|
||||
<filter id="shadow" x="-20%" y="-20%" width="140%" height="140%">
|
||||
<feDropShadow dx="0" dy="2" stdDeviation="2" flood-opacity="0.2"/>
|
||||
</filter>
|
||||
<g id="cursor-arrow">
|
||||
<path d="M0 0 L 16 16 L 9.5 16 L 6.5 23 L 6.5 16 L 0 16 Z" fill="white" stroke="#000" stroke-width="1.5" stroke-linejoin="round" filter="url(#shadow)"/>
|
||||
</g>
|
||||
</defs>
|
||||
|
||||
<rect width="1920" height="1080" fill="#f0f0f0" />
|
||||
|
||||
<g id="cursor-designer" transform="translate(600, 500)">
|
||||
<use href="#cursor-arrow" x="0" y="0"/>
|
||||
<rect x="16" y="20" width="90" height="24" rx="4" fill="#A259FF"/>
|
||||
<text x="61" y="36" font-family="Inter, sans-serif" font-size="12" fill="white" text-anchor="middle" font-weight="bold">Designer</text>
|
||||
</g>
|
||||
|
||||
<g id="cursor-engineer" transform="translate(900, 400)">
|
||||
<use href="#cursor-arrow" x="0" y="0"/>
|
||||
<rect x="16" y="20" width="90" height="24" rx="4" fill="#1ABCFE"/>
|
||||
<text x="61" y="36" font-family="Inter, sans-serif" font-size="12" fill="white" text-anchor="middle" font-weight="bold">Engineer</text>
|
||||
</g>
|
||||
|
||||
<g id="cursor-pm" transform="translate(1200, 600)">
|
||||
<use href="#cursor-arrow" x="0" y="0"/>
|
||||
<rect x="16" y="20" width="50" height="24" rx="4" fill="#F24E1E"/>
|
||||
<text x="41" y="36" font-family="Inter, sans-serif" font-size="12" fill="white" text-anchor="middle" font-weight="bold">PM</text>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.4 KiB |
@@ -0,0 +1,15 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1920 1080" width="1920" height="1080">
|
||||
<g transform="translate(880, 420)">
|
||||
<!-- Top-left: rounded square -->
|
||||
<path id="logo-tl" d="M 40 0 A 40 40 0 0 0 0 40 L 0 80 A 40 40 0 0 0 40 120 A 40 40 0 0 0 80 80 L 80 40 A 40 40 0 0 0 40 0 Z" fill="#F24E1E" />
|
||||
|
||||
<!-- Top-right: rounded square -->
|
||||
<path id="logo-tr" d="M 120 0 A 40 40 0 0 0 80 40 L 80 80 A 40 40 0 0 0 120 120 A 40 40 0 0 0 160 80 L 160 40 A 40 40 0 0 0 120 0 Z" fill="#A259FF" />
|
||||
|
||||
<!-- Bottom-left: half-circle -->
|
||||
<path id="logo-bl" d="M 0 120 A 40 120 0 0 0 80 120 Z" fill="#1ABCFE" />
|
||||
|
||||
<!-- Bottom-right: half-circle -->
|
||||
<path id="logo-br" d="M 80 120 A 40 120 0 0 0 160 120 Z" fill="#0ACF83" />
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 771 B |
@@ -0,0 +1,6 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1920 1080" width="1920" height="1080">
|
||||
<rect id="pill-tl" x="870" y="410" width="80" height="120" rx="40" fill="#F24E1E" />
|
||||
<rect id="pill-tr" x="970" y="410" width="80" height="120" rx="40" fill="#A259FF" />
|
||||
<rect id="pill-bl" x="870" y="550" width="80" height="120" rx="40" fill="#1ABCFE" />
|
||||
<rect id="pill-br" x="970" y="550" width="80" height="120" rx="40" fill="#0ACF83" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 446 B |
@@ -0,0 +1,190 @@
|
||||
<template id="scene1-logo-intro-template">
|
||||
<div
|
||||
data-composition-id="scene1-logo-intro"
|
||||
data-width="1920"
|
||||
data-height="1080"
|
||||
data-duration="1.5"
|
||||
>
|
||||
<div class="canvas">
|
||||
<!-- Logo Container -->
|
||||
<div class="logo-container">
|
||||
<svg viewBox="0 0 160 240" width="160" height="240">
|
||||
<!-- Figma Logo Pieces -->
|
||||
<!-- Top-left: Red (F24E1E) -->
|
||||
<path
|
||||
class="logo-piece logo-tl"
|
||||
d="M 0 40 C 0 17.9 17.9 0 40 0 L 80 0 L 80 80 L 40 80 C 17.9 80 0 62.1 0 40 Z"
|
||||
fill="#F24E1E"
|
||||
/>
|
||||
<!-- Top-right: Purple (A259FF) -->
|
||||
<path
|
||||
class="logo-piece logo-tr"
|
||||
d="M 80 0 L 120 0 C 142.1 0 160 17.9 160 40 C 160 62.1 142.1 80 120 80 L 80 80 L 80 0 Z"
|
||||
fill="#A259FF"
|
||||
/>
|
||||
<!-- Middle-left: Pink (FF7262) -->
|
||||
<path
|
||||
class="logo-piece logo-ml"
|
||||
d="M 0 120 C 0 97.9 17.9 80 40 80 L 80 80 L 80 160 L 40 160 C 17.9 160 0 142.1 0 120 Z"
|
||||
fill="#FF7262"
|
||||
/>
|
||||
<!-- Middle-right: Blue (1ABCFE) -->
|
||||
<circle class="logo-piece logo-mr" cx="120" cy="120" r="40" fill="#1ABCFE" />
|
||||
<!-- Bottom-left: Green (0ACF83) -->
|
||||
<path
|
||||
class="logo-piece logo-bl"
|
||||
d="M 0 200 C 0 177.9 17.9 160 40 160 L 80 160 L 80 200 C 80 222.1 62.1 240 40 240 C 17.9 240 0 222.1 0 200 Z"
|
||||
fill="#0ACF83"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<!-- Expanding Ring -->
|
||||
<div class="ring-container">
|
||||
<svg viewBox="0 0 400 400" width="400" height="400">
|
||||
<circle
|
||||
class="ring"
|
||||
cx="200"
|
||||
cy="200"
|
||||
r="80"
|
||||
fill="none"
|
||||
stroke="#FFFFFF"
|
||||
stroke-width="4"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
[data-composition-id="scene1-logo-intro"] .canvas {
|
||||
width: 1920px;
|
||||
height: 1080px;
|
||||
background-color: #0a0a0f;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
[data-composition-id="scene1-logo-intro"] .logo-container {
|
||||
position: absolute;
|
||||
left: 880px; /* Center X: 960 - 80 */
|
||||
top: 420px; /* Center Y: 540 - 120 */
|
||||
width: 160px;
|
||||
height: 240px;
|
||||
transform-origin: center center;
|
||||
}
|
||||
|
||||
[data-composition-id="scene1-logo-intro"] .ring-container {
|
||||
position: absolute;
|
||||
left: 760px; /* 960 - 200 */
|
||||
top: 340px; /* 540 - 200 */
|
||||
width: 400px;
|
||||
height: 400px;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
[data-composition-id="scene1-logo-intro"] .ring {
|
||||
transform-origin: center center;
|
||||
opacity: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
|
||||
<script>
|
||||
(function () {
|
||||
const tl = gsap.timeline({ paused: true });
|
||||
|
||||
const pieces = {
|
||||
tl: '[data-composition-id="scene1-logo-intro"] .logo-tl',
|
||||
tr: '[data-composition-id="scene1-logo-intro"] .logo-tr',
|
||||
ml: '[data-composition-id="scene1-logo-intro"] .logo-ml',
|
||||
mr: '[data-composition-id="scene1-logo-intro"] .logo-mr',
|
||||
bl: '[data-composition-id="scene1-logo-intro"] .logo-bl',
|
||||
};
|
||||
|
||||
const ring = '[data-composition-id="scene1-logo-intro"] .ring';
|
||||
const logoContainer = '[data-composition-id="scene1-logo-intro"] .logo-container';
|
||||
|
||||
// Initial positions: Corners of the screen
|
||||
// Viewport is 1920x1080. Center is 960, 540.
|
||||
// logo-container is at 880, 420.
|
||||
|
||||
tl.set(pieces.tl, { x: -960, y: -540 });
|
||||
tl.set(pieces.tr, { x: 960, y: -540 });
|
||||
tl.set(pieces.ml, { x: -960, y: 0 });
|
||||
tl.set(pieces.mr, { x: 960, y: 0 });
|
||||
tl.set(pieces.bl, { x: -960, y: 540 });
|
||||
|
||||
// 1. Converge to center with 3-frame stagger (approx 0.05s at 60fps)
|
||||
// 2. Collide with slight bounce (overshoot 1.1x)
|
||||
const convergeDuration = 0.6;
|
||||
const stagger = 0.05;
|
||||
|
||||
const pieceArray = [pieces.tl, pieces.tr, pieces.ml, pieces.mr, pieces.bl];
|
||||
|
||||
pieceArray.forEach((piece, i) => {
|
||||
tl.to(
|
||||
piece,
|
||||
{
|
||||
x: 0,
|
||||
y: 0,
|
||||
duration: convergeDuration,
|
||||
ease: "back.out(1.1)",
|
||||
},
|
||||
i * stagger,
|
||||
);
|
||||
});
|
||||
|
||||
// 3. On collision (approx at 0.6 + 4*0.05 = 0.8s), white ring expands
|
||||
const collisionTime = convergeDuration + (pieceArray.length - 1) * stagger;
|
||||
|
||||
tl.fromTo(
|
||||
ring,
|
||||
{ scale: 0.2, opacity: 1 },
|
||||
{
|
||||
scale: 2.5,
|
||||
opacity: 0,
|
||||
duration: 0.4,
|
||||
ease: "power2.out",
|
||||
},
|
||||
collisionTime,
|
||||
);
|
||||
|
||||
// 4. Logo pulses slightly
|
||||
tl.to(
|
||||
logoContainer,
|
||||
{
|
||||
scale: 1.05,
|
||||
duration: 0.15,
|
||||
ease: "power2.out",
|
||||
},
|
||||
collisionTime,
|
||||
);
|
||||
|
||||
tl.to(
|
||||
logoContainer,
|
||||
{
|
||||
scale: 1,
|
||||
duration: 0.15,
|
||||
ease: "power2.in",
|
||||
},
|
||||
collisionTime + 0.15,
|
||||
);
|
||||
|
||||
// 5. Scale down to 0
|
||||
tl.to(
|
||||
logoContainer,
|
||||
{
|
||||
scale: 0,
|
||||
duration: 0.3,
|
||||
ease: "expo.in",
|
||||
delay: 0.1,
|
||||
},
|
||||
collisionTime + 0.3,
|
||||
);
|
||||
|
||||
window.__timelines = window.__timelines || {};
|
||||
window.__timelines["scene1-logo-intro"] = tl;
|
||||
})();
|
||||
</script>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,574 @@
|
||||
<template id="scene2-4-canvas-template">
|
||||
<div
|
||||
data-composition-id="scene2-4-canvas"
|
||||
data-width="1920"
|
||||
data-height="1080"
|
||||
data-duration="12.5"
|
||||
>
|
||||
<div class="canvas">
|
||||
<div class="dot-grid"></div>
|
||||
|
||||
<!-- Web Frame -->
|
||||
<div class="web-frame">
|
||||
<div class="ui-content">
|
||||
<div class="nav-bar">
|
||||
<div class="nav-logo"></div>
|
||||
<div class="nav-links">
|
||||
<div class="nav-link"></div>
|
||||
<div class="nav-link"></div>
|
||||
<div class="nav-link"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hero-section">
|
||||
<h1 class="hero-heading">Design without limits</h1>
|
||||
<div class="subtitle-lines">
|
||||
<div class="subtitle-line"></div>
|
||||
<div class="subtitle-line"></div>
|
||||
</div>
|
||||
<div class="cta-button">Get Started</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Dimension Labels -->
|
||||
<div class="dimension-label width-label">1440</div>
|
||||
<div class="dimension-label height-label">900</div>
|
||||
<!-- Selection Handles (Engineer) -->
|
||||
<div class="selection-handles">
|
||||
<div class="handle tl"></div>
|
||||
<div class="handle tr"></div>
|
||||
<div class="handle bl"></div>
|
||||
<div class="handle br"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Assets Panel -->
|
||||
<div class="assets-panel">
|
||||
<div class="panel-header">Assets</div>
|
||||
<div class="asset-list">
|
||||
<div class="asset-item">
|
||||
<span class="asset-icon">◆</span>
|
||||
<span class="asset-text">Button/Primary</span>
|
||||
</div>
|
||||
<div class="asset-item">
|
||||
<span class="asset-icon">◆</span>
|
||||
<span class="asset-text">Card/Product</span>
|
||||
</div>
|
||||
<div class="asset-item">
|
||||
<span class="asset-icon">◆</span>
|
||||
<span class="asset-text">Nav/Header</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Draggable Component (Scene 4) -->
|
||||
<div class="dragged-card">
|
||||
<div class="card-content"></div>
|
||||
</div>
|
||||
|
||||
<!-- Stamped Cards (Scene 4) -->
|
||||
<div class="stamped-cards">
|
||||
<div class="stamped-card card-1"></div>
|
||||
<div class="stamped-card card-2"></div>
|
||||
<div class="stamped-card card-3"></div>
|
||||
</div>
|
||||
|
||||
<!-- Comment Pin & Bubble -->
|
||||
<div class="comment-container">
|
||||
<div class="comment-pin">
|
||||
<div class="checkmark">✓</div>
|
||||
</div>
|
||||
<div class="comment-bubble">
|
||||
<div class="comment-text"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Cursors -->
|
||||
<div class="cursor designer-cursor">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24">
|
||||
<path d="M0 0 L 16 16 L 9.5 16 L 6.5 23 L 6.5 16 L 0 16 Z" fill="white" stroke="black" />
|
||||
</svg>
|
||||
<div class="cursor-label">Designer</div>
|
||||
</div>
|
||||
<div class="cursor engineer-cursor">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24">
|
||||
<path d="M0 0 L 16 16 L 9.5 16 L 6.5 23 L 6.5 16 L 0 16 Z" fill="white" stroke="black" />
|
||||
</svg>
|
||||
<div class="cursor-label">Engineer</div>
|
||||
</div>
|
||||
<div class="cursor pm-cursor">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24">
|
||||
<path d="M0 0 L 16 16 L 9.5 16 L 6.5 23 L 6.5 16 L 0 16 Z" fill="white" stroke="black" />
|
||||
</svg>
|
||||
<div class="cursor-label">PM</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
[data-composition-id="scene2-4-canvas"] {
|
||||
background-color: #1e1e1e;
|
||||
font-family: "Inter", sans-serif;
|
||||
color: white;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.canvas {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.dot-grid {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-image: radial-gradient(#2c2c2c 1px, transparent 1px);
|
||||
background-size: 24px 24px;
|
||||
}
|
||||
|
||||
.web-frame {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 1440px;
|
||||
height: 900px;
|
||||
background: white;
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
|
||||
overflow: hidden;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.ui-content {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: white;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.nav-bar {
|
||||
height: 80px;
|
||||
padding: 0 60px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
border-bottom: 1px solid #e6e6e6;
|
||||
}
|
||||
|
||||
.nav-logo {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background: #a259ff;
|
||||
border-radius: 8px;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.nav-links {
|
||||
display: flex;
|
||||
gap: 32px;
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
width: 80px;
|
||||
height: 12px;
|
||||
background: #cccccc;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.hero-section {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding-bottom: 100px;
|
||||
transition: transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
|
||||
}
|
||||
|
||||
.hero-heading {
|
||||
font-size: 84px;
|
||||
font-weight: 800;
|
||||
color: #1e1e1e;
|
||||
margin-bottom: 24px;
|
||||
opacity: 0;
|
||||
letter-spacing: -0.02em;
|
||||
transform-origin: center;
|
||||
}
|
||||
|
||||
.subtitle-lines {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
margin-bottom: 48px;
|
||||
transform-origin: center;
|
||||
}
|
||||
|
||||
.subtitle-line {
|
||||
width: 400px;
|
||||
height: 16px;
|
||||
background: #e6e6e6;
|
||||
border-radius: 8px;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.cta-button {
|
||||
padding: 20px 48px;
|
||||
background: #0acf83;
|
||||
color: white;
|
||||
font-size: 24px;
|
||||
font-weight: 600;
|
||||
border-radius: 12px;
|
||||
opacity: 0;
|
||||
position: relative;
|
||||
transform-origin: center;
|
||||
}
|
||||
|
||||
.dimension-label {
|
||||
position: absolute;
|
||||
background: #1abcfe;
|
||||
color: white;
|
||||
padding: 4px 8px;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.width-label {
|
||||
top: -30px;
|
||||
left: 50%;
|
||||
}
|
||||
|
||||
.height-label {
|
||||
right: -45px;
|
||||
top: 50%;
|
||||
}
|
||||
|
||||
.selection-handles {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
pointer-events: none;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.handle {
|
||||
position: absolute;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
background: white;
|
||||
border: 2px solid #1abcfe;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.handle.tl {
|
||||
top: -6px;
|
||||
left: -6px;
|
||||
}
|
||||
.handle.tr {
|
||||
top: -6px;
|
||||
right: -6px;
|
||||
}
|
||||
.handle.bl {
|
||||
bottom: -6px;
|
||||
left: -6px;
|
||||
}
|
||||
.handle.br {
|
||||
bottom: -6px;
|
||||
right: -6px;
|
||||
}
|
||||
|
||||
.assets-panel {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 320px;
|
||||
height: 100%;
|
||||
background: rgba(44, 44, 44, 0.9);
|
||||
backdrop-filter: blur(12px);
|
||||
-webkit-backdrop-filter: blur(12px);
|
||||
border-right: 1px solid rgba(255, 255, 255, 0.1);
|
||||
padding: 24px;
|
||||
z-index: 10;
|
||||
box-shadow: 4px 0 24px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.panel-header {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 32px;
|
||||
color: #aaa;
|
||||
}
|
||||
|
||||
.asset-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 12px;
|
||||
border-radius: 8px;
|
||||
margin-bottom: 8px;
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
}
|
||||
|
||||
.asset-icon {
|
||||
color: #a259ff;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.asset-text {
|
||||
font-size: 14px;
|
||||
color: #eee;
|
||||
}
|
||||
|
||||
.dragged-card {
|
||||
position: absolute;
|
||||
width: 300px;
|
||||
height: 200px;
|
||||
background: white;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
|
||||
opacity: 0;
|
||||
transform: scale(0.9);
|
||||
z-index: 20;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.card-content {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(45deg, #f0f0f0, #fff);
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
.stamped-cards {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 1440px;
|
||||
height: 900px;
|
||||
pointer-events: none;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 40px;
|
||||
}
|
||||
|
||||
.stamped-card {
|
||||
position: relative;
|
||||
width: 300px;
|
||||
height: 200px;
|
||||
background: white;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
|
||||
opacity: 0;
|
||||
transform: translateY(50px);
|
||||
}
|
||||
|
||||
.card-1,
|
||||
.card-2,
|
||||
.card-3 {
|
||||
top: auto;
|
||||
left: auto;
|
||||
}
|
||||
|
||||
.comment-container {
|
||||
position: absolute;
|
||||
top: 420px;
|
||||
left: 960px;
|
||||
z-index: 30;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.comment-pin {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
background: #f24e1e;
|
||||
border-radius: 16px 16px 16px 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
|
||||
transform-origin: bottom left;
|
||||
}
|
||||
|
||||
.checkmark {
|
||||
color: white;
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
transform: scale(0);
|
||||
}
|
||||
|
||||
.comment-bubble {
|
||||
position: absolute;
|
||||
left: 40px;
|
||||
top: -20px;
|
||||
background: white;
|
||||
padding: 12px 16px;
|
||||
border-radius: 12px;
|
||||
color: #1e1e1e;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
white-space: nowrap;
|
||||
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.cursor {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
z-index: 100;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.cursor-label {
|
||||
padding: 4px 8px;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
color: white;
|
||||
border-radius: 0 4px 4px 4px;
|
||||
margin-top: -4px;
|
||||
margin-left: 12px;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.designer-cursor .cursor-label {
|
||||
background: #a259ff;
|
||||
}
|
||||
.engineer-cursor .cursor-label {
|
||||
background: #1abcfe;
|
||||
}
|
||||
.pm-cursor .cursor-label {
|
||||
background: #f24e1e;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
|
||||
<script>
|
||||
(function () {
|
||||
const tl = gsap.timeline({ paused: true });
|
||||
|
||||
// Organic Cursor Ease
|
||||
const cursorEase = "back.out(1.2)";
|
||||
|
||||
gsap.set(".web-frame", { xPercent: -50, yPercent: -50, scale: 0 });
|
||||
gsap.set(".width-label", { xPercent: -50, scale: 0 });
|
||||
gsap.set(".height-label", { yPercent: -50, rotation: 90, scale: 0 });
|
||||
gsap.set(".comment-bubble", { x: -10 });
|
||||
gsap.set(".assets-panel", { x: -320 });
|
||||
gsap.set(".designer-cursor", { x: 200, y: 200 });
|
||||
gsap.set(".engineer-cursor", { x: -100, y: 500 });
|
||||
gsap.set(".pm-cursor", { x: 2000, y: 1100 });
|
||||
|
||||
// Designer enters
|
||||
tl.to(".designer-cursor", { x: 960, y: 540, duration: 1.0, ease: cursorEase }, 0);
|
||||
|
||||
// Frame appears
|
||||
tl.to(".web-frame", { opacity: 1, scale: 1, duration: 0.6, ease: "back.out(1.4)" }, 0.5);
|
||||
|
||||
// UI Stagger
|
||||
tl.to(".ui-content", { opacity: 1, duration: 0.4 }, 1.0);
|
||||
tl.to(".hero-heading", { opacity: 1, y: 0, duration: 0.7, ease: "back.out(1.2)" }, 1.2);
|
||||
tl.to(
|
||||
".subtitle-line",
|
||||
{ opacity: 1, y: 0, duration: 0.5, stagger: 0.08, ease: "power2.out" },
|
||||
1.4,
|
||||
);
|
||||
tl.to(".cta-button", { opacity: 1, scale: 1, duration: 0.5, ease: "back.out(1.7)" }, 1.7);
|
||||
|
||||
// Labels
|
||||
tl.to(".width-label", { scale: 1, duration: 0.4, ease: "back.out(2)" }, 1.9);
|
||||
tl.to(".height-label", { scale: 1, rotation: 90, duration: 0.4, ease: "back.out(2)" }, 2.0);
|
||||
|
||||
// Collaboration
|
||||
tl.to(".engineer-cursor", { x: 400, y: 400, duration: 1.2, ease: cursorEase }, 3.5);
|
||||
tl.to(".pm-cursor", { x: 1500, y: 800, duration: 1.5, ease: cursorEase }, 3.7);
|
||||
tl.to(
|
||||
".engineer-cursor",
|
||||
{ x: 960, y: 680, duration: 0.9, ease: cursorEase, overwrite: "auto" },
|
||||
4.5,
|
||||
);
|
||||
tl.to(".selection-handles", { opacity: 1, duration: 0.2 }, 5.3);
|
||||
tl.to(".cta-button", { outline: "2px solid #1ABCFE", duration: 0.1 }, 5.3);
|
||||
|
||||
tl.to(".pm-cursor", { x: 960, y: 420, duration: 1.1, ease: cursorEase }, 5.5);
|
||||
tl.to(".comment-container", { opacity: 1, duration: 0.1 }, 6.5);
|
||||
tl.from(".comment-pin", { scale: 0, duration: 0.5, ease: "back.out(1.2)" }, 6.5);
|
||||
tl.to(".comment-bubble", { opacity: 1, x: 0, duration: 0.4, ease: "back.out(1.5)" }, 6.9);
|
||||
|
||||
const commentText = "Let's use the product shot here";
|
||||
const textObj = { val: 0 };
|
||||
tl.to(
|
||||
textObj,
|
||||
{
|
||||
val: commentText.length,
|
||||
duration: commentText.length / 30,
|
||||
ease: "none",
|
||||
onUpdate: () => {
|
||||
const el = document.querySelector(
|
||||
'[data-composition-id="scene2-4-canvas"] .comment-text',
|
||||
);
|
||||
if (el) el.innerText = commentText.substring(0, Math.ceil(textObj.val));
|
||||
},
|
||||
},
|
||||
7.1,
|
||||
);
|
||||
|
||||
// Assets Panel
|
||||
tl.to(".assets-panel", { x: 0, duration: 0.4, ease: "power3.out" }, 8.0);
|
||||
tl.to(".engineer-cursor", { x: 160, y: 150, duration: 0.7, ease: cursorEase }, 8.3);
|
||||
tl.to(".dragged-card", { opacity: 1, scale: 1, x: 160, y: 150, duration: 0.2 }, 8.9);
|
||||
tl.to(
|
||||
[".engineer-cursor", ".dragged-card"],
|
||||
{ x: 960, y: 700, duration: 0.9, ease: cursorEase },
|
||||
9.1,
|
||||
);
|
||||
|
||||
// Reformat UI as card is dragged in
|
||||
tl.to(".hero-section", { y: -150, duration: 0.8, ease: "power3.inOut" }, 9.1);
|
||||
tl.to(".hero-heading", { scale: 0.8, duration: 0.8, ease: "power3.inOut" }, 9.1);
|
||||
tl.to(".subtitle-lines", { scale: 0.8, duration: 0.8, ease: "power3.inOut" }, 9.1);
|
||||
tl.to(".cta-button", { scale: 0.8, duration: 0.8, ease: "power3.inOut" }, 9.1);
|
||||
|
||||
// Stamping into Grid/Row
|
||||
tl.to(".stamped-cards", { y: 200, duration: 0.1 }, 9.1); // Position the container
|
||||
tl.to(".card-1", { opacity: 1, y: 0, duration: 0.6, ease: "back.out(1.5)" }, 9.9);
|
||||
tl.to(".card-2", { opacity: 1, y: 0, duration: 0.6, ease: "back.out(1.5)" }, 10.1);
|
||||
tl.to(".card-3", { opacity: 1, y: 0, duration: 0.6, ease: "back.out(1.5)" }, 10.3);
|
||||
|
||||
tl.to(".dragged-card", { opacity: 0, scale: 0.8, duration: 0.2 }, 10.5);
|
||||
tl.to(".checkmark", { scale: 1, duration: 0.4, ease: "back.out(1.8)" }, 10.7);
|
||||
tl.to(".comment-pin", { backgroundColor: "#0ACF83", duration: 0.3 }, 10.7);
|
||||
tl.to(".assets-panel", { x: -320, duration: 0.4, ease: "power3.in" }, 11.5);
|
||||
|
||||
// Scene 5 Transition: Wipe everything to the left
|
||||
tl.to(
|
||||
[
|
||||
".web-frame",
|
||||
".cursor",
|
||||
".dragged-card",
|
||||
".stamped-cards",
|
||||
".comment-container",
|
||||
".assets-panel",
|
||||
],
|
||||
{
|
||||
x: -2000,
|
||||
duration: 0.5,
|
||||
ease: "expo.in",
|
||||
stagger: 0.02,
|
||||
},
|
||||
12.0,
|
||||
);
|
||||
|
||||
window.__timelines = window.__timelines || {};
|
||||
window.__timelines["scene2-4-canvas"] = tl;
|
||||
})();
|
||||
</script>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,227 @@
|
||||
<template id="scene5-logo-outro-template">
|
||||
<div
|
||||
data-composition-id="scene5-logo-outro"
|
||||
data-width="1920"
|
||||
data-height="1080"
|
||||
data-duration="6"
|
||||
>
|
||||
<div class="canvas">
|
||||
<!-- Glow effect behind the logo -->
|
||||
<div class="logo-glow"></div>
|
||||
|
||||
<!-- Logo Container -->
|
||||
<div class="logo-container">
|
||||
<svg viewBox="0 0 160 240" width="160" height="240" class="logo-svg">
|
||||
<!-- Figma Logo Pieces -->
|
||||
<!-- Top-left: Red (#F24E1E) -->
|
||||
<path
|
||||
class="logo-piece logo-tl"
|
||||
d="M 0 40 C 0 17.9 17.9 0 40 0 L 80 0 L 80 80 L 40 80 C 17.9 80 0 62.1 0 40 Z"
|
||||
fill="#F24E1E"
|
||||
/>
|
||||
<!-- Top-right: Purple (#A259FF) -->
|
||||
<path
|
||||
class="logo-piece logo-tr"
|
||||
d="M 80 0 L 120 0 C 142.1 0 160 17.9 160 40 C 160 62.1 142.1 80 120 80 L 80 80 L 80 0 Z"
|
||||
fill="#A259FF"
|
||||
/>
|
||||
<!-- Middle-left: Pink (#FF7262) -->
|
||||
<path
|
||||
class="logo-piece logo-ml"
|
||||
d="M 0 120 C 0 97.9 17.9 80 40 80 L 80 80 L 80 160 L 40 160 C 17.9 160 0 142.1 0 120 Z"
|
||||
fill="#FF7262"
|
||||
/>
|
||||
<!-- Middle-right: Blue (#1ABCFE) -->
|
||||
<circle class="logo-piece logo-mr" cx="120" cy="120" r="40" fill="#1ABCFE" />
|
||||
<!-- Bottom-left: Green (#0ACF83) -->
|
||||
<path
|
||||
class="logo-piece logo-bl"
|
||||
d="M 0 200 C 0 177.9 17.9 160 40 160 L 80 160 L 80 200 C 80 222.1 62.1 240 40 240 C 17.9 240 0 222.1 0 200 Z"
|
||||
fill="#0ACF83"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div class="text-container">
|
||||
<div class="tagline">Nothing great is made alone.</div>
|
||||
<div class="url-pill">
|
||||
<span class="url-text">figma.com</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
[data-composition-id="scene5-logo-outro"] .canvas {
|
||||
width: 1920px;
|
||||
height: 1080px;
|
||||
background: #0a0a0f;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
font-family: "Inter", sans-serif;
|
||||
}
|
||||
|
||||
[data-composition-id="scene5-logo-outro"] .logo-container {
|
||||
position: absolute;
|
||||
left: 880px; /* Center X: 960 - 80 */
|
||||
top: 380px; /* Adjusted for tagline space: 540 - 120 - 40 */
|
||||
width: 160px;
|
||||
height: 240px;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
[data-composition-id="scene5-logo-outro"] .logo-piece {
|
||||
transform-origin: center center;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
[data-composition-id="scene5-logo-outro"] .logo-glow {
|
||||
position: absolute;
|
||||
left: 760px; /* 960 - 200 */
|
||||
top: 300px; /* 500 - 200 */
|
||||
width: 400px;
|
||||
height: 400px;
|
||||
background: radial-gradient(circle, rgba(162, 89, 255, 0.25) 0%, rgba(10, 10, 15, 0) 70%);
|
||||
border-radius: 50%;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
[data-composition-id="scene5-logo-outro"] .text-container {
|
||||
position: absolute;
|
||||
top: 720px;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
[data-composition-id="scene5-logo-outro"] .tagline {
|
||||
font-size: 44px;
|
||||
font-weight: 500;
|
||||
color: white;
|
||||
opacity: 0;
|
||||
margin-bottom: 32px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
[data-composition-id="scene5-logo-outro"] .url-pill {
|
||||
background: #1a1a1f;
|
||||
border: 1px solid #2c2c2c;
|
||||
border-radius: 100px;
|
||||
padding: 8px 24px;
|
||||
opacity: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
[data-composition-id="scene5-logo-outro"] .url-text {
|
||||
font-size: 18px;
|
||||
color: #666;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
|
||||
<script>
|
||||
(function () {
|
||||
const tl = gsap.timeline({ paused: true });
|
||||
|
||||
const pieces = {
|
||||
tl: '[data-composition-id="scene5-logo-outro"] .logo-tl',
|
||||
tr: '[data-composition-id="scene5-logo-outro"] .logo-tr',
|
||||
ml: '[data-composition-id="scene5-logo-outro"] .logo-ml',
|
||||
mr: '[data-composition-id="scene5-logo-outro"] .logo-mr',
|
||||
bl: '[data-composition-id="scene5-logo-outro"] .logo-bl',
|
||||
};
|
||||
|
||||
const pieceArray = [pieces.tl, pieces.tr, pieces.ml, pieces.mr, pieces.bl];
|
||||
const logoGlow = '[data-composition-id="scene5-logo-outro"] .logo-glow';
|
||||
const tagline = '[data-composition-id="scene5-logo-outro"] .tagline';
|
||||
const urlPill = '[data-composition-id="scene5-logo-outro"] .url-pill';
|
||||
|
||||
// 1. Pieces slide in from the RIGHT (x: 1920 -> 0) with a ripple stagger (0.08s). Duration: 1.2s.
|
||||
pieceArray.forEach((piece, i) => {
|
||||
tl.fromTo(
|
||||
piece,
|
||||
{ x: 1920, opacity: 0 },
|
||||
{ x: 0, opacity: 1, duration: 1.2, ease: "power4.out" },
|
||||
i * 0.08,
|
||||
);
|
||||
});
|
||||
|
||||
// 2. Once at the center (960, 540), the pieces should simply EXPAND (scale 1 -> 1.15)
|
||||
// and then CLOSE back to their done state (scale 1.15 -> 1).
|
||||
// NO positional 'explode' or pushing to corners.
|
||||
const expandTime = 1.2; // Start right after the first piece arrives, or after all?
|
||||
// Let's start it after the last piece has arrived or is near arrival for a fluid motion.
|
||||
// The last piece starts at 0.32s and takes 1.2s to arrive (1.52s total).
|
||||
// Let's trigger the expand at 1.2s so it feels like a continuous flow.
|
||||
|
||||
tl.to(
|
||||
pieceArray,
|
||||
{
|
||||
scale: 1.15,
|
||||
duration: 0.5,
|
||||
ease: "back.out(1.7)",
|
||||
stagger: 0.02,
|
||||
},
|
||||
expandTime,
|
||||
);
|
||||
|
||||
tl.to(
|
||||
pieceArray,
|
||||
{
|
||||
scale: 1,
|
||||
duration: 0.4,
|
||||
ease: "power2.inOut",
|
||||
},
|
||||
expandTime + 0.3,
|
||||
);
|
||||
|
||||
// 3. Subtle glow bloom effect (optional but adds polish, keeping it from original as it fits the 'expand')
|
||||
tl.fromTo(
|
||||
logoGlow,
|
||||
{ opacity: 0, scale: 0.5 },
|
||||
{ opacity: 1, scale: 1.2, duration: 0.4, ease: "power2.out" },
|
||||
expandTime,
|
||||
);
|
||||
tl.to(
|
||||
logoGlow,
|
||||
{
|
||||
opacity: 0,
|
||||
scale: 1.8,
|
||||
duration: 1.2,
|
||||
ease: "power2.out",
|
||||
},
|
||||
expandTime + 0.4,
|
||||
);
|
||||
|
||||
// 4. Tagline and URL pill fade in as before.
|
||||
const textStartTime = expandTime + 0.8;
|
||||
tl.fromTo(
|
||||
tagline,
|
||||
{ opacity: 0, y: 20 },
|
||||
{ opacity: 1, y: 0, duration: 1, ease: "power3.out" },
|
||||
textStartTime,
|
||||
);
|
||||
|
||||
tl.fromTo(
|
||||
urlPill,
|
||||
{ opacity: 0, y: 15 },
|
||||
{ opacity: 1, y: 0, duration: 0.8, ease: "power3.out" },
|
||||
textStartTime + 0.4,
|
||||
);
|
||||
|
||||
// 5. Remove the final pulse animation. (Omitted)
|
||||
// 6. After they return to the done state, there should be NO MORE movement for the logo. (Ensured)
|
||||
|
||||
// Register timeline
|
||||
window.__timelines = window.__timelines || {};
|
||||
window.__timelines["scene5-logo-outro"] = tl;
|
||||
})();
|
||||
</script>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,158 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=1920, height=1080" />
|
||||
<title>Product Promo</title>
|
||||
<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;800&display=block"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
html,
|
||||
body {
|
||||
margin: 0;
|
||||
width: 1920px;
|
||||
height: 1080px;
|
||||
overflow: hidden;
|
||||
background: #0a0a0f;
|
||||
font-family: "Inter", sans-serif;
|
||||
}
|
||||
.scene {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.caption-text-wrapper {
|
||||
position: absolute;
|
||||
bottom: 150px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
pointer-events: none;
|
||||
overflow: hidden;
|
||||
padding: 10px 0;
|
||||
}
|
||||
.caption-line {
|
||||
color: white;
|
||||
font-size: 48px;
|
||||
font-weight: 600;
|
||||
letter-spacing: -0.02em;
|
||||
text-align: center;
|
||||
text-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
|
||||
transform: translateY(100%);
|
||||
opacity: 0;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div
|
||||
id="root"
|
||||
data-composition-id="main"
|
||||
data-start="0"
|
||||
data-duration="20"
|
||||
data-width="1920"
|
||||
data-height="1080"
|
||||
>
|
||||
<!-- Scene 1: Logo Intro -->
|
||||
<div
|
||||
id="scene-1"
|
||||
class="scene"
|
||||
data-composition-id="scene1-logo-intro"
|
||||
data-composition-src="compositions/scene1-logo-intro.html"
|
||||
data-start="0"
|
||||
data-duration="1.5"
|
||||
data-track-index="1"
|
||||
data-width="1920"
|
||||
data-height="1080"
|
||||
></div>
|
||||
|
||||
<!-- Scene 2-4: Continuous Canvas -->
|
||||
<div
|
||||
id="scene-2-4"
|
||||
class="scene"
|
||||
data-composition-id="scene2-4-canvas"
|
||||
data-composition-src="compositions/scene2-4-canvas.html"
|
||||
data-start="1.5"
|
||||
data-duration="12.5"
|
||||
data-track-index="1"
|
||||
data-width="1920"
|
||||
data-height="1080"
|
||||
></div>
|
||||
|
||||
<!-- Scene 5: Logo Outro -->
|
||||
<div
|
||||
id="scene-5"
|
||||
class="scene"
|
||||
data-composition-id="scene5-logo-outro"
|
||||
data-composition-src="compositions/scene5-logo-outro.html"
|
||||
data-start="14"
|
||||
data-duration="6"
|
||||
data-track-index="1"
|
||||
data-width="1920"
|
||||
data-height="1080"
|
||||
></div>
|
||||
|
||||
<!-- Captions -->
|
||||
<div
|
||||
id="captions-comp"
|
||||
data-composition-id="captions"
|
||||
data-start="1.5"
|
||||
data-duration="12.5"
|
||||
data-track-index="2"
|
||||
data-width="1920"
|
||||
data-height="1080"
|
||||
>
|
||||
<div class="caption-text-wrapper">
|
||||
<div id="caption-text" class="caption-line">Starting with a blank canvas.</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
(function () {
|
||||
const tl = gsap.timeline({ paused: true });
|
||||
const text = document.querySelector("#caption-text");
|
||||
|
||||
tl.to(text, { opacity: 1, y: 0, duration: 0.8, ease: "power3.out" }, 0);
|
||||
tl.to(text, { opacity: 0, y: -20, duration: 0.3, ease: "power3.in" }, 3.2);
|
||||
tl.set(text, { innerText: "Three cursors. One file. Zero meetings.", y: 40 }, 3.5);
|
||||
tl.to(text, { opacity: 1, y: 0, duration: 0.6, ease: "power3.out" }, 3.5);
|
||||
tl.to(text, { opacity: 0, y: -20, duration: 0.3, ease: "power3.in" }, 7.7);
|
||||
tl.set(
|
||||
text,
|
||||
{ innerText: "Components in. Feedback resolved. No one waited.", y: 40 },
|
||||
8.0,
|
||||
);
|
||||
tl.to(text, { opacity: 1, y: 0, duration: 0.6, ease: "power3.out" }, 8.0);
|
||||
tl.to(text, { opacity: 0, y: -20, duration: 0.4, ease: "power3.in" }, 12.1);
|
||||
|
||||
window.__timelines = window.__timelines || {};
|
||||
window.__timelines["captions"] = tl;
|
||||
})();
|
||||
</script>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
window.__timelines = window.__timelines || {};
|
||||
const mainTl = gsap.timeline({ paused: true });
|
||||
|
||||
mainTl.set("#scene-2-4", { scale: 1, filter: "blur(0px)" }, 1.5);
|
||||
mainTl.to(
|
||||
"#scene-2-4",
|
||||
{ duration: 0.25, scale: 0.94, filter: "blur(6px)", opacity: 0, ease: "power2.in" },
|
||||
13.75,
|
||||
);
|
||||
|
||||
window.__timelines["main"] = mainTl;
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,116 @@
|
||||
<svg viewBox="0 0 1920 1080" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect width="1920" height="1080" fill="#F2F2F2" />
|
||||
|
||||
<g id="thin-grid-lines" stroke="#0A1E3D" stroke-width="1" opacity="0.1">
|
||||
<line id="v-thin-1" x1="60" y1="0" x2="60" y2="1080" />
|
||||
<line id="v-thin-2" x1="120" y1="0" x2="120" y2="1080" />
|
||||
<line id="v-thin-3" x1="180" y1="0" x2="180" y2="1080" />
|
||||
<line id="v-thin-5" x1="300" y1="0" x2="300" y2="1080" />
|
||||
<line id="v-thin-6" x1="360" y1="0" x2="360" y2="1080" />
|
||||
<line id="v-thin-7" x1="420" y1="0" x2="420" y2="1080" />
|
||||
<line id="v-thin-9" x1="540" y1="0" x2="540" y2="1080" />
|
||||
<line id="v-thin-10" x1="600" y1="0" x2="600" y2="1080" />
|
||||
<line id="v-thin-11" x1="660" y1="0" x2="660" y2="1080" />
|
||||
<line id="v-thin-13" x1="780" y1="0" x2="780" y2="1080" />
|
||||
<line id="v-thin-14" x1="840" y1="0" x2="840" y2="1080" />
|
||||
<line id="v-thin-15" x1="900" y1="0" x2="900" y2="1080" />
|
||||
<line id="v-thin-17" x1="1020" y1="0" x2="1020" y2="1080" />
|
||||
<line id="v-thin-18" x1="1080" y1="0" x2="1080" y2="1080" />
|
||||
<line id="v-thin-19" x1="1140" y1="0" x2="1140" y2="1080" />
|
||||
<line id="v-thin-21" x1="1260" y1="0" x2="1260" y2="1080" />
|
||||
<line id="v-thin-22" x1="1320" y1="0" x2="1320" y2="1080" />
|
||||
<line id="v-thin-23" x1="1380" y1="0" x2="1380" y2="1080" />
|
||||
<line id="v-thin-25" x1="1500" y1="0" x2="1500" y2="1080" />
|
||||
<line id="v-thin-26" x1="1560" y1="0" x2="1560" y2="1080" />
|
||||
<line id="v-thin-27" x1="1620" y1="0" x2="1620" y2="1080" />
|
||||
<line id="v-thin-29" x1="1740" y1="0" x2="1740" y2="1080" />
|
||||
<line id="v-thin-30" x1="1800" y1="0" x2="1800" y2="1080" />
|
||||
<line id="v-thin-31" x1="1860" y1="0" x2="1860" y2="1080" />
|
||||
<line id="h-thin-1" x1="0" y1="60" x2="1920" y2="60" />
|
||||
<line id="h-thin-2" x1="0" y1="120" x2="1920" y2="120" />
|
||||
<line id="h-thin-3" x1="0" y1="180" x2="1920" y2="180" />
|
||||
<line id="h-thin-5" x1="0" y1="300" x2="1920" y2="300" />
|
||||
<line id="h-thin-6" x1="0" y1="360" x2="1920" y2="360" />
|
||||
<line id="h-thin-7" x1="0" y1="420" x2="1920" y2="420" />
|
||||
<line id="h-thin-9" x1="0" y1="540" x2="1920" y2="540" />
|
||||
<line id="h-thin-10" x1="0" y1="600" x2="1920" y2="600" />
|
||||
<line id="h-thin-11" x1="0" y1="660" x2="1920" y2="660" />
|
||||
<line id="h-thin-13" x1="0" y1="780" x2="1920" y2="780" />
|
||||
<line id="h-thin-14" x1="0" y1="840" x2="1920" y2="840" />
|
||||
<line id="h-thin-15" x1="0" y1="900" x2="1920" y2="900" />
|
||||
<line id="h-thin-17" x1="0" y1="1020" x2="1920" y2="1020" />
|
||||
</g>
|
||||
|
||||
<g id="thick-grid-lines" stroke="#0A1E3D" stroke-width="3" opacity="0.2">
|
||||
<line id="v-thick-1" x1="240" y1="0" x2="240" y2="1080" />
|
||||
<line id="v-thick-2" x1="480" y1="0" x2="480" y2="1080" />
|
||||
<line id="v-thick-3" x1="720" y1="0" x2="720" y2="1080" />
|
||||
<line id="v-thick-4" x1="960" y1="0" x2="960" y2="1080" />
|
||||
<line id="v-thick-5" x1="1200" y1="0" x2="1200" y2="1080" />
|
||||
<line id="v-thick-6" x1="1440" y1="0" x2="1440" y2="1080" />
|
||||
<line id="v-thick-7" x1="1680" y1="0" x2="1680" y2="1080" />
|
||||
<line id="h-thick-1" x1="0" y1="240" x2="1920" y2="240" />
|
||||
<line id="h-thick-2" x1="0" y1="480" x2="1920" y2="480" />
|
||||
<line id="h-thick-3" x1="0" y1="720" x2="1920" y2="720" />
|
||||
<line id="h-thick-4" x1="0" y1="960" x2="1920" y2="960" />
|
||||
</g>
|
||||
|
||||
<g id="intersections" stroke="#0A1E3D" stroke-width="2" opacity="0.3">
|
||||
<line x1="230" y1="240" x2="250" y2="240" />
|
||||
<line x1="240" y1="230" x2="240" y2="250" />
|
||||
<line x1="230" y1="480" x2="250" y2="480" />
|
||||
<line x1="240" y1="470" x2="240" y2="490" />
|
||||
<line x1="230" y1="720" x2="250" y2="720" />
|
||||
<line x1="240" y1="710" x2="240" y2="730" />
|
||||
<line x1="230" y1="960" x2="250" y2="960" />
|
||||
<line x1="240" y1="950" x2="240" y2="970" />
|
||||
<line x1="470" y1="240" x2="490" y2="240" />
|
||||
<line x1="480" y1="230" x2="480" y2="250" />
|
||||
<line x1="470" y1="480" x2="490" y2="480" />
|
||||
<line x1="480" y1="470" x2="480" y2="490" />
|
||||
<line x1="470" y1="720" x2="490" y2="720" />
|
||||
<line x1="480" y1="710" x2="480" y2="730" />
|
||||
<line x1="470" y1="960" x2="490" y2="960" />
|
||||
<line x1="480" y1="950" x2="480" y2="970" />
|
||||
<line x1="710" y1="240" x2="730" y2="240" />
|
||||
<line x1="720" y1="230" x2="720" y2="250" />
|
||||
<line x1="710" y1="480" x2="730" y2="480" />
|
||||
<line x1="720" y1="470" x2="720" y2="490" />
|
||||
<line x1="710" y1="720" x2="730" y2="720" />
|
||||
<line x1="720" y1="710" x2="720" y2="730" />
|
||||
<line x1="710" y1="960" x2="730" y2="960" />
|
||||
<line x1="720" y1="950" x2="720" y2="970" />
|
||||
<line x1="950" y1="240" x2="970" y2="240" />
|
||||
<line x1="960" y1="230" x2="960" y2="250" />
|
||||
<line x1="950" y1="480" x2="970" y2="480" />
|
||||
<line x1="960" y1="470" x2="960" y2="490" />
|
||||
<line x1="950" y1="720" x2="970" y2="720" />
|
||||
<line x1="960" y1="710" x2="960" y2="730" />
|
||||
<line x1="950" y1="960" x2="970" y2="960" />
|
||||
<line x1="960" y1="950" x2="960" y2="970" />
|
||||
<line x1="1190" y1="240" x2="1210" y2="240" />
|
||||
<line x1="1200" y1="230" x2="1200" y2="250" />
|
||||
<line x1="1190" y1="480" x2="1210" y2="480" />
|
||||
<line x1="1200" y1="470" x2="1200" y2="490" />
|
||||
<line x1="1190" y1="720" x2="1210" y2="720" />
|
||||
<line x1="1200" y1="710" x2="1200" y2="730" />
|
||||
<line x1="1190" y1="960" x2="1210" y2="960" />
|
||||
<line x1="1200" y1="950" x2="1200" y2="970" />
|
||||
<line x1="1430" y1="240" x2="1450" y2="240" />
|
||||
<line x1="1440" y1="230" x2="1440" y2="250" />
|
||||
<line x1="1430" y1="480" x2="1450" y2="480" />
|
||||
<line x1="1440" y1="470" x2="1440" y2="490" />
|
||||
<line x1="1430" y1="720" x2="1450" y2="720" />
|
||||
<line x1="1440" y1="710" x2="1440" y2="730" />
|
||||
<line x1="1430" y1="960" x2="1450" y2="960" />
|
||||
<line x1="1440" y1="950" x2="1440" y2="970" />
|
||||
<line x1="1670" y1="240" x2="1690" y2="240" />
|
||||
<line x1="1680" y1="230" x2="1680" y2="250" />
|
||||
<line x1="1670" y1="480" x2="1690" y2="480" />
|
||||
<line x1="1680" y1="470" x2="1680" y2="490" />
|
||||
<line x1="1670" y1="720" x2="1690" y2="720" />
|
||||
<line x1="1680" y1="710" x2="1680" y2="730" />
|
||||
<line x1="1670" y1="960" x2="1690" y2="960" />
|
||||
<line x1="1680" y1="950" x2="1680" y2="970" />
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 6.1 KiB |
@@ -0,0 +1,151 @@
|
||||
<template id="captions-template">
|
||||
<div
|
||||
data-composition-id="captions"
|
||||
data-width="1920"
|
||||
data-height="1080"
|
||||
data-duration="__VIDEO_DURATION__"
|
||||
>
|
||||
<div id="caption-container"></div>
|
||||
|
||||
<style>
|
||||
[data-composition-id="captions"] {
|
||||
width: 1920px;
|
||||
height: 1080px;
|
||||
position: relative;
|
||||
font-family: "Helvetica", "Arial", sans-serif;
|
||||
font-weight: bold;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
[data-composition-id="captions"] #caption-container {
|
||||
position: absolute;
|
||||
bottom: 120px; /* Consistent bottom positioning */
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
[data-composition-id="captions"] .caption-box {
|
||||
background-color: #0a1e3d; /* Solid navy */
|
||||
padding: 20px 40px;
|
||||
display: none; /* Hidden by default, shown via GSAP */
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
/* Swiss Grid: sharp corners, solid block */
|
||||
}
|
||||
|
||||
[data-composition-id="captions"] .caption-text {
|
||||
color: #f2f2f2; /* Off-white */
|
||||
font-size: 72px;
|
||||
text-transform: uppercase; /* Swiss style often uses uppercase for impact */
|
||||
letter-spacing: -2px;
|
||||
line-height: 1;
|
||||
white-space: nowrap;
|
||||
text-align: center;
|
||||
max-width: 1600px;
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
|
||||
<script>
|
||||
(function () {
|
||||
const TRANSCRIPT = [
|
||||
{ text: "We", start: 0.119, end: 0.259 },
|
||||
{ text: "asked", start: 0.319, end: 0.479 },
|
||||
{ text: "what", start: 0.519, end: 0.659 },
|
||||
{ text: "you", start: 0.699, end: 0.819 },
|
||||
{ text: "needed.", start: 0.859, end: 1.819 },
|
||||
{ text: "Forty-seven", start: 1.86, end: 2.299 },
|
||||
{ text: "percent", start: 2.399, end: 2.679 },
|
||||
{ text: "of", start: 2.7, end: 2.799 },
|
||||
{ text: "you", start: 2.839, end: 2.939 },
|
||||
{ text: "said", start: 3.039, end: 3.179 },
|
||||
{ text: "motion", start: 3.24, end: 3.559 },
|
||||
{ text: "graphics,", start: 3.579, end: 4.599 },
|
||||
{ text: "sixty-two", start: 4.679, end: 5.179 },
|
||||
{ text: "percent", start: 5.299, end: 5.759 },
|
||||
{ text: "said", start: 5.859, end: 5.98 },
|
||||
{ text: "static", start: 6.079, end: 6.399 },
|
||||
{ text: "content", start: 6.46, end: 6.879 },
|
||||
{ text: "was", start: 6.92, end: 7.079 },
|
||||
{ text: "costing", start: 7.099, end: 7.48 },
|
||||
{ text: "you", start: 7.5, end: 7.579 },
|
||||
{ text: "attention,", start: 7.679, end: 8.659 },
|
||||
{ text: "and", start: 8.699, end: 8.86 },
|
||||
{ text: "three", start: 8.88, end: 9.06 },
|
||||
{ text: "out", start: 9.079, end: 9.18 },
|
||||
{ text: "of", start: 9.199, end: 9.34 },
|
||||
{ text: "four", start: 9.38, end: 9.799 },
|
||||
{ text: "said", start: 9.84, end: 10.0 },
|
||||
{ text: "you", start: 10.019, end: 10.159 },
|
||||
{ text: "know", start: 10.179, end: 10.36 },
|
||||
{ text: "the", start: 10.38, end: 10.42 },
|
||||
{ text: "look", start: 10.519, end: 10.699 },
|
||||
{ text: "you", start: 10.739, end: 10.859 },
|
||||
{ text: "want", start: 10.98, end: 11.34 },
|
||||
{ text: "but", start: 11.359, end: 11.52 },
|
||||
{ text: "don't", start: 11.56, end: 11.779 },
|
||||
{ text: "have", start: 11.819, end: 11.94 },
|
||||
{ text: "the", start: 11.96, end: 12.06 },
|
||||
{ text: "editing", start: 12.079, end: 12.4 },
|
||||
{ text: "skills", start: 12.52, end: 12.86 },
|
||||
{ text: "to", start: 12.88, end: 13.0 },
|
||||
{ text: "get", start: 13.019, end: 13.18 },
|
||||
{ text: "there.", start: 13.22, end: 14.22 },
|
||||
{ text: "So", start: 14.239, end: 14.399 },
|
||||
{ text: "we", start: 14.42, end: 14.52 },
|
||||
{ text: "built", start: 14.619, end: 14.88 },
|
||||
{ text: "Hyperframes", start: 15.079, end: 15.42 },
|
||||
];
|
||||
const container = document.getElementById("caption-container");
|
||||
const tl = gsap.timeline({ paused: true });
|
||||
|
||||
if (!TRANSCRIPT || TRANSCRIPT.length === 0) {
|
||||
window.__timelines = window.__timelines || {};
|
||||
window.__timelines["captions"] = tl;
|
||||
return;
|
||||
}
|
||||
|
||||
// Group transcript into max 5 words per group
|
||||
const groups = [];
|
||||
let currentGroup = [];
|
||||
|
||||
TRANSCRIPT.forEach((word, index) => {
|
||||
currentGroup.push(word);
|
||||
// Group by 5 words OR if it's the last word
|
||||
if (currentGroup.length === 5 || index === TRANSCRIPT.length - 1) {
|
||||
groups.push([...currentGroup]);
|
||||
currentGroup = [];
|
||||
}
|
||||
});
|
||||
|
||||
// Create DOM elements and timeline for each group
|
||||
groups.forEach((group, i) => {
|
||||
const box = document.createElement("div");
|
||||
box.className = "caption-box";
|
||||
box.id = `group-${i}`;
|
||||
|
||||
const text = document.createElement("div");
|
||||
text.className = "caption-text";
|
||||
text.textContent = group.map((w) => w.text).join(" ");
|
||||
|
||||
box.appendChild(text);
|
||||
container.appendChild(box);
|
||||
|
||||
const startTime = group[0].start;
|
||||
const endTime = group[group.length - 1].end;
|
||||
|
||||
// Hard cut animation (no fades) as requested
|
||||
tl.set(box, { display: "flex" }, startTime);
|
||||
tl.set(box, { display: "none" }, endTime);
|
||||
});
|
||||
|
||||
window.__timelines["captions"] = tl;
|
||||
})();
|
||||
</script>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,207 @@
|
||||
<template id="graphics-template">
|
||||
<div data-composition-id="graphics" data-width="1920" data-height="1080" data-duration="15">
|
||||
<div class="grid-container">
|
||||
<!-- Stat 1: 47% -->
|
||||
<div id="stat1" class="stat-group">
|
||||
<div class="stat-value">47%</div>
|
||||
<div class="stat-label">NEED MOTION GRAPHICS</div>
|
||||
</div>
|
||||
|
||||
<!-- Stat 2: 62% -->
|
||||
<div id="stat2" class="stat-group">
|
||||
<div class="stat-value">62%</div>
|
||||
<div class="stat-label">LOSING ATTENTION</div>
|
||||
<div class="progress-container">
|
||||
<div class="progress-bar"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Stat 3: 3 OF 4 -->
|
||||
<div id="stat3" class="stat-group">
|
||||
<div class="stat-value">3 OF 4</div>
|
||||
<div class="stat-label">LACK EDITING SKILLS</div>
|
||||
<div class="grid-blocks">
|
||||
<div class="block gold"></div>
|
||||
<div class="block gold"></div>
|
||||
<div class="block gold"></div>
|
||||
<div class="block navy"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
[data-composition-id="graphics"] {
|
||||
font-family: "Helvetica", Arial, sans-serif;
|
||||
color: #0a1e3d;
|
||||
background: transparent;
|
||||
width: 1920px;
|
||||
height: 1080px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
[data-composition-id="graphics"] .grid-container {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(12, 1fr);
|
||||
grid-template-rows: repeat(12, 1fr);
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 80px;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
[data-composition-id="graphics"] .stat-group {
|
||||
opacity: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
background: #f2f2f2;
|
||||
padding: 40px;
|
||||
border-left: 10px solid #d4a017;
|
||||
box-shadow: 20px 20px 0px rgba(10, 30, 61, 0.1);
|
||||
}
|
||||
|
||||
/* Positioning Stats on Grid - Adjusted for A-roll structure */
|
||||
[data-composition-id="graphics"] #stat1 {
|
||||
grid-column: 2 / 6;
|
||||
grid-row: 3 / 7;
|
||||
}
|
||||
|
||||
[data-composition-id="graphics"] #stat2 {
|
||||
grid-column: 2 / 6;
|
||||
grid-row: 3 / 7;
|
||||
}
|
||||
|
||||
[data-composition-id="graphics"] #stat3 {
|
||||
grid-column: 7 / 12;
|
||||
grid-row: 3 / 7;
|
||||
}
|
||||
|
||||
[data-composition-id="graphics"] .stat-value {
|
||||
font-size: 140px;
|
||||
font-weight: 900;
|
||||
color: #d4a017;
|
||||
line-height: 0.8;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
[data-composition-id="graphics"] .stat-label {
|
||||
font-size: 24px;
|
||||
font-weight: 300; /* Lighter weight */
|
||||
color: #0a1e3d;
|
||||
letter-spacing: 2px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
/* Progress Bar for Stat 2 */
|
||||
[data-composition-id="graphics"] .progress-container {
|
||||
width: 100%;
|
||||
height: 24px;
|
||||
background: #e0e0e0;
|
||||
margin-top: 30px;
|
||||
border: 2px solid #0a1e3d;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
[data-composition-id="graphics"] .progress-bar {
|
||||
width: 0%;
|
||||
height: 100%;
|
||||
background: #d4a017;
|
||||
}
|
||||
|
||||
/* Grid Blocks for Stat 3 */
|
||||
[data-composition-id="graphics"] .grid-blocks {
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
[data-composition-id="graphics"] .block {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
border: 3px solid #0a1e3d;
|
||||
}
|
||||
|
||||
[data-composition-id="graphics"] .block.gold {
|
||||
background: #d4a017;
|
||||
}
|
||||
|
||||
[data-composition-id="graphics"] .block.navy {
|
||||
background: #0a1e3d;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
|
||||
<script>
|
||||
(function () {
|
||||
const tl = gsap.timeline({ paused: true });
|
||||
|
||||
// Timing Constants
|
||||
const S1_START = 1.86;
|
||||
const S1_END = 4.5;
|
||||
const S2_START = 4.68;
|
||||
const S2_END = 8.6;
|
||||
const S3_START = 8.88;
|
||||
const S3_END = 14.2;
|
||||
|
||||
const SLIDE_DUR = 0.25; // 250ms
|
||||
const SHARP_EASE = "power2.out";
|
||||
|
||||
// Stat 1 Animation
|
||||
tl.fromTo(
|
||||
"#stat1",
|
||||
{ x: -200, opacity: 0 },
|
||||
{ x: 0, opacity: 1, duration: SLIDE_DUR, ease: SHARP_EASE },
|
||||
S1_START,
|
||||
);
|
||||
tl.to(
|
||||
"#stat1",
|
||||
{ x: 200, opacity: 0, duration: SLIDE_DUR, ease: "power2.in" },
|
||||
S1_END - SLIDE_DUR,
|
||||
);
|
||||
|
||||
// Stat 2 Animation
|
||||
tl.fromTo(
|
||||
"#stat2",
|
||||
{ y: 200, opacity: 0 },
|
||||
{ y: 0, opacity: 1, duration: SLIDE_DUR, ease: SHARP_EASE },
|
||||
S2_START,
|
||||
);
|
||||
// Progress bar fill
|
||||
tl.to(
|
||||
"#stat2 .progress-bar",
|
||||
{ width: "62%", duration: S2_END - S2_START - SLIDE_DUR * 2, ease: "none" },
|
||||
S2_START + SLIDE_DUR,
|
||||
);
|
||||
tl.to(
|
||||
"#stat2",
|
||||
{ y: -200, opacity: 0, duration: SLIDE_DUR, ease: "power2.in" },
|
||||
S2_END - SLIDE_DUR,
|
||||
);
|
||||
|
||||
// Stat 3 Animation
|
||||
tl.fromTo(
|
||||
"#stat3",
|
||||
{ x: 200, opacity: 0 },
|
||||
{ x: 0, opacity: 1, duration: SLIDE_DUR, ease: SHARP_EASE },
|
||||
S3_START,
|
||||
);
|
||||
// Stagger blocks
|
||||
tl.from(
|
||||
"#stat3 .block",
|
||||
{ scale: 0, duration: 0.3, stagger: 0.1, ease: "back.out(1.7)" },
|
||||
S3_START + SLIDE_DUR,
|
||||
);
|
||||
tl.to(
|
||||
"#stat3",
|
||||
{ x: -200, opacity: 0, duration: SLIDE_DUR, ease: "power2.in" },
|
||||
S3_END - SLIDE_DUR,
|
||||
);
|
||||
|
||||
window.__timelines = window.__timelines || {};
|
||||
window.__timelines["graphics"] = tl;
|
||||
})();
|
||||
</script>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,132 @@
|
||||
<template id="intro-template">
|
||||
<div data-composition-id="intro" data-width="1920" data-height="1080" data-duration="1.86">
|
||||
<div class="container">
|
||||
<div class="grid-line"></div>
|
||||
<div class="text-wrapper">
|
||||
<h1 class="title">HYPERFRAMES</h1>
|
||||
<h2 class="subtitle">THE SURVEY FINDINGS</h2>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
[data-composition-id="intro"] {
|
||||
background-color: #f5f5f5; /* Off-white */
|
||||
width: 1920px;
|
||||
height: 1080px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
[data-composition-id="intro"] .container {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
padding-left: 160px; /* Swiss grid alignment */
|
||||
}
|
||||
|
||||
[data-composition-id="intro"] .grid-line {
|
||||
position: absolute;
|
||||
left: 160px;
|
||||
top: 50%;
|
||||
width: 0px;
|
||||
height: 12px;
|
||||
background-color: #0a1e3d; /* Navy */
|
||||
transform: translateY(-180px); /* Positioned above the text */
|
||||
}
|
||||
|
||||
[data-composition-id="intro"] .text-wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
[data-composition-id="intro"] .title {
|
||||
color: #0a1e3d;
|
||||
font-size: 180px;
|
||||
font-weight: 900; /* Black weight */
|
||||
line-height: 0.9;
|
||||
margin: 0;
|
||||
letter-spacing: -0.04em;
|
||||
text-transform: uppercase;
|
||||
transform: translateX(-100%); /* Start off-screen left */
|
||||
}
|
||||
|
||||
[data-composition-id="intro"] .subtitle {
|
||||
color: #0a1e3d;
|
||||
font-size: 64px;
|
||||
font-weight: 300; /* Lighter weight for contrast */
|
||||
line-height: 1.2;
|
||||
margin: 0;
|
||||
letter-spacing: 0.1em;
|
||||
text-transform: uppercase;
|
||||
transform: translateX(-100%); /* Start off-screen left */
|
||||
margin-top: 20px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
|
||||
<script>
|
||||
(function () {
|
||||
const tl = gsap.timeline({ paused: true });
|
||||
|
||||
// Mechanical timing: 200ms (0.2s)
|
||||
const MECHANICAL_DURATION = 0.2;
|
||||
const STAGGER = 0.1;
|
||||
|
||||
// 1. Animate the grid line first
|
||||
tl.to(
|
||||
".grid-line",
|
||||
{
|
||||
width: "1200px",
|
||||
duration: 0.4,
|
||||
ease: "power4.out",
|
||||
},
|
||||
0.2,
|
||||
);
|
||||
|
||||
// 2. Slide in the title
|
||||
tl.to(
|
||||
".title",
|
||||
{
|
||||
x: 0,
|
||||
duration: MECHANICAL_DURATION,
|
||||
ease: "power2.inOut",
|
||||
},
|
||||
0.5,
|
||||
);
|
||||
|
||||
// 3. Slide in the subtitle with a slight stagger
|
||||
tl.to(
|
||||
".subtitle",
|
||||
{
|
||||
x: 0,
|
||||
duration: MECHANICAL_DURATION,
|
||||
ease: "power2.inOut",
|
||||
},
|
||||
0.5 + STAGGER,
|
||||
);
|
||||
|
||||
// 4. Subtle ambient motion (slow drift) to keep it alive
|
||||
tl.to(
|
||||
".text-wrapper",
|
||||
{
|
||||
x: 30,
|
||||
duration: 1.16, // Adjusted to fit 1.86s total
|
||||
ease: "none",
|
||||
},
|
||||
0.7,
|
||||
);
|
||||
|
||||
window.__timelines = window.__timelines || {};
|
||||
window.__timelines["intro"] = tl;
|
||||
})();
|
||||
</script>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,220 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Swiss Grid - Hyperframes</title>
|
||||
<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
|
||||
<style>
|
||||
body,
|
||||
html {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 1920px;
|
||||
height: 1080px;
|
||||
background-color: #f2f2f2;
|
||||
overflow: hidden;
|
||||
font-family: "Helvetica", Arial, sans-serif;
|
||||
}
|
||||
|
||||
#master-root {
|
||||
width: 1920px;
|
||||
height: 1080px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.background-grid {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
/* A-roll styling */
|
||||
#short_mag_cut_frame {
|
||||
position: absolute;
|
||||
border-radius: 8px; /* Required */
|
||||
z-index: 1;
|
||||
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
|
||||
overflow: hidden;
|
||||
background: #000;
|
||||
}
|
||||
|
||||
#short_mag_cut,
|
||||
#short_mag_cut_frame > img.__render_frame__,
|
||||
#short_mag_cut_frame > img.__preview_render_frame__ {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
object-position: center;
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* Overlay layers */
|
||||
.overlay-layer {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
#intro-comp {
|
||||
z-index: 2;
|
||||
}
|
||||
#graphics-comp {
|
||||
z-index: 3;
|
||||
}
|
||||
#captions-comp {
|
||||
z-index: 4;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div
|
||||
id="master-root"
|
||||
data-composition-id="master"
|
||||
data-width="1920"
|
||||
data-height="1080"
|
||||
data-start="0"
|
||||
data-duration="__VIDEO_DURATION__"
|
||||
>
|
||||
<!-- Background Grid -->
|
||||
<img id="bg-grid" class="background-grid" src="assets/swiss-grid.svg" alt="Grid" />
|
||||
|
||||
<!-- Intro Sub-composition -->
|
||||
<div
|
||||
id="intro-comp"
|
||||
class="overlay-layer"
|
||||
data-composition-id="intro"
|
||||
data-composition-src="compositions/intro.html"
|
||||
data-start="0"
|
||||
data-duration="1.86"
|
||||
data-track-index="2"
|
||||
></div>
|
||||
|
||||
<!-- Graphics Sub-composition -->
|
||||
<div
|
||||
id="graphics-comp"
|
||||
class="overlay-layer"
|
||||
data-composition-id="graphics"
|
||||
data-composition-src="compositions/graphics.html"
|
||||
data-start="0"
|
||||
data-duration="__VIDEO_DURATION__"
|
||||
data-track-index="3"
|
||||
></div>
|
||||
|
||||
<!-- Captions Sub-composition -->
|
||||
<div
|
||||
id="captions-comp"
|
||||
class="overlay-layer"
|
||||
data-composition-id="captions"
|
||||
data-composition-src="compositions/captions.html"
|
||||
data-start="0"
|
||||
data-duration="__VIDEO_DURATION__"
|
||||
data-track-index="4"
|
||||
></div>
|
||||
|
||||
<script>
|
||||
window.__timelines = window.__timelines || {};
|
||||
|
||||
const masterTL = gsap.timeline({ paused: true });
|
||||
const v = document.getElementById("short_mag_cut_frame");
|
||||
|
||||
// --- A-ROLL MOVEMENT (Structured Swiss Layout) ---
|
||||
|
||||
// 1. Entrance (0-1.86s): Slide in from left, settle centered for Intro
|
||||
masterTL.fromTo(
|
||||
v,
|
||||
{ x: -1000, y: 120, width: 960, height: 840 },
|
||||
{ x: 480, y: 120, width: 960, height: 840, duration: 0.8, ease: "power2.out" },
|
||||
0,
|
||||
);
|
||||
|
||||
// 2. Stat 1 (1.86s - 4.68s): Move to right side (Graphic is on left)
|
||||
masterTL.to(
|
||||
v,
|
||||
{
|
||||
x: 1080,
|
||||
y: 120,
|
||||
width: 720,
|
||||
height: 720,
|
||||
duration: 0.25,
|
||||
ease: "expo.out",
|
||||
},
|
||||
1.86,
|
||||
);
|
||||
|
||||
// 3. Stat 2 (4.68s - 8.88s): Stay right, zoom in slightly
|
||||
masterTL.to(
|
||||
v,
|
||||
{
|
||||
x: 1080,
|
||||
y: 60,
|
||||
width: 780,
|
||||
height: 780,
|
||||
duration: 0.25,
|
||||
ease: "expo.out",
|
||||
},
|
||||
4.68,
|
||||
);
|
||||
|
||||
// 4. Stat 3 (8.88s - 14.2s): Move to left side (Graphic is on right)
|
||||
masterTL.to(
|
||||
v,
|
||||
{
|
||||
x: 120,
|
||||
y: 120,
|
||||
width: 720,
|
||||
height: 720,
|
||||
duration: 0.25,
|
||||
ease: "expo.out",
|
||||
},
|
||||
8.88,
|
||||
);
|
||||
|
||||
// 5. Conclusion (14.2s - 16.04s): Center large
|
||||
masterTL.to(
|
||||
v,
|
||||
{
|
||||
x: 240,
|
||||
y: 60,
|
||||
width: 1440,
|
||||
height: 810,
|
||||
duration: 0.5,
|
||||
ease: "expo.out",
|
||||
},
|
||||
14.2,
|
||||
);
|
||||
|
||||
window.__timelines["master"] = masterTL;
|
||||
</script>
|
||||
</div>
|
||||
|
||||
<!-- A-roll Video (direct child of body to avoid video_nested_in_timed_element) -->
|
||||
<div id="short_mag_cut_frame">
|
||||
<video
|
||||
id="short_mag_cut"
|
||||
src="__VIDEO_SRC__"
|
||||
muted
|
||||
playsinline
|
||||
data-start="0"
|
||||
data-duration="__VIDEO_DURATION__"
|
||||
data-track-index="1"
|
||||
></video>
|
||||
</div>
|
||||
<audio
|
||||
id="a-roll-audio"
|
||||
src="__VIDEO_SRC__"
|
||||
data-start="0"
|
||||
data-duration="__VIDEO_DURATION__"
|
||||
data-track-index="5"
|
||||
data-volume="1"
|
||||
></audio>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,58 @@
|
||||
{
|
||||
"templates": [
|
||||
{
|
||||
"id": "blank",
|
||||
"label": "Blank",
|
||||
"hint": "Empty composition — just the scaffolding",
|
||||
"bundled": true
|
||||
},
|
||||
{
|
||||
"id": "warm-grain",
|
||||
"label": "Warm Grain",
|
||||
"hint": "Cream aesthetic with grain texture",
|
||||
"bundled": false
|
||||
},
|
||||
{
|
||||
"id": "play-mode",
|
||||
"label": "Play Mode",
|
||||
"hint": "Playful elastic animations",
|
||||
"bundled": false
|
||||
},
|
||||
{
|
||||
"id": "swiss-grid",
|
||||
"label": "Swiss Grid",
|
||||
"hint": "Structured grid layout",
|
||||
"bundled": false
|
||||
},
|
||||
{
|
||||
"id": "vignelli",
|
||||
"label": "Vignelli",
|
||||
"hint": "Bold typography with red accents",
|
||||
"bundled": false
|
||||
},
|
||||
{
|
||||
"id": "decision-tree",
|
||||
"label": "Decision Tree",
|
||||
"hint": "Animated flowchart with branching paths",
|
||||
"bundled": false
|
||||
},
|
||||
{
|
||||
"id": "kinetic-type",
|
||||
"label": "Kinetic Type",
|
||||
"hint": "Bold kinetic typography promo",
|
||||
"bundled": false
|
||||
},
|
||||
{
|
||||
"id": "product-promo",
|
||||
"label": "Product Promo",
|
||||
"hint": "Multi-scene product showcase with SVG assets",
|
||||
"bundled": false
|
||||
},
|
||||
{
|
||||
"id": "nyt-graph",
|
||||
"label": "NYT Graph",
|
||||
"hint": "Animated data chart in print editorial style",
|
||||
"bundled": false
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,187 @@
|
||||
<template id="captions-template">
|
||||
<div
|
||||
data-composition-id="captions"
|
||||
data-width="1080"
|
||||
data-height="1920"
|
||||
data-duration="__VIDEO_DURATION__"
|
||||
>
|
||||
<div id="captions-container"></div>
|
||||
|
||||
<style>
|
||||
[data-composition-id="captions"] {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 1080px;
|
||||
height: 1920px;
|
||||
font-family: "Helvetica", "Helvetica Neue", Arial, sans-serif;
|
||||
font-weight: 900; /* Helvetica Black/Bold */
|
||||
text-transform: uppercase;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
[data-composition-id="captions"] #captions-container {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
}
|
||||
|
||||
[data-composition-id="captions"] .caption-group {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: auto;
|
||||
max-width: 920px; /* 1080 - 2*80 */
|
||||
bottom: 672px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
opacity: 0;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
[data-composition-id="captions"] .caption-text {
|
||||
font-size: 64px;
|
||||
line-height: 1.1;
|
||||
color: #000000;
|
||||
background-color: #ffffff;
|
||||
padding: 15px 30px;
|
||||
border-top: 8px solid #cc0000; /* Vignelli Red top border accent */
|
||||
display: inline-block;
|
||||
letter-spacing: -0.02em; /* Tight Helvetica spacing */
|
||||
white-space: nowrap; /* Prevent wrapping at the element level */
|
||||
max-width: 900px;
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
|
||||
<script>
|
||||
(function () {
|
||||
const TRANSCRIPT = [
|
||||
{ text: "We", start: 0.14, end: 0.239 },
|
||||
{ text: "asked", start: 0.28, end: 0.459 },
|
||||
{ text: "what", start: 0.5, end: 0.619 },
|
||||
{ text: "you", start: 0.659, end: 0.779 },
|
||||
{ text: "needed.", start: 0.8, end: 1.179 },
|
||||
{ text: "Forty-seven", start: 1.199, end: 1.619 },
|
||||
{ text: "percent", start: 1.699, end: 1.96 },
|
||||
{ text: "of", start: 1.979, end: 2.059 },
|
||||
{ text: "you", start: 2.099, end: 2.299 },
|
||||
{ text: "said", start: 2.319, end: 2.499 },
|
||||
{ text: "motion", start: 2.559, end: 2.839 },
|
||||
{ text: "graphics,", start: 2.899, end: 3.759 },
|
||||
{ text: "sixty-two", start: 3.799, end: 4.159 },
|
||||
{ text: "percent", start: 4.239, end: 4.559 },
|
||||
{ text: "said", start: 4.639, end: 4.799 },
|
||||
{ text: "static", start: 4.859, end: 5.199 },
|
||||
{ text: "content", start: 5.239, end: 5.639 },
|
||||
{ text: "was", start: 5.679, end: 5.779 },
|
||||
{ text: "costing", start: 5.859, end: 6.219 },
|
||||
{ text: "you", start: 6.259, end: 6.339 },
|
||||
{ text: "attention,", start: 6.379, end: 7.299 },
|
||||
{ text: "and", start: 7.319, end: 7.439 },
|
||||
{ text: "three", start: 7.48, end: 7.599 },
|
||||
{ text: "out", start: 7.679, end: 7.779 },
|
||||
{ text: "of", start: 7.799, end: 7.879 },
|
||||
{ text: "four", start: 7.94, end: 8.139 },
|
||||
{ text: "said", start: 8.279, end: 8.46 },
|
||||
{ text: "you", start: 8.519, end: 8.6 },
|
||||
{ text: "know", start: 8.619, end: 8.739 },
|
||||
{ text: "the", start: 8.8, end: 8.88 },
|
||||
{ text: "look", start: 8.92, end: 9.079 },
|
||||
{ text: "you", start: 9.119, end: 9.259 },
|
||||
{ text: "want", start: 9.279, end: 9.619 },
|
||||
{ text: "but", start: 9.779, end: 9.88 },
|
||||
{ text: "don't", start: 9.92, end: 10.1 },
|
||||
{ text: "have", start: 10.159, end: 10.3 },
|
||||
{ text: "the", start: 10.3, end: 10.42 },
|
||||
{ text: "editing", start: 10.5, end: 10.779 },
|
||||
{ text: "skills", start: 10.86, end: 11.139 },
|
||||
{ text: "to", start: 11.159, end: 11.239 },
|
||||
{ text: "get", start: 11.279, end: 11.439 },
|
||||
{ text: "there.", start: 11.46, end: 12.239 },
|
||||
{ text: "So", start: 12.3, end: 12.38 },
|
||||
{ text: "we", start: 12.399, end: 12.519 },
|
||||
{ text: "built", start: 12.539, end: 12.759 },
|
||||
{ text: "Hyperframes", start: 12.84, end: 13.119 },
|
||||
];
|
||||
const tl = gsap.timeline({ paused: true });
|
||||
const container = document.getElementById("captions-container");
|
||||
|
||||
// Group words into single lines (max words or based on pauses/sentence ends)
|
||||
function groupTranscript(transcript, maxWords = 3) {
|
||||
const groups = [];
|
||||
let currentGroup = [];
|
||||
|
||||
transcript.forEach((word, index) => {
|
||||
currentGroup.push(word);
|
||||
|
||||
const nextWord = transcript[index + 1];
|
||||
const isPause = nextWord && nextWord.start - word.end > 0.15;
|
||||
const isSentenceEnd =
|
||||
word.text.includes(".") || word.text.includes("?") || word.text.includes("!");
|
||||
|
||||
if (currentGroup.length >= maxWords || isPause || isSentenceEnd || !nextWord) {
|
||||
groups.push({
|
||||
words: currentGroup,
|
||||
start: currentGroup[0].start,
|
||||
end: currentGroup[currentGroup.length - 1].end,
|
||||
text: currentGroup.map((w) => w.text).join(" "),
|
||||
});
|
||||
currentGroup = [];
|
||||
}
|
||||
});
|
||||
return groups;
|
||||
}
|
||||
|
||||
const captionGroups = groupTranscript(TRANSCRIPT);
|
||||
|
||||
captionGroups.forEach((group, index) => {
|
||||
const div = document.createElement("div");
|
||||
div.className = "caption-group";
|
||||
div.id = `group-${index}`;
|
||||
|
||||
const textSpan = document.createElement("span");
|
||||
textSpan.className = "caption-text";
|
||||
textSpan.innerText = group.text;
|
||||
|
||||
div.appendChild(textSpan);
|
||||
container.appendChild(div);
|
||||
|
||||
// Animation: Modern "expo.out" transitions
|
||||
// Entrance
|
||||
tl.fromTo(
|
||||
div,
|
||||
{ opacity: 0, y: 20 },
|
||||
{
|
||||
opacity: 1,
|
||||
y: 0,
|
||||
duration: 0.4,
|
||||
ease: "expo.out",
|
||||
},
|
||||
group.start,
|
||||
);
|
||||
|
||||
// Exit
|
||||
tl.to(
|
||||
div,
|
||||
{
|
||||
opacity: 0,
|
||||
y: -10,
|
||||
duration: 0.3,
|
||||
ease: "expo.out",
|
||||
},
|
||||
group.end - 0.3,
|
||||
);
|
||||
|
||||
// Hard kill to ensure caption is hidden
|
||||
tl.set(div, { opacity: 0, visibility: "hidden" }, group.end);
|
||||
});
|
||||
|
||||
window.__timelines = window.__timelines || {};
|
||||
window.__timelines["captions"] = tl;
|
||||
})();
|
||||
</script>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,324 @@
|
||||
<template id="overlays-template">
|
||||
<div data-composition-id="overlays" data-width="1080" data-height="1920" data-duration="16.88">
|
||||
<!-- 6-Column Grid Overlay (for visual reference during development, hidden by default) -->
|
||||
<div class="vignelli-grid">
|
||||
<div class="col"></div>
|
||||
<div class="col"></div>
|
||||
<div class="col"></div>
|
||||
<div class="col"></div>
|
||||
<div class="col"></div>
|
||||
<div class="col"></div>
|
||||
</div>
|
||||
|
||||
<!-- 1. 47% Motion Graphics -->
|
||||
<div class="overlay-item motion-graphics-stat" id="stat-47">
|
||||
<div class="red-bar"></div>
|
||||
<div class="stat-content">
|
||||
<div class="number">47%</div>
|
||||
<div class="label">Motion Graphics</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 2. 62% Static Content (Full Canvas) -->
|
||||
<div class="overlay-item static-content-stat" id="stat-62">
|
||||
<div class="bg-charcoal"></div>
|
||||
<div class="full-content">
|
||||
<div class="large-number">62%</div>
|
||||
<div class="large-label">Static Content</div>
|
||||
<div class="red-accent"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 3. 3 out of 4 lack editing skills -->
|
||||
<div class="overlay-item editing-skills-stat" id="stat-3-4">
|
||||
<div class="text-block">
|
||||
<span class="highlight">3 out of 4</span>
|
||||
<br />lack editing skills
|
||||
</div>
|
||||
<div class="side-bar"></div>
|
||||
</div>
|
||||
|
||||
<!-- 4. Hyperframes Branding -->
|
||||
<div class="overlay-item branding-reveal" id="branding">
|
||||
<div class="logo-container">
|
||||
<div class="logo-text"><span class="heavy">HYPERFRAMES</span></div>
|
||||
<div class="logo-underline"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
[data-composition-id="overlays"] {
|
||||
position: relative;
|
||||
width: 1080px;
|
||||
height: 1920px;
|
||||
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
color: #000000;
|
||||
overflow: hidden;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* Grid System */
|
||||
[data-composition-id="overlays"] .vignelli-grid {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(6, 1fr);
|
||||
pointer-events: none;
|
||||
z-index: 100;
|
||||
opacity: 0; /* Hidden */
|
||||
}
|
||||
[data-composition-id="overlays"] .vignelli-grid .col {
|
||||
border-right: 1px solid rgba(204, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
[data-composition-id="overlays"] .overlay-item {
|
||||
position: absolute;
|
||||
opacity: 0;
|
||||
display: flex;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
/* 1. 47% Stat Styles */
|
||||
[data-composition-id="overlays"] #stat-47 {
|
||||
bottom: 200px;
|
||||
left: 0;
|
||||
width: 540px; /* 3 columns */
|
||||
height: 240px;
|
||||
background: #ffffff;
|
||||
flex-direction: row;
|
||||
align-items: stretch;
|
||||
}
|
||||
[data-composition-id="overlays"] #stat-47 .red-bar {
|
||||
width: 20px;
|
||||
background: #cc0000;
|
||||
}
|
||||
[data-composition-id="overlays"] #stat-47 .stat-content {
|
||||
padding: 40px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
[data-composition-id="overlays"] #stat-47 .number {
|
||||
font-size: 120px;
|
||||
font-weight: 900;
|
||||
line-height: 1;
|
||||
letter-spacing: -2px;
|
||||
}
|
||||
[data-composition-id="overlays"] #stat-47 .label {
|
||||
font-size: 32px;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
/* 2. 62% Stat Styles (Full Canvas) */
|
||||
[data-composition-id="overlays"] #stat-62 {
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 1080px;
|
||||
height: 1920px;
|
||||
z-index: 50;
|
||||
}
|
||||
[data-composition-id="overlays"] #stat-62 .bg-charcoal {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: #1a1a1a;
|
||||
}
|
||||
[data-composition-id="overlays"] #stat-62 .full-content {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
padding: 0 90px; /* Align with grid */
|
||||
}
|
||||
[data-composition-id="overlays"] #stat-62 .large-number {
|
||||
font-size: 400px;
|
||||
font-weight: 900;
|
||||
color: #ffffff;
|
||||
line-height: 0.8;
|
||||
letter-spacing: -10px;
|
||||
}
|
||||
[data-composition-id="overlays"] #stat-62 .large-label {
|
||||
font-size: 80px;
|
||||
font-weight: 700;
|
||||
color: #ffffff;
|
||||
text-transform: uppercase;
|
||||
margin-top: 20px;
|
||||
max-width: 600px;
|
||||
}
|
||||
[data-composition-id="overlays"] #stat-62 .red-accent {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: 180px; /* 1 column */
|
||||
height: 100%;
|
||||
background: #cc0000;
|
||||
}
|
||||
|
||||
/* 3. 3 out of 4 Stat Styles */
|
||||
[data-composition-id="overlays"] #stat-3-4 {
|
||||
top: 400px;
|
||||
right: 0;
|
||||
width: 360px; /* 2 columns */
|
||||
background: #ffffff;
|
||||
padding: 40px;
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
[data-composition-id="overlays"] #stat-3-4 .text-block {
|
||||
font-size: 48px;
|
||||
font-weight: 700;
|
||||
line-height: 1.1;
|
||||
text-align: right;
|
||||
}
|
||||
[data-composition-id="overlays"] #stat-3-4 .highlight {
|
||||
color: #cc0000;
|
||||
font-size: 64px;
|
||||
font-weight: 900;
|
||||
}
|
||||
[data-composition-id="overlays"] #stat-3-4 .side-bar {
|
||||
width: 10px;
|
||||
background: #000000;
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
/* 4. Branding Styles */
|
||||
[data-composition-id="overlays"] #branding {
|
||||
bottom: 100px;
|
||||
left: 90px;
|
||||
width: 900px;
|
||||
justify-content: center;
|
||||
z-index: 60;
|
||||
}
|
||||
[data-composition-id="overlays"] #branding .logo-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
[data-composition-id="overlays"] #branding .logo-text {
|
||||
font-size: 64px;
|
||||
letter-spacing: 10px;
|
||||
color: #000000;
|
||||
}
|
||||
[data-composition-id="overlays"] #branding .logo-text .heavy {
|
||||
font-weight: 900;
|
||||
}
|
||||
[data-composition-id="overlays"] #branding .logo-text .light {
|
||||
font-weight: 300;
|
||||
}
|
||||
[data-composition-id="overlays"] #branding .logo-underline {
|
||||
width: 100%;
|
||||
height: 8px;
|
||||
background: #cc0000;
|
||||
margin-top: 10px;
|
||||
transform-origin: left;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
|
||||
<script>
|
||||
const tl = gsap.timeline({ paused: true });
|
||||
const TRANSCRIPT = [
|
||||
{ text: "We", start: 0.14, end: 0.239 },
|
||||
{ text: "asked", start: 0.28, end: 0.459 },
|
||||
{ text: "what", start: 0.5, end: 0.619 },
|
||||
{ text: "you", start: 0.659, end: 0.779 },
|
||||
{ text: "needed.", start: 0.8, end: 1.179 },
|
||||
{ text: "Forty-seven", start: 1.199, end: 1.619 },
|
||||
{ text: "percent", start: 1.699, end: 1.96 },
|
||||
{ text: "of", start: 1.979, end: 2.059 },
|
||||
{ text: "you", start: 2.099, end: 2.299 },
|
||||
{ text: "said", start: 2.319, end: 2.499 },
|
||||
{ text: "motion", start: 2.559, end: 2.839 },
|
||||
{ text: "graphics,", start: 2.899, end: 3.759 },
|
||||
{ text: "sixty-two", start: 3.799, end: 4.159 },
|
||||
{ text: "percent", start: 4.239, end: 4.559 },
|
||||
{ text: "said", start: 4.639, end: 4.799 },
|
||||
{ text: "static", start: 4.859, end: 5.199 },
|
||||
{ text: "content", start: 5.239, end: 5.639 },
|
||||
{ text: "was", start: 5.679, end: 5.779 },
|
||||
{ text: "costing", start: 5.859, end: 6.219 },
|
||||
{ text: "you", start: 6.259, end: 6.339 },
|
||||
{ text: "attention,", start: 6.379, end: 7.299 },
|
||||
{ text: "and", start: 7.319, end: 7.439 },
|
||||
{ text: "three", start: 7.48, end: 7.599 },
|
||||
{ text: "out", start: 7.679, end: 7.779 },
|
||||
{ text: "of", start: 7.799, end: 7.879 },
|
||||
{ text: "four", start: 7.94, end: 8.139 },
|
||||
{ text: "said", start: 8.279, end: 8.46 },
|
||||
{ text: "you", start: 8.519, end: 8.6 },
|
||||
{ text: "know", start: 8.619, end: 8.739 },
|
||||
{ text: "the", start: 8.8, end: 8.88 },
|
||||
{ text: "look", start: 8.92, end: 9.079 },
|
||||
{ text: "you", start: 9.119, end: 9.259 },
|
||||
{ text: "want", start: 9.279, end: 9.619 },
|
||||
{ text: "but", start: 9.779, end: 9.88 },
|
||||
{ text: "don't", start: 9.92, end: 10.1 },
|
||||
{ text: "have", start: 10.159, end: 10.3 },
|
||||
{ text: "the", start: 10.3, end: 10.42 },
|
||||
{ text: "editing", start: 10.5, end: 10.779 },
|
||||
{ text: "skills", start: 10.86, end: 11.139 },
|
||||
{ text: "to", start: 11.159, end: 11.239 },
|
||||
{ text: "get", start: 11.279, end: 11.439 },
|
||||
{ text: "there.", start: 11.46, end: 12.239 },
|
||||
{ text: "So", start: 12.3, end: 12.38 },
|
||||
{ text: "we", start: 12.399, end: 12.519 },
|
||||
{ text: "built", start: 12.539, end: 12.759 },
|
||||
{ text: "Hyperframes", start: 12.84, end: 13.119 },
|
||||
];
|
||||
|
||||
// Requirement 1: "47% Motion Graphics" (Start: 1.199, End: 3.759)
|
||||
// Positioned in bottom half, columns 1-3.
|
||||
tl.fromTo(
|
||||
"#stat-47",
|
||||
{ x: -540, opacity: 1 },
|
||||
{ x: 0, duration: 0.8, ease: "expo.out" },
|
||||
1.199,
|
||||
);
|
||||
tl.to("#stat-47", { x: -540, duration: 0.6, ease: "expo.in" }, 3.759 - 0.6);
|
||||
|
||||
// Requirement 2: "62% Static Content" (Start: 3.799, End: 7.299)
|
||||
// Full canvas moment. Large bold typography across columns.
|
||||
tl.set("#stat-62", { opacity: 1 }, 3.799);
|
||||
tl.from("#stat-62 .bg-charcoal", { x: "100%", duration: 0.8, ease: "expo.out" }, 3.799);
|
||||
tl.from("#stat-62 .red-accent", { x: "100%", duration: 0.8, ease: "expo.out" }, 3.899);
|
||||
tl.from(
|
||||
"#stat-62 .large-number",
|
||||
{ y: 100, opacity: 0, duration: 1, ease: "expo.out" },
|
||||
4.099,
|
||||
);
|
||||
tl.from("#stat-62 .large-label", { y: 50, opacity: 0, duration: 1, ease: "expo.out" }, 4.299);
|
||||
|
||||
tl.to("#stat-62", { x: "-100%", duration: 0.8, ease: "expo.in" }, 7.299 - 0.8);
|
||||
|
||||
// Requirement 3: "3 out of 4 lack editing skills" (Start: 7.319, End: 12.239)
|
||||
// Positioned in columns 5-6 (right side) to avoid face (x: 300-776)
|
||||
tl.fromTo(
|
||||
"#stat-3-4",
|
||||
{ x: 360, opacity: 1 },
|
||||
{ x: 0, duration: 0.8, ease: "expo.out" },
|
||||
7.319,
|
||||
);
|
||||
tl.to("#stat-3-4", { x: 360, duration: 0.6, ease: "expo.in" }, 12.239 - 0.6);
|
||||
|
||||
// Requirement 4: "Hyperframes" (Start: 12.84, End: 13.84)
|
||||
tl.set("#branding", { opacity: 1 }, 12.84);
|
||||
tl.from(
|
||||
"#branding .logo-text",
|
||||
{ y: 20, opacity: 0, duration: 0.6, ease: "expo.out" },
|
||||
12.84,
|
||||
);
|
||||
tl.from("#branding .logo-underline", { scaleX: 0, duration: 0.8, ease: "expo.out" }, 13.04);
|
||||
|
||||
window.__timelines = window.__timelines || {};
|
||||
window.__timelines["overlays"] = tl;
|
||||
</script>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,190 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>Massimo Vignelli Video</title>
|
||||
<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
|
||||
<style>
|
||||
body,
|
||||
html {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background: #ffffff;
|
||||
overflow: hidden;
|
||||
width: 1080px;
|
||||
height: 1920px;
|
||||
font-family: "Helvetica", Arial, sans-serif;
|
||||
}
|
||||
|
||||
/* 6-Column Grid System */
|
||||
.grid-container {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 1080px;
|
||||
height: 1920px;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(6, 1fr);
|
||||
pointer-events: none;
|
||||
z-index: 1000;
|
||||
opacity: 0; /* Keep grid invisible but present for layout references */
|
||||
}
|
||||
|
||||
.grid-column {
|
||||
border-right: 1px solid rgba(204, 0, 0, 0.2); /* Vignelli Red accent */
|
||||
}
|
||||
|
||||
#main-composition {
|
||||
position: relative;
|
||||
width: 1080px;
|
||||
height: 1920px;
|
||||
background: #ffffff;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Layer Hosts */
|
||||
#a-roll-wrapper {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 10;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#a-roll,
|
||||
#a-roll-wrapper img.__render_frame__,
|
||||
#a-roll-wrapper img.__preview_render_frame__ {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
#overlays-comp,
|
||||
#captions-comp {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 1080px;
|
||||
height: 1920px;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
#overlays-comp {
|
||||
z-index: 20;
|
||||
}
|
||||
|
||||
#captions-comp {
|
||||
z-index: 30;
|
||||
}
|
||||
|
||||
/* Curtain Transition Layer */
|
||||
.curtain {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -100%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: #1a1a1a;
|
||||
z-index: 25;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.curtain.red {
|
||||
background: #cc0000;
|
||||
z-index: 26;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div
|
||||
id="main-composition"
|
||||
data-composition-id="main-comp"
|
||||
data-width="1080"
|
||||
data-height="1920"
|
||||
data-start="0"
|
||||
data-duration="__VIDEO_DURATION__"
|
||||
>
|
||||
<!-- Transitions -->
|
||||
<div id="curtain-black" class="curtain"></div>
|
||||
<div id="curtain-red" class="curtain red"></div>
|
||||
|
||||
<!-- Overlays Composition -->
|
||||
<div
|
||||
id="overlays-comp"
|
||||
data-composition-id="overlays"
|
||||
data-composition-src="compositions/overlays.html"
|
||||
data-start="0"
|
||||
data-duration="__VIDEO_DURATION__"
|
||||
data-track-index="2"
|
||||
></div>
|
||||
|
||||
<!-- Captions Composition -->
|
||||
<div
|
||||
id="captions-comp"
|
||||
data-composition-id="captions"
|
||||
data-composition-src="compositions/captions.html"
|
||||
data-start="0"
|
||||
data-duration="__VIDEO_DURATION__"
|
||||
data-track-index="3"
|
||||
></div>
|
||||
|
||||
<!-- Grid Visualization -->
|
||||
<div class="grid-container">
|
||||
<div class="grid-column"></div>
|
||||
<div class="grid-column"></div>
|
||||
<div class="grid-column"></div>
|
||||
<div class="grid-column"></div>
|
||||
<div class="grid-column"></div>
|
||||
<div class="grid-column"></div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
const tl = gsap.timeline({ paused: true });
|
||||
|
||||
// Transition: Curtain Pull logic
|
||||
// A-roll leaves the screen at least once.
|
||||
// Timing: Let's do a curtain pull at 3.7s (transitioning to the 62% stat)
|
||||
// and return at 7.3s (end of attention stat).
|
||||
|
||||
// Curtain Out (A-roll hidden)
|
||||
tl.to("#curtain-black", { left: "0%", duration: 0.2, ease: "power2.inOut" }, 3.5);
|
||||
tl.to("#a-roll-wrapper", { opacity: 0, duration: 0 }, 3.7);
|
||||
tl.to("#curtain-black", { left: "100%", duration: 0.4, ease: "power2.inOut" }, 3.7);
|
||||
|
||||
// Curtain In (A-roll return)
|
||||
tl.set("#curtain-red", { left: "-100%" }, 7.1);
|
||||
tl.to("#curtain-red", { left: "0%", duration: 0.2, ease: "power2.inOut" }, 7.1);
|
||||
tl.to("#a-roll-wrapper", { opacity: 1, duration: 0 }, 7.3);
|
||||
tl.to("#curtain-red", { left: "100%", duration: 0.4, ease: "power2.inOut" }, 7.3);
|
||||
|
||||
window.__timelines = window.__timelines || {};
|
||||
window.__timelines["main-comp"] = tl;
|
||||
</script>
|
||||
</div>
|
||||
|
||||
<!-- A-Roll (direct child of body to avoid video_nested_in_timed_element) -->
|
||||
<div id="a-roll-wrapper">
|
||||
<video
|
||||
id="a-roll"
|
||||
src="__VIDEO_SRC__"
|
||||
muted
|
||||
playsinline
|
||||
data-start="0"
|
||||
data-duration="__VIDEO_DURATION__"
|
||||
data-track-index="0"
|
||||
></video>
|
||||
</div>
|
||||
<audio
|
||||
id="a-roll-audio"
|
||||
src="__VIDEO_SRC__"
|
||||
data-start="0"
|
||||
data-duration="__VIDEO_DURATION__"
|
||||
data-track-index="5"
|
||||
data-volume="1"
|
||||
></audio>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,154 @@
|
||||
<template id="captions-template">
|
||||
<div
|
||||
data-composition-id="captions"
|
||||
data-width="1920"
|
||||
data-height="1080"
|
||||
data-duration="__VIDEO_DURATION__"
|
||||
>
|
||||
<div class="captions-container">
|
||||
<div id="caption-box" class="caption-box">
|
||||
<span id="caption-text" class="caption-text"></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
[data-composition-id="captions"] .captions-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: flex-end;
|
||||
padding-bottom: 230px; /* Position at y: 850 (1080 - 230 = 850) */
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
[data-composition-id="captions"] .caption-box {
|
||||
background-color: #7a6248;
|
||||
padding: 12px 32px;
|
||||
border-radius: 24px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
min-width: 100px;
|
||||
max-width: 80%;
|
||||
opacity: 0;
|
||||
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
[data-composition-id="captions"] .caption-text {
|
||||
color: #f5f0e0;
|
||||
font-family: "Outfit", sans-serif;
|
||||
font-size: 48px;
|
||||
font-weight: 700;
|
||||
text-align: center;
|
||||
line-height: 1.2;
|
||||
white-space: nowrap;
|
||||
max-width: 1600px;
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
|
||||
<script>
|
||||
(function () {
|
||||
const script = [
|
||||
{ text: "We", start: 0.119, end: 0.259 },
|
||||
{ text: "asked", start: 0.319, end: 0.479 },
|
||||
{ text: "what", start: 0.519, end: 0.659 },
|
||||
{ text: "you", start: 0.699, end: 0.819 },
|
||||
{ text: "needed.", start: 0.859, end: 1.819 },
|
||||
{ text: "Forty-seven", start: 1.86, end: 2.299 },
|
||||
{ text: "percent", start: 2.399, end: 2.679 },
|
||||
{ text: "of", start: 2.7, end: 2.799 },
|
||||
{ text: "you", start: 2.839, end: 2.939 },
|
||||
{ text: "said", start: 3.039, end: 3.179 },
|
||||
{ text: "motion", start: 3.24, end: 3.559 },
|
||||
{ text: "graphics,", start: 3.579, end: 4.599 },
|
||||
{ text: "sixty-two", start: 4.679, end: 5.179 },
|
||||
{ text: "percent", start: 5.299, end: 5.759 },
|
||||
{ text: "said", start: 5.859, end: 5.98 },
|
||||
{ text: "static", start: 6.079, end: 6.399 },
|
||||
{ text: "content", start: 6.46, end: 6.879 },
|
||||
{ text: "was", start: 6.92, end: 7.079 },
|
||||
{ text: "costing", start: 7.099, end: 7.48 },
|
||||
{ text: "you", start: 7.5, end: 7.579 },
|
||||
{ text: "attention,", start: 7.679, end: 8.659 },
|
||||
{ text: "and", start: 8.699, end: 8.86 },
|
||||
{ text: "three", start: 8.88, end: 9.06 },
|
||||
{ text: "out", start: 9.079, end: 9.18 },
|
||||
{ text: "of", start: 9.199, end: 9.34 },
|
||||
{ text: "four", start: 9.38, end: 9.799 },
|
||||
{ text: "said", start: 9.84, end: 10.0 },
|
||||
{ text: "you", start: 10.019, end: 10.159 },
|
||||
{ text: "know", start: 10.179, end: 10.36 },
|
||||
{ text: "the", start: 10.38, end: 10.42 },
|
||||
{ text: "look", start: 10.519, end: 10.699 },
|
||||
{ text: "you", start: 10.739, end: 10.859 },
|
||||
{ text: "want", start: 10.98, end: 11.34 },
|
||||
{ text: "but", start: 11.359, end: 11.52 },
|
||||
{ text: "don't", start: 11.56, end: 11.779 },
|
||||
{ text: "have", start: 11.819, end: 11.94 },
|
||||
{ text: "the", start: 11.96, end: 12.06 },
|
||||
{ text: "editing", start: 12.079, end: 12.4 },
|
||||
{ text: "skills", start: 12.52, end: 12.86 },
|
||||
{ text: "to", start: 12.88, end: 13.0 },
|
||||
{ text: "get", start: 13.019, end: 13.18 },
|
||||
{ text: "there.", start: 13.22, end: 14.22 },
|
||||
{ text: "So", start: 14.239, end: 14.399 },
|
||||
{ text: "we", start: 14.42, end: 14.52 },
|
||||
{ text: "built", start: 14.619, end: 14.88 },
|
||||
{ text: "Hyperframes.", start: 15.079, end: 16.02 },
|
||||
];
|
||||
|
||||
// Group words into lines (max 5 words per line)
|
||||
const lines = [];
|
||||
for (let i = 0; i < script.length; i += 5) {
|
||||
const lineWords = script.slice(i, i + 5);
|
||||
lines.push({
|
||||
text: lineWords.map((w) => w.text).join(" "),
|
||||
start: lineWords[0].start,
|
||||
end: lineWords[lineWords.length - 1].end,
|
||||
});
|
||||
}
|
||||
|
||||
const tl = gsap.timeline({ paused: true });
|
||||
const box = document.querySelector('[data-composition-id="captions"] #caption-box');
|
||||
const textEl = document.querySelector('[data-composition-id="captions"] #caption-text');
|
||||
|
||||
lines.forEach((line, index) => {
|
||||
// Fade in and set text
|
||||
tl.set(box, { visibility: "visible" }, line.start);
|
||||
tl.to(
|
||||
box,
|
||||
{
|
||||
opacity: 1,
|
||||
duration: 0.1,
|
||||
ease: "power2.out",
|
||||
onStart: () => {
|
||||
textEl.textContent = line.text;
|
||||
},
|
||||
},
|
||||
line.start,
|
||||
);
|
||||
|
||||
// Fade out at the end of the line
|
||||
tl.to(
|
||||
box,
|
||||
{
|
||||
opacity: 0,
|
||||
duration: 0.1,
|
||||
ease: "power2.in",
|
||||
},
|
||||
line.end,
|
||||
);
|
||||
|
||||
// Hard kill to ensure caption is hidden
|
||||
tl.set(box, { opacity: 0, visibility: "hidden" }, line.end + 0.1);
|
||||
});
|
||||
|
||||
window.__timelines = window.__timelines || {};
|
||||
window.__timelines["captions"] = tl;
|
||||
})();
|
||||
</script>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,165 @@
|
||||
<template id="graphics-template">
|
||||
<div data-composition-id="graphics" data-width="1920" data-height="1080" data-duration="14">
|
||||
<!-- Moment 1: 47% Stat (1.8s - 4.5s) -->
|
||||
<div id="moment-1" class="moment circle-stat">
|
||||
<div class="stat-content">
|
||||
<div class="stat-text">47%</div>
|
||||
<div class="stat-desc">Need Motion Graphics</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Moment 2: 62% Stat (4.6s - 8.6s) -->
|
||||
<div id="moment-2" class="moment pill-stat">
|
||||
<div class="stat-text">62%</div>
|
||||
</div>
|
||||
|
||||
<!-- Moment 3: Editing Skills (8.8s - 14s) -->
|
||||
<div id="moment-3" class="moment rect-stat">
|
||||
<div class="icon-shape">
|
||||
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
d="M20,20 Q50,0 80,20 Q100,50 80,80 Q50,100 20,80 Q0,50 20,20"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="stat-text">Editing Skills</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
[data-composition-id="graphics"] {
|
||||
position: relative;
|
||||
width: 1920px;
|
||||
height: 1080px;
|
||||
font-family: "Outfit", sans-serif;
|
||||
color: white;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
[data-composition-id="graphics"] .moment {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
opacity: 0;
|
||||
/* We'll use GSAP to handle the centering and drift */
|
||||
}
|
||||
|
||||
/* Moment 1: Forest Green Circle */
|
||||
[data-composition-id="graphics"] #moment-1 {
|
||||
width: 500px;
|
||||
height: 500px;
|
||||
background-color: #3b5e3a;
|
||||
border-radius: 50%;
|
||||
left: 1400px;
|
||||
top: 540px;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
[data-composition-id="graphics"] .stat-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
[data-composition-id="graphics"] .stat-desc {
|
||||
font-size: 36px;
|
||||
font-weight: 400;
|
||||
margin-top: 10px;
|
||||
max-width: 300px;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
/* Moment 2: Ochre Pill */
|
||||
[data-composition-id="graphics"] #moment-2 {
|
||||
width: 500px;
|
||||
height: 220px;
|
||||
background-color: #cc8832;
|
||||
border-radius: 110px;
|
||||
left: 960px;
|
||||
top: 200px;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
/* Moment 3: Terracotta Rounded Rect */
|
||||
[data-composition-id="graphics"] #moment-3 {
|
||||
width: 550px;
|
||||
height: 180px;
|
||||
background-color: #c45d3e;
|
||||
border-radius: 40px;
|
||||
left: 400px;
|
||||
top: 540px;
|
||||
transform: translate(-50%, -50%);
|
||||
padding: 0 40px;
|
||||
justify-content: center;
|
||||
gap: 30px;
|
||||
}
|
||||
|
||||
[data-composition-id="graphics"] .stat-text {
|
||||
font-size: 80px;
|
||||
font-weight: 700;
|
||||
letter-spacing: -2px;
|
||||
}
|
||||
|
||||
[data-composition-id="graphics"] #moment-3 .stat-text {
|
||||
font-size: 54px;
|
||||
letter-spacing: -1px;
|
||||
}
|
||||
|
||||
[data-composition-id="graphics"] .icon-shape {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
}
|
||||
|
||||
[data-composition-id="graphics"] .icon-shape svg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
|
||||
<script>
|
||||
(function () {
|
||||
const tl = gsap.timeline({ paused: true });
|
||||
|
||||
// Moment 1: 1.8s - 4.5s
|
||||
// Gentle drift into place and settle
|
||||
tl.fromTo(
|
||||
"#moment-1",
|
||||
{ opacity: 0, x: "+=40", y: "+=15", scale: 0.8 },
|
||||
{ opacity: 1, x: 0, y: 0, scale: 1, duration: 1.2, ease: "back.out(1.7)" },
|
||||
1.8,
|
||||
);
|
||||
// Hold until 4.5s, then fade out
|
||||
tl.to("#moment-1", { opacity: 0, scale: 0.8, duration: 0.3, ease: "power2.in" }, 4.2);
|
||||
|
||||
// Moment 2: 4.6s - 8.6s
|
||||
// Gentle drift into place and settle
|
||||
tl.fromTo(
|
||||
"#moment-2",
|
||||
{ opacity: 0, y: "-=40", x: "+=10", scale: 0.8 },
|
||||
{ opacity: 1, y: 0, x: 0, scale: 1, duration: 1.2, ease: "back.out(1.7)" },
|
||||
4.6,
|
||||
);
|
||||
// Hold until 8.6s, then fade out
|
||||
tl.to("#moment-2", { opacity: 0, scale: 0.8, duration: 0.3, ease: "power2.in" }, 8.3);
|
||||
|
||||
// Moment 3: 8.8s - 14s
|
||||
// Gentle drift into place and settle
|
||||
tl.fromTo(
|
||||
"#moment-3",
|
||||
{ opacity: 0, x: "-=40", y: "-=10", scale: 0.8 },
|
||||
{ opacity: 1, x: 0, y: 0, scale: 1, duration: 1.2, ease: "back.out(1.7)" },
|
||||
8.8,
|
||||
);
|
||||
// Hold until end (14s)
|
||||
tl.to("#moment-3", { opacity: 0, duration: 0.5, ease: "power2.in" }, 13.5);
|
||||
|
||||
window.__timelines = window.__timelines || {};
|
||||
window.__timelines["graphics"] = tl;
|
||||
})();
|
||||
</script>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,87 @@
|
||||
<template id="intro-template">
|
||||
<div data-composition-id="intro" data-width="1920" data-height="1080" data-duration="3">
|
||||
<div class="container">
|
||||
<div class="title-card">
|
||||
<h1 class="title">Hyperframes</h1>
|
||||
<p class="subtitle">Design simplified.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
/* Import a rounded humanist sans-serif font */
|
||||
@import url("https://fonts.googleapis.com/css2?family=Outfit:wght@400;600&display=swap");
|
||||
|
||||
[data-composition-id="intro"] .container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: flex-start; /* Align to left for speaker card */
|
||||
align-items: center;
|
||||
padding-left: 5%;
|
||||
font-family: "Outfit", sans-serif;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
[data-composition-id="intro"] .title-card {
|
||||
background-color: #3b5e3a; /* Forest Green for contrast */
|
||||
padding: 40px 60px;
|
||||
border-radius: 30px;
|
||||
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);
|
||||
text-align: left;
|
||||
opacity: 0;
|
||||
transform: translateX(-100%); /* Start off-screen left */
|
||||
}
|
||||
|
||||
[data-composition-id="intro"] .title {
|
||||
font-size: 100px;
|
||||
font-weight: 600;
|
||||
color: #f5f0e0; /* Cream text on green card */
|
||||
margin: 0;
|
||||
line-height: 1.1;
|
||||
letter-spacing: -2px;
|
||||
}
|
||||
|
||||
[data-composition-id="intro"] .subtitle {
|
||||
font-size: 50px;
|
||||
font-weight: 400;
|
||||
color: #cc8832; /* Ochre accent */
|
||||
margin: 10px 0 0 0;
|
||||
line-height: 1.2;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
|
||||
<script>
|
||||
(function () {
|
||||
const tl = gsap.timeline({ paused: true });
|
||||
|
||||
// Animation: Speaker card slides in from the left
|
||||
tl.to(
|
||||
'[data-composition-id="intro"] .title-card',
|
||||
{
|
||||
opacity: 1,
|
||||
x: 0,
|
||||
duration: 0.8,
|
||||
ease: "power2.out",
|
||||
},
|
||||
0.2,
|
||||
);
|
||||
|
||||
// Exit: Slide off left at 1.8s (synced with 47% graphic)
|
||||
tl.to(
|
||||
'[data-composition-id="intro"] .title-card',
|
||||
{
|
||||
x: "-120%",
|
||||
opacity: 0,
|
||||
duration: 0.6,
|
||||
ease: "power2.in",
|
||||
},
|
||||
1.8,
|
||||
);
|
||||
|
||||
window.__timelines = window.__timelines || {};
|
||||
window.__timelines["intro"] = tl;
|
||||
})();
|
||||
</script>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,271 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Warm Grain - Hyperframes</title>
|
||||
<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
|
||||
<style>
|
||||
body,
|
||||
html {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 1920px;
|
||||
height: 1080px;
|
||||
overflow: hidden;
|
||||
background-color: #f5f0e0; /* Cream background */
|
||||
font-family: "Outfit", "Lexend", sans-serif;
|
||||
}
|
||||
|
||||
#main-composition {
|
||||
position: relative;
|
||||
width: 1920px;
|
||||
height: 1080px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Paper texture and Grain overlay */
|
||||
#grain-overlay-comp {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
pointer-events: none;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
/* Grain animation */
|
||||
@keyframes grain-noise {
|
||||
0%,
|
||||
100% {
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
10% {
|
||||
transform: translate(-5%, -5%);
|
||||
}
|
||||
20% {
|
||||
transform: translate(-10%, 5%);
|
||||
}
|
||||
30% {
|
||||
transform: translate(5%, -10%);
|
||||
}
|
||||
40% {
|
||||
transform: translate(-5%, 15%);
|
||||
}
|
||||
50% {
|
||||
transform: translate(-10%, 5%);
|
||||
}
|
||||
60% {
|
||||
transform: translate(15%, 0);
|
||||
}
|
||||
70% {
|
||||
transform: translate(0, 10%);
|
||||
}
|
||||
80% {
|
||||
transform: translate(-15%, 0);
|
||||
}
|
||||
90% {
|
||||
transform: translate(10%, 5%);
|
||||
}
|
||||
}
|
||||
|
||||
.grain-texture {
|
||||
position: absolute;
|
||||
top: -50%;
|
||||
left: -50%;
|
||||
width: 200%;
|
||||
height: 200%;
|
||||
background: url("https://www.transparenttextures.com/patterns/natural-paper.png");
|
||||
opacity: 0.15;
|
||||
animation: grain-noise 0.5s steps(1) infinite;
|
||||
}
|
||||
|
||||
#a-roll {
|
||||
position: absolute;
|
||||
border-radius: 16px;
|
||||
object-fit: cover;
|
||||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.comp-layer {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
pointer-events: none;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div
|
||||
id="main-composition"
|
||||
data-composition-id="main-video"
|
||||
data-width="1920"
|
||||
data-height="1080"
|
||||
data-start="0"
|
||||
data-duration="__VIDEO_DURATION__"
|
||||
>
|
||||
<!-- Background Layer -->
|
||||
<div
|
||||
id="grain-overlay-comp"
|
||||
data-composition-id="grain-overlay"
|
||||
data-width="1920"
|
||||
data-height="1080"
|
||||
data-start="0"
|
||||
data-duration="__VIDEO_DURATION__"
|
||||
data-track-index="100"
|
||||
>
|
||||
<div class="grain-texture"></div>
|
||||
<script>
|
||||
const grainTl = gsap.timeline({ paused: true });
|
||||
window.__timelines = window.__timelines || {};
|
||||
window.__timelines["grain-overlay"] = grainTl;
|
||||
</script>
|
||||
</div>
|
||||
|
||||
<!-- A-Roll Video (muted — audio is separate) -->
|
||||
<video
|
||||
id="a-roll"
|
||||
src="__VIDEO_SRC__"
|
||||
muted
|
||||
playsinline
|
||||
data-start="0"
|
||||
data-duration="__VIDEO_DURATION__"
|
||||
data-track-index="0"
|
||||
></video>
|
||||
<audio
|
||||
id="a-roll-audio"
|
||||
src="__VIDEO_SRC__"
|
||||
data-start="0"
|
||||
data-duration="__VIDEO_DURATION__"
|
||||
data-track-index="5"
|
||||
data-volume="1"
|
||||
></audio>
|
||||
|
||||
<!-- Compositions -->
|
||||
<div
|
||||
id="intro-layer"
|
||||
class="comp-layer"
|
||||
data-composition-id="intro"
|
||||
data-composition-src="compositions/intro.html"
|
||||
data-start="0"
|
||||
data-duration="2.5"
|
||||
data-track-index="1"
|
||||
></div>
|
||||
|
||||
<div
|
||||
id="graphics-layer"
|
||||
class="comp-layer"
|
||||
data-composition-id="graphics"
|
||||
data-composition-src="compositions/graphics.html"
|
||||
data-start="0"
|
||||
data-duration="__VIDEO_DURATION__"
|
||||
data-track-index="2"
|
||||
></div>
|
||||
|
||||
<div
|
||||
id="captions-layer"
|
||||
class="comp-layer"
|
||||
data-composition-id="captions"
|
||||
data-composition-src="compositions/captions.html"
|
||||
data-start="0"
|
||||
data-duration="__VIDEO_DURATION__"
|
||||
data-track-index="3"
|
||||
></div>
|
||||
|
||||
<script>
|
||||
const tl = gsap.timeline({ paused: true });
|
||||
|
||||
// A-Roll Framing Strategy
|
||||
// 1. 0s-1.8s: Intro scale up from small (60%) to medium (80%) - Shifted right slightly to clear speaker card
|
||||
// 2. 1.8s-4.6s: Grid view / Shift Left (x: 600, scale: 70%) for 47% graphic
|
||||
// 3. 4.6s-8.8s: Shift Center-Bottom (y: 800, scale: 70%) for 62% graphic (top)
|
||||
// 4. 8.8s-14s: Shift Right (x: 1320, scale: 75%) for Editing Skills graphic (left)
|
||||
// 5. 14s-17s: Final Reveal (Center, scale: 100%)
|
||||
|
||||
// Initial state
|
||||
gsap.set("#a-roll", {
|
||||
x: 1100,
|
||||
y: 540,
|
||||
xPercent: -50,
|
||||
yPercent: -50,
|
||||
width: 1920 * 0.6,
|
||||
height: 1080 * 0.6,
|
||||
});
|
||||
|
||||
// 1. Intro Scale Up (0s - 1.8s)
|
||||
tl.to(
|
||||
"#a-roll",
|
||||
{
|
||||
x: 1200,
|
||||
width: 1920 * 0.8,
|
||||
height: 1080 * 0.8,
|
||||
duration: 1.8,
|
||||
ease: "power2.inOut",
|
||||
},
|
||||
0,
|
||||
);
|
||||
|
||||
// 2. Moment 1: 47% Graphic Trigger (1.8s) - Shift Left
|
||||
tl.to(
|
||||
"#a-roll",
|
||||
{
|
||||
x: 600,
|
||||
y: 540,
|
||||
width: 1920 * 0.7,
|
||||
height: 1080 * 0.7,
|
||||
duration: 0.5,
|
||||
ease: "power2.inOut",
|
||||
},
|
||||
1.8,
|
||||
);
|
||||
|
||||
// 3. Moment 2: 62% Graphic Trigger (4.6s) - Shift Center-Bottom
|
||||
tl.to(
|
||||
"#a-roll",
|
||||
{
|
||||
x: 960,
|
||||
y: 750,
|
||||
width: 1920 * 0.7,
|
||||
height: 1080 * 0.7,
|
||||
duration: 0.5,
|
||||
ease: "power2.inOut",
|
||||
},
|
||||
4.6,
|
||||
);
|
||||
|
||||
// 4. Moment 3: Editing Skills Trigger (8.8s) - Shift Right
|
||||
tl.to(
|
||||
"#a-roll",
|
||||
{
|
||||
x: 1320,
|
||||
y: 540,
|
||||
width: 1920 * 0.75,
|
||||
height: 1080 * 0.75,
|
||||
duration: 0.5,
|
||||
ease: "power2.inOut",
|
||||
},
|
||||
8.8,
|
||||
);
|
||||
|
||||
// 5. Final Reveal (14s - 17s)
|
||||
tl.to(
|
||||
"#a-roll",
|
||||
{
|
||||
x: 960,
|
||||
y: 540,
|
||||
width: 1920 * 1.0,
|
||||
height: 1080 * 1.0,
|
||||
duration: 1.0,
|
||||
ease: "power2.inOut",
|
||||
},
|
||||
14,
|
||||
);
|
||||
|
||||
window.__timelines["main-video"] = tl;
|
||||
</script>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user