> ## Documentation Index > Fetch the complete documentation index at: /llms.txt > Use this file to discover all available pages before exploring further. # 3D UI Reveal > Perspective 3D reveal animation for UI elements # 3D UI Reveal Perspective 3D reveal animation for UI elements **3D UI Reveal** ```html ui-3d-reveal.html ui-3d-reveal
App Redesign › Design System
Design Dev
S
J
K
▶
Layers Assets
Search layers
Page 1
HeyGen — Home
Navigation
Logo / Mark
Nav Links
Create Card
Design System
Landing
+
HeyGen — Home
Avatar
Video Agent
Motion Cut
Translate
Apps
Projects
J
Video Agent
New video
YESTERDAY
AI Skills Gap: Alien
PREVIOUS 3 DAYS
AI Skills Gap: Alien
Product Strategy: An AI...
S9
S7
S5
S3
PREVIOUS 7 DAYS
S8 lock
S4
S2
Moody t2
99+
Turn your ideas into
production-ready video
Avatar
Jordan
Voice
Auto
Style
Auto
Describe your video idea ...
Generate
Styles from the community
All Styles
Retro Tech
Iconic Artist
Pop Culture
Print
Cinematic
IMPLEMENTATION DEPTH
Strategy means saying NO
?
THINK BIG.
START SMALL.
Create Card · W 322 H 110
Design Prototype Inspect
⬓
⬒
⬔
⬕
⬗
W 108
H 34
X 1244
Y 18
↺ 0°
⌐ 8
Auto layout −
→ 12px
⊡ 14 / 8
Fill +
FFFFFF 100%
Stroke +
No strokes
Effects +
Drop shadow
Export +
N o t h i n g g r e a t i s m a d e a l o n e . figma.com
``` Copy npx hyperframes add ui-3d-reveal to the clipboard That writes one file: `compositions/ui-3d-reveal.html`. ## Add it to your video It runs for 13 seconds at 1920×1080. Paste this into your composition: ```html index.html
``` Move it in time with `data-start`. Put it on a different timeline row with `data-track-index`. See [data attributes](/concepts/data-attributes.md) for the rest. {/* hf:generated-footer */} Tagged `showcase` `3d` `reveal`. ## Related topics * [Browse the complete Catalog](/catalog.md) * [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks.md) * [Put blocks together into one video](/concepts/compositions.md)