Hemant Bhatt

1st November 2025

Animated Mind Maps in Next.js: Key to explaining visually

👇 Try It Out! Drag the nodes, zoom, and explore

This is what we're building. A fully interactive, animated mind map that you can pan, zoom, and move. Go ahead, try it!

Introduction

Ever stared at a block of mundane, boring text and thought, "I wish this was a colorful, bouncing diagram instead"? Time to embrace mindmaps. Here ideas sprawl like a developer's browser tabs at 2 AM.

In this guide, we'll build animated mind maps in Next.js using the App Router.

The Two-Part Architecture

Building mind maps in Next.js App Router follows a simple pattern:

Server Component: Fetches the mind map data (nodes, edges, relationships)
Client Component: Renders and animates everything with react-flow and motion/react

Part 1: Getting setup

First, let's install our tools:

terminal

npm install @xyflow/react motion

Note: We're using @xyflow/react (ReactFlow 12) and motion/react (the newer, shinier library) instead of their older counterparts.

Part 2: The Server Component (Data Fetching)

Understanding the Data Structure

Before we dive into the code, let's understand the two core data structures:

MindMapNode

Each node in your mind map represents a concept or idea. The structure includes:

id: Unique identifier for the node
type: Either "animated" or "static" to determine which node component renderer to use
position: Object with x and y coordinates for placement on the canvas
data: Object containing the label (text displayed) and any custom properties—styling comes from our single custom node renderer

MindMapEdge

Edges define the relationships between nodes - the connecting lines that show how ideas relate:

id: Unique identifier for the edge
source: ID of the node where the edge starts
target: ID of the node where the edge ends
animated: Optional boolean to make the edge flow with animation

Here we are simulating the data fetching of the mind map. The getMindMapData() function can be a database, CMS or an API call.

app/mind-map/page.tsx
// app/mind-map/page.tsx
import MindMapClient from "./MindMapClient";
import { Node, Edge } from "@xyflow/react";
 
type NodeData = { label: string; color?: string };
type MindMapNode = Node<NodeData, "animated" | "static">;
 
async function getMindMapData() {
  // This could be from a database, CMS, or API
  // For now, let's create a simple structure
  const nodes: MindMapNode[] = [
    {
      id: "1",
      type: "static",
      position: { x: 250, y: 0 },
      data: { label: "Next.js Mind Maps", color: "bg-blue-100" },
    },
    {
      id: "2",
      type: "static",
      position: { x: 250, y: 100 },
      data: { label: "Server Components", color: "bg-green-100" },
    },
    {
      id: "3",
      type: "static",
      position: { x: 250, y: 300 },
      data: { label: "Client Components", color: "bg-purple-100" },
    },
    {
      id: "4",
      type: "animated",
      position: { x: 165, y: 500 },
      data: { label: "Animated Diagrams! 🎉", color: "bg-orange-100" },
    },
  ];
 
  const edges: Edge[] = [
    {
      id: "e1-2",
      source: "1",
      target: "2",
      animated: false,
      style: { stroke: "#000", strokeWidth: 3 },
    },
    {
      id: "e2-3",
      source: "2",
      target: "3",
      animated: true,
      style: { stroke: "#000", strokeWidth: 3 },
    },
    {
      id: "e3-4",
      source: "3",
      target: "4",
      animated: true,
      style: { stroke: "#000", strokeWidth: 3 },
    },
  ];
 
  return { nodes, edges };
}
 
export default async function MindMapPage() {
  const { nodes, edges } = await getMindMapData();
 
  return (
    <div className="w-full h-screen">
      <h1 className="text-3xl font-bold p-4">My Animated Mind Map</h1>
      <MindMapClient initialNodes={nodes} initialEdges={edges} />
    </div>
  );
}

Part 3: The Client Component (Animation Magic)

Now for the fun part. Create a client component that brings everything to life. Let's break it down into digestible pieces:

Step 1: Mark it as a Client Component

First things first—we need browser APIs for animations and interactivity:

app/mind-map/MindMapClient.tsx
"use client";
 
import {
  ReactFlow,
  Node,
  Edge,
  Controls,
  Background,
  BackgroundVariant,
  Position,
  Handle,
} from "@xyflow/react";
import "@xyflow/react/dist/style.css";
import { motion } from "motion/react";

Step 2: Define Your Types

TypeScript helps us keep our node data structured and predictable, we have 2 types of nodes. Animated and static. We define them below.

app/mind-map/MindMapClient.tsx
type NodeData = { label: string; color?: string };
type MindMapNode = Node<NodeData, "animated" | "static">;

Step 3: Create Your Animated Node

This is the code for the pulsating animation node. We use motion.div for the effect.

app/mind-map/MindMapClient.tsx
function AnimatedNode({ data }: { data: NodeData }) {
  const bgColor = data.color || "bg-white";
 
  return (
    <motion.div
      initial={{ scale: 0.85, opacity: 0 }}
      animate={{ scale: [1, 1.2, 1], opacity: 1 }}
      transition={{
        opacity: { duration: 0.4, ease: "easeOut" },
        scale: {
          duration: 0.6,
          ease: "easeInOut",
          repeat: Infinity,
          repeatDelay: 1.4,
          repeatType: "loop",
        },
      }}
      className={[
        "relative px-6 py-3 shadow-[4px_4px_0px_0px_#000] rounded-lg border-4 border-black flex flex-col items-center text-center",
        bgColor,
      ].join(" ")}
    >
      <Handle
        type="target"
        position={Position.Top}
        className="pointer-events-none opacity-0 -top-3 absolute h-3 w-3"
      />
      <div className="font-black text-sm md:text-base">{data.label}</div>
      <Handle
        type="source"
        position={Position.Bottom}
        className="pointer-events-none opacity-0 -bottom-3 absolute h-3 w-3"
      />
    </motion.div>
  );
}

Key details: The scale: [1, 1.2, 1] creates a pulse effect that repeats infinitely. The Handle components are invisible but crucial—they're the connection points for edges.

Step 4: Create a Static Node (Optional)

Not everything needs to bounce. Static nodes provide visual contrast:

app/mind-map/MindMapClient.tsx
function StaticNode({ data }: { data: NodeData }) {
  const bgColor = data.color || "bg-white";
 
  return (
    <div
      className={[
        "relative px-6 py-3 shadow-[4px_4px_0px_0px_#000] rounded-lg border-4 border-black flex flex-col items-center text-center",
        bgColor,
      ].join(" ")}
    >
      <Handle
        type="target"
        position={Position.Top}
        className="pointer-events-none opacity-0 -top-3 absolute h-3 w-3"
      />
      <div className="font-black text-sm md:text-base">{data.label}</div>
      <Handle
        type="source"
        position={Position.Bottom}
        className="pointer-events-none opacity-0 -bottom-3 absolute h-3 w-3"
      />
    </div>
  );
}

Step 5: Register Your Node Types

Tell ReactFlow about your custom nodes:

app/mind-map/MindMapClient.tsx
const nodeTypes = {
  animated: AnimatedNode,
  static: StaticNode,
};

Step 6: Bring It All Together

Finally, render the ReactFlow component with your nodes and edges:

app/mind-map/MindMapClient.tsx
export default function MindMapClient({ initialNodes, initialEdges }) {
  return (
    <motion.div
      initial={{ opacity: 0 }}
      animate={{ opacity: 1 }}
      transition={{ duration: 0.5 }}
      className="w-full h-[500px] md:h-[600px] border-4 border-black shadow-[8px_8px_0px_0px_#000]"
    >
      <ReactFlow
        defaultNodes={initialNodes}
        defaultEdges={initialEdges}
        nodeTypes={nodeTypes}
        fitView
        minZoom={0.2}
        nodesConnectable={false}
      >
        <Controls className="border-2 border-black shadow-[4px_4px_0px_0px_#000]" />
        <Background
          variant={BackgroundVariant.Dots}
          gap={20}
          size={2}
          color="#000"
          className="opacity-20"
        />
      </ReactFlow>
    </motion.div>
  );
}

Pro tip: The fitView prop automatically centers and scales your diagram to fit the viewport. The Controls component adds zoom/pan buttons, and Background adds those satisfying dots.

Part 4: Making It Your Own

The beauty of this setup is customization. Want different animations? Change the motion props:

example
// Fade and slide from left
<motion.div
  initial={{ x: -100, opacity: 0 }}
  animate={{ x: 0, opacity: 1 }}
  transition={{ duration: 0.6, ease: 'easeOut' }}
>

Want different styles? Change the Tailwind classes:

example
// Minimalist style
className="relative px-4 py-2 rounded-md border border-gray-300 bg-white shadow-sm"
 
// Gradient style  
className="relative px-6 py-3 rounded-xl bg-gradient-to-br from-purple-400 to-pink-500 text-white shadow-lg"
 
// Glassmorphism style
className="relative px-6 py-3 rounded-2xl bg-white/20 backdrop-blur-md border border-white/30 shadow-xl"

Want to fetch data from an API?

example
async function getMindMapData() {
  const res = await fetch("https://api.example.com/mind-maps/123");
  const data = await res.json();
  return data;
}

Want to add interactive features? @xyflow/react gives you drag-and-drop, zoom, pan, and connection creation out of the box. It's like LEGO for diagrams.

Conclusion

The server handles data fetching efficiently, while the client creates smooth, engaging animations. @xyflow/react handles the complex graph logic, and motion/react brings everything to life with butter-smooth animations.

The result? A mind map that doesn't just display information—it performs it. Your users will thank you, and your wall of text you want to get accross will finally look cool.

Under the Hood: The Hero Mind Map Component

Curious how the hero demo works? Here's the exact client component powering it—complete with springy Motion nodes, inksh styling, and the top/bottom handles that make the edges render.

app/blog/next-tutorial/mind-maps/InkshMindMap.tsx
"use client";
 
import {
  ReactFlow,
  Node,
  Edge,
  Controls,
  Background,
  BackgroundVariant,
  Position,
  Handle,
} from "@xyflow/react";
import "@xyflow/react/dist/style.css";
import { motion } from "motion/react";
 
type NodeData = { label: string; color?: string };
type MindMapNode = Node<NodeData, "animated" | "static">;
 
// Custom animated node component with neobrutalist styling
function AnimatedNode({ data }: { data: NodeData }) {
  const bgColor = data.color || "bg-white";
 
  return (
    <motion.div
      initial={{ scale: 0.85, opacity: 0 }}
      animate={{ scale: [1, 1.2, 1], opacity: 1 }}
      transition={{
        opacity: { duration: 0.4, ease: "easeOut" },
        scale: {
          duration: 0.6,
          ease: "easeInOut",
          repeat: Infinity,
          repeatDelay: 1.4,
          repeatType: "loop",
        },
      }}
      className={[
        "relative px-6 py-3 shadow-[4px_4px_0px_0px_#000] rounded-lg border-4 border-black flex flex-col items-center text-center",
        bgColor,
      ].join(" ")}
    >
      <Handle
        type="target"
        position={Position.Top}
        className="pointer-events-none opacity-0 -top-3 absolute h-3 w-3"
      />
      <div className="font-black text-sm md:text-base">{data.label}</div>
      <Handle
        type="source"
        position={Position.Bottom}
        className="pointer-events-none opacity-0 -bottom-3 absolute h-3 w-3"
      />
    </motion.div>
  );
}
 
function StaticNode({ data }: { data: NodeData }) {
  const bgColor = data.color || "bg-white";
 
  return (
    <div
      className={[
        "relative px-6 py-3 shadow-[4px_4px_0px_0px_#000] rounded-lg border-4 border-black flex flex-col items-center text-center",
        bgColor,
      ].join(" ")}
    >
      <Handle
        type="target"
        position={Position.Top}
        className="pointer-events-none opacity-0 -top-3 absolute h-3 w-3"
      />
      <div className="font-black text-sm md:text-base">{data.label}</div>
      <Handle
        type="source"
        position={Position.Bottom}
        className="pointer-events-none opacity-0 -bottom-3 absolute h-3 w-3"
      />
    </div>
  );
}
 
const nodeTypes = {
  animated: AnimatedNode,
  static: StaticNode,
};
 
const mindMapNodes: MindMapNode[] = [
  {
    id: "1",
    type: "static",
    position: { x: 250, y: 0 },
    data: { label: "Next.js Mind Maps", color: "bg-blue-100" },
  },
  {
    id: "2",
    type: "static",
    position: { x: 250, y: 100 },
    data: { label: "Server Components", color: "bg-green-100" },
  },
  {
    id: "4",
    type: "static",
    position: { x: 80, y: 200 },
    data: { label: "Data Fetching", color: "bg-yellow-100" },
  },
  {
    id: "5",
    type: "static",
    position: { x: 250, y: 200 },
    data: { label: "SSR", color: "bg-yellow-100" },
  },
  {
    id: "3",
    type: "static",
    position: { x: 250, y: 300 },
    data: { label: "Client Components", color: "bg-purple-100" },
  },
  {
    id: "6",
    type: "static",
    position: { x: 80, y: 400 },
    data: { label: "@xyflow/react", color: "bg-pink-100" },
  },
  {
    id: "7",
    type: "static",
    position: { x: 250, y: 400 },
    data: { label: "motion/react", color: "bg-pink-100" },
  },
  {
    id: "8",
    type: "animated",
    position: { x: 165, y: 500 },
    data: { label: "Animated Diagrams! 🎉", color: "bg-orange-100" },
  },
];
 
const mindMapEdges: Edge[] = [
  // First node to Server Components
  {
    id: "e1-2",
    source: "1",
    target: "2",
    animated: false,
    style: { stroke: "#000", strokeWidth: 3 },
  },
  // Server Components to Data Fetching
  {
    id: "e2-4",
    source: "2",
    target: "4",
    animated: false,
    style: { stroke: "#000", strokeWidth: 3 },
  },
  // Server Components to SSR
  {
    id: "e2-5",
    source: "2",
    target: "5",
    animated: false,
    style: { stroke: "#000", strokeWidth: 3 },
  },
  // Data Fetching to Client Components
  {
    id: "e4-3",
    source: "4",
    target: "3",
    animated: false,
    style: { stroke: "#000", strokeWidth: 3 },
  },
  // SSR to Client Components
  {
    id: "e5-3",
    source: "5",
    target: "3",
    animated: false,
    style: { stroke: "#000", strokeWidth: 3 },
  },
  // Client Components to @xyflow/react
  {
    id: "e3-6",
    source: "3",
    target: "6",
    animated: true,
    style: { stroke: "#000", strokeWidth: 3 },
  },
  // Client Components to motion/react
  {
    id: "e3-7",
    source: "3",
    target: "7",
    animated: true,
    style: { stroke: "#000", strokeWidth: 3 },
  },
  // @xyflow/react to Animated Diagrams
  {
    id: "e6-8",
    source: "6",
    target: "8",
    animated: true,
    style: { stroke: "#000", strokeWidth: 3 },
  },
  // motion/react to Animated Diagrams
  {
    id: "e7-8",
    source: "7",
    target: "8",
    animated: true,
    style: { stroke: "#000", strokeWidth: 3 },
  },
];
 
export default function InkshMindMap() {
  return (
    <motion.div
      initial={{ opacity: 0 }}
      animate={{ opacity: 1 }}
      transition={{ duration: 0.5 }}
      className="w-full h-[500px] md:h-[600px] border-4 border-black shadow-[8px_8px_0px_0px_#000] bg-gradient-to-br from-blue-50 to-purple-50"
    >
      <ReactFlow
        defaultNodes={mindMapNodes}
        defaultEdges={mindMapEdges}
        nodeTypes={nodeTypes}
        fitView
        minZoom={0.2}
        nodesConnectable={false}
      >
        <Controls className="border-2 border-black shadow-[4px_4px_0px_0px_#000]" />
        <Background
          variant={BackgroundVariant.Dots}
          gap={20}
          size={2}
          color="#000"
          className="opacity-20"
        />
      </ReactFlow>
    </motion.div>
  );
}

1	// app/mind-map/page.tsx
2	import MindMapClient from "./MindMapClient";
3	import { Node, Edge } from "@xyflow/react";
4
5	type NodeData = { label: string; color?: string };
6	type MindMapNode = Node<NodeData, "animated" \| "static">;
7
8	async function getMindMapData() {
9	// This could be from a database, CMS, or API
10	// For now, let's create a simple structure
11	const nodes: MindMapNode[] = [
12	{
13	id: "1",
14	type: "static",
15	position: { x: 250, y: 0 },
16	data: { label: "Next.js Mind Maps", color: "bg-blue-100" },
17	},
18	{
19	id: "2",
20	type: "static",
21	position: { x: 250, y: 100 },
22	data: { label: "Server Components", color: "bg-green-100" },
23	},
24	{
25	id: "3",
26	type: "static",
27	position: { x: 250, y: 300 },
28	data: { label: "Client Components", color: "bg-purple-100" },
29	},
30	{
31	id: "4",
32	type: "animated",
33	position: { x: 165, y: 500 },
34	data: { label: "Animated Diagrams! 🎉", color: "bg-orange-100" },
35	},
36	];
37
38	const edges: Edge[] = [
39	{
40	id: "e1-2",
41	source: "1",
42	target: "2",
43	animated: false,
44	style: { stroke: "#000", strokeWidth: 3 },
45	},
46	{
47	id: "e2-3",
48	source: "2",
49	target: "3",
50	animated: true,
51	style: { stroke: "#000", strokeWidth: 3 },
52	},
53	{
54	id: "e3-4",
55	source: "3",
56	target: "4",
57	animated: true,
58	style: { stroke: "#000", strokeWidth: 3 },
59	},
60	];
61
62	return { nodes, edges };
63	}
64
65	export default async function MindMapPage() {
66	const { nodes, edges } = await getMindMapData();
67
68	return (
69	<div className="w-full h-screen">
70	<h1 className="text-3xl font-bold p-4">My Animated Mind Map</h1>
71	<MindMapClient initialNodes={nodes} initialEdges={edges} />
72	</div>
73	);
74	}

1	"use client";
2
3	import {
4	ReactFlow,
5	Node,
6	Edge,
7	Controls,
8	Background,
9	BackgroundVariant,
10	Position,
11	Handle,
12	} from "@xyflow/react";
13	import "@xyflow/react/dist/style.css";
14	import { motion } from "motion/react";

1	function AnimatedNode({ data }: { data: NodeData }) {
2	const bgColor = data.color \|\| "bg-white";
3
4	return (
5	<motion.div
6	initial={{ scale: 0.85, opacity: 0 }}
7	animate={{ scale: [1, 1.2, 1], opacity: 1 }}
8	transition={{
9	opacity: { duration: 0.4, ease: "easeOut" },
10	scale: {
11	duration: 0.6,
12	ease: "easeInOut",
13	repeat: Infinity,
14	repeatDelay: 1.4,
15	repeatType: "loop",
16	},
17	}}
18	className={[
19	"relative px-6 py-3 shadow-[4px_4px_0px_0px_#000] rounded-lg border-4 border-black flex flex-col items-center text-center",
20	bgColor,
21	].join(" ")}
22	>
23	<Handle
24	type="target"
25	position={Position.Top}
26	className="pointer-events-none opacity-0 -top-3 absolute h-3 w-3"
27	/>
28	<div className="font-black text-sm md:text-base">{data.label}</div>
29	<Handle
30	type="source"
31	position={Position.Bottom}
32	className="pointer-events-none opacity-0 -bottom-3 absolute h-3 w-3"
33	/>
34	</motion.div>
35	);
36	}

1	function StaticNode({ data }: { data: NodeData }) {
2	const bgColor = data.color \|\| "bg-white";
3
4	return (
5	<div
6	className={[
7	"relative px-6 py-3 shadow-[4px_4px_0px_0px_#000] rounded-lg border-4 border-black flex flex-col items-center text-center",
8	bgColor,
9	].join(" ")}
10	>
11	<Handle
12	type="target"
13	position={Position.Top}
14	className="pointer-events-none opacity-0 -top-3 absolute h-3 w-3"
15	/>
16	<div className="font-black text-sm md:text-base">{data.label}</div>
17	<Handle
18	type="source"
19	position={Position.Bottom}
20	className="pointer-events-none opacity-0 -bottom-3 absolute h-3 w-3"
21	/>
22	</div>
23	);
24	}

1	const nodeTypes = {
2	animated: AnimatedNode,
3	static: StaticNode,
4	};

1	export default function MindMapClient({ initialNodes, initialEdges }) {
2	return (
3	<motion.div
4	initial={{ opacity: 0 }}
5	animate={{ opacity: 1 }}
6	transition={{ duration: 0.5 }}
7	className="w-full h-[500px] md:h-[600px] border-4 border-black shadow-[8px_8px_0px_0px_#000]"
8	>
9	<ReactFlow
10	defaultNodes={initialNodes}
11	defaultEdges={initialEdges}
12	nodeTypes={nodeTypes}
13	fitView
14	minZoom={0.2}
15	nodesConnectable={false}
16	>
17	<Controls className="border-2 border-black shadow-[4px_4px_0px_0px_#000]" />
18	<Background
19	variant={BackgroundVariant.Dots}
20	gap={20}
21	size={2}
22	color="#000"
23	className="opacity-20"
24	/>
25	</ReactFlow>
26	</motion.div>
27	);
28	}

1	// Fade and slide from left
2	<motion.div
3	initial={{ x: -100, opacity: 0 }}
4	animate={{ x: 0, opacity: 1 }}
5	transition={{ duration: 0.6, ease: 'easeOut' }}
6	>

1	// Minimalist style
2	className="relative px-4 py-2 rounded-md border border-gray-300 bg-white shadow-sm"
3
4	// Gradient style
5	className="relative px-6 py-3 rounded-xl bg-gradient-to-br from-purple-400 to-pink-500 text-white shadow-lg"
6
7	// Glassmorphism style
8	className="relative px-6 py-3 rounded-2xl bg-white/20 backdrop-blur-md border border-white/30 shadow-xl"

1	async function getMindMapData() {
2	const res = await fetch("https://api.example.com/mind-maps/123");
3	const data = await res.json();
4	return data;
5	}