Install
That writes one file:compositions/ui-3d-reveal.html.
Source
ui-3d-reveal.html
ui-3d-reveal.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=1920, height=1080" />
<title>ui-3d-reveal</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;800;900&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: 1920px;
height: 1080px;
overflow: hidden;
background-color: #0a0a0f;
}
</style>
</head>
<body>
<div
data-composition-id="ui-3d-reveal"
data-width="1920"
data-height="1080"
data-start="0"
data-duration="13"
>
<!-- Background: Figma outer canvas dark -->
<div class="bg-base"></div>
<div class="bg-glow" id="bgGlow"></div>
<!-- ══════════════════════════════════════════
INTRO: Figma logo stroke draw + fill
══════════════════════════════════════════ -->
<div class="intro-layer" id="introLayer">
<svg class="intro-svg" viewBox="0 0 1920 1080" xmlns="http://www.w3.org/2000/svg">
<g class="intro-logo" transform="translate(865, 397.5)">
<!-- Fill layer -->
<path
class="il-fill il-fill-1"
d="M95 0H47.5C21.27 0 0 21.27 0 47.5S21.27 95 47.5 95H95V0Z"
fill="#F24E1E"
opacity="0"
/>
<path
class="il-fill il-fill-2"
d="M95 0V95H142.5C168.73 95 190 73.73 190 47.5S168.73 0 142.5 0H95Z"
fill="#FF7262"
opacity="0"
/>
<path
class="il-fill il-fill-3"
d="M95 95H47.5C21.27 95 0 116.27 0 142.5S21.27 190 47.5 190H95V95Z"
fill="#A259FF"
opacity="0"
/>
<circle
class="il-fill il-fill-4"
cx="142.5"
cy="142.5"
r="47.5"
fill="#1ABCFE"
opacity="0"
/>
<path
class="il-fill il-fill-5"
d="M47.5 190C21.27 190 0 211.27 0 237.5S21.27 285 47.5 285 95 263.73 95 237.5V190H47.5Z"
fill="#0ACF83"
opacity="0"
/>
<!-- Stroke layer -->
<path
class="il-stroke il-stroke-1"
d="M95 0H47.5C21.27 0 0 21.27 0 47.5S21.27 95 47.5 95H95V0Z"
fill="none"
stroke="#F24E1E"
stroke-width="2"
/>
<path
class="il-stroke il-stroke-2"
d="M95 0V95H142.5C168.73 95 190 73.73 190 47.5S168.73 0 142.5 0H95Z"
fill="none"
stroke="#FF7262"
stroke-width="2"
/>
<path
class="il-stroke il-stroke-3"
d="M95 95H47.5C21.27 95 0 116.27 0 142.5S21.27 190 47.5 190H95V95Z"
fill="none"
stroke="#A259FF"
stroke-width="2"
/>
<circle
class="il-stroke il-stroke-4"
cx="142.5"
cy="142.5"
r="47.5"
fill="none"
stroke="#1ABCFE"
stroke-width="2"
/>
<path
class="il-stroke il-stroke-5"
d="M47.5 190C21.27 190 0 211.27 0 237.5S21.27 285 47.5 285 95 263.73 95 237.5V190H47.5Z"
fill="none"
stroke="#0ACF83"
stroke-width="2"
/>
</g>
</svg>
</div>
<!-- 3D scene -->
<div class="scene" id="scene">
<div class="card-glow" id="cardGlow"></div>
<div class="card-wrapper" id="cardWrapper">
<!-- ═══════════════════════════════════════
FRONT FACE — Figma Interface
═══════════════════════════════════════ -->
<div class="ui-card" id="uiCard">
<!-- ── TOOLBAR ── -->
<div class="fig-toolbar" id="figToolbar">
<!-- Left: logo + tools -->
<div class="tb-left">
<div class="fig-logo">
<svg width="18" height="26" viewBox="0 0 18 26" fill="none">
<rect x="0" y="0" width="9" height="9" rx="4.5" fill="#F24E1E" />
<rect x="9" y="0" width="9" height="9" rx="4.5" fill="#FF7262" />
<rect x="0" y="8.5" width="9" height="9" rx="4.5" fill="#A259FF" />
<circle cx="13.5" cy="13" r="4.5" fill="#1ABCFE" />
<rect x="0" y="17" width="9" height="9" rx="4.5" fill="#0ACF83" />
</svg>
</div>
<div class="tool-divider"></div>
<div class="tool-group">
<div class="tool-btn active" title="Move (V)">
<svg viewBox="0 0 16 16" fill="none" width="14" height="14">
<path d="M2 2l5 12 2-4 4-2L2 2z" fill="currentColor" />
</svg>
</div>
<div class="tool-btn" title="Scale (K)">
<svg viewBox="0 0 16 16" fill="none" width="14" height="14">
<path
d="M3 3l10 10M10 3h3v3M3 10H6"
stroke="currentColor"
stroke-width="1.5"
stroke-linecap="round"
/>
</svg>
</div>
<div class="tool-divider"></div>
<div class="tool-btn" title="Frame (F)">
<svg viewBox="0 0 16 16" fill="none" width="14" height="14">
<rect
x="2"
y="5"
width="12"
height="9"
rx="1"
stroke="currentColor"
stroke-width="1.4"
/>
<path
d="M5 5V3M11 5V3M5 14v2M11 14v2M2 8H0M14 8h2"
stroke="currentColor"
stroke-width="1.4"
stroke-linecap="round"
/>
</svg>
</div>
<div class="tool-btn" title="Rectangle (R)">
<svg viewBox="0 0 16 16" fill="none" width="14" height="14">
<rect
x="2"
y="4"
width="12"
height="9"
rx="1.5"
stroke="currentColor"
stroke-width="1.4"
/>
</svg>
</div>
<div class="tool-btn" title="Text (T)">
<svg viewBox="0 0 16 16" fill="none" width="14" height="14">
<path
d="M2 4h12M8 4v9M5 13h6"
stroke="currentColor"
stroke-width="1.5"
stroke-linecap="round"
/>
</svg>
</div>
<div class="tool-btn" title="Pen (P)">
<svg viewBox="0 0 16 16" fill="none" width="14" height="14">
<path
d="M3 13L8 3l5 10M5.5 8.5h5"
stroke="currentColor"
stroke-width="1.4"
stroke-linecap="round"
/>
</svg>
</div>
</div>
</div>
<!-- Center: file breadcrumb -->
<div class="tb-center">
<span class="file-name">App Redesign</span>
<span class="file-chevron">›</span>
<span class="file-page">Design System</span>
<svg class="file-arrow" viewBox="0 0 10 6" width="10" height="6" fill="none">
<path
d="M1 1l4 4 4-4"
stroke="currentColor"
stroke-width="1.4"
stroke-linecap="round"
/>
</svg>
</div>
<!-- Right: mode tabs + share + avatars -->
<div class="tb-right">
<div class="mode-tabs">
<span class="mode-tab">Design</span>
<span class="mode-tab active">Dev</span>
</div>
<div class="share-btn">
<svg viewBox="0 0 16 16" fill="none" width="12" height="12">
<path
d="M4 8H12M9 5l3 3-3 3"
stroke="white"
stroke-width="1.5"
stroke-linecap="round"
/>
</svg>
Share
</div>
<div class="avatar-cluster">
<div class="fig-avatar" style="background: #a259ff; z-index: 3">S</div>
<div
class="fig-avatar"
style="background: #f24e1e; z-index: 2; margin-left: -8px"
>
J
</div>
<div
class="fig-avatar"
style="background: #1abcfe; z-index: 1; margin-left: -8px"
>
K
</div>
</div>
<div class="present-btn">▶</div>
</div>
</div>
<!-- ── BODY ── -->
<div class="fig-body">
<!-- LAYERS PANEL -->
<div class="fig-layers" id="figLayers">
<div class="panel-tabs">
<span class="ptab active">Layers</span>
<span class="ptab">Assets</span>
</div>
<div class="layer-search">
<svg viewBox="0 0 14 14" fill="none" width="12" height="12">
<circle cx="6" cy="6" r="4.5" stroke="currentColor" stroke-width="1.3" />
<path
d="M9.5 9.5l2.5 2.5"
stroke="currentColor"
stroke-width="1.3"
stroke-linecap="round"
/>
</svg>
<span class="search-placeholder">Search layers</span>
</div>
<div class="layer-list">
<div class="layer-item page-item">
<svg class="li-icon" viewBox="0 0 12 12" fill="none" width="12" height="12">
<rect
x="1"
y="1"
width="8"
height="10"
rx="1"
stroke="currentColor"
stroke-width="1.2"
/>
<path
d="M3 4h5M3 7h3"
stroke="currentColor"
stroke-width="1.2"
stroke-linecap="round"
/>
</svg>
<span>Page 1</span>
</div>
<div class="layer-item frame-item expanded">
<svg class="li-collapse" viewBox="0 0 8 8" width="8" height="8" fill="none">
<path
d="M2 3l2 2 2-2"
stroke="currentColor"
stroke-width="1.2"
stroke-linecap="round"
/>
</svg>
<svg
class="li-icon frame-icon"
viewBox="0 0 12 12"
fill="none"
width="12"
height="12"
>
<rect
x="2"
y="3"
width="8"
height="6"
stroke="currentColor"
stroke-width="1.2"
/>
<path
d="M4 3V1M8 3V1M4 9v2M8 9v2M2 6H0M10 6h2"
stroke="currentColor"
stroke-width="1.2"
stroke-linecap="round"
/>
</svg>
<span>HeyGen — Home</span>
</div>
<div class="layer-item group-item indent-1">
<svg class="li-collapse" viewBox="0 0 8 8" width="8" height="8" fill="none">
<path
d="M2 3l2 2 2-2"
stroke="currentColor"
stroke-width="1.2"
stroke-linecap="round"
/>
</svg>
<svg class="li-icon" viewBox="0 0 12 12" fill="none" width="12" height="12">
<rect
x="1"
y="1"
width="10"
height="10"
rx="1"
stroke="currentColor"
stroke-width="1.2"
/>
</svg>
<span>Navigation</span>
</div>
<div class="layer-item comp-item indent-2">
<svg
class="li-icon comp-icon"
viewBox="0 0 12 12"
fill="none"
width="12"
height="12"
>
<path
d="M6 1L11 6 6 11 1 6z"
fill="none"
stroke="#A259FF"
stroke-width="1.2"
/>
</svg>
<span>Logo / Mark</span>
</div>
<div class="layer-item text-item indent-2">
<svg class="li-icon" viewBox="0 0 12 12" fill="none" width="12" height="12">
<path
d="M2 3h8M6 3v7M3 10h6"
stroke="currentColor"
stroke-width="1.2"
stroke-linecap="round"
/>
</svg>
<span>Nav Links</span>
</div>
<div class="layer-item comp-item indent-2 selected-layer" id="selectedLayer">
<svg
class="li-icon comp-icon"
viewBox="0 0 12 12"
fill="none"
width="12"
height="12"
>
<path
d="M6 1L11 6 6 11 1 6z"
fill="none"
stroke="#A259FF"
stroke-width="1.2"
/>
</svg>
<span>Create Card</span>
</div>
<div class="layer-item group-item indent-1 collapsed">
<svg
class="li-collapse"
viewBox="0 0 8 8"
width="8"
height="8"
fill="none"
style="transform: rotate(-90deg)"
>
<path
d="M2 3l2 2 2-2"
stroke="currentColor"
stroke-width="1.2"
stroke-linecap="round"
/>
</svg>
<svg class="li-icon" viewBox="0 0 12 12" fill="none" width="12" height="12">
<rect
x="1"
y="1"
width="10"
height="10"
rx="1"
stroke="currentColor"
stroke-width="1.2"
/>
</svg>
<span>Hero</span>
</div>
<div class="layer-item group-item indent-1 collapsed">
<svg
class="li-collapse"
viewBox="0 0 8 8"
width="8"
height="8"
fill="none"
style="transform: rotate(-90deg)"
>
<path
d="M2 3l2 2 2-2"
stroke="currentColor"
stroke-width="1.2"
stroke-linecap="round"
/>
</svg>
<svg class="li-icon" viewBox="0 0 12 12" fill="none" width="12" height="12">
<rect
x="1"
y="1"
width="10"
height="10"
rx="1"
stroke="currentColor"
stroke-width="1.2"
/>
</svg>
<span>Feature Grid</span>
</div>
<div class="layer-item group-item indent-1 collapsed">
<svg
class="li-collapse"
viewBox="0 0 8 8"
width="8"
height="8"
fill="none"
style="transform: rotate(-90deg)"
>
<path
d="M2 3l2 2 2-2"
stroke="currentColor"
stroke-width="1.2"
stroke-linecap="round"
/>
</svg>
<svg class="li-icon" viewBox="0 0 12 12" fill="none" width="12" height="12">
<rect
x="1"
y="1"
width="10"
height="10"
rx="1"
stroke="currentColor"
stroke-width="1.2"
/>
</svg>
<span>Footer</span>
</div>
</div>
<div class="page-bar">
<div class="pbar-tab active">Design System</div>
<div class="pbar-tab">Landing</div>
<div class="pbar-add">+</div>
</div>
</div>
<!-- CANVAS -->
<div class="fig-canvas" id="figCanvas">
<div class="canvas-frame-label">HeyGen — Home</div>
<!-- The artboard / HeyGen app.heygen.com — light mode -->
<div class="artboard" id="artboard">
<!-- ══ LEFT ICON NAV (56px) ══ -->
<div class="hg-icnav">
<div class="hg-iclogo">
<img
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADgAAAA4CAYAAACohjseAAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAAOKADAAQAAAABAAAAOAAAAAANV2hTAAAM+0lEQVRoBe2ZeZAU1R3Hf6+n59zZ2WWQQ0MUgqCoq6iIgIKYAgoTExMPCGI8qqIUJpZHLINltNQylWiViUlKqxRTKB6UWwWFURQPXJVDUTSAinIootzsxVw93dPdL9/f6+ndddwZd5a1yj/2Vb199/F53987ppeo3/WvQP8K9K9A/wr8EFfgk3VJWvPC70jKgD+9hqVy08zlcsXcu2XCz/u+Q9HnAzQ2Rmnk0JVBcicTSaG1fva5OX3+8TzOyBekPTlJAWmR7WTpuacvFFf0+fglHWol6SNLfrz2LP34wQeD5EypEaaIaxZFaupHDFy+YBp37OTojVXtRIEI6aGBNPf3K+XBG16Spx/ZoJVb9x3g+tWnxc3smrgw43GtQBFhwlsUi8W1YDT5EE/jy9liRsQh13W9SQVqaVBNiN677Xl5Z+Vp9r60bwCbmuK1gdzbcS0fipBJYcpTGHBBhCGkY/H4Cckld/xYTTNPn77a1jlhVjOZoHsfeEmu6cztu1ifANbHM5viupUIQ7UwzJJ9qBgPijxFaiP6oPrAczzt7bPEKXUOSVYxg9HTOAX4GIrE6JxHXpctT66U4/sOj+iIAQe+v+yVRND6CQOFoBorxsoFNQ6RB9ggyqI1sTP8ExXVDrxSVFEAkEGz8BGNknqI1j79prynryCPCDC5ftkDdSFjRhgqKSiGBBiD+mmG1FEeqA+Hz3r51uU88RtH0LEJmyTHWUH27BjUFKTXW3TX8ib5bmOXK8arUf3fXgMOWf/snLqwdWuUlSqqx6rpSjXOAySXMTCrGEBYE5nKU5w3ThR0hzIvtHZOmOGUA3YO8YRBZydfp+ZlTfLczlrVx/xuq2o5ZF1jQ0I3FkcDOcFAvM88k0QIWF15T1Ud5hoommworsWnNF7xbx5sgkPDB+dI7jQ85TgvCyVz8NJBiDTWpP7otHxz+Yvyb1zeG1c14KCmh+N1kfbVsbCls/kxUJAVUqboKcZQCrSoroojL5nLky6dCE/0P7NEa9SmhbtbSO4xPTPNFN88OSHJwMykK0kWKDDMlH/671L3g8a7ZahayKoB62sCGxOhXJ2nVBEEk+d95oP4cAyqs9kKQ4VHWcJ9Y/aSa/1Jbpgj5h3l0kO7m0m+nSECF6WViQrAeSryIaTZRMcZ8ozEaGpe9JSc6rfvSVgV4Inv/mNlXU1+pLfXfJUQFpXyYLw0AytTVfAmDfgqTaaZ3Vg6qXdmi1tGmTQhnCH30XaSBh89UI5NFcjKVHOSM4mG2m7tKOmuemyx83eV0YM/qpse1KMx7zxwf20t3aYJV03cGx9HHgBgTPCIAwqBSnaNR/ZkqNCSbXvxsqXJSmOd95zcaAXp1B3o5Ryd6HL0Gy0QJaFgsCApCFW5eweyfGZra+deLb7zAOoR4Jg1f51dP8BeogtX8AisjHJYWVaN+diU+DBRM0ChAufet6ZlPms0vzb7xcFeo8p/N2yQwfu+oBVtQZqiB3DjoO9deLSfDMhbspL4Z4i3nOhaik2zr9LGVurxOwEb1t3bEIu6H8ailo6LWvXVAciwSkFvCF0DIKpI1HN3p8hoTrua7b62au7rMytNolJZU5OMPHWQHmwN0+U5nRImlG0TUgzJSbEgRbRZaM/cfGX5XyUVAac2Xh83RiZ2x2JaXYfJYTZ8iDCEUrOLauahNkrvOezaOdMICu2tdVeu/nmlyZcrG7u56epkMHxJi+00bmqY/FRpvcsfl1P2D6CFIkLDwyna8NIccU5pHT9dEXDSezdvrUmI0Wx+DFgUEGbpKcWdFHIZOrRjt7Qylilsua22JnLB2jlr9/oDVBuO/2jV50Pq3RHtgcNC4FYwCpFC2rSa05bcmnHD6w5njUU06SJs0565soAT3rr+vvqjxR2iwyw7DxByLdq7dRdl21Kmlcvvj+iB+Vuu2/KyP+SKhw8OPYYijyQjofEREaiz8LRut52WVst59rwbav/s1ysNj12/7KMRR4tTHDxz+Jnsqqcyrgzsbldq2IkBMt0wZU3XMB13d8HRNxYovKJlzMQnS/vy02UBp6y75mDdIDFIVYQ1asKm5l37qG1/m51Pp9twJ/9z+/ytf/E7arp7Z2TQ0IH/SoZCM+qDwWFhVyte234NIgu325ac8XU0Hpt40m/Fvs4SxF5ddOfY4TX31MQDOFd0D473M6D4Scqhq75+4PIvlnMosU8OZZ3/7Rs96Yxv9FdMYMt27wIil9Dwyy7TmqJDX+53cql0RhQKq7Zfv+2Sri12Pm7cVavrv4kFAqPCLl5u7Io/aLvW43iIhDY2Fjvu47zxIfbwMCEES6VcfSxwUywe4kuoQy0+miWUc6GgendDDoZUirLCiPP2iYSCDX4/pWFZwJbPv1i8d4v5K9uydkV1/cId135ywG+854nMNXEKzw/pgdNCrghhxLJQfhsOfe5RkejQ9xfl2KRnqPKVz0wbnIwOcLDnlGJKNU89z0xZKZzMrqekb7JYIHIA77h4GZRxZQE3X/H+dWjDXjljsfwpPhfdrkkxKeBSjO8n9N5jx3B8QfOe4KZH6cGJfmPh5m9MJAbilmX1PMv2IDy1GI7TvpmqRVD9eHvTtPPNfl+lYVlArggzClhL6AlN0i9hTAlhl92ypf12pJVqaObA465WJoXHCSWCwZo1j7Yee+685Fe6rv9IinDR/Lw95pshd+TF/YOGr+MiMB8+8GZBWQNX/ZarCGgvoY/0Ao35VqseZEgAKZF9MLRhBdnZCAEpDCEnIPmVoGDQ4R2KBE+YzdLfXwzn8AmKUEJhH07VQ37eLBTaA7GbuN/uXFnAzPNyCKWqh+sAK47GVszC82FQYEBQF4pxKBdS1TQdm0hT+0kdItiDXN8uXg3qkGFAtGV4/xR1cCBl86kH6eRT08XhvhWUBXQ1GoAxqnIMx2bIUqjtyWn2XcC4TCmI0CQ7yNWhDn7jhpR63j7zpOa4Uzw1uZ5StnhFcDybTm9Ln3zq7VxWznk9dVOa+IX4zFGv524KS7J4n/lwvNfYs0oMp9TiECMpMIQcZ69rAfyFw2raEp+LAcmhCzAb8YLKQxrqcZzzbABy3DRt27Lz01T7Cn+8AcpUwKn8RJkilY3fFhjc21smevLV4kOEYQzYhw/DoYX6nMdhAYelVXA9ExWaUlDB8Z4DiINvBL6qDMVpW3mUQdVcLrvAaGj4utL8uKwiYHS2mG9FaGdpJ75ibIZ8cHDIUBxXymHyCgh5vjn66uGrGVkMy+0CQpkoFHQZRh0orBIUYpW+oRyuW6Ui9mU2k95gNJzwILr/Tld2D/otI4JOzEZpdSRP4/nuY1NkE+TDwj88lHKcB8+A6kApxrkfhu3I8645/jwIU8TdACc1fpoVT08VohIG40uczVVd5gDj/s28aRgH3OncricOrSo7MUtY8Vni7FSU7sdvMZcPEfZKObRmOGVyiCv1EKo08n3V2BwZiM1YeW7DKgeKJkpBxze/TuU8xSwoyd4BqIlDwUpnrqXzR7RXnnVnKYbsmUteJha0xmgG1MwwHIMxUA4TZZAOGMQ5T5koQjZFhsvCGBmU89X+Q+gS7A5OQl4GLEgd/TIYDhJYL38nt5C2sZNMQBqH215zTh/+TM9m7NXCMD13w34tVrVLGtYapU954mqyDIo4q8aQHPp7jMF8GAWKcl9FTtv+BnGFZJUK6nCBSoBiIHy+Aiwuc4RWLnuYGo75Wc9n69XEMNW5kbPE4REXi5PaYvSYGcRnS54oe1arCKuUYrXgfUgGUwuBkM2TAWVQVy85vtMKgOK9ZkK9PODwHVylCzhBpYN3gJGahY2srtlqZoxheudGXyTmpWN0qYH/lzFYVxCG8RVTMAzEsMjvKON0kL94shPSxtFvwiwZjKFgvsqr4raWJTT22FdVvMo/vQbkcRouEMtagzQiE6NdJiac4XuPYYogrBjnMTz7Dljkc7yg4xkPxy8ZfEXFYeKBcV6HS6X20+lD53akq4wcESCPNWWm2DfuAjE8E6WlecAwnG+KSq0icFcFUzhw8qgno5p60eF3MJ6Z3UylYLmUyvbqw5W/Dt306hdVF54/XVxqRui6fJgKHWaI3pVZArIDFnG+R9UrKKypPchPtW5da/tDNPGYD7st62FmmZ572Lqk2sypYmE2RKdYUTrAQOqQQeibJqumHgnFdkIvAqorvKSztvYdNG7IH0tyq072KSCPfvFksQ1+aD5Gq/gjLcP5YKxaV+eKIqDo8vWYKxhGjkL2eV3r9jbe54D+ROZOEtPwWL8d54ZTCqbqANaJkmd+heD9ZOS8/ZhKtWLfTaYTB+31+zqSsGRNj6Sr7tsu/ECeiXfYcvxcGMbvV9/hl+D2G8aL0X6aVm8+kwI102nSyF7/s7Ojry6R7x3QH+vhD+RMfBO8Ck+8ITCb9/4wTizwy/rD/hXoX4H+FehfgR/qCvwfTSeznkI0t8oAAAAASUVORK5CYII="
width="30"
height="30"
style="display: block"
alt="HeyGen"
/>
</div>
<div class="hg-icitem">
<svg viewBox="0 0 16 16" fill="none" width="16" height="16">
<circle cx="8" cy="5.5" r="2.8" stroke="currentColor" stroke-width="1.3" />
<path
d="M2 14.5c0-3.31 2.69-6 6-6s6 2.69 6 6"
stroke="currentColor"
stroke-width="1.3"
stroke-linecap="round"
/>
</svg>
<span>Avatar</span>
</div>
<div class="hg-icitem hg-icactive">
<div class="hg-icbg">
<svg viewBox="0 0 16 16" fill="none" width="15" height="15">
<circle cx="8" cy="5.5" r="2.5" stroke="white" stroke-width="1.3" />
<path
d="M2.5 14c0-3.04 2.46-5.5 5.5-5.5s5.5 2.46 5.5 5.5"
stroke="white"
stroke-width="1.3"
stroke-linecap="round"
/>
</svg>
</div>
<span>Video Agent</span>
</div>
<div class="hg-icitem">
<svg viewBox="0 0 16 16" fill="none" width="16" height="16">
<path
d="M3 4l3 8M10 4l3 8M6 10h4"
stroke="currentColor"
stroke-width="1.4"
stroke-linecap="round"
/>
</svg>
<span>Motion Cut</span>
</div>
<div class="hg-icitem">
<svg viewBox="0 0 16 16" fill="none" width="16" height="16">
<path
d="M2 4h12M8 4v9M5 13h6"
stroke="currentColor"
stroke-width="1.4"
stroke-linecap="round"
/>
<circle cx="12" cy="3" r="1.5" fill="#3B82F6" />
</svg>
<span>Translate</span>
</div>
<div class="hg-icitem">
<svg viewBox="0 0 16 16" fill="none" width="16" height="16">
<rect
x="2"
y="2"
width="5"
height="5"
rx="1.5"
fill="currentColor"
opacity="0.45"
/>
<rect
x="9"
y="2"
width="5"
height="5"
rx="1.5"
fill="currentColor"
opacity="0.45"
/>
<rect
x="2"
y="9"
width="5"
height="5"
rx="1.5"
fill="currentColor"
opacity="0.45"
/>
<rect
x="9"
y="9"
width="5"
height="5"
rx="1.5"
fill="currentColor"
opacity="0.45"
/>
</svg>
<span>Apps</span>
</div>
<div class="hg-icitem">
<svg viewBox="0 0 16 16" fill="none" width="16" height="16">
<path
d="M2 6a2 2 0 012-2h2l2 2h4a2 2 0 012 2v4a2 2 0 01-2 2H4a2 2 0 01-2-2V6z"
stroke="currentColor"
stroke-width="1.3"
/>
</svg>
<span>Projects</span>
</div>
<div class="hg-icuser">J</div>
</div>
<!-- ══ HISTORY PANEL (105px) ══ -->
<div class="hg-histpanel">
<div class="hg-histhead">
<span>Video Agent</span>
<svg viewBox="0 0 14 14" fill="none" width="12" height="12">
<rect
x="1"
y="1"
width="4.5"
height="12"
rx="1"
stroke="currentColor"
stroke-width="1.2"
/>
<rect
x="8.5"
y="1"
width="4.5"
height="12"
rx="1"
stroke="currentColor"
stroke-width="1.2"
/>
</svg>
</div>
<div class="hg-newitem">
<svg viewBox="0 0 12 12" fill="none" width="11" height="11">
<path
d="M1 6.5L6 1.5l5 5V11H7.5V8H4.5v3H1V6.5Z"
fill="#3B82F6"
fill-opacity="0.85"
/>
</svg>
New video
</div>
<div class="hg-histcat">YESTERDAY</div>
<div class="hg-histrow">AI Skills Gap: Alien</div>
<div class="hg-histcat">PREVIOUS 3 DAYS</div>
<div class="hg-histrow">AI Skills Gap: Alien</div>
<div class="hg-histrow">Product Strategy: An AI...</div>
<div class="hg-histrow">S9</div>
<div class="hg-histrow">S7</div>
<div class="hg-histrow">S5</div>
<div class="hg-histrow">S3</div>
<div class="hg-histcat">PREVIOUS 7 DAYS</div>
<div class="hg-histrow">S8 lock</div>
<div class="hg-histrow">S4</div>
<div class="hg-histrow">S2</div>
<div class="hg-histrow">Moody t2</div>
</div>
<!-- ══ MAIN CONTENT (359px) ══ -->
<div class="hg-maincnt">
<!-- Top-right icon cluster -->
<div class="hg-toprighticons">
<div class="hg-ticon">
<svg viewBox="0 0 14 14" fill="none" width="11" height="11">
<circle cx="6" cy="6" r="4.5" stroke="currentColor" stroke-width="1.3" />
<path
d="M9.5 9.5l2.5 2.5"
stroke="currentColor"
stroke-width="1.3"
stroke-linecap="round"
/>
</svg>
</div>
<div class="hg-ticon hg-notifico">
<svg viewBox="0 0 14 14" fill="none" width="11" height="11">
<path
d="M7 1.5a4 4 0 00-4 4v3l-1 2h10l-1-2v-3a4 4 0 00-4-4z"
stroke="currentColor"
stroke-width="1.2"
/>
<path
d="M5.5 10.5a1.5 1.5 0 003 0"
stroke="currentColor"
stroke-width="1.2"
/>
</svg>
<div class="hg-notifbadge">99+</div>
</div>
<div class="hg-ticon">
<svg viewBox="0 0 14 14" fill="none" width="11" height="11">
<path
d="M7 2l1.2 3.8H12L9 8.2l1.2 3.8L7 9.5l-3.2 2.5L5 8.2 2 5.8h3.8z"
stroke="currentColor"
stroke-width="1.1"
/>
</svg>
</div>
</div>
<!-- Hero heading -->
<div class="hg-herotitle">Turn your ideas into<br />production-ready video</div>
<!-- ─ Create card ─ -->
<div class="hg-createcard" id="hgCreateCard">
<!-- Selector row: Avatar | Voice | Style -->
<div class="hg-selrow">
<div class="hg-sel">
<span class="hg-sellbl">Avatar</span>
<div class="hg-selbox">
<div class="hg-avphoto"></div>
<span class="hg-seltxt">Jordan</span>
</div>
</div>
<div class="hg-seldiv"></div>
<div class="hg-sel">
<span class="hg-sellbl">Voice</span>
<div class="hg-selbox">
<div class="hg-voicebars">
<div class="hg-vbar" style="height: 5px"></div>
<div class="hg-vbar" style="height: 9px"></div>
<div class="hg-vbar" style="height: 7px"></div>
<div class="hg-vbar" style="height: 11px"></div>
<div class="hg-vbar" style="height: 5px"></div>
</div>
<span class="hg-seltxt">Auto</span>
</div>
</div>
<div class="hg-seldiv"></div>
<div class="hg-sel">
<span class="hg-sellbl">Style</span>
<div class="hg-selbox">
<div class="hg-styleico">
<svg viewBox="0 0 14 14" fill="none" width="12" height="12">
<rect
x="1"
y="1"
width="12"
height="12"
rx="2"
stroke="currentColor"
stroke-width="1.2"
/>
<path
d="M4.5 7l2 2 3-3"
stroke="currentColor"
stroke-width="1.2"
stroke-linecap="round"
/>
</svg>
</div>
<span class="hg-seltxt">Auto</span>
</div>
</div>
<div class="hg-settico">
<svg viewBox="0 0 14 14" fill="none" width="13" height="13">
<circle cx="7" cy="7" r="2" stroke="currentColor" stroke-width="1.2" />
<path
d="M7 1.5V3M7 11v1.5M1.5 7H3M11 7h1.5M3.4 3.4l1 1M9.6 9.6l1 1M3.4 10.6l1-1M9.6 4.4l1-1"
stroke="currentColor"
stroke-width="1.2"
stroke-linecap="round"
/>
</svg>
</div>
</div>
<!-- Input -->
<div class="hg-cinput">Describe your video idea ...</div>
<!-- Bottom bar -->
<div class="hg-cbottom">
<div class="hg-cbleft">
<div class="hg-cbtn">
<svg viewBox="0 0 12 12" fill="none" width="11" height="11">
<path
d="M6 2v8M2 6h8"
stroke="currentColor"
stroke-width="1.4"
stroke-linecap="round"
/>
</svg>
</div>
<div class="hg-cbtn">
<svg viewBox="0 0 12 12" fill="none" width="11" height="11">
<path
d="M6 1.5l1 3H10L7.5 6.5l1 3L6 8 3.5 9.5l1-3L2 4.5H5z"
fill="#9CA3AF"
/>
</svg>
</div>
<div class="hg-cbtn">
<svg viewBox="0 0 12 12" fill="none" width="11" height="11">
<path
d="M1.5 3h9M1.5 6h9M1.5 9h6"
stroke="currentColor"
stroke-width="1.3"
stroke-linecap="round"
/>
</svg>
</div>
</div>
<div class="hg-cbright">
<div class="hg-genbtn">
<svg viewBox="0 0 10 10" fill="none" width="9" height="9">
<path d="M5 1l1 3h3L7 6l1 3L5 7.5 2 9l1-3L1 4h3z" fill="#6B7280" />
</svg>
Generate
<svg viewBox="0 0 8 6" fill="none" width="8" height="6">
<path
d="M1 1l3 3 3-3"
stroke="#6B7280"
stroke-width="1.3"
stroke-linecap="round"
/>
</svg>
</div>
<div class="hg-submitbtn">
<svg viewBox="0 0 12 12" fill="none" width="10" height="10">
<path
d="M6 9V3M3 6l3-3 3 3"
stroke="white"
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
</div>
</div>
</div>
</div>
<!-- Styles from community -->
<div class="hg-stylessec">
<div class="hg-stitle">Styles from the community</div>
<div class="hg-spills">
<div class="hg-spill hg-spactive">All Styles</div>
<div class="hg-spill">Retro Tech</div>
<div class="hg-spill">Iconic Artist</div>
<div class="hg-spill">Pop Culture</div>
<div class="hg-spill">Print</div>
<div class="hg-spill">Cinematic</div>
</div>
<div class="hg-scards">
<div
class="hg-sc"
style="background: linear-gradient(135deg, #1b2a5e, #2d4a9a)"
>
<span class="hg-sclbl">IMPLEMENTATION DEPTH</span>
</div>
<div
class="hg-sc"
style="background: linear-gradient(160deg, #c9ad88, #b89668)"
>
<span
class="hg-sclbl"
style="font-style: italic; color: #3d2810; font-size: 5.5px"
>Strategy means saying NO</span
>
</div>
<div
class="hg-sc"
style="
background: #ede9e0;
display: flex;
align-items: center;
justify-content: center;
"
>
<span style="color: #cc4422; font-size: 14px; font-weight: 700">?</span>
</div>
<div
class="hg-sc"
style="background: linear-gradient(135deg, #8b1515, #c92020)"
>
<span class="hg-sclbl" style="color: #ffd9a0; font-size: 5px"
>THINK BIG.<br />START SMALL.</span
>
</div>
</div>
</div>
</div>
</div>
<!-- Figma selection handles on the first video card -->
<div class="selection-ring" id="selectionRing">
<div class="sel-handle tl"></div>
<div class="sel-handle tr"></div>
<div class="sel-handle bl"></div>
<div class="sel-handle br"></div>
<div class="sel-label">Create Card · W 322 H 110</div>
</div>
</div>
<!-- DESIGN PROPERTIES PANEL -->
<div class="fig-props" id="figProps">
<div class="panel-tabs">
<span class="ptab active">Design</span>
<span class="ptab">Prototype</span>
<span class="ptab">Inspect</span>
</div>
<!-- Alignment row -->
<div class="prop-align">
<div class="align-btn">⬓</div>
<div class="align-btn">⬒</div>
<div class="align-btn active-align">⬔</div>
<div class="align-divider"></div>
<div class="align-btn">⬕</div>
<div class="align-btn">⬗</div>
</div>
<!-- Frame section -->
<div class="prop-section">
<div class="prop-row-2">
<div class="prop-field">
<span class="prop-pre">W</span>
<span class="prop-val">108</span>
</div>
<div class="prop-field">
<span class="prop-pre">H</span>
<span class="prop-val">34</span>
</div>
</div>
<div class="prop-row-2">
<div class="prop-field">
<span class="prop-pre">X</span>
<span class="prop-val">1244</span>
</div>
<div class="prop-field">
<span class="prop-pre">Y</span>
<span class="prop-val">18</span>
</div>
</div>
<div class="prop-row-2">
<div class="prop-field">
<span class="prop-pre">↺</span>
<span class="prop-val">0°</span>
</div>
<div class="prop-field">
<span class="prop-pre">⌐</span>
<span class="prop-val">8</span>
</div>
</div>
</div>
<!-- Auto layout -->
<div class="prop-section">
<div class="prop-section-head">
<span class="prop-section-label">Auto layout</span>
<span class="prop-section-icon">−</span>
</div>
<div class="prop-row-2">
<div class="prop-field">
<span class="prop-pre">→</span>
<span class="prop-val">12px</span>
</div>
<div class="prop-field">
<span class="prop-pre">⊡</span>
<span class="prop-val">14 / 8</span>
</div>
</div>
</div>
<!-- Fill -->
<div class="prop-section">
<div class="prop-section-head">
<span class="prop-section-label">Fill</span>
<span class="prop-section-icon">+</span>
</div>
<div class="fill-row">
<div class="fill-preview" style="background: #ffffff"></div>
<span class="fill-hex">FFFFFF</span>
<span class="fill-pct">100%</span>
</div>
</div>
<!-- Stroke -->
<div class="prop-section">
<div class="prop-section-head">
<span class="prop-section-label">Stroke</span>
<span class="prop-section-icon">+</span>
</div>
<div class="fill-row muted">
<span class="prop-empty">No strokes</span>
</div>
</div>
<!-- Effects -->
<div class="prop-section">
<div class="prop-section-head">
<span class="prop-section-label">Effects</span>
<span class="prop-section-icon">+</span>
</div>
<div class="effect-row">
<div class="effect-dot"></div>
<span class="effect-name">Drop shadow</span>
</div>
</div>
<!-- Export -->
<div class="prop-section">
<div class="prop-section-head">
<span class="prop-section-label">Export</span>
<span class="prop-section-icon">+</span>
</div>
</div>
</div>
</div>
<!-- /fig-body -->
</div>
<!-- /ui-card -->
<!-- RIGHT DEPTH FACE -->
<div class="depth-right" id="depthRight"></div>
</div>
<!-- /card-wrapper -->
</div>
<!-- /scene -->
<!-- ══════════════════════════════════════════
OUTRO: Logo rebuild + tagline + URL pill
══════════════════════════════════════════ -->
<div class="outro-layer" id="outroLayer">
<svg class="outro-svg" viewBox="0 0 1920 1080" xmlns="http://www.w3.org/2000/svg">
<g class="outro-logo" transform="translate(880, 310)">
<!-- Fill layer -->
<path
class="ol-fill ol-fill-1"
d="M80 0H40C17.9 0 0 17.9 0 40S17.9 80 40 80H80V0Z"
fill="#F24E1E"
opacity="0"
/>
<path
class="ol-fill ol-fill-2"
d="M80 0V80H120C142.1 80 160 62.1 160 40S142.1 0 120 0H80Z"
fill="#FF7262"
opacity="0"
/>
<path
class="ol-fill ol-fill-3"
d="M80 80H40C17.9 80 0 97.9 0 120S17.9 160 40 160H80V80Z"
fill="#A259FF"
opacity="0"
/>
<circle class="ol-fill ol-fill-4" cx="120" cy="120" r="40" fill="#1ABCFE" opacity="0" />
<path
class="ol-fill ol-fill-5"
d="M40 160C17.9 160 0 177.9 0 200S17.9 240 40 240 80 222.1 80 200V160H40Z"
fill="#0ACF83"
opacity="0"
/>
<!-- Stroke layer -->
<path
class="ol-stroke ol-stroke-1"
d="M80 0H40C17.9 0 0 17.9 0 40S17.9 80 40 80H80V0Z"
fill="none"
stroke="#F24E1E"
stroke-width="2"
/>
<path
class="ol-stroke ol-stroke-2"
d="M80 0V80H120C142.1 80 160 62.1 160 40S142.1 0 120 0H80Z"
fill="none"
stroke="#FF7262"
stroke-width="2"
/>
<path
class="ol-stroke ol-stroke-3"
d="M80 80H40C17.9 80 0 97.9 0 120S17.9 160 40 160H80V80Z"
fill="none"
stroke="#A259FF"
stroke-width="2"
/>
<circle
class="ol-stroke ol-stroke-4"
cx="120"
cy="120"
r="40"
fill="none"
stroke="#1ABCFE"
stroke-width="2"
/>
<path
class="ol-stroke ol-stroke-5"
d="M40 160C17.9 160 0 177.9 0 200S17.9 240 40 240 80 222.1 80 200V160H40Z"
fill="none"
stroke="#0ACF83"
stroke-width="2"
/>
</g>
<!-- Tagline — individual tspan letters for stagger -->
<text class="outro-tagline" x="960" y="648" text-anchor="middle">
<tspan class="otl">N</tspan>
<tspan class="otl">o</tspan>
<tspan class="otl">t</tspan>
<tspan class="otl">h</tspan>
<tspan class="otl">i</tspan>
<tspan class="otl">n</tspan>
<tspan class="otl">g</tspan>
<tspan class="otl"></tspan>
<tspan class="otl">g</tspan>
<tspan class="otl">r</tspan>
<tspan class="otl">e</tspan>
<tspan class="otl">a</tspan>
<tspan class="otl">t</tspan>
<tspan class="otl"></tspan>
<tspan class="otl">i</tspan>
<tspan class="otl">s</tspan>
<tspan class="otl"></tspan>
<tspan class="otl">m</tspan>
<tspan class="otl">a</tspan>
<tspan class="otl">d</tspan>
<tspan class="otl">e</tspan>
<tspan class="otl"></tspan>
<tspan class="otl">a</tspan>
<tspan class="otl">l</tspan>
<tspan class="otl">o</tspan>
<tspan class="otl">n</tspan>
<tspan class="otl">e</tspan>
<tspan class="otl">.</tspan>
</text>
<!-- URL pill -->
<rect
class="url-border"
x="885"
y="688"
width="150"
height="40"
rx="20"
fill="none"
stroke="#3C3C3C"
stroke-width="1.5"
/>
<rect
class="url-bg"
x="885"
y="688"
width="150"
height="40"
rx="20"
fill="#2C2C2C"
opacity="0"
/>
<text
class="url-text"
x="960"
y="713"
text-anchor="middle"
fill="#868686"
font-size="16"
font-weight="400"
opacity="0"
>
figma.com
</text>
</svg>
</div>
<!-- Fade to black -->
<div class="outro-fade" id="outroFade"></div>
<style>
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&display=swap");
/*
Figma palette:
canvas-bg: #1E1E1E
panel-bg: #2C2C2C
panel-dark: #252525
toolbar: #2C2C2C
divider: rgba(255,255,255,0.1)
text: #E8E8E8
text-muted: #868686
text-dim: #555555
selected-bg: rgba(24,160,251,0.14)
blue: #18A0FB
purple: #A259FF
green: #0ACF83
red: #F24E1E
orange: #FF7262
*/
[data-composition-id="ui-3d-reveal"] {
position: relative;
width: 1920px;
height: 1080px;
overflow: hidden;
font-family: "Inter", sans-serif;
background: #111111;
}
/* ── Background ── */
[data-composition-id="ui-3d-reveal"] .bg-base {
position: absolute;
inset: 0;
background: #111111;
}
[data-composition-id="ui-3d-reveal"] .bg-glow {
position: absolute;
inset: 0;
background:
radial-gradient(
ellipse 900px 600px at 50% 52%,
rgba(24, 160, 251, 0.06) 0%,
transparent 65%
),
radial-gradient(
ellipse 500px 300px at 20% 75%,
rgba(162, 89, 255, 0.04) 0%,
transparent 60%
);
pointer-events: none;
}
/* ── Scene ── */
[data-composition-id="ui-3d-reveal"] .scene {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
perspective: 2800px;
perspective-origin: 50% 50%;
}
[data-composition-id="ui-3d-reveal"] .card-glow {
position: absolute;
width: 1200px;
height: 780px;
border-radius: 24px;
background: radial-gradient(
ellipse at 50% 50%,
rgba(24, 160, 251, 0.18) 0%,
transparent 65%
);
filter: blur(50px);
pointer-events: none;
opacity: 0;
}
[data-composition-id="ui-3d-reveal"] .card-wrapper {
position: relative;
transform-style: preserve-3d;
will-change: transform;
}
/* ── Front face ── */
[data-composition-id="ui-3d-reveal"] .ui-card {
width: 1100px;
height: 680px;
background: #1e1e1e;
border-radius: 12px;
overflow: hidden;
border: 1px solid rgba(255, 255, 255, 0.1);
position: relative;
box-shadow:
inset -1px 0 0 rgba(24, 160, 251, 0.2),
0 40px 120px rgba(0, 0, 0, 0.7);
}
/* ── Depth face ── */
[data-composition-id="ui-3d-reveal"] .depth-right {
position: absolute;
top: 12px;
left: 1100px;
width: 10px;
height: 656px;
transform-origin: 0% 50%;
transform: rotateY(90deg);
background: linear-gradient(
to right,
rgba(80, 160, 255, 0.4) 0%,
rgba(40, 100, 200, 0.2) 40%,
rgba(10, 20, 50, 0.9) 100%
);
border-radius: 3px 2px 2px 3px;
}
/* ═══════════════════════════
TOOLBAR
═══════════════════════════ */
[data-composition-id="ui-3d-reveal"] .fig-toolbar {
height: 48px;
background: #2c2c2c;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
display: flex;
align-items: center;
padding: 0 12px;
gap: 0;
flex-shrink: 0;
position: relative;
z-index: 2;
}
[data-composition-id="ui-3d-reveal"] .tb-left {
display: flex;
align-items: center;
gap: 8px;
flex: 0 0 auto;
}
[data-composition-id="ui-3d-reveal"] .fig-logo {
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 6px;
cursor: default;
flex-shrink: 0;
}
[data-composition-id="ui-3d-reveal"] .fig-logo:hover {
background: rgba(255, 255, 255, 0.08);
}
[data-composition-id="ui-3d-reveal"] .tool-divider {
width: 1px;
height: 20px;
background: rgba(255, 255, 255, 0.12);
flex-shrink: 0;
}
[data-composition-id="ui-3d-reveal"] .tool-group {
display: flex;
align-items: center;
gap: 2px;
}
[data-composition-id="ui-3d-reveal"] .tool-btn {
width: 30px;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 5px;
color: #868686;
cursor: default;
}
[data-composition-id="ui-3d-reveal"] .tool-btn.active {
background: rgba(24, 160, 251, 0.18);
color: #18a0fb;
}
[data-composition-id="ui-3d-reveal"] .tb-center {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
gap: 5px;
font-size: 12px;
color: #e8e8e8;
}
[data-composition-id="ui-3d-reveal"] .file-name {
font-weight: 500;
}
[data-composition-id="ui-3d-reveal"] .file-chevron {
color: #555;
}
[data-composition-id="ui-3d-reveal"] .file-page {
color: #868686;
}
[data-composition-id="ui-3d-reveal"] .file-arrow {
color: #868686;
margin-left: 2px;
}
[data-composition-id="ui-3d-reveal"] .tb-right {
flex: 0 0 auto;
display: flex;
align-items: center;
gap: 8px;
}
[data-composition-id="ui-3d-reveal"] .mode-tabs {
display: flex;
background: rgba(255, 255, 255, 0.06);
border-radius: 6px;
padding: 2px;
gap: 2px;
}
[data-composition-id="ui-3d-reveal"] .mode-tab {
font-size: 11px;
font-weight: 500;
color: #868686;
padding: 4px 10px;
border-radius: 4px;
cursor: default;
}
[data-composition-id="ui-3d-reveal"] .mode-tab.active {
background: #3c3c3c;
color: #e8e8e8;
}
[data-composition-id="ui-3d-reveal"] .share-btn {
display: flex;
align-items: center;
gap: 5px;
background: #18a0fb;
color: white;
font-size: 11px;
font-weight: 600;
padding: 6px 12px;
border-radius: 6px;
cursor: default;
white-space: nowrap;
}
[data-composition-id="ui-3d-reveal"] .avatar-cluster {
display: flex;
align-items: center;
}
[data-composition-id="ui-3d-reveal"] .fig-avatar {
width: 26px;
height: 26px;
border-radius: 50%;
font-size: 9px;
font-weight: 700;
color: white;
display: flex;
align-items: center;
justify-content: center;
border: 2px solid #2c2c2c;
}
[data-composition-id="ui-3d-reveal"] .present-btn {
width: 28px;
height: 28px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 5px;
background: rgba(255, 255, 255, 0.06);
color: #868686;
font-size: 9px;
cursor: default;
}
/* ═══════════════════════════
BODY LAYOUT
═══════════════════════════ */
[data-composition-id="ui-3d-reveal"] .fig-body {
display: flex;
height: 632px; /* 680 - 48 toolbar */
}
/* ═══════════════════════════
LAYERS PANEL
═══════════════════════════ */
[data-composition-id="ui-3d-reveal"] .fig-layers {
width: 210px;
flex-shrink: 0;
background: #2c2c2c;
border-right: 1px solid rgba(255, 255, 255, 0.08);
display: flex;
flex-direction: column;
overflow: hidden;
}
[data-composition-id="ui-3d-reveal"] .panel-tabs {
display: flex;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
flex-shrink: 0;
}
[data-composition-id="ui-3d-reveal"] .ptab {
flex: 1;
text-align: center;
font-size: 11px;
font-weight: 500;
color: #868686;
padding: 9px 0 8px;
cursor: default;
border-bottom: 2px solid transparent;
}
[data-composition-id="ui-3d-reveal"] .ptab.active {
color: #e8e8e8;
border-bottom-color: #18a0fb;
}
[data-composition-id="ui-3d-reveal"] .layer-search {
display: flex;
align-items: center;
gap: 6px;
padding: 7px 10px;
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
color: #555;
flex-shrink: 0;
}
[data-composition-id="ui-3d-reveal"] .search-placeholder {
font-size: 11px;
color: #555;
}
[data-composition-id="ui-3d-reveal"] .layer-list {
flex: 1;
overflow: hidden;
padding: 4px 0;
}
[data-composition-id="ui-3d-reveal"] .layer-item {
display: flex;
align-items: center;
gap: 5px;
padding: 4px 8px;
font-size: 11px;
color: #868686;
cursor: default;
height: 26px;
white-space: nowrap;
}
[data-composition-id="ui-3d-reveal"] .layer-item.page-item {
color: #e8e8e8;
font-weight: 500;
}
[data-composition-id="ui-3d-reveal"] .layer-item.frame-item {
color: #e8e8e8;
font-weight: 500;
padding-left: 6px;
}
[data-composition-id="ui-3d-reveal"] .layer-item.indent-1 {
padding-left: 18px;
}
[data-composition-id="ui-3d-reveal"] .layer-item.indent-2 {
padding-left: 30px;
}
[data-composition-id="ui-3d-reveal"] .layer-item.comp-item {
color: #c9a0ff;
}
[data-composition-id="ui-3d-reveal"] .frame-icon {
color: #6ca9ff !important;
}
[data-composition-id="ui-3d-reveal"] .selected-layer {
background: rgba(24, 160, 251, 0.15);
border-radius: 4px;
color: #18a0fb !important;
}
[data-composition-id="ui-3d-reveal"] .li-collapse {
color: #555;
flex-shrink: 0;
}
[data-composition-id="ui-3d-reveal"] .li-icon {
flex-shrink: 0;
color: #868686;
}
[data-composition-id="ui-3d-reveal"] .comp-icon {
color: #a259ff !important;
}
[data-composition-id="ui-3d-reveal"] .page-bar {
display: flex;
align-items: center;
border-top: 1px solid rgba(255, 255, 255, 0.08);
padding: 0 4px;
height: 34px;
flex-shrink: 0;
gap: 2px;
}
[data-composition-id="ui-3d-reveal"] .pbar-tab {
font-size: 10px;
color: #868686;
padding: 4px 8px;
border-radius: 4px;
white-space: nowrap;
cursor: default;
}
[data-composition-id="ui-3d-reveal"] .pbar-tab.active {
background: rgba(255, 255, 255, 0.08);
color: #e8e8e8;
}
[data-composition-id="ui-3d-reveal"] .pbar-add {
font-size: 14px;
color: #555;
padding: 2px 6px;
cursor: default;
margin-left: auto;
}
/* ═══════════════════════════
CANVAS
═══════════════════════════ */
[data-composition-id="ui-3d-reveal"] .fig-canvas {
flex: 1;
background: #1e1e1e;
position: relative;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
[data-composition-id="ui-3d-reveal"] .canvas-frame-label {
position: absolute;
top: 18px;
left: 50%;
transform: translateX(-50%);
font-size: 10px;
color: #555;
white-space: nowrap;
}
[data-composition-id="ui-3d-reveal"] .artboard {
width: 520px;
height: 360px;
background: #ffffff;
border-radius: 4px;
overflow: hidden;
position: relative;
display: flex;
box-shadow:
0 8px 40px rgba(0, 0, 0, 0.5),
0 0 0 1px rgba(0, 0, 0, 0.08);
margin-top: 20px;
}
/* ── Selection handles ── */
[data-composition-id="ui-3d-reveal"] .selection-ring {
position: absolute;
width: 322px;
height: 110px;
border: 1px solid #18a0fb;
pointer-events: none;
/* positioned over the create card in main content */
top: calc(50% - 40px);
left: calc(50% + 86px);
transform: translate(-50%, -50%);
}
[data-composition-id="ui-3d-reveal"] .sel-handle {
position: absolute;
width: 7px;
height: 7px;
background: white;
border: 1.5px solid #18a0fb;
border-radius: 1px;
}
[data-composition-id="ui-3d-reveal"] .sel-handle.tl {
top: -4px;
left: -4px;
}
[data-composition-id="ui-3d-reveal"] .sel-handle.tr {
top: -4px;
right: -4px;
}
[data-composition-id="ui-3d-reveal"] .sel-handle.bl {
bottom: -4px;
left: -4px;
}
[data-composition-id="ui-3d-reveal"] .sel-handle.br {
bottom: -4px;
right: -4px;
}
[data-composition-id="ui-3d-reveal"] .sel-label {
position: absolute;
top: -22px;
left: -1px;
font-size: 9px;
color: #18a0fb;
white-space: nowrap;
font-family: "Inter", sans-serif;
font-weight: 500;
}
/* ═══════════════════════════
PROPERTIES PANEL
═══════════════════════════ */
[data-composition-id="ui-3d-reveal"] .fig-props {
width: 240px;
flex-shrink: 0;
background: #2c2c2c;
border-left: 1px solid rgba(255, 255, 255, 0.08);
display: flex;
flex-direction: column;
overflow: hidden;
}
[data-composition-id="ui-3d-reveal"] .prop-align {
display: flex;
align-items: center;
gap: 3px;
padding: 8px 12px;
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
flex-shrink: 0;
}
[data-composition-id="ui-3d-reveal"] .align-btn {
width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 4px;
color: #868686;
font-size: 14px;
cursor: default;
}
[data-composition-id="ui-3d-reveal"] .active-align {
background: rgba(255, 255, 255, 0.08);
color: #e8e8e8;
}
[data-composition-id="ui-3d-reveal"] .align-divider {
width: 1px;
height: 16px;
background: rgba(255, 255, 255, 0.1);
margin: 0 2px;
}
[data-composition-id="ui-3d-reveal"] .prop-section {
padding: 10px 12px;
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
flex-shrink: 0;
}
[data-composition-id="ui-3d-reveal"] .prop-section-head {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 8px;
}
[data-composition-id="ui-3d-reveal"] .prop-section-label {
font-size: 11px;
font-weight: 500;
color: #e8e8e8;
}
[data-composition-id="ui-3d-reveal"] .prop-section-icon {
font-size: 14px;
color: #555;
cursor: default;
}
[data-composition-id="ui-3d-reveal"] .prop-row-2 {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 6px;
margin-bottom: 5px;
}
[data-composition-id="ui-3d-reveal"] .prop-field {
display: flex;
align-items: center;
gap: 5px;
background: rgba(255, 255, 255, 0.06);
border-radius: 4px;
padding: 5px 7px;
}
[data-composition-id="ui-3d-reveal"] .prop-pre {
font-size: 10px;
color: #555;
flex-shrink: 0;
font-family: "Inter", sans-serif;
}
[data-composition-id="ui-3d-reveal"] .prop-val {
font-size: 11px;
color: #e8e8e8;
font-family: "Inter", sans-serif;
}
[data-composition-id="ui-3d-reveal"] .fill-row {
display: flex;
align-items: center;
gap: 8px;
}
[data-composition-id="ui-3d-reveal"] .fill-preview {
width: 18px;
height: 18px;
border-radius: 3px;
border: 1px solid rgba(255, 255, 255, 0.15);
flex-shrink: 0;
}
[data-composition-id="ui-3d-reveal"] .fill-hex {
font-size: 11px;
color: #e8e8e8;
font-family: "Inter", sans-serif;
flex: 1;
}
[data-composition-id="ui-3d-reveal"] .fill-pct {
font-size: 11px;
color: #868686;
font-family: "Inter", sans-serif;
}
[data-composition-id="ui-3d-reveal"] .prop-empty {
font-size: 11px;
color: #555;
font-style: italic;
}
[data-composition-id="ui-3d-reveal"] .effect-row {
display: flex;
align-items: center;
gap: 7px;
}
[data-composition-id="ui-3d-reveal"] .effect-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.2);
flex-shrink: 0;
}
[data-composition-id="ui-3d-reveal"] .effect-name {
font-size: 11px;
color: #868686;
}
/* ═══════════════════════════
HEYGEN APP UI — LIGHT MODE
═══════════════════════════ */
/* ── Icon nav (56px) ── */
[data-composition-id="ui-3d-reveal"] .hg-icnav {
width: 56px;
flex-shrink: 0;
height: 360px;
background: #ffffff;
border-right: 1px solid #ebebeb;
display: flex;
flex-direction: column;
align-items: center;
padding-top: 0;
position: relative;
overflow: hidden;
}
[data-composition-id="ui-3d-reveal"] .hg-iclogo {
width: 56px;
height: 50px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
border-bottom: 1px solid #f0f0f0;
}
[data-composition-id="ui-3d-reveal"] .hg-icitem {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
gap: 3px;
padding: 8px 0;
color: #9ca3af;
cursor: default;
flex-shrink: 0;
}
[data-composition-id="ui-3d-reveal"] .hg-icitem span {
font-size: 7px;
color: inherit;
font-family: "Inter", sans-serif;
text-align: center;
line-height: 1;
}
[data-composition-id="ui-3d-reveal"] .hg-icactive {
color: #10b8a9 !important;
}
[data-composition-id="ui-3d-reveal"] .hg-icactive span {
color: #10b8a9 !important;
}
[data-composition-id="ui-3d-reveal"] .hg-icbg {
width: 34px;
height: 34px;
border-radius: 9px;
background: #10b8a9;
display: flex;
align-items: center;
justify-content: center;
}
[data-composition-id="ui-3d-reveal"] .hg-icuser {
position: absolute;
bottom: 10px;
width: 26px;
height: 26px;
border-radius: 50%;
background: #1a1a1a;
font-size: 9px;
font-weight: 700;
color: white;
display: flex;
align-items: center;
justify-content: center;
font-family: "Inter", sans-serif;
}
/* ── History panel (120px) ── */
[data-composition-id="ui-3d-reveal"] .hg-histpanel {
width: 120px;
flex-shrink: 0;
height: 360px;
background: #f7f7f8;
border-right: 1px solid #ebebeb;
display: flex;
flex-direction: column;
overflow: hidden;
}
[data-composition-id="ui-3d-reveal"] .hg-histhead {
height: 44px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 10px;
font-size: 10px;
font-weight: 600;
color: #111;
border-bottom: 1px solid #efefef;
font-family: "Inter", sans-serif;
}
[data-composition-id="ui-3d-reveal"] .hg-newitem {
display: flex;
align-items: center;
gap: 6px;
padding: 7px 8px;
margin: 6px 6px 0;
background: #e8f0fe;
border-radius: 7px;
font-size: 9.5px;
font-weight: 500;
color: #1a1a1a;
flex-shrink: 0;
font-family: "Inter", sans-serif;
}
[data-composition-id="ui-3d-reveal"] .hg-histcat {
font-size: 7px;
font-weight: 600;
color: #b0b0b0;
letter-spacing: 0.06em;
padding: 9px 10px 3px;
flex-shrink: 0;
font-family: "Inter", sans-serif;
}
[data-composition-id="ui-3d-reveal"] .hg-histrow {
padding: 3.5px 10px;
font-size: 9px;
color: #444;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
flex-shrink: 0;
font-family: "Inter", sans-serif;
}
/* ── Main content (359px) ── */
[data-composition-id="ui-3d-reveal"] .hg-maincnt {
flex: 1;
height: 360px;
background: #ffffff;
position: relative;
display: flex;
flex-direction: column;
padding: 10px 14px 10px;
overflow: hidden;
}
[data-composition-id="ui-3d-reveal"] .hg-toprighticons {
position: absolute;
top: 9px;
right: 10px;
display: flex;
align-items: center;
gap: 6px;
}
[data-composition-id="ui-3d-reveal"] .hg-ticon {
width: 26px;
height: 26px;
border-radius: 50%;
border: 1px solid #e5e7eb;
display: flex;
align-items: center;
justify-content: center;
color: #6b7280;
cursor: default;
position: relative;
}
[data-composition-id="ui-3d-reveal"] .hg-notifico {
position: relative;
}
[data-composition-id="ui-3d-reveal"] .hg-notifbadge {
position: absolute;
top: -5px;
right: -7px;
background: #ef4444;
color: white;
font-size: 5.5px;
font-weight: 700;
padding: 1.5px 3px;
border-radius: 8px;
font-family: "Inter", sans-serif;
border: 1.5px solid white;
}
[data-composition-id="ui-3d-reveal"] .hg-herotitle {
font-size: 15px;
font-weight: 800;
color: #111111;
line-height: 1.22;
letter-spacing: -0.04em;
margin-bottom: 12px;
font-family: "Inter", sans-serif;
padding-right: 84px;
margin-top: 2px;
}
/* ── Create card ── */
[data-composition-id="ui-3d-reveal"] .hg-createcard {
border: 2px solid #7dd4cf;
border-radius: 12px;
overflow: hidden;
background: #ffffff;
flex-shrink: 0;
}
[data-composition-id="ui-3d-reveal"] .hg-selrow {
display: flex;
align-items: stretch;
border-bottom: 1px solid #f3f4f6;
}
[data-composition-id="ui-3d-reveal"] .hg-sel {
flex: 1;
padding: 8px 10px;
display: flex;
flex-direction: column;
gap: 5px;
}
[data-composition-id="ui-3d-reveal"] .hg-seldiv {
width: 1px;
background: #f0f0f0;
flex-shrink: 0;
margin: 8px 0;
}
[data-composition-id="ui-3d-reveal"] .hg-settico {
display: flex;
align-items: center;
justify-content: center;
padding: 0 10px;
color: #9ca3af;
flex-shrink: 0;
border-left: 1px solid #f0f0f0;
}
[data-composition-id="ui-3d-reveal"] .hg-sellbl {
font-size: 8px;
color: #9ca3af;
font-weight: 500;
font-family: "Inter", sans-serif;
}
[data-composition-id="ui-3d-reveal"] .hg-selbox {
display: flex;
align-items: center;
gap: 6px;
background: #f4f4f5;
border-radius: 7px;
padding: 5px 7px;
}
[data-composition-id="ui-3d-reveal"] .hg-avphoto {
width: 30px;
height: 26px;
border-radius: 5px;
flex-shrink: 0;
background: linear-gradient(170deg, #7a4b2a 0%, #b07540 45%, #d4a070 100%);
}
[data-composition-id="ui-3d-reveal"] .hg-seltxt {
font-size: 9px;
font-weight: 500;
color: #1a1a1a;
font-family: "Inter", sans-serif;
}
[data-composition-id="ui-3d-reveal"] .hg-voicebars {
display: flex;
align-items: center;
gap: 2px;
width: 22px;
justify-content: center;
}
[data-composition-id="ui-3d-reveal"] .hg-vbar {
width: 2.5px;
background: #c4c4c4;
border-radius: 1.5px;
}
[data-composition-id="ui-3d-reveal"] .hg-styleico {
width: 22px;
height: 22px;
background: #e8e8e8;
border-radius: 5px;
display: flex;
align-items: center;
justify-content: center;
color: #888;
flex-shrink: 0;
}
[data-composition-id="ui-3d-reveal"] .hg-cinput {
padding: 10px 12px 8px;
font-size: 10px;
color: #c4c4c4;
font-family: "Inter", sans-serif;
}
[data-composition-id="ui-3d-reveal"] .hg-cbottom {
display: flex;
align-items: center;
justify-content: space-between;
padding: 6px 10px;
border-top: 1px solid #f3f4f6;
}
[data-composition-id="ui-3d-reveal"] .hg-cbleft {
display: flex;
align-items: center;
gap: 6px;
}
[data-composition-id="ui-3d-reveal"] .hg-cbtn {
width: 24px;
height: 24px;
border: 1px solid #e4e4e7;
border-radius: 6px;
display: flex;
align-items: center;
justify-content: center;
color: #6b7280;
cursor: default;
}
[data-composition-id="ui-3d-reveal"] .hg-cbright {
display: flex;
align-items: center;
gap: 5px;
}
[data-composition-id="ui-3d-reveal"] .hg-genbtn {
display: flex;
align-items: center;
gap: 4px;
background: #f4f4f5;
border: 1px solid #e4e4e7;
border-radius: 8px;
padding: 5px 9px;
font-size: 9px;
font-weight: 500;
color: #374151;
font-family: "Inter", sans-serif;
cursor: default;
}
[data-composition-id="ui-3d-reveal"] .hg-submitbtn {
width: 26px;
height: 26px;
border-radius: 50%;
background: #111111;
display: flex;
align-items: center;
justify-content: center;
cursor: default;
}
/* ── Styles from community ── */
[data-composition-id="ui-3d-reveal"] .hg-stylessec {
margin-top: 10px;
flex: 1;
overflow: hidden;
display: flex;
flex-direction: column;
}
[data-composition-id="ui-3d-reveal"] .hg-stitle {
font-size: 10.5px;
font-weight: 600;
color: #111;
margin-bottom: 7px;
flex-shrink: 0;
font-family: "Inter", sans-serif;
}
[data-composition-id="ui-3d-reveal"] .hg-spills {
display: flex;
gap: 5px;
margin-bottom: 8px;
flex-shrink: 0;
overflow: hidden;
}
[data-composition-id="ui-3d-reveal"] .hg-spill {
font-size: 8.5px;
font-weight: 500;
white-space: nowrap;
padding: 4px 9px;
border: 1.5px solid #e0e0e3;
border-radius: 20px;
color: #555;
font-family: "Inter", sans-serif;
cursor: default;
}
[data-composition-id="ui-3d-reveal"] .hg-spactive {
border-color: #10b8a9;
color: #10b8a9;
}
[data-composition-id="ui-3d-reveal"] .hg-scards {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 6px;
flex: 1;
overflow: hidden;
}
[data-composition-id="ui-3d-reveal"] .hg-sc {
border-radius: 6px;
overflow: hidden;
display: flex;
align-items: flex-end;
padding: 5px;
position: relative;
}
[data-composition-id="ui-3d-reveal"] .hg-sclbl {
font-size: 6px;
font-weight: 700;
color: rgba(255, 255, 255, 0.85);
font-family: "Inter", sans-serif;
letter-spacing: 0.04em;
line-height: 1.3;
text-transform: uppercase;
}
/* ══ INTRO LAYER ══ */
[data-composition-id="ui-3d-reveal"] .intro-layer {
position: absolute;
inset: 0;
z-index: 10;
pointer-events: none;
}
[data-composition-id="ui-3d-reveal"] .intro-svg {
position: absolute;
top: 0;
left: 0;
width: 1920px;
height: 1080px;
}
[data-composition-id="ui-3d-reveal"] .il-stroke {
stroke-linecap: round;
stroke-linejoin: round;
}
/* ══ OUTRO LAYER ══ */
[data-composition-id="ui-3d-reveal"] .outro-layer {
position: absolute;
inset: 0;
z-index: 10;
pointer-events: none;
opacity: 0;
}
[data-composition-id="ui-3d-reveal"] .outro-svg {
position: absolute;
top: 0;
left: 0;
width: 1920px;
height: 1080px;
}
[data-composition-id="ui-3d-reveal"] .ol-stroke {
stroke-linecap: round;
stroke-linejoin: round;
}
[data-composition-id="ui-3d-reveal"] .outro-tagline {
font-family: "Inter", sans-serif;
font-size: 42px;
font-weight: 500;
fill: #fff;
letter-spacing: -0.5px;
}
[data-composition-id="ui-3d-reveal"] .otl {
opacity: 0;
}
[data-composition-id="ui-3d-reveal"] .url-border {
stroke-dasharray: 500;
stroke-dashoffset: 500;
}
/* ══ OUTRO FADE OVERLAY ══ */
[data-composition-id="ui-3d-reveal"] .outro-fade {
position: absolute;
inset: 0;
background: #000;
opacity: 0;
z-index: 20;
pointer-events: none;
}
</style>
<script>
(function () {
var S = '[data-composition-id="ui-3d-reveal"]';
var tl = gsap.timeline({ paused: true });
var wrapper = document.querySelector(S + " .card-wrapper");
var scene = document.querySelector(S + " .scene");
var cardGlow = document.querySelector(S + " .card-glow");
// ── Calculate intro stroke lengths ──
document.querySelectorAll(S + " .il-stroke").forEach(function (el) {
var len =
el.tagName === "circle"
? 2 * Math.PI * parseFloat(el.getAttribute("r"))
: el.getTotalLength();
el.style.strokeDasharray = len;
el.style.strokeDashoffset = len;
});
// ── Calculate outro stroke lengths ──
document.querySelectorAll(S + " .ol-stroke").forEach(function (el) {
var len =
el.tagName === "circle"
? 2 * Math.PI * parseFloat(el.getAttribute("r"))
: el.getTotalLength();
el.style.strokeDasharray = len;
el.style.strokeDashoffset = len;
});
// ─────────────────────────────────────────────────────
// INITIAL STATE
// ─────────────────────────────────────────────────────
gsap.set(wrapper, { opacity: 0, scale: 0.74, rotationY: 0, y: 24 });
gsap.set(
[
S + " .fig-toolbar",
S + " .fig-layers",
S + " .fig-props",
S + " .fig-canvas",
S + " .layer-item",
S + " .selection-ring",
],
{ opacity: 0 },
);
gsap.set(S + " .fig-toolbar", { y: -10 });
gsap.set(S + " .fig-layers", { x: -16 });
gsap.set(S + " .fig-props", { x: 16 });
gsap.set(S + " .layer-item", { x: -8 });
gsap.set(S + " .artboard", { scale: 0.94, opacity: 0 });
// ═════════════════════════════════════════════════════
// PHASE 0 — LOGO INTRO (0 – 1.35s)
// Stroke draw cascade → color fill flash → scale to 0
// ═════════════════════════════════════════════════════
tl.to(
S + " .il-stroke-1",
{ strokeDashoffset: 0, duration: 0.4, ease: "power1.inOut" },
0.0,
);
tl.to(
S + " .il-stroke-2",
{ strokeDashoffset: 0, duration: 0.4, ease: "power1.inOut" },
0.06,
);
tl.to(
S + " .il-stroke-3",
{ strokeDashoffset: 0, duration: 0.4, ease: "power1.inOut" },
0.12,
);
tl.to(
S + " .il-stroke-4",
{ strokeDashoffset: 0, duration: 0.4, ease: "power1.inOut" },
0.18,
);
tl.to(
S + " .il-stroke-5",
{ strokeDashoffset: 0, duration: 0.4, ease: "power1.inOut" },
0.24,
);
tl.to(S + " .il-fill-1", { opacity: 1, duration: 0.08 }, 0.5);
tl.to(S + " .il-fill-2", { opacity: 1, duration: 0.08 }, 0.54);
tl.to(S + " .il-fill-3", { opacity: 1, duration: 0.08 }, 0.58);
tl.to(S + " .il-fill-4", { opacity: 1, duration: 0.08 }, 0.62);
tl.to(S + " .il-fill-5", { opacity: 1, duration: 0.08 }, 0.66);
tl.to(S + " .il-stroke", { opacity: 0.3, duration: 0.15 }, 0.6);
// Scale the logo down to nothing
tl.to(S + " .il-stroke", { opacity: 0, duration: 0.2 }, 1.0);
tl.to(
S + " .intro-logo",
{
scale: 0,
transformOrigin: "95px 142.5px",
duration: 0.35,
ease: "power2.in",
},
1.0,
);
// ═════════════════════════════════════════════════════
// PHASE 1 — FLAT REVEAL (1.5 – 3.4s)
// ═════════════════════════════════════════════════════
var T = 1.5;
tl.to(
wrapper,
{
opacity: 1,
scale: 0.79,
y: 0,
duration: 0.55,
ease: "expo.out",
},
T + 0.0,
);
tl.to(
cardGlow,
{
opacity: 0.5,
duration: 0.8,
ease: "power2.out",
},
T + 0.05,
);
tl.to(
S + " .fig-toolbar",
{
opacity: 1,
y: 0,
duration: 0.4,
ease: "power2.out",
},
T + 0.23,
);
tl.to(
S + " .fig-layers",
{
opacity: 1,
x: 0,
duration: 0.45,
ease: "expo.out",
},
T + 0.35,
);
tl.to(
S + " .fig-props",
{
opacity: 1,
x: 0,
duration: 0.45,
ease: "expo.out",
},
T + 0.37,
);
tl.to(
S + " .fig-canvas",
{
opacity: 1,
duration: 0.4,
ease: "power2.out",
},
T + 0.45,
);
tl.to(
S + " .artboard",
{
opacity: 1,
scale: 1,
duration: 0.55,
ease: "back.out(1.4)",
},
T + 0.5,
);
tl.to(
S + " .layer-item",
{
opacity: 1,
x: 0,
duration: 0.35,
stagger: { each: 0.045, ease: "power1.in" },
ease: "power2.out",
},
T + 0.57,
);
tl.to(
S + " .selection-ring",
{
opacity: 1,
duration: 0.25,
ease: "power2.out",
},
T + 1.25,
);
// ═════════════════════════════════════════════════════
// PHASE 2 — CAMERA PUSH (3.5 – 4.8s)
// Bigger zoom: 0.79 → 1.15 so the UI fills the frame
// ═════════════════════════════════════════════════════
tl.to(
wrapper,
{
scale: 1.15,
duration: 1.3,
ease: "power3.inOut",
},
3.5,
);
tl.to(
cardGlow,
{
opacity: 0.85,
scale: 1.25,
duration: 1.2,
ease: "power2.inOut",
},
3.5,
);
// ═════════════════════════════════════════════════════
// PHASE 3 — 3D TILT (4.2 – 5.55s)
// Steeper angle (-34°) for more dramatic depth reveal
// ═════════════════════════════════════════════════════
tl.to(
wrapper,
{
rotationY: -34,
duration: 1.35,
ease: "expo.out",
},
4.2,
);
tl.to(
wrapper,
{
y: -16,
duration: 1.1,
ease: "power2.out",
},
4.3,
);
// ═════════════════════════════════════════════════════
// PHASE 4 — 3D HOLD (5.55 – 7.3s)
// ═════════════════════════════════════════════════════
tl.to(
wrapper,
{
y: -8,
rotationY: -31,
duration: 0.9,
ease: "sine.inOut",
},
5.55,
);
tl.to(
wrapper,
{
y: -20,
rotationY: -35,
duration: 0.9,
ease: "sine.inOut",
},
6.45,
);
tl.to(
cardGlow,
{
opacity: 0.7,
duration: 0.9,
ease: "sine.inOut",
yoyo: true,
repeat: 1,
},
5.55,
);
// ═════════════════════════════════════════════════════
// SLIDE OFF — 3D depth fly-away (7.3 – 7.85s)
// Scene x exits left. Wrapper z shrinks into distance.
// Deeper z (-4000) + steeper rotation (-55°) = very
// dramatic 3D exit — card turns away and vanishes.
// ═════════════════════════════════════════════════════
tl.to(
scene,
{
x: -2200,
duration: 0.55,
ease: "power4.in",
},
7.3,
);
tl.to(
wrapper,
{
z: -7500,
rotationY: -65,
duration: 0.55,
ease: "power4.in",
},
7.3,
);
tl.to(
cardGlow,
{
opacity: 0,
duration: 0.3,
ease: "power3.in",
},
7.3,
);
// ═════════════════════════════════════════════════════
// OUTRO — LOGO BUILD + TAGLINE + PILL (7.9 – 13s)
// ═════════════════════════════════════════════════════
var O = 7.9;
tl.set(S + " .outro-layer", { opacity: 1 }, O);
// Stroke draw cascade
tl.to(
S + " .ol-stroke-1",
{ strokeDashoffset: 0, duration: 0.8, ease: "power1.inOut" },
O + 0.0,
);
tl.to(
S + " .ol-stroke-2",
{ strokeDashoffset: 0, duration: 0.8, ease: "power1.inOut" },
O + 0.15,
);
tl.to(
S + " .ol-stroke-3",
{ strokeDashoffset: 0, duration: 0.8, ease: "power1.inOut" },
O + 0.3,
);
tl.to(
S + " .ol-stroke-4",
{ strokeDashoffset: 0, duration: 0.8, ease: "power1.inOut" },
O + 0.45,
);
tl.to(
S + " .ol-stroke-5",
{ strokeDashoffset: 0, duration: 0.8, ease: "power1.inOut" },
O + 0.6,
);
// Color fill cascade
tl.to(S + " .ol-fill-1", { opacity: 1, duration: 0.15, ease: "power1.out" }, O + 1.4);
tl.to(S + " .ol-fill-2", { opacity: 1, duration: 0.15, ease: "power1.out" }, O + 1.55);
tl.to(S + " .ol-fill-3", { opacity: 1, duration: 0.15, ease: "power1.out" }, O + 1.7);
tl.to(S + " .ol-fill-4", { opacity: 1, duration: 0.15, ease: "power1.out" }, O + 1.85);
tl.to(S + " .ol-fill-5", { opacity: 1, duration: 0.15, ease: "power1.out" }, O + 2.0);
tl.to(S + " .ol-stroke", { opacity: 0.3, duration: 0.4, ease: "none" }, O + 1.8);
// Subtle scale settle
tl.fromTo(
S + " .outro-logo",
{ scale: 1, transformOrigin: "80px 120px" },
{ scale: 1.04, duration: 0.2, ease: "power2.out" },
O + 2.3,
);
tl.to(
S + " .outro-logo",
{
scale: 1,
transformOrigin: "80px 120px",
duration: 0.2,
ease: "power2.inOut",
},
O + 2.5,
);
// Tagline letter stagger
var letters = document.querySelectorAll(S + " .otl");
for (var k = 0; k < letters.length; k++) {
tl.fromTo(
letters[k],
{ opacity: 0, y: 8 },
{ opacity: 1, y: 0, duration: 0.12, ease: "power2.out" },
O + 2.8 + k * 0.025,
);
}
// URL pill: stroke draw → fill → text
tl.to(
S + " .url-border",
{
strokeDashoffset: 0,
duration: 0.35,
ease: "power1.inOut",
},
O + 3.8,
);
tl.to(S + " .url-bg", { opacity: 1, duration: 0.15 }, O + 4.15);
tl.to(S + " .url-text", { opacity: 1, duration: 0.2 }, O + 4.2);
// Fade to black
tl.to(
S + " .outro-fade",
{
opacity: 1,
duration: 0.6,
ease: "none",
},
O + 4.8,
);
window.__timelines = window.__timelines || {};
window.__timelines["ui-3d-reveal"] = tl;
})();
</script>
</div>
</body>
</html>
Usage
After installing, add the block to your host composition:<div data-composition-id="ui-3d-reveal" data-composition-src="compositions/ui-3d-reveal.html" data-start="0" data-duration="13" data-track-index="1" data-width="1920" data-height="1080"></div>
showcase 3d reveal.