diff --git a/website/public/example.gif b/website/public/example.gif
deleted file mode 100644
index d1c8ad5..0000000
Binary files a/website/public/example.gif and /dev/null differ
diff --git a/website/public/example.webp b/website/public/example.webp
new file mode 100644
index 0000000..d8585bd
Binary files /dev/null and b/website/public/example.webp differ
diff --git a/website/public/widget-default.gif b/website/public/widget-default.gif
deleted file mode 100644
index 182e04b..0000000
Binary files a/website/public/widget-default.gif and /dev/null differ
diff --git a/website/public/widget-default.webp b/website/public/widget-default.webp
new file mode 100644
index 0000000..55c9ca5
Binary files /dev/null and b/website/public/widget-default.webp differ
diff --git a/website/public/widget-icon.gif b/website/public/widget-icon.gif
deleted file mode 100644
index c6fb203..0000000
Binary files a/website/public/widget-icon.gif and /dev/null differ
diff --git a/website/public/widget-icon.webp b/website/public/widget-icon.webp
new file mode 100644
index 0000000..c149ea0
Binary files /dev/null and b/website/public/widget-icon.webp differ
diff --git a/website/public/widget-small.gif b/website/public/widget-small.gif
deleted file mode 100644
index 8caa8e3..0000000
Binary files a/website/public/widget-small.gif and /dev/null differ
diff --git a/website/public/widget-small.webp b/website/public/widget-small.webp
new file mode 100644
index 0000000..1fcbbd4
Binary files /dev/null and b/website/public/widget-small.webp differ
diff --git a/website/src/components/Header.astro b/website/src/components/Header.astro
index 4437f17..b6791a1 100644
--- a/website/src/components/Header.astro
+++ b/website/src/components/Header.astro
@@ -14,6 +14,7 @@ const shouldRenderSearch =
     </div>
     <nav class="header-nav">
       <a href="/getting-started/introduction/" class="header-link">Docs</a>
+      <a href="/contributors/" class="header-link">Contributors</a>
       <a href="https://check.aeojs.org" target="_blank" rel="noopener" class="header-link">Checker</a>
     </nav>
   </div>
diff --git a/website/src/components/HomepageContributors.astro b/website/src/components/HomepageContributors.astro
new file mode 100644
index 0000000..8ac0bda
--- /dev/null
+++ b/website/src/components/HomepageContributors.astro
@@ -0,0 +1,126 @@
+---
+type GhContributor = {
+  login: string;
+  avatar_url: string;
+  html_url: string;
+  contributions: number;
+  type: string;
+};
+
+let contributors: GhContributor[] = [];
+
+try {
+  const res = await fetch(
+    'https://api.github.com/repos/multivmlabs/aeo.js/contributors?per_page=100',
+    { headers: { 'User-Agent': 'aeojs-docs-build', Accept: 'application/vnd.github+json' } }
+  );
+  if (res.ok) {
+    const data = (await res.json()) as GhContributor[];
+    contributors = data
+      .filter((c) => c.type === 'User')
+      .sort((a, b) => b.contributions - a.contributions);
+  }
+} catch {
+  // Silently skip the strip on fetch failure — homepage stays clean.
+}
+
+const top = contributors.slice(0, 8);
+const remaining = Math.max(0, contributors.length - top.length);
+---
+
+{contributors.length > 0 && (
+  <section class="contrib-strip">
+    <h2 class="contrib-strip-title">Built by</h2>
+    <div class="contrib-strip-row">
+      {top.map((c) => (
+        <a
+          href={c.html_url}
+          target="_blank"
+          rel="noopener"
+          class="contrib-strip-avatar"
+          title={`${c.login} — ${c.contributions} commit${c.contributions === 1 ? '' : 's'}`}
+        >
+          <img
+            src={`${c.avatar_url}&s=80`}
+            alt={c.login}
+            width="40"
+            height="40"
+            loading="lazy"
+            decoding="async"
+          />
+        </a>
+      ))}
+      {remaining > 0 && (
+        <a href="/contributors/" class="contrib-strip-more" aria-label={`${remaining} more contributors`}>
+          +{remaining}
+        </a>
+      )}
+    </div>
+    <a href="/contributors/" class="contrib-strip-link">
+      View all {contributors.length} contributor{contributors.length === 1 ? '' : 's'} →
+    </a>
+  </section>
+)}
+
+<style>
+  .contrib-strip {
+    margin: 4rem auto 2rem;
+    text-align: center;
+    max-width: 60rem;
+  }
+  .contrib-strip-title {
+    font-size: 0.85rem;
+    font-weight: 500;
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
+    color: rgba(255, 255, 255, 0.4);
+    margin-bottom: 1rem;
+  }
+  .contrib-strip-row {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: 0.5rem;
+    margin-bottom: 1rem;
+  }
+  .contrib-strip-avatar,
+  .contrib-strip-more {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    overflow: hidden;
+    background: rgba(255, 255, 255, 0.05);
+    border: 1px solid rgba(255, 255, 255, 0.08);
+    transition: border-color 0.15s ease, transform 0.15s ease;
+    text-decoration: none;
+  }
+  .contrib-strip-avatar:hover,
+  .contrib-strip-more:hover {
+    border-color: rgba(255, 255, 255, 0.3);
+    transform: translateY(-1px);
+  }
+  .contrib-strip-avatar img {
+    width: 100%;
+    height: 100%;
+    display: block;
+    object-fit: cover;
+  }
+  .contrib-strip-more {
+    font-size: 0.75rem;
+    font-weight: 500;
+    color: rgba(255, 255, 255, 0.7);
+  }
+  .contrib-strip-link {
+    display: inline-block;
+    font-size: 0.85rem;
+    color: rgba(255, 255, 255, 0.5);
+    text-decoration: none;
+    transition: color 0.15s ease;
+  }
+  .contrib-strip-link:hover {
+    color: #fff;
+  }
+</style>
diff --git a/website/src/content/docs/features/widget.mdx b/website/src/content/docs/features/widget.mdx
index 7fa47fe..0f8e174 100644
--- a/website/src/content/docs/features/widget.mdx
+++ b/website/src/content/docs/features/widget.mdx
@@ -91,7 +91,7 @@ widget: {
 
 | Default | Small | Icon |
 |---------|-------|------|
-| ![Default widget](/widget-default.gif) | ![Small widget](/widget-small.gif) | ![Icon widget](/widget-icon.gif) |
+| ![Default widget](/widget-default.webp) | ![Small widget](/widget-small.webp) | ![Icon widget](/widget-icon.webp) |
 | `size: 'default'` | `size: 'small'` | `size: 'icon-only'` |
 | Full labels with icons | Compact — ~30% smaller | Just icons, no labels |
 
diff --git a/website/src/content/docs/getting-started/introduction.mdx b/website/src/content/docs/getting-started/introduction.mdx
index cef0064..e409f14 100644
--- a/website/src/content/docs/getting-started/introduction.mdx
+++ b/website/src/content/docs/getting-started/introduction.mdx
@@ -3,7 +3,7 @@ title: Introduction
 description: What is aeo.js and why you need Answer Engine Optimization.
 ---
 
-![aeo.js in action](/example.gif)
+![aeo.js in action](/example.webp)
 
 ## What is Answer Engine Optimization?
 
diff --git a/website/src/content/docs/index.mdx b/website/src/content/docs/index.mdx
index b9b7851..c8704c0 100644
--- a/website/src/content/docs/index.mdx
+++ b/website/src/content/docs/index.mdx
@@ -16,6 +16,7 @@ hero:
 
 import { Tabs, TabItem } from '@astrojs/starlight/components';
 import StickyNav from '../../components/StickyNav.astro';
+import HomepageContributors from '../../components/HomepageContributors.astro';
 
 <StickyNav />
 
@@ -304,3 +305,5 @@ public/
   </form>
   <p style={{textAlign: 'center', fontSize: '0.8rem', color: 'rgba(255,255,255,0.3)', marginTop: '0.75rem'}}>Free — no signup required. Powered by <a href="https://check.aeojs.org" style={{color: 'rgba(255,255,255,0.5)', textDecoration: 'underline', textUnderlineOffset: '2px'}}>AEO Checker</a></p>
 </div>
+
+<HomepageContributors />
diff --git a/website/src/pages/contributors.astro b/website/src/pages/contributors.astro
new file mode 100644
index 0000000..6b1cbff
--- /dev/null
+++ b/website/src/pages/contributors.astro
@@ -0,0 +1,149 @@
+---
+import StarlightPage from '@astrojs/starlight/components/StarlightPage.astro';
+
+type GhContributor = {
+  login: string;
+  avatar_url: string;
+  html_url: string;
+  contributions: number;
+  type: string;
+};
+
+let contributors: GhContributor[] = [];
+let fetchError = false;
+
+try {
+  const res = await fetch(
+    'https://api.github.com/repos/multivmlabs/aeo.js/contributors?per_page=100',
+    { headers: { 'User-Agent': 'aeojs-docs-build', Accept: 'application/vnd.github+json' } }
+  );
+  if (res.ok) {
+    const data = (await res.json()) as GhContributor[];
+    contributors = data
+      .filter((c) => c.type === 'User')
+      .sort((a, b) => b.contributions - a.contributions);
+  } else {
+    fetchError = true;
+  }
+} catch {
+  fetchError = true;
+}
+---
+
+<StarlightPage
+  frontmatter={{
+    title: 'Contributors',
+    description: 'The people who make aeo.js possible.',
+    tableOfContents: false,
+  }}
+>
+  {fetchError ? (
+    <p class="contrib-fallback">
+      Couldn't load contributors right now. View the full list on
+      <a href="https://github.com/multivmlabs/aeo.js/graphs/contributors" target="_blank" rel="noopener">
+        GitHub
+      </a>
+      .
+    </p>
+  ) : (
+    <>
+      <p class="contrib-intro">
+        {contributors.length} contributor{contributors.length === 1 ? '' : 's'} have shaped aeo.js. Thank you. 🙏
+      </p>
+      <ul class="contrib-grid">
+        {contributors.map((c) => (
+          <li class="contrib-card">
+            <a href={c.html_url} target="_blank" rel="noopener" class="contrib-link">
+              <img
+                src={`${c.avatar_url}&s=120`}
+                alt={`${c.login} avatar`}
+                width="60"
+                height="60"
+                loading="lazy"
+                decoding="async"
+                class="contrib-avatar"
+              />
+              <span class="contrib-name">{c.login}</span>
+              <span class="contrib-count">
+                {c.contributions} commit{c.contributions === 1 ? '' : 's'}
+              </span>
+            </a>
+          </li>
+        ))}
+      </ul>
+      <p class="contrib-cta">
+        Want to join them?
+        <a href="https://github.com/multivmlabs/aeo.js" target="_blank" rel="noopener">
+          Open a PR
+        </a>
+        .
+      </p>
+    </>
+  )}
+</StarlightPage>
+
+<style>
+  .contrib-intro,
+  .contrib-cta,
+  .contrib-fallback {
+    text-align: center;
+    color: rgba(255, 255, 255, 0.6);
+    font-size: 0.95rem;
+    margin: 1.5rem 0;
+  }
+  .contrib-intro a,
+  .contrib-cta a,
+  .contrib-fallback a {
+    color: #fff;
+    text-decoration: underline;
+    text-underline-offset: 0.2em;
+  }
+  .contrib-grid {
+    list-style: none;
+    padding: 0;
+    margin: 2rem 0;
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
+    gap: 0.75rem;
+  }
+  .contrib-card {
+    margin: 0;
+  }
+  .contrib-link {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 1rem 0.75rem;
+    border-radius: 12px;
+    background: rgba(255, 255, 255, 0.03);
+    border: 1px solid rgba(255, 255, 255, 0.08);
+    color: inherit;
+    text-decoration: none;
+    transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
+  }
+  .contrib-link:hover {
+    border-color: rgba(255, 255, 255, 0.2);
+    background: rgba(255, 255, 255, 0.06);
+    transform: translateY(-1px);
+  }
+  .contrib-avatar {
+    width: 60px;
+    height: 60px;
+    border-radius: 50%;
+    display: block;
+  }
+  .contrib-name {
+    font-size: 0.85rem;
+    font-weight: 500;
+    color: #fff;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    max-width: 100%;
+  }
+  .contrib-count {
+    font-size: 0.75rem;
+    color: rgba(255, 255, 255, 0.5);
+  }
+</style>