docs: modernize showcase page (#48493) (thanks @jchopard69) (#48493)

Co-authored-by: Jordan Simon-Chopard <jchopard@MacBook-Air-de-Jordan-3.local>
2026-04-14 15:42:04 +02:00
parent d86527d8c6
commit dae060390b
3 changed files with 277 additions and 76 deletions
@@ -6,6 +6,8 @@ Docs: https://docs.openclaw.ai

 ### Changes

+- Docs/showcase: add a scannable hero, complete section jump links, and a responsive video grid for community examples. (#48493) Thanks @jchopard69.
+
 ### Fixes

 ## 2026.4.14
@@ -1,90 +1,117 @@
 ---
 title: "Showcase"
+description: "Real-world OpenClaw projects from the community"
 summary: "Community-built projects and integrations powered by OpenClaw"
 read_when:
  - Looking for real OpenClaw usage examples
  - Updating community project highlights
 ---

+<!-- markdownlint-disable MD033 -->
+
 # Showcase

-Real projects from the community. See what people are building with OpenClaw.
+<div className="showcase-hero">
+  <p className="showcase-kicker">Built in chats, terminals, browsers, and living rooms</p>
+  <p className="showcase-lead">
+    OpenClaw projects are not toy demos. People are shipping PR review loops, mobile apps, home automation,
+    voice systems, devtools, and memory-heavy workflows from the channels they already use.
+  </p>
+  <div className="showcase-actions">
+    <a href="#videos">Watch demos</a>
+    <a href="#fresh-from-discord">Browse projects</a>
+    <a href="https://discord.gg/clawd">Share yours</a>
+  </div>
+  <div className="showcase-highlights">
+    <div className="showcase-highlight">
+      <strong>Chat-native builds</strong>
+      <span>Telegram, WhatsApp, Discord, Beeper, web chat, and terminal-first workflows.</span>
+    </div>
+    <div className="showcase-highlight">
+      <strong>Real automation</strong>
+      <span>Booking, shopping, support, reporting, and browser control without waiting for an API.</span>
+    </div>
+    <div className="showcase-highlight">
+      <strong>Local + physical world</strong>
+      <span>Printers, vacuums, cameras, health data, home systems, and personal knowledge bases.</span>
+    </div>
+  </div>
+</div>

 <Info>
 **Want to be featured?** Share your project in [#self-promotion on Discord](https://discord.gg/clawd) or [tag @openclaw on X](https://x.com/openclaw).
 </Info>

-## 🎥 OpenClaw in Action
-
-Full setup walkthrough (28m) by VelvetShark.
-
-<div
-  style={{
-    position: "relative",
-    paddingBottom: "56.25%",
-    height: 0,
-    overflow: "hidden",
-    borderRadius: 16,
-  }}
->
-  <iframe
-    src="https://www.youtube-nocookie.com/embed/SaWSPZoPX34"
-    title="OpenClaw: The self-hosted AI that Siri should have been (Full setup)"
-    style={{ position: "absolute", top: 0, left: 0, width: "100%", height: "100%" }}
-    frameBorder="0"
-    loading="lazy"
-    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
-    allowFullScreen
-  />
+<div className="showcase-jump-links">
+  <a href="#videos">Videos</a>
+  <a href="#fresh-from-discord">Fresh from Discord</a>
+  <a href="#automation-workflows">Automation</a>
+  <a href="#knowledge-memory">Memory</a>
+  <a href="#voice-phone">Voice &amp; Phone</a>
+  <a href="#infrastructure-deployment">Infrastructure</a>
+  <a href="#home-hardware">Home &amp; Hardware</a>
+  <a href="#community-projects">Community</a>
+  <a href="#submit-your-project">Submit a project</a>
 </div>

-[Watch on YouTube](https://www.youtube.com/watch?v=SaWSPZoPX34)
+<h2 id="videos">Videos</h2>

-<div
-  style={{
-    position: "relative",
-    paddingBottom: "56.25%",
-    height: 0,
-    overflow: "hidden",
-    borderRadius: 16,
-  }}
->
-  <iframe
-    src="https://www.youtube-nocookie.com/embed/mMSKQvlmFuQ"
-    title="OpenClaw showcase video"
-    style={{ position: "absolute", top: 0, left: 0, width: "100%", height: "100%" }}
-    frameBorder="0"
-    loading="lazy"
-    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
-    allowFullScreen
-  />
+<p className="showcase-section-intro">
+  Start here if you want the shortest path from “what is this?” to “okay, I get it.”
+</p>
+
+<div className="showcase-video-grid">
+  <div className="showcase-video-card">
+    <div className="showcase-video-shell">
+      <iframe
+        src="https://www.youtube-nocookie.com/embed/SaWSPZoPX34"
+        title="OpenClaw: The self-hosted AI that Siri should have been (Full setup)"
+        loading="lazy"
+        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+        allowFullScreen
+      />
+    </div>
+    <h3>Full setup walkthrough</h3>
+    <p>VelvetShark, 28 minutes. Install, onboard, and get to a first working assistant end to end.</p>
+    <a href="https://www.youtube.com/watch?v=SaWSPZoPX34">Watch on YouTube</a>
+  </div>
+
+  <div className="showcase-video-card">
+    <div className="showcase-video-shell">
+      <iframe
+        src="https://www.youtube-nocookie.com/embed/mMSKQvlmFuQ"
+        title="OpenClaw showcase video"
+        loading="lazy"
+        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+        allowFullScreen
+      />
+    </div>
+    <h3>Community showcase reel</h3>
+    <p>A faster pass across real projects, surfaces, and workflows built around OpenClaw.</p>
+    <a href="https://www.youtube.com/watch?v=mMSKQvlmFuQ">Watch on YouTube</a>
+  </div>
+
+  <div className="showcase-video-card">
+    <div className="showcase-video-shell">
+      <iframe
+        src="https://www.youtube-nocookie.com/embed/5kkIJNUGFho"
+        title="OpenClaw community showcase"
+        loading="lazy"
+        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+        allowFullScreen
+      />
+    </div>
+    <h3>Projects in the wild</h3>
+    <p>Examples from the community, from chat-native coding loops to hardware and personal automation.</p>
+    <a href="https://www.youtube.com/watch?v=5kkIJNUGFho">Watch on YouTube</a>
+  </div>
 </div>

-[Watch on YouTube](https://www.youtube.com/watch?v=mMSKQvlmFuQ)
+<h2 id="fresh-from-discord">Fresh from Discord</h2>

-<div
-  style={{
-    position: "relative",
-    paddingBottom: "56.25%",
-    height: 0,
-    overflow: "hidden",
-    borderRadius: 16,
-  }}
->
-  <iframe
-    src="https://www.youtube-nocookie.com/embed/5kkIJNUGFho"
-    title="OpenClaw community showcase"
-    style={{ position: "absolute", top: 0, left: 0, width: "100%", height: "100%" }}
-    frameBorder="0"
-    loading="lazy"
-    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
-    allowFullScreen
-  />
-</div>
-
-[Watch on YouTube](https://www.youtube.com/watch?v=5kkIJNUGFho)
-
-## 🆕 Fresh from Discord
+<p className="showcase-section-intro">
+  Recent standouts across coding, devtools, mobile, and chat-native product building.
+</p>

 <CardGroup cols={2}>

@@ -160,7 +187,7 @@ Real-time departures, disruptions, elevator status, and routing for Vienna's pub
  <img src="/assets/showcase/wienerlinien.png" alt="Wiener Linien skill on ClawHub" />
 </Card>

-<Card title="ParentPay School Meals" icon="utensils" href="#">
+<Card title="ParentPay School Meals" icon="utensils">
  **@George5562** • `automation` `browser` `parenting`

 Automated UK school meal booking via ParentPay. Uses mouse coordinates for reliable table cell clicking.
@@ -172,7 +199,7 @@ Automated UK school meal booking via ParentPay. Uses mouse coordinates for relia
 Upload to Cloudflare R2/S3 and generate secure presigned download links. Perfect for remote OpenClaw instances.
 </Card>

-<Card title="iOS App via Telegram" icon="mobile" href="#">
+<Card title="iOS App via Telegram" icon="mobile">
  **@coard** • `ios` `xcode` `testflight`

 Built a complete iOS app with maps and voice recording, deployed to TestFlight entirely via Telegram chat.
@@ -180,7 +207,7 @@ Built a complete iOS app with maps and voice recording, deployed to TestFlight e
  <img src="/assets/showcase/ios-testflight.jpg" alt="iOS app on TestFlight" />
 </Card>

-<Card title="Oura Ring Health Assistant" icon="heart-pulse" href="#">
+<Card title="Oura Ring Health Assistant" icon="heart-pulse">
  **@AS** • `health` `oura` `calendar`

 Personal AI health assistant integrating Oura ring data with calendar, appointments, and gym schedule.
@@ -207,7 +234,11 @@ Read, send, and archive messages via Beeper Desktop. Uses Beeper local MCP API s

 </CardGroup>

-## 🤖 Automation & Workflows
+<h2 id="automation-workflows">Automation &amp; Workflows</h2>
+
+<p className="showcase-section-intro">
+  Scheduling, browser control, support loops, and the “just do the task for me” side of the product.
+</p>

 <CardGroup cols={2}>

@@ -285,7 +316,11 @@ Watches company Slack channel, responds helpfully, and forwards notifications to

 </CardGroup>

-## 🧠 Knowledge & Memory
+<h2 id="knowledge-memory">Knowledge &amp; Memory</h2>
+
+<p className="showcase-section-intro">
+  Systems that index, search, remember, and reason over personal or team knowledge.
+</p>

 <CardGroup cols={2}>

@@ -317,7 +352,11 @@ Watches company Slack channel, responds helpfully, and forwards notifications to

 </CardGroup>

-## 🎙️ Voice & Phone
+<h2 id="voice-phone">Voice &amp; Phone</h2>
+
+<p className="showcase-section-intro">
+  Speech-first entry points, phone bridges, and transcription-heavy workflows.
+</p>

 <CardGroup cols={2}>

@@ -335,7 +374,11 @@ Multi-lingual audio transcription via OpenRouter (Gemini, etc). Available on Cla

 </CardGroup>

-## 🏗️ Infrastructure & Deployment
+<h2 id="infrastructure-deployment">Infrastructure &amp; Deployment</h2>
+
+<p className="showcase-section-intro">
+  Packaging, deployment, and integrations that make OpenClaw easier to run and extend.
+</p>

 <CardGroup cols={2}>

@@ -365,7 +408,11 @@ Multi-lingual audio transcription via OpenRouter (Gemini, etc). Available on Cla

 </CardGroup>

-## 🏠 Home & Hardware
+<h2 id="home-hardware">Home &amp; Hardware</h2>
+
+<p className="showcase-section-intro">
+  The physical-world side of OpenClaw: homes, sensors, cameras, vacuums, and other devices.
+</p>

 <CardGroup cols={2}>

@@ -387,7 +434,11 @@ Multi-lingual audio transcription via OpenRouter (Gemini, etc). Available on Cla

 </CardGroup>

-## 🌟 Community Projects
+<h2 id="community-projects">Community Projects</h2>
+
+<p className="showcase-section-intro">
+  Things that grew beyond a single workflow into broader products or ecosystems.
+</p>

 <CardGroup cols={2}>

@@ -401,7 +452,11 @@ Multi-lingual audio transcription via OpenRouter (Gemini, etc). Available on Cla

 ---

-## Submit Your Project
+<h2 id="submit-your-project">Submit Your Project</h2>
+
+<p className="showcase-section-intro">
+  If you are building something interesting with OpenClaw, send it over. Strong screenshots and concrete outcomes help.
+</p>

 Have something to share? We'd love to feature it!

@@ -35,3 +35,147 @@ html.dark .nav-tabs-underline {
 .nav-tabs-underline-ready .nav-tabs-underline {
  opacity: 1;
 }
+
+.showcase-hero {
+  display: grid;
+  gap: 18px;
+  margin: 8px 0 22px;
+  padding: clamp(18px, 3vw, 30px);
+  border: 1px solid color-mix(in oklab, rgb(var(--primary)) 24%, transparent);
+  border-radius: 8px;
+  background: color-mix(in oklab, rgb(var(--primary)) 5%, transparent);
+  box-shadow: 0 18px 48px -34px rgba(0, 0, 0, 0.45);
+}
+
+.showcase-kicker {
+  margin: 0;
+  font-size: 12px;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  opacity: 0.72;
+}
+
+.showcase-lead {
+  margin: 0;
+  max-width: 48rem;
+  font-size: clamp(18px, 2vw, 23px);
+  line-height: 1.6;
+}
+
+.showcase-actions,
+.showcase-jump-links {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+}
+
+.showcase-actions a,
+.showcase-jump-links a {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 40px;
+  padding: 0 14px;
+  border: 1px solid color-mix(in oklab, rgb(var(--primary)) 24%, transparent);
+  border-bottom: 1px solid color-mix(in oklab, rgb(var(--primary)) 24%, transparent);
+  border-radius: 8px;
+  background: color-mix(in oklab, rgb(var(--primary)) 4%, transparent);
+  text-decoration: none;
+  transition: transform 0.16s ease, border-color 0.16s ease, background 0.16s ease;
+}
+
+.showcase-actions a:first-child {
+  background: color-mix(in oklab, rgb(var(--primary)) 12%, transparent);
+  border-color: color-mix(in oklab, rgb(var(--primary)) 36%, transparent);
+}
+
+.showcase-actions a:hover,
+.showcase-jump-links a:hover {
+  transform: translateY(-1px);
+  border-color: color-mix(in oklab, rgb(var(--primary)) 46%, transparent);
+}
+
+.showcase-highlights {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 12px;
+}
+
+.showcase-highlight,
+.showcase-video-card {
+  border: 1px solid color-mix(in oklab, rgb(var(--primary)) 18%, transparent);
+  border-radius: 8px;
+  background: color-mix(in oklab, rgb(var(--primary)) 3%, transparent);
+}
+
+.showcase-highlight {
+  padding: 14px;
+}
+
+.showcase-highlight strong {
+  display: block;
+  margin-bottom: 6px;
+}
+
+.showcase-highlight span,
+.showcase-section-intro,
+.showcase-video-card p {
+  opacity: 0.74;
+}
+
+.showcase-jump-links {
+  margin: 18px 0 28px;
+}
+
+.showcase-section-intro {
+  margin: 0 0 16px;
+}
+
+.showcase-video-grid {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 18px;
+  margin: 0 0 28px;
+}
+
+.showcase-video-card {
+  padding: 14px;
+  box-shadow: 0 18px 44px -32px rgba(0, 0, 0, 0.48);
+}
+
+.showcase-video-card h3 {
+  margin: 0 0 8px;
+}
+
+.showcase-video-card p {
+  margin: 0 0 12px;
+}
+
+.showcase-video-card a {
+  border-bottom: 0;
+}
+
+.showcase-video-shell {
+  position: relative;
+  margin-bottom: 14px;
+  padding-bottom: 56.25%;
+  overflow: hidden;
+  border-radius: 8px;
+  background: #0a0a0a;
+}
+
+.showcase-video-shell iframe {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  border: 0;
+}
+
+@media (max-width: 960px) {
+  .showcase-highlights,
+  .showcase-video-grid {
+    grid-template-columns: 1fr;
+  }
+}