gallery community showcase user-generated projects grid creator social-proof community showcase gallery user-generated creator projects open-source social-proof community showcase grid with creator attribution made with X project gallery section user-generated content grid with submit CTA
Gallery Community Showcase
Fetch pattern JSON:
curl https://webspire.de/patterns/gallery/community-showcase.json community-showcase.html
<section class="ws-gallery bg-[var(--ws-gallery-bg)] py-20">
<div class="mx-auto max-w-7xl px-6">
<div class="mx-auto max-w-2xl text-center">
<p class="text-sm font-semibold uppercase tracking-[0.18em] text-[var(--ws-gallery-text-soft)]">Community</p>
<h2 class="mt-3 text-balance text-3xl font-bold tracking-tight text-[var(--ws-gallery-text)] sm:text-4xl">Made with Motion</h2>
<p class="mt-4 text-base leading-relaxed text-[var(--ws-gallery-text-soft)]">Projects, experiments, and demos built by the community. Share yours with #MadeWithMotion.</p>
</div>
<div class="mt-14 grid gap-5 sm:grid-cols-2 lg:grid-cols-3">
<!-- Item 1 -->
<a href="#" class="group flex flex-col overflow-hidden rounded-2xl border border-[var(--ws-gallery-border)] bg-[var(--ws-gallery-bg)] transition-shadow hover:shadow-lg">
<div class="relative aspect-video w-full overflow-hidden bg-[var(--ws-color-surface-alt)]">
<div class="absolute inset-0 flex items-center justify-center text-slate-400">
<svg class="h-12 w-12" fill="none" viewBox="0 0 24 24" stroke-width="1" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M2.25 15.75l5.159-5.159a2.25 2.25 0 013.182 0l5.159 5.159m-1.5-1.5l1.409-1.409a2.25 2.25 0 013.182 0l2.909 2.909M3 3h18M3 21h18"/></svg>
</div>
<div class="absolute inset-0 bg-black/0 transition-colors group-hover:bg-black/10"></div>
<span class="absolute right-3 top-3 rounded-full bg-black/60 px-2.5 py-1 text-xs font-medium text-white">Demo</span>
</div>
<div class="flex flex-1 flex-col p-4">
<h3 class="text-sm font-semibold text-[var(--ws-gallery-text)]">Scroll-driven carousel</h3>
<p class="mt-1 flex-1 text-xs leading-relaxed text-[var(--ws-gallery-text-soft)]">A physics-based carousel with spring animations and drag support.</p>
<div class="mt-3 flex items-center gap-2">
<div class="h-6 w-6 rounded-full bg-slate-300"></div>
<span class="text-xs text-[var(--ws-gallery-text-soft)]">@motiondev_fan</span>
</div>
</div>
</a>
<!-- Item 2 -->
<a href="#" class="group flex flex-col overflow-hidden rounded-2xl border border-[var(--ws-gallery-border)] bg-[var(--ws-gallery-bg)] transition-shadow hover:shadow-lg">
<div class="relative aspect-video w-full overflow-hidden bg-violet-50">
<div class="absolute inset-0 flex items-center justify-center text-violet-300">
<svg class="h-12 w-12" fill="none" viewBox="0 0 24 24" stroke-width="1" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M2.25 15.75l5.159-5.159a2.25 2.25 0 013.182 0l5.159 5.159m-1.5-1.5l1.409-1.409a2.25 2.25 0 013.182 0l2.909 2.909M3 3h18M3 21h18"/></svg>
</div>
<div class="absolute inset-0 bg-black/0 transition-colors group-hover:bg-black/10"></div>
<span class="absolute right-3 top-3 rounded-full bg-violet-600/80 px-2.5 py-1 text-xs font-medium text-white">Open source</span>
</div>
<div class="flex flex-1 flex-col p-4">
<h3 class="text-sm font-semibold text-[var(--ws-gallery-text)]">Animated page transitions</h3>
<p class="mt-1 flex-1 text-xs leading-relaxed text-[var(--ws-gallery-text-soft)]">View Transition API + Motion One for silky route changes in Next.js.</p>
<div class="mt-3 flex items-center gap-2">
<div class="h-6 w-6 rounded-full bg-violet-300"></div>
<span class="text-xs text-[var(--ws-gallery-text-soft)]">@ui_craftsman</span>
</div>
</div>
</a>
<!-- Item 3 -->
<a href="#" class="group flex flex-col overflow-hidden rounded-2xl border border-[var(--ws-gallery-border)] bg-[var(--ws-gallery-bg)] transition-shadow hover:shadow-lg">
<div class="relative aspect-video w-full overflow-hidden bg-emerald-50">
<div class="absolute inset-0 flex items-center justify-center text-emerald-300">
<svg class="h-12 w-12" fill="none" viewBox="0 0 24 24" stroke-width="1" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M2.25 15.75l5.159-5.159a2.25 2.25 0 013.182 0l5.159 5.159m-1.5-1.5l1.409-1.409a2.25 2.25 0 013.182 0l2.909 2.909M3 3h18M3 21h18"/></svg>
</div>
<div class="absolute inset-0 bg-black/0 transition-colors group-hover:bg-black/10"></div>
<span class="absolute right-3 top-3 rounded-full bg-emerald-600/80 px-2.5 py-1 text-xs font-medium text-white">Tutorial</span>
</div>
<div class="flex flex-1 flex-col p-4">
<h3 class="text-sm font-semibold text-[var(--ws-gallery-text)]">Data visualization entrance</h3>
<p class="mt-1 flex-1 text-xs leading-relaxed text-[var(--ws-gallery-text-soft)]">Staggered bar chart animation triggered on scroll into view.</p>
<div class="mt-3 flex items-center gap-2">
<div class="h-6 w-6 rounded-full bg-emerald-300"></div>
<span class="text-xs text-[var(--ws-gallery-text-soft)]">@datavis_lab</span>
</div>
</div>
</a>
<!-- Item 4 -->
<a href="#" class="group flex flex-col overflow-hidden rounded-2xl border border-[var(--ws-gallery-border)] bg-[var(--ws-gallery-bg)] transition-shadow hover:shadow-lg">
<div class="relative aspect-video w-full overflow-hidden bg-amber-50">
<div class="absolute inset-0 flex items-center justify-center text-amber-300">
<svg class="h-12 w-12" fill="none" viewBox="0 0 24 24" stroke-width="1" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M2.25 15.75l5.159-5.159a2.25 2.25 0 013.182 0l5.159 5.159m-1.5-1.5l1.409-1.409a2.25 2.25 0 013.182 0l2.909 2.909M3 3h18M3 21h18"/></svg>
</div>
<div class="absolute inset-0 bg-black/0 transition-colors group-hover:bg-black/10"></div>
<span class="absolute right-3 top-3 rounded-full bg-amber-600/80 px-2.5 py-1 text-xs font-medium text-white">Experiment</span>
</div>
<div class="flex flex-1 flex-col p-4">
<h3 class="text-sm font-semibold text-[var(--ws-gallery-text)]">Magnetic button effect</h3>
<p class="mt-1 flex-1 text-xs leading-relaxed text-[var(--ws-gallery-text-soft)]">Pointer-tracked spring animations for interactive button magnetism.</p>
<div class="mt-3 flex items-center gap-2">
<div class="h-6 w-6 rounded-full bg-amber-300"></div>
<span class="text-xs text-[var(--ws-gallery-text-soft)]">@creative_hack</span>
</div>
</div>
</a>
<!-- Item 5 -->
<a href="#" class="group flex flex-col overflow-hidden rounded-2xl border border-[var(--ws-gallery-border)] bg-[var(--ws-gallery-bg)] transition-shadow hover:shadow-lg">
<div class="relative aspect-video w-full overflow-hidden bg-sky-50">
<div class="absolute inset-0 flex items-center justify-center text-sky-300">
<svg class="h-12 w-12" fill="none" viewBox="0 0 24 24" stroke-width="1" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M2.25 15.75l5.159-5.159a2.25 2.25 0 013.182 0l5.159 5.159m-1.5-1.5l1.409-1.409a2.25 2.25 0 013.182 0l2.909 2.909M3 3h18M3 21h18"/></svg>
</div>
<div class="absolute inset-0 bg-black/0 transition-colors group-hover:bg-black/10"></div>
<span class="absolute right-3 top-3 rounded-full bg-sky-600/80 px-2.5 py-1 text-xs font-medium text-white">Demo</span>
</div>
<div class="flex flex-1 flex-col p-4">
<h3 class="text-sm font-semibold text-[var(--ws-gallery-text)]">Infinite scroll ticker</h3>
<p class="mt-1 flex-1 text-xs leading-relaxed text-[var(--ws-gallery-text-soft)]">Logo marquee with pause-on-hover, built with Motion One's timeline API.</p>
<div class="mt-3 flex items-center gap-2">
<div class="h-6 w-6 rounded-full bg-sky-300"></div>
<span class="text-xs text-[var(--ws-gallery-text-soft)]">@marquee_nerds</span>
</div>
</div>
</a>
<!-- Submit CTA card -->
<a href="#" class="group flex flex-col items-center justify-center gap-4 rounded-2xl border border-dashed border-[var(--ws-gallery-border)] p-8 text-center transition-colors hover:border-[var(--ws-color-accent)]">
<div class="flex h-12 w-12 items-center justify-center rounded-2xl bg-[var(--ws-color-bg-secondary)]">
<svg class="h-6 w-6 text-[var(--ws-gallery-text-soft)]" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15"/></svg>
</div>
<div>
<p class="text-sm font-semibold text-[var(--ws-gallery-text)]">Share your project</p>
<p class="mt-1 text-xs text-[var(--ws-gallery-text-soft)]">Tag #MadeWithMotion to be featured here</p>
</div>
</a>
</div>
</div>
</section>
Details
Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste
Stable Published
gallerycommunityshowcaseuser-generatedprojectsgridcreatorsocial-proof
Slots
| Name | Required | Description |
|---|---|---|
| heading | No | Optional kicker, title, and subtitle. |
| items | Yes | 5 project cards with aspect-video thumbnail, badge, title, description, and creator handle. |
| submit-cta | No | Dashed card inviting users to share their project. |
Five community project cards in a 3-column grid (2 on tablet, 1 on mobile), each with a colored aspect-video thumbnail, a category badge (Demo/Open source/Tutorial/Experiment), title, description, and creator handle. The sixth slot is a dashed “Share your project” CTA card. Different from gallery/base (portfolio zoom grid) — this variant communicates social proof through user-generated content and drives community participation.