Skip to content

Instantly share code, notes, and snippets.

@nidhinkumar06

nidhinkumar06/index.html

Created April 19, 2026 17:29
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save nidhinkumar06/b1bb6bb61f114cccd33ad511143bbc8a to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save nidhinkumar06/b1bb6bb61f114cccd33ad511143bbc8a to your computer and use it in GitHub Desktop.
Download ZIP
HeyFrame Multilingual Sample
Raw
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=1920, height=1080" />
<title>HeyGen — AI Video for India</title>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<!--
Noto Sans family covers all Indic scripts cleanly.
display=block ensures fonts are loaded before Hyperframes captures frames.
-->
<link
href="https://fonts.googleapis.com/css2?family=Noto+Sans+Devanagari:wght@400;700;900&family=Noto+Sans+Tamil:wght@400;700&family=Noto+Sans+Telugu:wght@400;700&family=Noto+Sans+Bengali:wght@400;700&family=Noto+Sans+Kannada:wght@400;700&family=Noto+Sans+Malayalam:wght@400;700&family=Bebas+Neue&family=DM+Sans:ital,wght@0,300;0,400;0,500;1,300&display=block"
rel="stylesheet"
/>
<style>
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
width: 1920px; height: 1080px;
overflow: hidden; background: #03040e;
}
</style>
</head>
<body>
<div
id="root"
data-composition-id="heygen-india"
data-width="1920"
data-height="1080"
style="position:relative; width:1920px; height:1080px; overflow:hidden; background:#03040e; font-family:'DM Sans',sans-serif;"
>
<!-- ══════════════════════════════════════════
LAYER 0 · Persistent Background
══════════════════════════════════════════ -->
<!-- Deep radial glow -->
<div class="clip" data-start="0" data-duration="10" data-track-index="0"
style="position:absolute;inset:0;
background:radial-gradient(ellipse 1100px 700px at 50% 52%, rgba(18,6,55,0.95) 0%, transparent 80%), #03040e;">
</div>
<!-- Dot-grid -->
<div class="clip" data-start="0" data-duration="10" data-track-index="0"
style="position:absolute;inset:0;opacity:0.14;
background-image:radial-gradient(circle, #556 1px, transparent 1px);
background-size:44px 44px;">
</div>
<!-- India Tricolor — Left saffron bar -->
<div class="clip" data-start="0" data-duration="10" data-track-index="1"
style="position:absolute;left:0;top:0;width:7px;height:100%;background:#FF9933;"></div>
<!-- India Tricolor — Right green bar -->
<div class="clip" data-start="0" data-duration="10" data-track-index="1"
style="position:absolute;right:0;top:0;width:7px;height:100%;background:#138808;"></div>
<!-- Ashoka-blue decorative rings (static, purely aesthetic) -->
<div id="ring-outer" class="clip" data-start="0" data-duration="10" data-track-index="1"
style="position:absolute;
top:calc(50% - 440px); left:calc(50% - 440px);
width:880px;height:880px;border-radius:50%;
border:1px solid rgba(0,0,160,0.18);opacity:0;">
</div>
<div id="ring-inner" class="clip" data-start="0" data-duration="10" data-track-index="1"
style="position:absolute;
top:calc(50% - 280px); left:calc(50% - 280px);
width:560px;height:560px;border-radius:50%;
border:1px solid rgba(0,0,160,0.12);opacity:0;">
</div>
<!-- ══════════════════════════════════════════
SCENE 1 · Opening Hook (0 – 1.5s)
══════════════════════════════════════════ -->
<!-- "हर भाषा में" — Opening Hindi line -->
<div id="open-main" class="clip" data-start="0.2" data-duration="1.4" data-track-index="2"
style="position:absolute;top:37%;width:100%;text-align:center;
font-family:'Noto Sans Devanagari',sans-serif;font-size:108px;font-weight:700;
color:#FF9933;line-height:1.1;">
हर भाषा में
</div>
<!-- "AI VIDEO FOR INDIA" — English sub -->
<div id="open-sub" class="clip" data-start="0.55" data-duration="1.05" data-track-index="2"
style="position:absolute;top:57%;width:100%;text-align:center;
font-family:'Bebas Neue',sans-serif;font-size:72px;
color:rgba(255,255,255,0.5);letter-spacing:14px;">
AI VIDEO FOR INDIA
</div>
<!-- Horizontal sweep line (scene 1 transition) -->
<div id="sweep" class="clip" data-start="1.3" data-duration="0.5" data-track-index="3"
style="position:absolute;top:calc(50% - 1px);left:-100%;
width:100%;height:2px;
background:linear-gradient(90deg, transparent, #FF9933 30%, #ffffff 50%, #138808 70%, transparent);
opacity:0.7;">
</div>
<!-- ══════════════════════════════════════════
SCENE 2 · Language Carousel (1.5 – 8.7s)
Each language: ~1.2s window
1. Hindi 1.5 – 2.7
2. Tamil 2.7 – 3.9
3. Telugu 3.9 – 5.1
4. Bengali 5.1 – 6.3
5. Kannada 6.3 – 7.5
6. Malayalam 7.5 – 8.7
══════════════════════════════════════════ -->
<!-- Progress dots — visible entire carousel -->
<div id="prog-dots" class="clip" data-start="1.4" data-duration="7.4" data-track-index="9"
style="position:absolute;bottom:72px;width:100%;display:flex;justify-content:center;align-items:center;gap:18px;">
<div id="d1" style="width:13px;height:13px;border-radius:50%;background:rgba(255,255,255,0.15);transition:all 0.2s;"></div>
<div id="d2" style="width:13px;height:13px;border-radius:50%;background:rgba(255,255,255,0.15);"></div>
<div id="d3" style="width:13px;height:13px;border-radius:50%;background:rgba(255,255,255,0.15);"></div>
<div id="d4" style="width:13px;height:13px;border-radius:50%;background:rgba(255,255,255,0.15);"></div>
<div id="d5" style="width:13px;height:13px;border-radius:50%;background:rgba(255,255,255,0.15);"></div>
<div id="d6" style="width:13px;height:13px;border-radius:50%;background:rgba(255,255,255,0.15);"></div>
</div>
<!-- ── 1. Hindi ── -->
<div id="lang-1" class="clip" data-start="1.5" data-duration="1.5" data-track-index="4"
style="position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
text-align:center;width:1500px;opacity:0;">
<div style="font-size:20px;letter-spacing:9px;color:#FF9933;margin-bottom:22px;text-transform:uppercase;font-weight:500;">
HINDI &nbsp;·&nbsp; हिन्दी
</div>
<div style="font-family:'Noto Sans Devanagari',sans-serif;font-size:112px;font-weight:700;color:#fff;line-height:1.2;">
एआई वीडियो निर्माण
</div>
<div style="font-size:26px;color:rgba(255,255,255,0.35);margin-top:22px;letter-spacing:3px;font-style:italic;">
AI Video Creation
</div>
</div>
<!-- ── 2. Tamil ── -->
<div id="lang-2" class="clip" data-start="2.7" data-duration="1.5" data-track-index="4"
style="position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
text-align:center;width:1500px;opacity:0;">
<div style="font-size:20px;letter-spacing:9px;color:#00dca8;margin-bottom:22px;text-transform:uppercase;font-weight:500;">
TAMIL &nbsp;·&nbsp; தமிழ்
</div>
<div style="font-family:'Noto Sans Tamil',sans-serif;font-size:112px;font-weight:700;color:#fff;line-height:1.2;">
AI வீடியோ உருவாக்கம்
</div>
<div style="font-size:26px;color:rgba(255,255,255,0.35);margin-top:22px;letter-spacing:3px;font-style:italic;">
AI Video Creation
</div>
</div>
<!-- ── 3. Telugu ── -->
<div id="lang-3" class="clip" data-start="3.9" data-duration="1.5" data-track-index="4"
style="position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
text-align:center;width:1500px;opacity:0;">
<div style="font-size:20px;letter-spacing:9px;color:#5aabff;margin-bottom:22px;text-transform:uppercase;font-weight:500;">
TELUGU &nbsp;·&nbsp; తెలుగు
</div>
<div style="font-family:'Noto Sans Telugu',sans-serif;font-size:112px;font-weight:700;color:#fff;line-height:1.2;">
AI వీడియో నిర్మాణం
</div>
<div style="font-size:26px;color:rgba(255,255,255,0.35);margin-top:22px;letter-spacing:3px;font-style:italic;">
AI Video Creation
</div>
</div>
<!-- ── 4. Bengali ── -->
<div id="lang-4" class="clip" data-start="5.1" data-duration="1.5" data-track-index="4"
style="position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
text-align:center;width:1500px;opacity:0;">
<div style="font-size:20px;letter-spacing:9px;color:#FFD166;margin-bottom:22px;text-transform:uppercase;font-weight:500;">
BENGALI &nbsp;·&nbsp; বাংলা
</div>
<div style="font-family:'Noto Sans Bengali',sans-serif;font-size:112px;font-weight:700;color:#fff;line-height:1.2;">
AI ভিডিও নির্মাণ
</div>
<div style="font-size:26px;color:rgba(255,255,255,0.35);margin-top:22px;letter-spacing:3px;font-style:italic;">
AI Video Creation
</div>
</div>
<!-- ── 5. Kannada ── -->
<div id="lang-5" class="clip" data-start="6.3" data-duration="1.5" data-track-index="4"
style="position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
text-align:center;width:1500px;opacity:0;">
<div style="font-size:20px;letter-spacing:9px;color:#c670ff;margin-bottom:22px;text-transform:uppercase;font-weight:500;">
KANNADA &nbsp;·&nbsp; ಕನ್ನಡ
</div>
<div style="font-family:'Noto Sans Kannada',sans-serif;font-size:112px;font-weight:700;color:#fff;line-height:1.2;">
AI ವೀಡಿಯೋ ನಿರ್ಮಾಣ
</div>
<div style="font-size:26px;color:rgba(255,255,255,0.35);margin-top:22px;letter-spacing:3px;font-style:italic;">
AI Video Creation
</div>
</div>
<!-- ── 6. Malayalam ── -->
<div id="lang-6" class="clip" data-start="7.5" data-duration="1.5" data-track-index="4"
style="position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
text-align:center;width:1500px;opacity:0;">
<div style="font-size:20px;letter-spacing:9px;color:#ff8080;margin-bottom:22px;text-transform:uppercase;font-weight:500;">
MALAYALAM &nbsp;·&nbsp; മലയാളം
</div>
<div style="font-family:'Noto Sans Malayalam',sans-serif;font-size:112px;font-weight:700;color:#fff;line-height:1.2;">
AI വീഡിയോ നിർമ്മാണം
</div>
<div style="font-size:26px;color:rgba(255,255,255,0.35);margin-top:22px;letter-spacing:3px;font-style:italic;">
AI Video Creation
</div>
</div>
<!-- ══════════════════════════════════════════
SCENE 3 · Brand Outro (8.7 – 10s)
══════════════════════════════════════════ -->
<!-- Outro background overlay -->
<div id="outro-bg" class="clip" data-start="8.6" data-duration="1.4" data-track-index="10"
style="position:absolute;inset:0;
background:linear-gradient(135deg, #03040e 0%, #061a0f 60%, #03040e 100%);
opacity:0;">
</div>
<!-- HeyGen wordmark + tagline -->
<div id="outro-brand" class="clip" data-start="8.75" data-duration="1.25" data-track-index="11"
style="position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
text-align:center;opacity:0;">
<div style="font-family:'Bebas Neue',sans-serif;font-size:170px;color:#fff;
letter-spacing:10px;line-height:1;">HeyGen</div>
<div style="font-family:'Noto Sans Devanagari',sans-serif;font-size:40px;
color:#FF9933;letter-spacing:3px;margin-top:6px;">
भारत के लिए बनाया गया
</div>
<div style="font-size:22px;color:rgba(255,255,255,0.38);letter-spacing:6px;
text-transform:uppercase;margin-top:10px;">
Made for India
</div>
</div>
<!-- ══════════════════════════════════════════
GSAP Timeline
══════════════════════════════════════════ -->
<script src="https://cdn.jsdelivr.net/npm/gsap@3/dist/gsap.min.js"></script>
<script>
const tl = gsap.timeline({ paused: true });
// ── Rings fade in ──
tl.to(["#ring-outer", "#ring-inner"], { opacity: 1, duration: 1.5, ease: "power2.out" }, 0);
// ── Scene 1: Opening ──
tl
.from("#open-main", { opacity: 0, scale: 0.88, filter: "blur(14px)", duration: 0.55, ease: "power3.out" }, 0.2)
.to( "#open-main", { opacity: 0, y: -28, duration: 0.3, ease: "power2.in" }, 1.2)
.from("#open-sub", { opacity: 0, y: 24, duration: 0.4, ease: "power2.out" }, 0.65)
.to( "#open-sub", { opacity: 0, duration: 0.25, ease: "power1.in" }, 1.25)
// sweep bar reveals across
.set( "#sweep", { opacity: 0.7 })
.to( "#sweep", { left: "100%", duration: 0.5, ease: "expo.inOut" }, 1.3)
// ── Language 1: Hindi ──
tl
.to( "#lang-1", { opacity: 1, y: 0, duration: 0.32, ease: "back.out(1.4)" }, 1.5)
.from("#lang-1", { y: 45 }, 1.5) // initial y offset
.to( "#d1", { background: "#FF9933", scale: 1.45, duration: 0.2 }, 1.5)
.to( "#lang-1", { opacity: 0, y: -38, duration: 0.28, ease: "power2.in" }, 2.58)
.to( "#d1", { scale: 1, background: "rgba(255,255,255,0.35)", duration: 0.2 }, 2.6)
// ── Language 2: Tamil ──
tl
.to( "#lang-2", { opacity: 1, y: 0, duration: 0.32, ease: "back.out(1.4)" }, 2.7)
.from("#lang-2", { y: 45 }, 2.7)
.to( "#d2", { background: "#00dca8", scale: 1.45, duration: 0.2 }, 2.7)
.to( "#lang-2", { opacity: 0, y: -38, duration: 0.28, ease: "power2.in" }, 3.78)
.to( "#d2", { scale: 1, background: "rgba(255,255,255,0.35)", duration: 0.2 }, 3.8)
// ── Language 3: Telugu ──
tl
.to( "#lang-3", { opacity: 1, y: 0, duration: 0.32, ease: "back.out(1.4)" }, 3.9)
.from("#lang-3", { y: 45 }, 3.9)
.to( "#d3", { background: "#5aabff", scale: 1.45, duration: 0.2 }, 3.9)
.to( "#lang-3", { opacity: 0, y: -38, duration: 0.28, ease: "power2.in" }, 4.98)
.to( "#d3", { scale: 1, background: "rgba(255,255,255,0.35)", duration: 0.2 }, 5.0)
// ── Language 4: Bengali ──
tl
.to( "#lang-4", { opacity: 1, y: 0, duration: 0.32, ease: "back.out(1.4)" }, 5.1)
.from("#lang-4", { y: 45 }, 5.1)
.to( "#d4", { background: "#FFD166", scale: 1.45, duration: 0.2 }, 5.1)
.to( "#lang-4", { opacity: 0, y: -38, duration: 0.28, ease: "power2.in" }, 6.18)
.to( "#d4", { scale: 1, background: "rgba(255,255,255,0.35)", duration: 0.2 }, 6.2)
// ── Language 5: Kannada ──
tl
.to( "#lang-5", { opacity: 1, y: 0, duration: 0.32, ease: "back.out(1.4)" }, 6.3)
.from("#lang-5", { y: 45 }, 6.3)
.to( "#d5", { background: "#c670ff", scale: 1.45, duration: 0.2 }, 6.3)
.to( "#lang-5", { opacity: 0, y: -38, duration: 0.28, ease: "power2.in" }, 7.38)
.to( "#d5", { scale: 1, background: "rgba(255,255,255,0.35)", duration: 0.2 }, 7.4)
// ── Language 6: Malayalam ──
tl
.to( "#lang-6", { opacity: 1, y: 0, duration: 0.32, ease: "back.out(1.4)" }, 7.5)
.from("#lang-6", { y: 45 }, 7.5)
.to( "#d6", { background: "#ff8080", scale: 1.45, duration: 0.2 }, 7.5)
.to( "#lang-6", { opacity: 0, y: -38, duration: 0.28, ease: "power2.in" }, 8.58)
.to( "#d6", { scale: 1, background: "rgba(255,255,255,0.35)", duration: 0.2 }, 8.6)
// ── Scene 3: Outro ──
tl
.to("#outro-bg", { opacity: 1, duration: 0.35, ease: "power2.out" }, 8.65)
.to("#outro-brand", { opacity: 1, scale: 1, filter: "blur(0px)", duration: 0.6, ease: "back.out(1.5)" }, 8.85)
.from("#outro-brand", { scale: 0.88, filter: "blur(14px)" }, 8.85)
.to("#outro-brand", { opacity: 0, scale: 1.04, duration: 0.35, ease: "power2.in" }, 9.7)
.to("#outro-bg", { opacity: 0, duration: 0.35, ease: "power2.in" }, 9.7);
// Register with Hyperframes
window.__timelines = window.__timelines || {};
window.__timelines["heygen-india"] = tl;
</script>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment