mirror of
https://github.com/heygen-com/hyperframes.git
synced 2026-09-10 22:20:14 +00:00
Miguel ÁngelandMiguel Angel Simon Sierra
1ae2067b8d
* feat(catalog): put the variables panel back, on payloads The panel drove its preview by loading an .html from docs/public, a type the host does not publish, so it showed an empty frame in production and was parked when the catalog was re-landed. It now mounts the same JSON payload the plain player uses and re-mounts it as values change, injecting them as window.__hfVariables into the composition head before any of its scripts run, which is where the runtime reads overrides from. Doing it in the markup rather than after load is what stops the composition initialising with the wrong values first. 172 items with variables get the panel back; the playhead carries across a change so a tweak mid-shot does not jump back to frame zero. * fix(docs): drop the unused url form and the needless escapes * fix(docs): the panel cannot reference a binding beside the export * feat(catalog): make importing an SVG the obvious move A reader arrives at this control with a shape, not with path data, and the panel asked for the coordinates first. Import is now the primary action in a drop target you can see is a drop target, and the raw path sits behind a disclosure for anyone who wants it. * feat(cli): let a fruitless catalog search report the gap An agent that searches by meaning and finds nothing worth installing knows something we do not: the name of a move the catalog is missing. There was no way to tell us, so that knowledge was lost at the end of every run. hyperframes feedback --search-miss "<query>" --wanted "<the move>" records it. It carries no rating, so it never lands in the rating metric, and it is a separate deliberate command rather than something catalog --query does on its own: plain search still sends nothing, which is what the CLI promises. --rating stops being required at the arg level, since a miss has no rating to give. The check moved into the run body, where an absent one is now handled rather than crashing on undefined. * feat(cli): carry tuned variable values into the install snippet Someone who tunes a block on its catalog page had no way to keep those values: the install command was the same one everybody gets, and the tuning stayed on the page. hyperframes add <item> --vars '<json>' now prints a mount element carrying data-variable-values, so the values land where the block is used. They ride on the host rather than being written into the installed file. That keeps the composition on disk byte-identical to the registry's, so a later reinstall can still tell an edit from an update, and it lets two mounts of the same block carry different values. * fix(catalog): serve the item's own directory so runtime paths resolve Some compositions assemble their asset URLs at run time — "compositions/components/" + texture + ".png" for the texture masks, a font the compiler pulled into _remote_media — and no scan of the markup can see a string that does not exist until a script concatenates it. Those items either rendered black or were dropped to a video that had never been uploaded. Each item that needs it now has its prepared directory published, and its payload carries a <base> pointing at it, so any relative path the composition invents resolves. caption-texture renders its masks again, and variable-font-flex has a preview at all for the first time: its MP4 and poster are both 403. Both layouts are published, because which one a composition asks for differs per item, and a directory only earns that if it is under 2 MB. The 12 MB texture sheet keeps the recorded video it already had. * fix(catalog): let the variables panel actually drive the composition Every control on the panel was inert. The values reached the composition and nothing repainted, because the payload had already been compiled: compiling inlines a mounted component and resolves its variables into the markup and CSS, so by the time a reader turns a knob there is nothing left to change. An item that declares variables now ships uncompiled, keeping the mount the runtime loads at run time, which is the only state where data-variable-values still means anything. The component travels inline as a data URI rather than a sibling file, because .html is the one type the docs host will not publish. The demo's own pinned values come off, so the reader's choices reach the mount instead of losing to the values the demo picked to show itself off. Measured on the rendered frame rather than the DOM: green rgb(98,207,144), blue rgb(6,6,199), violet rgb(177,147,230), and back to green. docs/public/catalog drops from 48 MB to 35 MB along the way, since an uncompiled payload carries far less than an inlined one. * feat(catalog): keep variable changes in the url A reader who tuned a piece lost it on reload, and had nothing to send anyone. The values now live in the query string, scoped by composition id so two links never read each other,and only the ones that differ from the defaults are written, so changing one knob gives a short URL rather than every variable spelled out. replaceState rather than pushState: dragging a slider should not leave a trail of history entries. An unreadable value is ignored rather than thrown, so a truncated or hand-edited link opens the piece at its defaults. * fix(catalog): only rewrite the url when a value actually changed * refactor(catalog): memoise the declared defaults on their content * feat(catalog): offer an install command carrying the tuned values The Install block is generated before anyone touches a knob, so it can only ever print the plain command. Someone who spent a minute tuning a piece copied it and got the defaults back. The panel now carries its own command in the Snippet tab, with --vars holding exactly the values that differ. An untouched piece still offers the same short command, so nothing gets noisier for the common case. * fix(catalog): a piece with nothing to render is a skip, not a failure caption-blend-difference is a stylesheet and a paragraph of prose — a class you add to your own captions, with no standalone scene to show. The generator treated that as a build failure, so every run ended by reporting something broken when nothing was. It now reports the shape it is and keeps its recorded video, which is the only honest preview such an item has. A genuine render failure still throws. * fix(catalog): restore variables from the url on a cold load A shared link opened at the defaults. The first render happens on the server, where there is no window to read the query string from, and React then hydrates against that markup and never revisits it — so the values only appeared once you touched a control. The URL is read again after mount, which is the first moment it exists. The value is also escaped once now rather than twice: URLSearchParams already decodes on the way out, and decoding a second time turned an SVG path full of percent-escapes into something that no longer parsed, besides doubling the length of every link. * fix(catalog): mount the preview with the values a link carried The frame was built from the declared defaults and the shared values were posted to it afterwards, which is too late for anything the composition reads once at init: a path arrived after the mark had already been drawn from the default one, so a link looked right in the panel and wrong on screen. * feat(catalog): the install command follows the values you tuned Copying the Install line gave the plain command back, because that block is generated before anyone touches a knob and had no way to know what changed. The tuned command only existed in the panel Snippet tab, which is not where anyone looks for it. The line now reads the same query string the panel writes, so the two agree without either component knowing the other exists, and a shared link carries the right command too. replaceState fires no event, so the panel announces its own writes. * fix(catalog): send a text variable to the preview once it is finished Every other control in the explorer reports a whole value on every event: a slider at any position is a position, a swatch is a colour. A text field is not. Typing v3 into a badge posted v first, so the preview remounted and rendered a composition built from half a word. The post now waits while a text field has focus and goes out when the edit is committed, with Enter or by clicking away. The field itself is unchanged and still tracks every keystroke. --------- Co-authored-by: Miguel Angel Simon Sierra <miguelangelsi07@gmail.com>
2811 lines
100 KiB
Plaintext
2811 lines
100 KiB
Plaintext
---
|
||
title: "3D UI Reveal"
|
||
description: "Perspective 3D reveal animation for UI elements"
|
||
---
|
||
|
||
import { InstallCommand } from "/snippets/install-command.jsx";
|
||
|
||
<iframe
|
||
className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
|
||
title="ui-3d-reveal preview"
|
||
loading="lazy"
|
||
srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@0.7/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/ui-3d-reveal.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/ui-3d-reveal.png");document.body.appendChild(p)});<\/script></body></html>`}
|
||
/>
|
||
|
||
## Install
|
||
|
||
<InstallCommand command="npx hyperframes add ui-3d-reveal" item="ui-3d-reveal" />
|
||
|
||
That writes one file: `compositions/ui-3d-reveal.html`.
|
||
|
||
## Source
|
||
|
||
<Accordion title={`ui-3d-reveal.html`}>
|
||
|
||
```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,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"
|
||
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>
|
||
```
|
||
|
||
</Accordion>
|
||
|
||
## Usage
|
||
|
||
After installing, add the block to your host composition:
|
||
|
||
```html
|
||
<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>
|
||
```
|
||
|
||
{/* hf:generated-footer */}
|
||
|
||
Tagged `showcase` `3d` `reveal`.
|
||
|
||
## Related topics
|
||
|
||
- [Browse the complete Catalog](/catalog)
|
||
- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
|
||
- [Build a richer composition](/go-further)
|