Achievement Card: Light — 16:9

Ready

HTML
View
Context
Info
Notes


        
        <div style="display:inline-block;width:480px;max-width:100%;aspect-ratio:16/9;position:relative;overflow:hidden;font-family:'Satoshi',sans-serif;border-radius:4px;background:#ffffff;">

    <div style="position:absolute;inset:0;pointer-events:none;overflow:hidden;">
        <div style="position:absolute;top:2%;left:3%;width:4%;height:1.5%;background:#FF3B5C;transform:rotate(-30deg);border-radius:1px;animation:ts-confetti-drift 2.4s ease-in-out 0.00s infinite alternate;"></div>
        <div style="position:absolute;top:5%;left:8%;width:2%;height:4%;background:#FFD700;transform:rotate(20deg);border-radius:1px;animation:ts-confetti-drift 1.9s ease-in-out 0.30s infinite alternate;"></div>
        <div style="position:absolute;top:1%;left:16%;width:3%;height:1%;background:#00C853;transform:rotate(-15deg);border-radius:1px;animation:ts-confetti-drift 2.7s ease-in-out 0.10s infinite alternate;"></div>
        <div style="position:absolute;top:9%;left:4%;width:2%;height:5%;background:#2979FF;transform:rotate(40deg);border-radius:1px;animation:ts-confetti-drift 2.1s ease-in-out 0.55s infinite alternate;"></div>
        <div style="position:absolute;top:3%;left:26%;width:4%;height:1.5%;background:#FF9500;transform:rotate(-45deg);border-radius:1px;animation:ts-confetti-drift 2.9s ease-in-out 0.20s infinite alternate;"></div>
        <div style="position:absolute;top:13%;left:2%;width:3%;height:1%;background:#D500F9;transform:rotate(10deg);border-radius:1px;animation:ts-confetti-drift 1.7s ease-in-out 0.80s infinite alternate;"></div>
        <div style="position:absolute;top:7%;left:19%;width:2%;height:3%;background:#FF4081;transform:rotate(-60deg);border-radius:1px;animation:ts-confetti-drift 2.3s ease-in-out 0.40s infinite alternate;"></div>
        <div style="position:absolute;top:16%;left:11%;width:3%;height:1%;background:#00E5FF;transform:rotate(25deg);border-radius:1px;animation:ts-confetti-drift 2.6s ease-in-out 0.15s infinite alternate;"></div>
        <div style="position:absolute;top:1%;right:4%;width:3%;height:5%;background:#FFD700;transform:rotate(30deg);border-radius:1px;animation:ts-confetti-drift 2.2s ease-in-out 0.35s infinite alternate;"></div>
        <div style="position:absolute;top:4%;right:11%;width:4%;height:1.5%;background:#FF3B5C;transform:rotate(-20deg);border-radius:1px;animation:ts-confetti-drift 1.8s ease-in-out 0.65s infinite alternate;"></div>
        <div style="position:absolute;top:10%;right:3%;width:2%;height:4%;background:#00C853;transform:rotate(-45deg);border-radius:1px;animation:ts-confetti-drift 2.5s ease-in-out 0.05s infinite alternate;"></div>
        <div style="position:absolute;top:2%;right:23%;width:3%;height:1%;background:#2979FF;transform:rotate(15deg);border-radius:1px;animation:ts-confetti-drift 3.0s ease-in-out 0.50s infinite alternate;"></div>
        <div style="position:absolute;top:15%;right:7%;width:4%;height:1.5%;background:#D500F9;transform:rotate(50deg);border-radius:1px;animation:ts-confetti-drift 2.0s ease-in-out 0.90s infinite alternate;"></div>
        <div style="position:absolute;top:8%;right:19%;width:2%;height:3%;background:#FF9500;transform:rotate(-30deg);border-radius:1px;animation:ts-confetti-drift 2.8s ease-in-out 0.25s infinite alternate;"></div>
        <div style="position:absolute;top:19%;right:2%;width:3%;height:1%;background:#00E5FF;transform:rotate(-15deg);border-radius:1px;animation:ts-confetti-drift 1.6s ease-in-out 0.70s infinite alternate;"></div>
        <div style="position:absolute;top:28%;left:1%;width:2%;height:4%;background:#FF3B5C;transform:rotate(35deg);border-radius:1px;animation:ts-confetti-drift 2.4s ease-in-out 1.00s infinite alternate;"></div>
        <div style="position:absolute;top:36%;left:3%;width:3%;height:1%;background:#FFD700;transform:rotate(-20deg);border-radius:1px;animation:ts-confetti-drift 2.0s ease-in-out 0.45s infinite alternate;"></div>
        <div style="position:absolute;top:44%;left:2%;width:1.5%;height:3%;background:#00C853;transform:rotate(20deg);border-radius:1px;animation:ts-confetti-drift 2.7s ease-in-out 1.20s infinite alternate;"></div>
        <div style="position:absolute;top:52%;left:4%;width:3%;height:1%;background:#D500F9;transform:rotate(-50deg);border-radius:1px;animation:ts-confetti-drift 1.9s ease-in-out 0.60s infinite alternate;"></div>
        <div style="position:absolute;top:32%;right:2%;width:3%;height:1%;background:#FFD700;transform:rotate(-25deg);border-radius:1px;animation:ts-confetti-drift 2.5s ease-in-out 0.85s infinite alternate;"></div>
        <div style="position:absolute;top:40%;right:1%;width:2%;height:4%;background:#2979FF;transform:rotate(-40deg);border-radius:1px;animation:ts-confetti-drift 1.7s ease-in-out 1.10s infinite alternate;"></div>
        <div style="position:absolute;top:48%;right:3%;width:1.5%;height:3%;background:#FF4081;transform:rotate(30deg);border-radius:1px;animation:ts-confetti-drift 2.9s ease-in-out 0.30s infinite alternate;"></div>
        <div style="position:absolute;top:56%;right:2%;width:3%;height:1%;background:#00E5FF;transform:rotate(15deg);border-radius:1px;animation:ts-confetti-drift 2.2s ease-in-out 0.75s infinite alternate;"></div>
        <div style="position:absolute;top:62%;left:2%;width:2%;height:4%;background:#FF9500;transform:rotate(-35deg);border-radius:1px;animation:ts-confetti-drift 2.6s ease-in-out 1.30s infinite alternate;"></div>
        <div style="position:absolute;top:70%;left:5%;width:3%;height:1%;background:#FF3B5C;transform:rotate(45deg);border-radius:1px;animation:ts-confetti-drift 1.8s ease-in-out 0.55s infinite alternate;"></div>
        <div style="position:absolute;top:78%;left:1%;width:2%;height:5%;background:#00C853;transform:rotate(-20deg);border-radius:1px;animation:ts-confetti-drift 2.3s ease-in-out 1.50s infinite alternate;"></div>
        <div style="position:absolute;top:85%;left:8%;width:4%;height:1.5%;background:#FFD700;transform:rotate(30deg);border-radius:1px;animation:ts-confetti-drift 3.1s ease-in-out 0.10s infinite alternate;"></div>
        <div style="position:absolute;top:65%;right:3%;width:3%;height:1%;background:#D500F9;transform:rotate(-45deg);border-radius:1px;animation:ts-confetti-drift 2.1s ease-in-out 1.00s infinite alternate;"></div>
        <div style="position:absolute;top:72%;right:1%;width:2%;height:4%;background:#FF4081;transform:rotate(25deg);border-radius:1px;animation:ts-confetti-drift 2.8s ease-in-out 0.40s infinite alternate;"></div>
        <div style="position:absolute;top:80%;right:4%;width:3%;height:1%;background:#2979FF;transform:rotate(-15deg);border-radius:1px;animation:ts-confetti-drift 1.9s ease-in-out 1.20s infinite alternate;"></div>
        <div style="position:absolute;top:87%;right:7%;width:1.5%;height:3%;background:#FF9500;transform:rotate(50deg);border-radius:1px;animation:ts-confetti-drift 2.4s ease-in-out 0.65s infinite alternate;"></div>
    </div>

    <div style="position:absolute;top:0;left:0;right:0;bottom:7%;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:5%;text-align:center;">

        <div style="width:16%;aspect-ratio:1/1;border-radius:50%;overflow:hidden;border:2px solid #000000;background:#712F79;display:flex;align-items:center;justify-content:center;margin-bottom:2%;flex-shrink:0;">
            <span style="font-weight:700;font-size:1.4em;color:#000000;">F</span>
        </div>

        <div style="font-size:0.9em;font-weight:700;color:#353535;margin-bottom:1%;">Fluffy Kiwi</div>

        <div style="font-size:2em;font-weight:900;color:#712F79;line-height:1;margin-bottom:0;">10K</div>

        <div style="font-size:2.8em;font-weight:900;color:#353535;text-transform:uppercase;line-height:1;margin-bottom:3%;">Subscribers</div>

        <div style="font-size:0.85em;font-weight:700;color:#712F79;">April 2026</div>

    </div>

    <div style="position:absolute;bottom:5.5%;left:0;right:0;height:1.5%;background:#712F79;"></div>

    <div style="position:absolute;bottom:0;left:0;right:0;height:5.5%;background:#000000;display:flex;align-items:center;justify-content:center;gap:7px;">
        <span style="font-size:0.6em;font-weight:700;color:#ffffff;">Created with</span>
        <img src="https://app.tubespanner.com/themes/custom/tubespanner_purple/images/logo.svg" style="height:13px;filter:invert(1);" onerror="this.style.display='none'">
        <span style="font-size:0.6em;font-weight:700;color:#ffffff;">TubeSpanner</span>
    </div>

</div>


        <div style="display:inline-block;width:480px;max-width:100%;aspect-ratio:{{#if widescreen}}16/9{{else}}1/1{{/if}};position:relative;overflow:hidden;font-family:'Satoshi',sans-serif;border-radius:4px;background:{{bgColor}};">

  {{#if golden}}

    {{! ── GOLDEN SPANNER ─────────────────────────────── }}

    {{! Cream gradient background }}
    <div style="position:absolute;inset:0;background:linear-gradient(135deg,#fdfaf3 0%,#f5edd8 50%,#ece0c0 100%);"></div>

    {{! Subtle radial vignette }}
    <div style="position:absolute;inset:0;background:radial-gradient(ellipse at center,transparent 35%,rgba(139,101,8,0.07) 100%);pointer-events:none;"></div>

    {{! Top gold bar }}
    <div style="position:absolute;top:0;left:0;right:0;height:{{#if widescreen}}7px{{else}}4px{{/if}};background:linear-gradient(to right,transparent 0%,#8b6508 15%,#f9e97e 40%,#ffe066 50%,#d4a017 65%,#8b6508 85%,transparent 100%);z-index:2;"></div>

    {{! Gold sparkles — animated twinkle }}
    <div style="position:absolute;inset:0;pointer-events:none;font-size:0;">
      <span style="position:absolute;top:7%;left:5%;color:#b8860b;font-size:11px;animation:ts-sparkle-twinkle 1.8s ease-in-out 0.0s infinite alternate;">✦</span>
      <span style="position:absolute;top:4%;left:18%;color:#b8860b;font-size:7px;animation:ts-sparkle-twinkle 2.3s ease-in-out 0.4s infinite alternate;">•</span>
      <span style="position:absolute;top:11%;left:32%;color:#b8860b;font-size:6px;animation:ts-sparkle-twinkle 2.7s ease-in-out 0.9s infinite alternate;">✦</span>
      <span style="position:absolute;top:3%;right:25%;color:#b8860b;font-size:9px;animation:ts-sparkle-twinkle 1.6s ease-in-out 0.2s infinite alternate;">✦</span>
      <span style="position:absolute;top:7%;right:10%;color:#b8860b;font-size:14px;animation:ts-sparkle-twinkle 2.1s ease-in-out 0.7s infinite alternate;">✦</span>
      <span style="position:absolute;top:18%;right:4%;color:#b8860b;font-size:8px;animation:ts-sparkle-twinkle 2.9s ease-in-out 0.3s infinite alternate;">•</span>
      <span style="position:absolute;top:33%;left:3%;color:#b8860b;font-size:11px;animation:ts-sparkle-twinkle 1.9s ease-in-out 1.1s infinite alternate;">✦</span>
      <span style="position:absolute;top:40%;left:12%;color:#b8860b;font-size:6px;animation:ts-sparkle-twinkle 2.5s ease-in-out 0.5s infinite alternate;">•</span>
      <span style="position:absolute;top:52%;right:6%;color:#b8860b;font-size:12px;animation:ts-sparkle-twinkle 2.0s ease-in-out 0.8s infinite alternate;">✦</span>
      <span style="position:absolute;top:58%;right:18%;color:#b8860b;font-size:7px;animation:ts-sparkle-twinkle 2.4s ease-in-out 0.1s infinite alternate;">•</span>
      <span style="position:absolute;top:68%;left:6%;color:#b8860b;font-size:10px;animation:ts-sparkle-twinkle 1.7s ease-in-out 1.3s infinite alternate;">✦</span>
      <span style="position:absolute;top:76%;right:5%;color:#b8860b;font-size:13px;animation:ts-sparkle-twinkle 2.2s ease-in-out 0.6s infinite alternate;">✦</span>
      <span style="position:absolute;top:83%;left:22%;color:#b8860b;font-size:7px;animation:ts-sparkle-twinkle 3.0s ease-in-out 0.2s infinite alternate;">•</span>
    </div>

    {{! Content — stops above gold bar + footer }}
    <div style="position:absolute;top:0;left:0;right:0;bottom:{{#if widescreen}}13%{{else}}8%{{/if}};display:flex;flex-direction:column;align-items:center;justify-content:center;padding:8% 10% 3%;text-align:center;">

      {{! Gold coin badge }}
      <div style="width:{{#if widescreen}}18%{{else}}26%{{/if}};aspect-ratio:1/1;border-radius:50%;background:conic-gradient(#1a0800 0deg,#7A5210 30deg,#D4A017 70deg,#F5D061 100deg,#D4A017 130deg,#A07012 160deg,#1a0800 180deg,#7A5210 210deg,#D4A017 250deg,#F5D061 280deg,#D4A017 320deg,#7A5210 350deg,#1a0800 360deg);box-shadow:0 4px 20px rgba(0,0,0,0.35),inset 0 0 0 3px rgba(0,0,0,0.25);display:flex;align-items:center;justify-content:center;margin-bottom:{{#if widescreen}}2%{{else}}3%{{/if}};flex-shrink:0;">
        <div style="width:78%;aspect-ratio:1/1;border-radius:50%;background:radial-gradient(circle at 35% 35%,#F5E8C0,#D4A840 50%,#8B6210);display:flex;align-items:center;justify-content:center;">
          <img src="https://app.tubespanner.com/themes/custom/tubespanner_purple/images/logo.svg" style="width:55%;opacity:0.9;filter:brightness(1.5) sepia(0.3);" onerror="this.style.display='none'">
        </div>
      </div>

      {{! Brand name }}
      <div style="font-size:{{#if widescreen}}0.75em{{else}}0.65em{{/if}};font-weight:600;color:#5a3e00;margin-bottom:{{#if widescreen}}2%{{else}}2.5%{{/if}};">TubeSpanner</div>

      {{! Divider }}
      <div style="width:55%;display:flex;align-items:center;gap:5px;margin-bottom:{{#if widescreen}}2%{{else}}2.5%{{/if}};">
        <div style="flex:1;height:1px;background:linear-gradient(to right,transparent,rgba(212,160,23,0.55),rgba(249,233,126,0.9),rgba(212,160,23,0.55),transparent);"></div>
        <span style="color:#d4a017;font-size:0.45em;display:inline-block;transform:rotate(45deg);">■</span>
        <div style="flex:1;height:1px;background:linear-gradient(to right,transparent,rgba(212,160,23,0.55),rgba(249,233,126,0.9),rgba(212,160,23,0.55),transparent);"></div>
      </div>

      {{! Achievement title — serif, gold gradient }}
      <div style="font-family:Georgia,'Times New Roman',serif;font-size:{{#if widescreen}}1.9em{{else}}1.7em{{/if}};font-weight:900;text-transform:uppercase;letter-spacing:0.07em;background:linear-gradient(135deg,#8b6508,#d4a017,#fff3a0,#d4a017,#8b6508);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;line-height:1.1;margin-bottom:{{#if widescreen}}2%{{else}}2.5%{{/if}};">{{achievementName}}</div>

      {{! Divider }}
      <div style="width:55%;display:flex;align-items:center;gap:5px;margin-bottom:{{#if widescreen}}2%{{else}}2.5%{{/if}};">
        <div style="flex:1;height:1px;background:linear-gradient(to right,transparent,rgba(212,160,23,0.55),rgba(249,233,126,0.9),rgba(212,160,23,0.55),transparent);"></div>
        <span style="color:#d4a017;font-size:0.45em;display:inline-block;transform:rotate(45deg);">■</span>
        <div style="flex:1;height:1px;background:linear-gradient(to right,transparent,rgba(212,160,23,0.55),rgba(249,233,126,0.9),rgba(212,160,23,0.55),transparent);"></div>
      </div>

      {{! Awarded to }}
      <div style="font-style:italic;font-size:{{#if widescreen}}0.7em{{else}}0.62em{{/if}};font-weight:400;color:#6b4c00;margin-bottom:{{#if widescreen}}0.5%{{else}}0.8%{{/if}};">Awarded to:</div>
      <div style="font-size:{{#if widescreen}}1.25em{{else}}1.15em{{/if}};font-weight:700;color:#1a0f00;margin-bottom:{{#if widescreen}}0.5%{{else}}0.8%{{/if}};">{{awardedTo}}</div>
      <div style="font-size:{{#if widescreen}}0.7em{{else}}0.62em{{/if}};font-weight:600;color:#d4a017;margin-bottom:{{#if widescreen}}2%{{else}}2.5%{{/if}};">{{date}}</div>

      {{! Bottom divider }}
      <div style="width:55%;display:flex;align-items:center;gap:5px;">
        <div style="flex:1;height:1px;background:linear-gradient(to right,transparent,rgba(212,160,23,0.55),rgba(249,233,126,0.9),rgba(212,160,23,0.55),transparent);"></div>
        <span style="color:#d4a017;font-size:0.45em;display:inline-block;transform:rotate(45deg);">■</span>
        <div style="flex:1;height:1px;background:linear-gradient(to right,transparent,rgba(212,160,23,0.55),rgba(249,233,126,0.9),rgba(212,160,23,0.55),transparent);"></div>
      </div>

    </div>

    {{! Gold bar above footer }}
    <div style="position:absolute;bottom:{{#if widescreen}}9.5%{{else}}6%{{/if}};left:0;right:0;height:{{#if widescreen}}6px{{else}}4px{{/if}};background:linear-gradient(to right,transparent 0%,#8b6508 15%,#f9e97e 40%,#ffe066 50%,#d4a017 65%,#8b6508 85%,transparent 100%);"></div>

    {{! Footer }}
    <div style="position:absolute;bottom:0;left:0;right:0;background:#463226;height:{{#if widescreen}}9%{{else}}5.5%{{/if}};display:flex;align-items:center;justify-content:center;gap:6px;">
      <span style="font-size:{{#if widescreen}}0.55em{{else}}0.46em{{/if}};font-weight:900;letter-spacing:0.1em;color:#d4a017;text-transform:uppercase;">CREATED WITH</span>
      <img src="https://app.tubespanner.com/themes/custom/tubespanner_purple/images/logo.svg" style="height:{{#if widescreen}}11px{{else}}9px{{/if}};filter:sepia(1) saturate(5) hue-rotate(5deg) brightness(0.85);" onerror="this.style.display='none'">
      <span style="font-size:{{#if widescreen}}0.55em{{else}}0.46em{{/if}};font-weight:900;letter-spacing:0.1em;color:#d4a017;text-transform:uppercase;">TUBESPANNER</span>
    </div>

  {{else}}

    {{! ── STANDARD (DARK / LIGHT) ─────────────────────── }}

    {{! Confetti — animated drift/fall, distributed across full card }}
    <div style="position:absolute;inset:0;pointer-events:none;overflow:hidden;">
      {{! Top-left cluster }}
      <div style="position:absolute;top:2%;left:3%;width:4%;height:1.5%;background:#FF3B5C;transform:rotate(-30deg);border-radius:1px;animation:ts-confetti-drift 2.4s ease-in-out 0.00s infinite alternate;"></div>
      <div style="position:absolute;top:5%;left:8%;width:2%;height:4%;background:#FFD700;transform:rotate(20deg);border-radius:1px;animation:ts-confetti-drift 1.9s ease-in-out 0.30s infinite alternate;"></div>
      <div style="position:absolute;top:1%;left:16%;width:3%;height:1%;background:#00C853;transform:rotate(-15deg);border-radius:1px;animation:ts-confetti-drift 2.7s ease-in-out 0.10s infinite alternate;"></div>
      <div style="position:absolute;top:9%;left:4%;width:2%;height:5%;background:#2979FF;transform:rotate(40deg);border-radius:1px;animation:ts-confetti-drift 2.1s ease-in-out 0.55s infinite alternate;"></div>
      <div style="position:absolute;top:3%;left:26%;width:4%;height:1.5%;background:#FF9500;transform:rotate(-45deg);border-radius:1px;animation:ts-confetti-drift 2.9s ease-in-out 0.20s infinite alternate;"></div>
      <div style="position:absolute;top:13%;left:2%;width:3%;height:1%;background:#D500F9;transform:rotate(10deg);border-radius:1px;animation:ts-confetti-drift 1.7s ease-in-out 0.80s infinite alternate;"></div>
      <div style="position:absolute;top:7%;left:19%;width:2%;height:3%;background:#FF4081;transform:rotate(-60deg);border-radius:1px;animation:ts-confetti-drift 2.3s ease-in-out 0.40s infinite alternate;"></div>
      <div style="position:absolute;top:16%;left:11%;width:3%;height:1%;background:#00E5FF;transform:rotate(25deg);border-radius:1px;animation:ts-confetti-drift 2.6s ease-in-out 0.15s infinite alternate;"></div>
      {{! Top-right cluster }}
      <div style="position:absolute;top:1%;right:4%;width:3%;height:5%;background:#FFD700;transform:rotate(30deg);border-radius:1px;animation:ts-confetti-drift 2.2s ease-in-out 0.35s infinite alternate;"></div>
      <div style="position:absolute;top:4%;right:11%;width:4%;height:1.5%;background:#FF3B5C;transform:rotate(-20deg);border-radius:1px;animation:ts-confetti-drift 1.8s ease-in-out 0.65s infinite alternate;"></div>
      <div style="position:absolute;top:10%;right:3%;width:2%;height:4%;background:#00C853;transform:rotate(-45deg);border-radius:1px;animation:ts-confetti-drift 2.5s ease-in-out 0.05s infinite alternate;"></div>
      <div style="position:absolute;top:2%;right:23%;width:3%;height:1%;background:#2979FF;transform:rotate(15deg);border-radius:1px;animation:ts-confetti-drift 3.0s ease-in-out 0.50s infinite alternate;"></div>
      <div style="position:absolute;top:15%;right:7%;width:4%;height:1.5%;background:#D500F9;transform:rotate(50deg);border-radius:1px;animation:ts-confetti-drift 2.0s ease-in-out 0.90s infinite alternate;"></div>
      <div style="position:absolute;top:8%;right:19%;width:2%;height:3%;background:#FF9500;transform:rotate(-30deg);border-radius:1px;animation:ts-confetti-drift 2.8s ease-in-out 0.25s infinite alternate;"></div>
      <div style="position:absolute;top:19%;right:2%;width:3%;height:1%;background:#00E5FF;transform:rotate(-15deg);border-radius:1px;animation:ts-confetti-drift 1.6s ease-in-out 0.70s infinite alternate;"></div>
      {{! Mid-left }}
      <div style="position:absolute;top:28%;left:1%;width:2%;height:4%;background:#FF3B5C;transform:rotate(35deg);border-radius:1px;animation:ts-confetti-drift 2.4s ease-in-out 1.00s infinite alternate;"></div>
      <div style="position:absolute;top:36%;left:3%;width:3%;height:1%;background:#FFD700;transform:rotate(-20deg);border-radius:1px;animation:ts-confetti-drift 2.0s ease-in-out 0.45s infinite alternate;"></div>
      <div style="position:absolute;top:44%;left:2%;width:1.5%;height:3%;background:#00C853;transform:rotate(20deg);border-radius:1px;animation:ts-confetti-drift 2.7s ease-in-out 1.20s infinite alternate;"></div>
      <div style="position:absolute;top:52%;left:4%;width:3%;height:1%;background:#D500F9;transform:rotate(-50deg);border-radius:1px;animation:ts-confetti-drift 1.9s ease-in-out 0.60s infinite alternate;"></div>
      {{! Mid-right }}
      <div style="position:absolute;top:32%;right:2%;width:3%;height:1%;background:#FFD700;transform:rotate(-25deg);border-radius:1px;animation:ts-confetti-drift 2.5s ease-in-out 0.85s infinite alternate;"></div>
      <div style="position:absolute;top:40%;right:1%;width:2%;height:4%;background:#2979FF;transform:rotate(-40deg);border-radius:1px;animation:ts-confetti-drift 1.7s ease-in-out 1.10s infinite alternate;"></div>
      <div style="position:absolute;top:48%;right:3%;width:1.5%;height:3%;background:#FF4081;transform:rotate(30deg);border-radius:1px;animation:ts-confetti-drift 2.9s ease-in-out 0.30s infinite alternate;"></div>
      <div style="position:absolute;top:56%;right:2%;width:3%;height:1%;background:#00E5FF;transform:rotate(15deg);border-radius:1px;animation:ts-confetti-drift 2.2s ease-in-out 0.75s infinite alternate;"></div>
      {{! Lower-left }}
      <div style="position:absolute;top:62%;left:2%;width:2%;height:4%;background:#FF9500;transform:rotate(-35deg);border-radius:1px;animation:ts-confetti-drift 2.6s ease-in-out 1.30s infinite alternate;"></div>
      <div style="position:absolute;top:70%;left:5%;width:3%;height:1%;background:#FF3B5C;transform:rotate(45deg);border-radius:1px;animation:ts-confetti-drift 1.8s ease-in-out 0.55s infinite alternate;"></div>
      <div style="position:absolute;top:78%;left:1%;width:2%;height:5%;background:#00C853;transform:rotate(-20deg);border-radius:1px;animation:ts-confetti-drift 2.3s ease-in-out 1.50s infinite alternate;"></div>
      <div style="position:absolute;top:85%;left:8%;width:4%;height:1.5%;background:#FFD700;transform:rotate(30deg);border-radius:1px;animation:ts-confetti-drift 3.1s ease-in-out 0.10s infinite alternate;"></div>
      {{! Lower-right }}
      <div style="position:absolute;top:65%;right:3%;width:3%;height:1%;background:#D500F9;transform:rotate(-45deg);border-radius:1px;animation:ts-confetti-drift 2.1s ease-in-out 1.00s infinite alternate;"></div>
      <div style="position:absolute;top:72%;right:1%;width:2%;height:4%;background:#FF4081;transform:rotate(25deg);border-radius:1px;animation:ts-confetti-drift 2.8s ease-in-out 0.40s infinite alternate;"></div>
      <div style="position:absolute;top:80%;right:4%;width:3%;height:1%;background:#2979FF;transform:rotate(-15deg);border-radius:1px;animation:ts-confetti-drift 1.9s ease-in-out 1.20s infinite alternate;"></div>
      <div style="position:absolute;top:87%;right:7%;width:1.5%;height:3%;background:#FF9500;transform:rotate(50deg);border-radius:1px;animation:ts-confetti-drift 2.4s ease-in-out 0.65s infinite alternate;"></div>
    </div>

    {{! Content }}
    <div style="position:absolute;top:0;left:0;right:0;bottom:7%;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:5%;text-align:center;">

      {{! Channel avatar circle }}
      <div style="width:{{#if widescreen}}16%{{else}}25%{{/if}};aspect-ratio:1/1;border-radius:50%;overflow:hidden;border:2px solid {{avatarBorder}};background:{{accentColor}};display:flex;align-items:center;justify-content:center;margin-bottom:{{#if widescreen}}2%{{else}}3%{{/if}};flex-shrink:0;">
        {{#if avatarSrc}}
          <img src="{{avatarSrc}}" style="width:100%;height:100%;object-fit:cover;" onerror="this.style.display='none'">
        {{else}}
          <span style="font-weight:700;font-size:{{#if widescreen}}1.4em{{else}}1.1em{{/if}};color:{{avatarBorder}};">{{channelInitial}}</span>
        {{/if}}
      </div>

      {{! Channel name }}
      <div style="font-size:{{#if widescreen}}0.9em{{else}}0.8em{{/if}};font-weight:700;color:{{textColor}};margin-bottom:{{#if widescreen}}1%{{else}}1.5%{{/if}};">{{channelName}}</div>

      {{! Stat number (e.g. "10K") — accent colour, smaller }}
      <div style="font-size:{{#if widescreen}}2em{{else}}1.8em{{/if}};font-weight:900;color:{{accentColor}};line-height:1;margin-bottom:0;">{{stat}}</div>

      {{! Label (e.g. "SUBSCRIBERS") — text colour, larger }}
      <div style="font-size:{{#if widescreen}}2.8em{{else}}2.4em{{/if}};font-weight:900;color:{{textColor}};text-transform:uppercase;line-height:1;margin-bottom:{{#if widescreen}}3%{{else}}4%{{/if}};">{{label}}</div>

      {{! Date }}
      <div style="font-size:{{#if widescreen}}0.85em{{else}}0.8em{{/if}};font-weight:700;color:{{accentColor}};">{{date}}</div>

    </div>

    {{! Footer accent bar }}
    <div style="position:absolute;bottom:5.5%;left:0;right:0;height:1.5%;background:{{accentColor}};"></div>

    {{! Footer panel }}
    <div style="position:absolute;bottom:0;left:0;right:0;height:5.5%;background:{{footerBgColor}};display:flex;align-items:center;justify-content:center;gap:7px;">
      <span style="font-size:{{#if widescreen}}0.6em{{else}}0.52em{{/if}};font-weight:700;color:{{footerTextColor}};">Created with</span>
      <img src="https://app.tubespanner.com/themes/custom/tubespanner_purple/images/logo.svg" style="height:{{#if widescreen}}13px{{else}}10px{{/if}};{{#unless darkTheme}}filter:invert(1);{{/unless}}" onerror="this.style.display='none'">
      <span style="font-size:{{#if widescreen}}0.6em{{else}}0.52em{{/if}};font-weight:700;color:{{footerTextColor}};">TubeSpanner</span>
    </div>

  {{/if}}

</div>


        
            
            {
  "golden": false,
  "widescreen": true,
  "bgColor": "#ffffff",
  "channelName": "Fluffy Kiwi",
  "channelInitial": "F",
  "avatarSrc": "",
  "stat": "10K",
  "label": "Subscribers",
  "date": "April 2026",
  "textColor": "#353535",
  "accentColor": "#712F79",
  "avatarBorder": "#000000",
  "footerBgColor": "#000000",
  "footerTextColor": "#ffffff",
  "darkTheme": false
}

Handle: @achievement-card--light-16x9
Variants (7): Default , Light — 1:1 , Light — 16:9 , Dark — 1:1 , Dark — 16:9 , Golden Spanner — 1:1 , Golden Spanner — 16:9
Preview:
- With layout
- Component only
Filesystem Path: src/components/03-molecules/achievement-card/achievement-card.hbs

Shareable milestone cards generated when a creator hits a subscriber, view, or upload milestone. Exported as a static image or animated video. Two styles: Standard (light/dark themes) and Golden Spanner (special achievements). Each available in 1:1 and 16:9 formats. The real implementation is canvas-based (TSCanvasAchievements / TsGoldenAchievementCard in achievements.js) with animated confetti (confettiBlast, confettiRain, simpleFireworks, moneyRain). Appears in: Achievements, Dashboard Recent Milestones.