+ Videos
+ Fresh from Discord
+ Automation
+ Memory
+ Voice & Phone
+ Infrastructure
+ Home & Hardware
+ Community
+ Submit a project
-[Watch on YouTube](https://www.youtube.com/watch?v=SaWSPZoPX34)
+Videos
-
-
+
@@ -160,7 +187,7 @@ Real-time departures, disruptions, elevator status, and routing for Vienna's pub
-
+
**@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.
-
+
**@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
-
+
**@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
-## π€ Automation & Workflows
+
@@ -285,7 +316,11 @@ Watches company Slack channel, responds helpfully, and forwards notifications to
-## π§ Knowledge & Memory
+
@@ -317,7 +352,11 @@ Watches company Slack channel, responds helpfully, and forwards notifications to
-## ποΈ Voice & Phone
+
@@ -335,7 +374,11 @@ Multi-lingual audio transcription via OpenRouter (Gemini, etc). Available on Cla
-## ποΈ Infrastructure & Deployment
+
@@ -365,7 +408,11 @@ Multi-lingual audio transcription via OpenRouter (Gemini, etc). Available on Cla
-## π Home & Hardware
+
@@ -387,7 +434,11 @@ Multi-lingual audio transcription via OpenRouter (Gemini, etc). Available on Cla
-## π Community Projects
+
@@ -401,7 +452,11 @@ Multi-lingual audio transcription via OpenRouter (Gemini, etc). Available on Cla
---
-## Submit Your Project
+
+ Start here if you want the shortest path from βwhat is this?β to βokay, I get it.β +
+ +
+
-[Watch on YouTube](https://www.youtube.com/watch?v=mMSKQvlmFuQ)
+
+
+
+
+
+
+ Full setup walkthrough
+VelvetShark, 28 minutes. Install, onboard, and get to a first working assistant end to end.
+ Watch on YouTube +
+
+
+
+
+
+ Community showcase reel
+A faster pass across real projects, surfaces, and workflows built around OpenClaw.
+ Watch on YouTube +
+
+
+
+ Projects in the wild
+Examples from the community, from chat-native coding loops to hardware and personal automation.
+ Watch on YouTube +Fresh from Discord
-
-
-
-
-[Watch on YouTube](https://www.youtube.com/watch?v=5kkIJNUGFho)
-
-## π Fresh from Discord
++ Recent standouts across coding, devtools, mobile, and chat-native product building. +
-
Automation & Workflows
+ ++ Scheduling, browser control, support loops, and the βjust do the task for meβ side of the product. +
Knowledge & Memory
+ ++ Systems that index, search, remember, and reason over personal or team knowledge. +
Voice & Phone
+ ++ Speech-first entry points, phone bridges, and transcription-heavy workflows. +
Infrastructure & Deployment
+ ++ Packaging, deployment, and integrations that make OpenClaw easier to run and extend. +
Home & Hardware
+ ++ The physical-world side of OpenClaw: homes, sensors, cameras, vacuums, and other devices. +
Community Projects
+ ++ Things that grew beyond a single workflow into broader products or ecosystems. +
Submit Your Project
+ ++ If you are building something interesting with OpenClaw, send it over. Strong screenshots and concrete outcomes help. +
Have something to share? We'd love to feature it! diff --git a/docs/style.css b/docs/style.css index a972ac0852f..13ebbd47648 100644 --- a/docs/style.css +++ b/docs/style.css @@ -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; + } +}