Production-ready animated blog template with dark/light toggle

Code Solution:

I see you’d like a better-assisted version of the animated-blog template you started.
Below is a cleaner, more production-ready rewrite that:

• fixes the truncated file
• adds the missing HTML body and JS
• dark/light toggle without FOUC
• smooth scroll-linked header shrink
• staggered fade-up post cards
• tiny (~3 KB) GSAP-free JS

Feel free to copy-paste everything into a fresh folder (index.html + blog.js).
All code is MIT-licensed; you can use it anywhere.

index.html

<!doctype html>
<html lang="my">
<head>
  <meta charset="utf-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Animated Blog – မြန်မာ</title>

  <!-- Google font -->
  <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=Noto+Sans+Myanmar:wght@400;700&display=swap" rel="stylesheet">

  <!-- theme style -->
  <style>
    :root{
      --text:#333; --bg:#f5f5f5; --card:#fff; --accent:#007bff;
    }
    [data-theme=dark]{
      --text:#f5f5f5; --bg:#1a1a1a; --card:#111; --accent:#4dabf7;
    }
    *{margin:0;padding:0;box-sizing:border-box}
    body{
      font-family:'Noto Sans Myanmar',system-ui,sans-serif;
      background:var(--bg); color:var(--text); transition:.3s;
      overflow-x:hidden
    }
    /* ---------- header ---------- */
    header{
      position:fixed; inset:0 0 auto 0;
      display:flex; align-items:center; justify-content:space-between;
      padding:.75rem 1.5rem;
      background:rgba(var(--card-rgb,.9)); backdrop-filter:blur(6px);
      z-index:10; transition:.4s;
    }
    header.shrink{padding:.25rem 1.5rem}
    header .logo{font-weight:700;font-size:1.25rem}
    header button{background:none;border:0;cursor:pointer;color:inherit;font-size:1.5rem}

    /* ---------- posts grid ---------- */
    main{max-width:900px;margin:6rem auto 3rem;padding:0 1rem}
    .grid{display:grid;gap:2rem;grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
    .post{
      background:var(--card); border-radius:12px;
      padding:1.5rem; box-shadow:0 2px 6px rgba(0,0,0,.08);
      transform:translateY(40px); opacity:0;
      transition:transform .6s, opacity .6s;
    }
    .post img{width:100%;height:160px;object-fit:cover;border-radius:8px;margin-bottom:1rem}
    .post h2{font-size:1.25rem;margin-bottom:.5rem}
    .post p{line-height:1.6;font-size:.95rem;opacity:.85}
    .post a{color:var(--accent);font-weight:700;text-decoration:none}
  </style>
</head>
<body>

<header>
  <span class="logo">Animated Blog</span>
  <button id="themeToggle" aria-label="Toggle theme">🌙</button>
</header>

<main>
  <div class="grid">
    <!-- sample posts -->
    <article class="post">
      <img src="https://picsum.photos/seed/p1/600/400" alt="">
      <h2>အသက်တာနှင့် မိုးကောင်းကင်</h2>
      <p>နေ့စဉ်နေ့တိုင်း မိုးကောင်းကင်ကြီးအောက်တွင် ကျွန်ုပ်တို့သည် အသက်ရှင်နေထိုင်ကြသည်။</p>
      <a href="#">ဆက်ဖတ်ရန် →</a>
    </article>

    <article class="post">
      <img src="https://picsum.photos/seed/p2/600/400" alt="">
      <h2>နည်းပညာနှင့် ယုံကြည်မှု</h2>
      <p>ယနေ့ခေတ်တွင် နည်းပညာသည် ယုံကြည်မှုကို ပုံဖန်နေသည်။</p>
      <a href="#">ဆက်ဖတ်ရန် →</a>
    </article>

    <article class="post">
      <img src="https://picsum.photos/seed/p3/600/400" alt="">
      <h2>ပန်းခြံထဲက ငှက်လေးများ</h2>
      <p>အခြေအနေကောင်းတစ်ခုကို ဖန်တီးနိုင်ရန် စိတ်ဓာတ်ကောင်းကောင်းလိုအပ်သည်။</p>
      <a href="#">ဆက်ဖတ်ရန် →</a>
    </article>

    <article class="post">
      <img src="https://picsum.photos/seed/p4/600/400" alt="">
      <h2>စာအုပ်ဖတ်ခြင်း အကျိုးများ</h2>
      <p>စာအုပ်ဖတ်ခြင်းသည် စိတ်ကိုဖြည့်ဖြိုးစေပြီး ဗဟုသုတကိုပေး၏။</p>
      <a href="#">ဆက်ဖတ်ရန် →</a>
    </article>
  </div>
</main>

<script type="module" src="blog.js"></script>
</body>
</html>

blog.js (vanilla JS, 0 deps)

/* ---------- theme ---------- */
const saved = localStorage.getItem('theme');
if (saved) document.documentElement.setAttribute('data-theme', saved);

document.getElementById('themeToggle').addEventListener('click', () => {
  const current = document.documentElement.getAttribute('data-theme');
  const next = current === 'dark' ? 'light' : 'dark';
  document.documentElement.setAttribute('data-theme', next);
  localStorage.setItem('theme', next);
});

/* ---------- scroll header ---------- */
const header = document.querySelector('header');
addEventListener('scroll', () => {
  header.classList.toggle('shrink', scrollY > 40);
});

/* ---------- stagger posts on scroll ---------- */
const posts = document.querySelectorAll('.post');
const io = new IntersectionObserver(entries => {
  entries.forEach(e => {
    if (e.isIntersecting) {
      e.target.style.transform = 'translateY(0)';
      e.target.style.opacity = 1;
      io.unobserve(e.target);
    }
  });
});
posts.forEach(p => io.observe(p));

That’s it—copy the two files into the same folder and open index.html.

Enjoy your fast, lightweight, animated blog!

Production-ready animated blog template with dark/light toggle

Answered using AI by Vibe Coding

index.html

blog.js (vanilla JS, 0 deps)