ext/hyperframes
2
0
Fork 0
mirror of https://github.com/heygen-com/hyperframes.git synced 2026-09-01 19:42:03 +00:00
Code Issues Packages Projects Releases Wiki Activity
Files
sync/hyperframes-codegen-df972e70
hyperframes/docs/catalog/blocks/ui-3d-reveal.mdx
T
Miguel Ángel d7688f9943 fix(docs): load the player from latest, not a pinned minor (#3320) 
* fix(docs): load the player from latest, not a pinned minor

The catalog pages pinned the player CDN URL to a minor line, and that pin
sat one line behind after the last release. Every page kept rendering, on
the older build, so nothing surfaced it: the only symptom was that a fix
published to npm never appeared on the docs.

The generator derived its pin from the player's package.json, which is
correct only if every page is regenerated on the release that moves it.
That is the step that did not happen, and it has to happen across 175
generated pages plus three hand-written files for the pin to be true.

A version carried in step across 178 places will be stale, and stale here
is silent. Ask for latest instead and there is nothing to carry.

This costs the ability to hold the docs back from a bad player release.
Paid deliberately: the pin did not buy that either, it only delayed the
good releases too.

A test asserts no pinned version comes back, and fails if it stops finding
the references at all, so it cannot pass by matching nothing.

* refactor(scripts): list tracked files instead of walking the tree

The pin guard hand-rolled a recursive directory walk with its own skip
list and size cap, which the audit flagged: helpers living in a test file
earn no coverage, so their complexity lands straight on the CRAP score.

git already knows which files to read, and ignores node_modules and build
output for us, so one call replaces the walker and both findings go away.
2026-08-17 21:11:12 -04:00

2811 lines
100 KiB
Plaintext
Raw Permalink Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
---
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@latest/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)
Reference in New Issue View Git Blame Copy Permalink