mirror of
https://github.com/heygen-com/hyperframes.git
synced 2026-09-01 19:42:03 +00:00
feat: add templates (#102)
## What
Adds 4 new composition templates and fixes structural issues across all templates.
### New templates
- **decision-tree** — animated flowchart with branching paths
- **kinetic-type** — bold kinetic typography promo
- **product-promo** — multi-scene product showcase with SVG assets (3 scenes)
- **nyt-graph** — animated data chart in NYT print editorial style
### Fixes across all templates
- GSAP updated from 3.12.2 → 3.14.2 (all templates, including warm-grain, swiss-grid, vignelli, play-mode)
- New templates restructured with proper root wrapper div, `data-duration`, sub-composition refs with `data-composition-id` / `data-width` / `data-height`
- nyt-chart: replaced `${compId}` template literal variables with hardcoded `"nyt-chart"` string — cheerio's css-what parser crashes on template literals during bundling, causing silent fallback to raw HTML without runtime injection
- nyt-chart: added DOM readiness retry for dynamically created SVG elements
- kinetic-type: removed external S3 audio URL
- All templates: GSAP script loaded in `<head>` before any scripts reference it
## Why
The new templates expand the range of content types available via `hyperframes init`. The fixes ensure all templates work correctly in the studio preview (bundler inlines sub-compositions and injects the runtime).
## Test plan
- [x] All 4 new templates render in studio preview
- [x] nyt-graph chart animates bars, line, and labels on playback
- [x] Existing templates unaffected (GSAP version bump is backwards compatible)
- [x] `hyperframes lint` passes on all templates
- [x] `generators.ts` updated with new template IDs
This commit is contained in:
Vance Ingalls
@@ -0,0 +1,420 @@
|
||||
<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>
|
||||
(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 }, "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 }, "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 }, "hold6");
|
||||
tl.to("#cursor", { scale: 0.8, duration: 0.05, yoyo: true, repeat: 1 }, "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["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>
|
||||
@@ -1,4 +1,13 @@
|
||||
export type TemplateId = "blank" | "warm-grain" | "play-mode" | "swiss-grid" | "vignelli";
|
||||
export type TemplateId =
|
||||
| "blank"
|
||||
| "warm-grain"
|
||||
| "play-mode"
|
||||
| "swiss-grid"
|
||||
| "vignelli"
|
||||
| "decision-tree"
|
||||
| "kinetic-type"
|
||||
| "product-promo"
|
||||
| "nyt-graph";
|
||||
|
||||
export interface TemplateOption {
|
||||
id: TemplateId;
|
||||
@@ -12,4 +21,12 @@ export const TEMPLATES: TemplateOption[] = [
|
||||
{ id: "play-mode", label: "Play Mode", hint: "Playful elastic animations" },
|
||||
{ id: "swiss-grid", label: "Swiss Grid", hint: "Structured grid layout" },
|
||||
{ id: "vignelli", label: "Vignelli", hint: "Bold typography with red accents" },
|
||||
{ id: "decision-tree", label: "Decision Tree", hint: "Animated flowchart with branching paths" },
|
||||
{ id: "kinetic-type", label: "Kinetic Type", hint: "Bold kinetic typography promo" },
|
||||
{
|
||||
id: "product-promo",
|
||||
label: "Product Promo",
|
||||
hint: "Multi-scene product showcase with SVG assets",
|
||||
},
|
||||
{ id: "nyt-graph", label: "NYT Graph", hint: "Animated data chart in print editorial style" },
|
||||
];
|
||||
|
||||
@@ -0,0 +1,588 @@
|
||||
<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;
|
||||
transform: translateX(100%);
|
||||
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>
|
||||
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) ---
|
||||
tl.to("#scene-2", { opacity: 1, duration: 0.1 }, 2.2);
|
||||
tl.to(".swiss-panel", { x: 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", { x: "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,450 @@
|
||||
<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["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>
|
||||
@@ -4,7 +4,7 @@
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Hyperframes - Play Mode</title>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
|
||||
<style>
|
||||
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,189 @@
|
||||
<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>
|
||||
(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,570 @@
|
||||
<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;
|
||||
transform: translate(-50%, -50%) scale(0);
|
||||
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;
|
||||
transform: scale(0);
|
||||
}
|
||||
|
||||
.width-label {
|
||||
top: -30px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%) scale(0);
|
||||
}
|
||||
|
||||
.height-label {
|
||||
right: -45px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%) rotate(90deg) scale(0);
|
||||
}
|
||||
|
||||
.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);
|
||||
transform: translateX(-320px);
|
||||
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;
|
||||
transform: translateX(-10px);
|
||||
}
|
||||
|
||||
.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>
|
||||
(function () {
|
||||
const tl = gsap.timeline({ paused: true });
|
||||
|
||||
// Organic Cursor Ease
|
||||
const cursorEase = "back.out(1.2)";
|
||||
|
||||
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 }, 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,226 @@
|
||||
<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>
|
||||
(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>
|
||||
@@ -132,7 +132,7 @@
|
||||
}
|
||||
</style>
|
||||
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
|
||||
<script>
|
||||
(function () {
|
||||
const tl = gsap.timeline({ paused: true });
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Swiss Grid - Hyperframes</title>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
|
||||
<style>
|
||||
body,
|
||||
html {
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>Massimo Vignelli Video</title>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
|
||||
<style>
|
||||
body,
|
||||
html {
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Warm Grain - Hyperframes</title>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
|
||||
<style>
|
||||
body,
|
||||
html {
|
||||
|
||||
Reference in New Issue
Block a user