diff --git a/website/public/example.gif b/website/public/example.gif
new file mode 100644
index 0000000..d1c8ad5
Binary files /dev/null and b/website/public/example.gif differ
diff --git a/website/public/widget-default.gif b/website/public/widget-default.gif
new file mode 100644
index 0000000..182e04b
Binary files /dev/null and b/website/public/widget-default.gif differ
diff --git a/website/public/widget-icon.gif b/website/public/widget-icon.gif
new file mode 100644
index 0000000..c6fb203
Binary files /dev/null and b/website/public/widget-icon.gif differ
diff --git a/website/public/widget-small.gif b/website/public/widget-small.gif
new file mode 100644
index 0000000..8caa8e3
Binary files /dev/null and b/website/public/widget-small.gif differ
diff --git a/website/src/content/docs/features/widget.mdx b/website/src/content/docs/features/widget.mdx
index 840220b..7fa47fe 100644
--- a/website/src/content/docs/features/widget.mdx
+++ b/website/src/content/docs/features/widget.mdx
@@ -74,6 +74,7 @@ import { AeoVueWidget } from 'aeo.js/vue';
 widget: {
   enabled: true,
   position: 'bottom-right', // 'bottom-left' | 'top-right' | 'top-left'
+  size: 'default',          // 'small' | 'icon-only'
   humanLabel: 'Human',
   aiLabel: 'AI',
   showBadge: true,
@@ -86,6 +87,14 @@ widget: {
 }
 ```
 
+## Size variants
+
+| Default | Small | Icon |
+|---------|-------|------|
+| ![Default widget](/widget-default.gif) | ![Small widget](/widget-small.gif) | ![Icon widget](/widget-icon.gif) |
+| `size: 'default'` | `size: 'small'` | `size: 'icon-only'` |
+| Full labels with icons | Compact — ~30% smaller | Just icons, no labels |
+
 <Aside type="tip">
 Set `widget.enabled: false` to disable the widget entirely while still generating AEO files.
 </Aside>
diff --git a/website/src/content/docs/getting-started/introduction.mdx b/website/src/content/docs/getting-started/introduction.mdx
index ef9527a..cef0064 100644
--- a/website/src/content/docs/getting-started/introduction.mdx
+++ b/website/src/content/docs/getting-started/introduction.mdx
@@ -3,6 +3,8 @@ title: Introduction
 description: What is aeo.js and why you need Answer Engine Optimization.
 ---
 
+![aeo.js in action](/example.gif)
+
 ## What is Answer Engine Optimization?
 
 Answer Engine Optimization (AEO) is the practice of making your website discoverable and citable by AI-powered answer engines like **ChatGPT**, **Claude**, **Perplexity**, and **SearchGPT**.