Tool Mesh

Component 29

About

A mesh of logo tiles, one per job, each swapping between the tools that do it, one tile at a time.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Tool Mesh to your project and fits it to your theme.

Code

How Tool Mesh is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

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>
  );
}