wehub-resource-sync
85453da49f
regression / regression-shards (style-16-prod style-9-prod style-17-prod iframe-render-compat variables-prod mp4-h265-sdr, shard-4) (push) Has been cancelled
regression / regression-shards (style-4-prod style-11-prod style-2-prod animejs-adapter typegpu-adapter parallel-capture-regression, shard-5) (push) Has been cancelled
regression / regression-shards (style-7-prod style-8-prod style-10-prod css-spinner-render-compat webm-transparency mp4-h264-sdr webm-vp9, shard-3) (push) Has been cancelled
regression / regression-shards (sub-composition-video style-18-prod raf-ball-render-compat font-variant-numeric sub-comp-t0 sub-comp-id-selector, shard-7) (push) Has been cancelled
Windows render verification / Detect changes (push) Has been cancelled
Windows render verification / Preflight (lint + format) (push) Has been cancelled
Windows render verification / Render on windows-latest (push) Has been cancelled
Windows render verification / Tests on windows-latest (push) Has been cancelled
CI / Detect changes (push) Has been cancelled
CI / Build (push) Has been cancelled
CI / Lint (push) Has been cancelled
CI / Fallow audit (push) Has been cancelled
CI / Format (push) Has been cancelled
CI / Typecheck (push) Has been cancelled
CI / Test (push) Has been cancelled
CI / Producer: integration tests (push) Has been cancelled
CI / Producer: unit tests (push) Has been cancelled
CI / File size check (push) Has been cancelled
CI / Test: skills (push) Has been cancelled
CI / Skills: manifest in sync (push) Has been cancelled
CI / CLI: npx shim (macos-latest) (push) Has been cancelled
CI / CLI: npx shim (ubuntu-latest) (push) Has been cancelled
CI / CLI: npx shim (windows-latest) (push) Has been cancelled
CI / SDK: unit + contract + smoke (push) Has been cancelled
CI / Test: runtime contract (push) Has been cancelled
CI / Studio: load smoke (push) Has been cancelled
CI / Smoke: global install (push) Has been cancelled
CI / CLI smoke (required) (push) Has been cancelled
CI / Semantic PR title (push) Has been cancelled
Player perf / Detect changes (push) Has been cancelled
Player perf / Preflight (lint + format) (push) Has been cancelled
Player perf / player-perf (push) Has been cancelled
Player perf / Perf: drift (push) Has been cancelled
Player perf / Perf: fps (push) Has been cancelled
Player perf / Perf: parity (push) Has been cancelled
Player perf / Perf: scrub (push) Has been cancelled
Player perf / Perf: load (push) Has been cancelled
preview-regression / Detect changes (push) Has been cancelled
preview-regression / Preflight (lint + format) (push) Has been cancelled
preview-regression / Preview parity (push) Has been cancelled
preview-regression / preview-regression (push) Has been cancelled
regression / regression (push) Has been cancelled
regression / Detect changes (push) Has been cancelled
regression / Preflight (lint + format) (push) Has been cancelled
regression / regression-shards (hdr-regression style-5-prod style-3-prod mov-prores, shard-1) (push) Has been cancelled
regression / regression-shards (overlay-montage-prod style-12-prod chat missing-host-comp-id png-sequence portrait-edge-bleed, shard-6) (push) Has been cancelled
regression / regression-shards (style-13-prod style-6-prod vignelli-stacking gsap-letters-render-compat audio-mux-parity, shard-8) (push) Has been cancelled
regression / regression-shards (style-15-prod hdr-hlg-regression style-1-prod many-cuts vfr-screen-recording render-symlinked-assets, shard-2) (push) Has been cancelled
CodeQL / Analyze (actions) (push) Has been cancelled
CodeQL / Analyze (javascript-typescript) (push) Has been cancelled
CodeQL / Analyze (python) (push) Has been cancelled
Docs / Validate docs (push) Has been cancelled
Sync skills to ClawHub / Publish changed skills (push) Has been cancelled
2913 lines
102 KiB
HTML
Vendored
2913 lines
102 KiB
HTML
Vendored
<!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: #6366f1"></div>
|
||
<span class="fill-hex">6366F1</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;
|
||
}
|
||
|
||
/* ── Artboard content ── */
|
||
[data-composition-id="ui-3d-reveal"] .ab-nav {
|
||
height: 44px;
|
||
background: #fff;
|
||
border-bottom: 1px solid #f0f0f0;
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 0 20px;
|
||
gap: 0;
|
||
}
|
||
|
||
[data-composition-id="ui-3d-reveal"] .ab-logo-mark {
|
||
width: 22px;
|
||
height: 22px;
|
||
background: #6366f1;
|
||
border-radius: 6px;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
[data-composition-id="ui-3d-reveal"] .ab-logo-text {
|
||
width: 48px;
|
||
height: 10px;
|
||
background: #1a1a1a;
|
||
border-radius: 3px;
|
||
margin-left: 8px;
|
||
}
|
||
|
||
[data-composition-id="ui-3d-reveal"] .ab-nav-links {
|
||
display: flex;
|
||
gap: 14px;
|
||
flex: 1;
|
||
justify-content: center;
|
||
}
|
||
|
||
[data-composition-id="ui-3d-reveal"] .ab-link {
|
||
width: 28px;
|
||
height: 8px;
|
||
background: #d0d0d0;
|
||
border-radius: 3px;
|
||
}
|
||
|
||
[data-composition-id="ui-3d-reveal"] .ab-cta-btn {
|
||
background: #6366f1;
|
||
color: white;
|
||
font-size: 10px;
|
||
font-weight: 600;
|
||
padding: 6px 14px;
|
||
border-radius: 6px;
|
||
white-space: nowrap;
|
||
font-family: "Inter", sans-serif;
|
||
}
|
||
|
||
[data-composition-id="ui-3d-reveal"] .ab-hero {
|
||
padding: 28px 24px 20px;
|
||
background: #fafafa;
|
||
border-bottom: 1px solid #f0f0f0;
|
||
}
|
||
|
||
[data-composition-id="ui-3d-reveal"] .ab-badge {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
font-size: 9px;
|
||
font-weight: 500;
|
||
color: #6366f1;
|
||
background: #eef2ff;
|
||
padding: 3px 8px;
|
||
border-radius: 20px;
|
||
margin-bottom: 10px;
|
||
font-family: "Inter", sans-serif;
|
||
}
|
||
|
||
[data-composition-id="ui-3d-reveal"] .ab-h1 {
|
||
font-size: 22px;
|
||
font-weight: 700;
|
||
color: #111;
|
||
line-height: 1.2;
|
||
letter-spacing: -0.04em;
|
||
margin-bottom: 8px;
|
||
font-family: "Inter", sans-serif;
|
||
}
|
||
|
||
[data-composition-id="ui-3d-reveal"] .ab-sub {
|
||
font-size: 10px;
|
||
color: #6b6b6b;
|
||
margin-bottom: 14px;
|
||
font-family: "Inter", sans-serif;
|
||
}
|
||
|
||
[data-composition-id="ui-3d-reveal"] .ab-hero-btns {
|
||
display: flex;
|
||
gap: 8px;
|
||
align-items: center;
|
||
}
|
||
|
||
[data-composition-id="ui-3d-reveal"] .ab-btn-primary {
|
||
background: #6366f1;
|
||
color: white;
|
||
font-size: 9px;
|
||
font-weight: 600;
|
||
padding: 7px 16px;
|
||
border-radius: 6px;
|
||
font-family: "Inter", sans-serif;
|
||
}
|
||
|
||
[data-composition-id="ui-3d-reveal"] .ab-btn-ghost {
|
||
font-size: 9px;
|
||
color: #6366f1;
|
||
font-weight: 500;
|
||
font-family: "Inter", sans-serif;
|
||
}
|
||
|
||
[data-composition-id="ui-3d-reveal"] .ab-cards {
|
||
display: flex;
|
||
gap: 10px;
|
||
padding: 16px 20px;
|
||
background: #fff;
|
||
}
|
||
|
||
[data-composition-id="ui-3d-reveal"] .ab-card {
|
||
flex: 1;
|
||
background: #f8f9fa;
|
||
border: 1px solid #efefef;
|
||
border-radius: 8px;
|
||
padding: 12px 10px;
|
||
}
|
||
|
||
[data-composition-id="ui-3d-reveal"] .ab-card-icon {
|
||
width: 24px;
|
||
height: 24px;
|
||
border-radius: 6px;
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
[data-composition-id="ui-3d-reveal"] .ab-card-title {
|
||
width: 70%;
|
||
height: 7px;
|
||
background: #d0d0d0;
|
||
border-radius: 3px;
|
||
margin-bottom: 6px;
|
||
}
|
||
|
||
[data-composition-id="ui-3d-reveal"] .ab-card-body {
|
||
width: 90%;
|
||
height: 6px;
|
||
background: #e8e8e8;
|
||
border-radius: 3px;
|
||
}
|
||
|
||
/* ── 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>
|