Install
That writes one file:compositions/flowchart-vertical.html.
Source
flowchart-vertical.html
flowchart-vertical.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=1440, height=2560" />
<title>Flowchart Vertical</title>
<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:wght@400;500;600;700&display=block"
rel="stylesheet"
/>
<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: 1440px;
height: 2560px;
overflow: hidden;
background-color: #ffffff;
}
</style>
</head>
<body>
<div
id="flowchart-vertical"
data-composition-id="flowchart-vertical"
data-width="1440"
data-height="2560"
data-start="0"
data-duration="12"
>
<div class="canvas">
<svg class="connectors" width="1440" height="2560" viewBox="0 0 1440 2560">
<!-- Level 1 to 2 -->
<path
id="path-1-L"
class="connector"
d="M 720 210 L 720 360 L 440 360 L 440 530"
fill="none"
stroke="#333"
stroke-width="4"
/>
<path
id="path-1-R"
class="connector"
d="M 720 210 L 720 360 L 1000 360 L 1000 530"
fill="none"
stroke="#333"
stroke-width="4"
/>
<!-- Level 2 to 3 (Left side) -->
<path
id="path-2-LL"
class="connector"
d="M 440 590 L 440 760 L 280 760 L 280 930"
fill="none"
stroke="#333"
stroke-width="4"
/>
<path
id="path-2-LR"
class="connector"
d="M 440 590 L 440 760 L 600 760 L 600 930"
fill="none"
stroke="#333"
stroke-width="4"
/>
<!-- Level 2 to 3 (Right side) -->
<path
id="path-2-RL"
class="connector"
d="M 1000 590 L 1000 760 L 840 760 L 840 930"
fill="none"
stroke="#333"
stroke-width="4"
/>
<path
id="path-2-RR"
class="connector"
d="M 1000 590 L 1000 760 L 1160 760 L 1160 930"
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 yellow" style="left: 720px; top: 180px">
Should I learn to code?
</div>
<!-- Level 2 -->
<div id="node-yes" class="node green" style="left: 440px; top: 560px">Yes</div>
<div id="node-not-sure" class="node peach" style="left: 1000px; top: 560px">Not sure</div>
<!-- Level 3 -->
<div id="node-python" class="node lavender" style="left: 280px; top: 960px">
<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 blue" style="left: 600px; top: 960px">
Try no-code first
</div>
<div id="node-website" class="node pink" style="left: 840px; top: 960px">
Build a personal website
</div>
<div id="node-course" class="node yellow" style="left: 1160px; top: 960px">
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>
#flowchart-vertical {
width: 1440px;
height: 2560px;
background-color: #ffffff;
background-image: radial-gradient(#e5e5e5 1px, transparent 1px);
background-size: 20px 20px;
position: absolute;
overflow: hidden;
font-family: "Inter", sans-serif;
}
#flowchart-vertical .canvas {
width: 100%;
height: 100%;
position: absolute;
transform: none;
transform-origin: 720px 640px;
}
#flowchart-vertical .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;
}
#flowchart-vertical .node.yellow {
background-color: #e8d44d;
}
#flowchart-vertical .node.green {
background-color: #c2e8a0;
}
#flowchart-vertical .node.peach {
background-color: #f5c5a3;
}
#flowchart-vertical .node.lavender {
background-color: #d4c5f9;
}
#flowchart-vertical .node.blue {
background-color: #a8d8f0;
}
#flowchart-vertical .node.pink {
background-color: #f8b4c8;
}
#flowchart-vertical .connectors {
position: absolute;
top: 0;
left: 0;
z-index: 5;
pointer-events: none;
}
#flowchart-vertical .connector {
stroke-dasharray: 1000;
stroke-dashoffset: 1000;
}
#flowchart-vertical .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%);
}
#flowchart-vertical #label-yes {
left: 580px;
top: 420px;
}
#flowchart-vertical #label-not-sure {
left: 860px;
top: 420px;
}
#flowchart-vertical .cursor-container {
position: absolute;
left: 1440px;
top: 2560px;
z-index: 100;
pointer-events: none;
display: flex;
align-items: flex-start;
}
#flowchart-vertical .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;
}
#flowchart-vertical .squiggle-container {
position: absolute;
right: 0;
bottom: -4px;
opacity: 0;
}
#flowchart-vertical .emoji {
position: absolute;
font-size: 32px;
left: 390px;
top: 960px;
transform: translate(-50%, -50%) scale(0);
z-index: 20;
}
#flowchart-vertical #fade-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: white;
opacity: 0;
z-index: 1000;
pointer-events: none;
}
#flowchart-vertical .selection-border {
position: absolute;
top: -4px;
left: -4px;
right: -4px;
bottom: -4px;
border: 2px solid #0b84f3;
border-radius: 16px;
pointer-events: none;
opacity: 0;
}
#flowchart-vertical .text-highlight {
background-color: #d0e4ff;
}
</style>
<script>
(function () {
const tl = gsap.timeline({ paused: true });
const S = "#flowchart-vertical";
const nodePython = document.querySelector(S + " #node-python");
const pythonText = document.querySelector(S + " #python-text");
// 1. Root node scales in
tl.to(S + " #node-root", { scale: 1, duration: 0.4, ease: "power2.out" });
// 2. Hold
tl.addLabel("hold1", "+=0.6");
// 3. Connectors draw
tl.to(
S + " .connector#path-1-L, " + S + " .connector#path-1-R",
{ strokeDashoffset: 0, duration: 0.5, ease: "none" },
"hold1",
);
tl.to(
S + " #label-yes, " + S + " #label-not-sure",
{ opacity: 1, duration: 0.2 },
"hold1+=0.25",
);
// 4. Level 2 nodes
tl.to(S + " #node-yes", { scale: 1, duration: 0.4, ease: "back.out(1.7)" }, "hold1+=0.4");
tl.to(
S + " #node-not-sure",
{ scale: 1, duration: 0.4, ease: "back.out(1.7)" },
"hold1+=0.6",
);
// 5. Hold
tl.addLabel("hold2", "+=0.5");
// 6. Level 2→3 connectors
tl.to(
S +
" .connector#path-2-LL, " +
S +
" .connector#path-2-LR, " +
S +
" .connector#path-2-RL, " +
S +
" .connector#path-2-RR",
{ strokeDashoffset: 0, duration: 0.4, ease: "none" },
"hold2",
);
// 7. Leaf nodes
const leafNodes = [
S + " #node-python",
S + " #node-nocode",
S + " #node-website",
S + " #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}`,
);
});
tl.to(S + " .squiggle-container", { opacity: 1, duration: 0.1 }, "hold2+=0.3");
// 8. Hold
tl.addLabel("hold3", "+=0.8");
// 9. Cursor drifts in
tl.to(S + " #cursor", { x: -1110, y: -1560, duration: 1, ease: "power1.inOut" }, "hold3");
// 10. Cursor clicks — selection border
tl.add(() => {
if (!nodePython) return;
if (!nodePython.querySelector(".selection-border")) {
const border = document.createElement("div");
border.className = "selection-border";
nodePython.appendChild(border);
}
gsap.set(S + " .selection-border", { opacity: 1 });
}, "hold3+=1");
tl.to(
S + " #cursor",
{ scale: 0.8, duration: 0.05, yoyo: true, repeat: 1, overwrite: "auto" },
"hold3+=1",
);
// 11. Hold
tl.addLabel("hold4", "+=0.3");
// 12. Double-click to highlight "Pythom"
tl.to(
S + " #cursor",
{ scale: 0.8, duration: 0.05, yoyo: true, repeat: 3, overwrite: "auto" },
"hold4",
);
tl.add(() => {
if (!pythonText) return;
pythonText.innerHTML = 'Start with <span class="text-highlight">Pythom</span>';
}, "hold4+=0.1");
// 13. Hold
tl.addLabel("hold5", "+=0.2");
// 14. Type correction: "Pythom" → "Python"
const typingStart = tl.labels["hold5"];
const words = ["P", "Py", "Pyt", "Pyth", "Pytho", "Python"];
words.forEach((word, i) => {
tl.add(
() => {
if (pythonText)
pythonText.innerHTML = `Start with <span class="text-highlight">${word}</span>`;
},
typingStart + i * 0.05,
);
});
const typingEnd = typingStart + words.length * 0.05;
tl.add(() => {
if (pythonText) pythonText.innerHTML = "Start with Python";
gsap.set(S + " .squiggle-container", { opacity: 0 });
}, typingEnd);
// 15. Hold
tl.addLabel("hold6", typingEnd + 0.5);
// 16. Cursor clicks away to deselect
tl.to(S + " #cursor", { x: -1050, y: -1520, duration: 0.3, overwrite: "auto" }, "hold6");
tl.to(
S + " #cursor",
{ scale: 0.8, duration: 0.05, yoyo: true, repeat: 1, overwrite: "auto" },
"hold6+=0.3",
);
tl.to(S + " .selection-border", { opacity: 0, duration: 0.1 }, "hold6+=0.3");
// 17. Emoji pop
tl.to(
S + " #emoji-thumb",
{ scale: 1, duration: 0.15, ease: "back.out(2)" },
"hold6+=0.4",
);
// 18. Hold
tl.addLabel("hold7", "+=2");
// 19. Fade out
tl.to(S + " #fade-overlay", { opacity: 1, duration: 0.5 }, "hold7");
window.__timelines = window.__timelines || {};
window.__timelines["flowchart-vertical"] = tl;
})();
</script>
</div>
</body>
</html>
Usage
After installing, add the block to your host composition:<div data-composition-id="flowchart-vertical" data-composition-src="compositions/flowchart-vertical.html" data-start="0" data-duration="12" data-track-index="1" data-width="1440" data-height="2560"></div>
diagram flowchart interactive portrait.