A mesh of logo tiles, one per job, each swapping between the tools that do it, one tile at a time.
import { ToolMesh } from "@/components/ui/tool-mesh";
const icon = (slug: string) => `https://cdn.jsdelivr.net/npm/simple-icons@13/icons/${slug}.svg`;
const settings = {
accent: "#7f72e3",
title: "Toolstack",
text: "No time to get attached: AI changes my favourite tool faster than I can learn the shortcuts.",
interval: 1600,
};
export default function Demo(props: Partial<typeof settings>) {
const s = { ...settings, ...props };
return (
<div className="flex w-full items-center justify-center p-6">
<div className="grid w-full max-w-3xl items-center gap-10 min-[640px]:grid-cols-2">
<ToolMesh
accent={s.accent}
interval={s.interval}
categories={[
{ job: "Notes", tools: [{ name: "Notion", logo: icon("notion") }, { name: "Obsidian", logo: icon("obsidian") }] },
{ job: "Design", tools: [{ name: "Figma", logo: icon("figma") }, { name: "Framer", logo: icon("framer") }] },
{ job: "Code", tools: [{ name: "GitHub", logo: icon("github") }, { name: "GitLab", logo: icon("gitlab") }] },
{ job: "AI", tools: [{ name: "Claude", logo: icon("claude") }, { name: "Perplexity", logo: icon("perplexity") }] },
{ job: "Analytics", tools: [{ name: "Mixpanel", logo: icon("mixpanel") }, { name: "Google Analytics", logo: icon("googleanalytics") }] },
{ job: "Workshops", tools: [{ name: "Miro", logo: icon("miro") }, { name: "Loom", logo: icon("loom") }] },
{ job: "Data", tools: [{ name: "Airtable", logo: icon("airtable") }, { name: "Notion", logo: icon("notion") }] },
]}
/>
<div className="space-y-4 text-center min-[640px]:text-left">
<h2 className="text-3xl font-medium tracking-tight text-foreground">{s.title}</h2>
<p className="leading-relaxed text-muted-foreground">{s.text}</p>
</div>
</div>
</div>
);
}