import React, { useState, useRef, useEffect } from "react"; import anime from "animejs"; const COLORS = [ "#6366f1","#22d3ee","#f472b6","#fdba74","#34d399", "#facc15","#818cf8","#ef4444","#a3e635","#f59e42" ]; // Some sample quirky character names const DEFAULT_CHARACTERS = [ "Milo the Moon Mole", "Zara Zoomboots", "Professor Pancake", "Blip Blop (the Robot Dog)", "Sassy Stardust Sam", "Muffin McSparkle", "Gamma The Space Cat", "Wendy Whistlepop", "Captain Quokka", "Fizz Widget" ]; // Playful relationship facts for connections const RELATIONSHIP_FACTS = [ "Secret handshake inventors", "Once built a sandcastle city together", "Compete in spontaneous dance-offs", "Swap ridiculous hats every Tuesday", "Write non-sensical haikus for sport", "Can communicate via eyebrow waggling", "Always partner up for karaoke", "Have a shared sticker collection", "Hold the record for synchronized giggling", "Known as the Dynamic Doodlers" ]; // Helper for random from array function randomItem(arr) { return arr[Math.floor(Math.random() * arr.length)]; } // Generate non-overlapping circular node positions (limited size for demo) function getCircleLayout(n, cx, cy, r) { const nodes = []; for(let i=0; i [ { id: makeId(), name: randomItem(DEFAULT_CHARACTERS), color: COLORS[0], x: 325, y: 220 }, ]); const [links, setLinks] = useState([]); // { id, from, to, fact } // Add node UI state const [newName, setNewName] = useState(""); const [selectFrom, setSelectFrom] = useState(null); const [selectTo, setSelectTo] = useState(null); const [animatingLink, setAnimatingLink] = useState(null); // linkId currently animating const [showFact, setShowFact] = useState(null); // { link, center: {x, y} } const svgRef = useRef(null); // Responsive layout (recompute per node count) useEffect(() => { // Lay out all nodes in a fractal-style spiral/circle pattern depending on count. if (nodes.length === 1) { setNodes(ns => ns.map((n,i) => ({...n, x: 325, y: 220}))); return; } const r = Math.min(160, 36 + nodes.length*19); const nodePositions = getCircleLayout(nodes.length, 325, 220, r); setNodes(ns => ns.map((n,i) => ({...n, ...nodePositions[i]}))); }, [nodes.length]); // Animate a new link every time one is added useEffect(() => { if (!links.length) return; const lastLink = links[links.length-1]; setAnimatingLink(lastLink.id); // After animation, show fact setTimeout(() => { setShowFact({ link: lastLink, center: getLinkMidpoint(lastLink) }); setTimeout(() => { setShowFact(null); setAnimatingLink(null); }, 2100); }, 900); }, [links]); // Helper to get node by id const getNode = id => nodes.find(n => n.id === id); // Get link midpoint for label function getLinkMidpoint(link) { const n1 = getNode(link.from), n2 = getNode(link.to); if (n1 && n2) return { x: (n1.x + n2.x)/2, y: (n1.y + n2.y)/2 }; return {x: 0, y:0}; } // Add a new character node const addNode = () => { let name = newName.trim(); if (!name) name = randomItem(characters); const color = randomItem(COLORS); setNodes(prev => [...prev, { id: makeId(), name, color }]); setNewName(""); }; // Add a connection const addLink = () => { if (!selectFrom || !selectTo || selectFrom === selectTo) return; // Prevent duplicate const exists = links.find(l => (l.from === selectFrom && l.to === selectTo) || (l.from === selectTo && l.to === selectFrom)); if (exists) return; const fact = randomItem(RELATIONSHIP_FACTS); setLinks(prev => [...prev, { id: makeId(), from: selectFrom, to: selectTo, fact }]); setSelectFrom(null); setSelectTo(null); }; // Node click for quick select const handleNodeClick = id => { if (!selectFrom) setSelectFrom(id); else if (!selectTo && selectFrom !== id) setSelectTo(id); else { setSelectFrom(id); setSelectTo(null); } } // For fun: confetti on 7+ connections! useEffect(() => { if (typeof window === "undefined" || typeof anime === "undefined") return; if (links.length === 7) { // Fire confetti (simple dot animation) anime({ targets: ".confetti-dot", translateY: [0, 160], scale: [1,0.7], opacity: [1,0], duration: 1300, delay: anime.stagger(70), easing: 'easeOutQuad', }); } }, [links.length]); return (

Friendship Fractal

Map whimsical "friendship networks" by connecting quirky characters. Each link unveils a playful relationship fact and fractal-style patterns come to life. Ideal for group creativity, party brainstorming, or pure fun!

setNewName(e.target.value)} onKeyDown={e=>e.key==='Enter'&&addNode()} placeholder="Add character (e.g., Doodle Dan)" className="rounded-lg px-3 py-2 border border-gray-300 text-sm flex-1" style={{fontFamily:'var(--ds-font-body)'}} />

→

{/* Relationship Fact Animation */} {showFact && (

🤝 {showFact.link.fact}

)}

Characters

{nodes.map(n=> (

{n.name}

))}

Connections

{links.length===0?No connections yet: links.map(l=>{ const n1 = getNode(l.from), n2 = getNode(l.to); return n1&&n2 && (

{n1.name} ↔ {n2.name} ({l.fact})

); })}

); } // Animated link using animejs for strokeDashoffset function AnimatedEdge({ from, to, color }) { const pathRef = useRef(null); useEffect(() => { if (!pathRef.current || typeof anime === "undefined") return; const path = pathRef.current; let length = path.getTotalLength(); path.setAttribute('stroke-dasharray', length); path.setAttribute('stroke-dashoffset', length); anime({ targets: path, strokeDashoffset: [length, 0], duration: 900, easing: 'easeOutQuart', }); }, [from, to]); // Curve for visual fun const mx = (from.x+to.x)/2, my = (from.y+to.y)/2; const ctrlx = mx + 24, ctrly = my - 32; const curve = `M ${from.x} ${from.y} Q ${ctrlx} ${ctrly} ${to.x} ${to.y}`; return ( ); }