Claude
b3600ec8f3
Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01FXVsD1DgdzZLiPuwtKzMSY
24 lines
1.9 KiB
HTML
24 lines
1.9 KiB
HTML
<template>
|
|
<style>
|
|
#root { position: absolute; inset: 0; font-family: "Oswald", sans-serif; color: #eaf2ff; }
|
|
.rep { position: absolute; right: 192px; top: 108px; text-align: right; font-weight: 700; font-size: 64px; line-height: 1; letter-spacing: 0.04em; white-space: nowrap; }
|
|
.rep .lbl { font-family: "Inter", sans-serif; font-weight: 600; font-size: 28px; letter-spacing: 0.22em; margin-right: 18px; vertical-align: middle; }
|
|
.rep .n { color: var(--accent, #ff7a45); font-size: 96px; vertical-align: middle; }
|
|
.rep .of { opacity: 0.7; font-size: 48px; vertical-align: middle; }
|
|
</style>
|
|
<div id="root" data-composition-id="counter" data-width="1920" data-height="1080">
|
|
<div id="rep1" class="clip rep" data-start="2.4" data-duration="2.8" data-track-index="0"><span class="lbl">REP</span><span class="n">1</span> <span class="of">/ 4</span></div>
|
|
<div id="rep2" class="clip rep" data-start="5.2" data-duration="2.8" data-track-index="0"><span class="lbl">REP</span><span class="n">2</span> <span class="of">/ 4</span></div>
|
|
<div id="rep3" class="clip rep" data-start="8.0" data-duration="2.8" data-track-index="0"><span class="lbl">REP</span><span class="n">3</span> <span class="of">/ 4</span></div>
|
|
<div id="rep4" class="clip rep" data-start="10.8" data-duration="2.8" data-track-index="0"><span class="lbl">REP</span><span class="n">4</span> <span class="of">/ 4</span></div>
|
|
</div>
|
|
<script>
|
|
const tl = gsap.timeline({ paused: true });
|
|
[["rep1", 2.4], ["rep2", 5.2], ["rep3", 8.0], ["rep4", 10.8]].forEach(([id, s]) => {
|
|
tl.fromTo("#" + id, { opacity: 0, filter: "blur(6px)" }, { opacity: 1, filter: "blur(0px)", duration: 0.2, ease: "power4.out" }, s);
|
|
tl.to("#" + id, { opacity: 0, filter: "blur(6px)", duration: 0.12, ease: "power3.in" }, s + 2.8 - 0.17);
|
|
});
|
|
window.__timelines["counter"] = tl;
|
|
</script>
|
|
</template>
|