Builder OS Bento

"use client";

import { useEffect, useState } from "react";
import { motion, useMotionValue, useSpring, useTransform } from "framer-motion";
import {
  BrainCircuit,
  Code2,
  GitBranch,
  MapPin,
  Radio,
  Rocket,
  Terminal,
  TriangleAlert,
  Users,
  ArrowUpRight,
} from "lucide-react";

/**
 * BuilderSystemBento
 *
 * A personal "builder operating system" dashboard for an AI engineer / founder.
 * Designed as a portfolio, dashboard, developer-tool hero, or profile component.
 *
 * Dark, restrained and tactile.
 * No gradients. Motion provides the depth.
 */

const FONT_IMPORT = `
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=Instrument+Serif:ital@0;1&display=swap');
`;

const COLORS = {
  bg: "#0a0a0b",
  panel: "#0e0e10",
  card: "#131316",
  cardHover: "#17171a",
  border: "rgba(255,255,255,0.07)",
  borderStrong: "rgba(255,255,255,0.14)",
  text: "#f2f1ec",
  textMuted: "#84848c",
  textFaint: "#565660",
  accent: "#ff8a4c",
  good: "#5fbf8f",
  warn: "#e0b256",
  danger: "#e08787",
};

const projects = [
  {
    id: "menace",
    name: "menace voice",
    type: "voice infra",
    activity: 94,
    status: "shipping",
  },
  {
    id: "squid",
    name: "squid",
    type: "ai app builder",
    activity: 81,
    status: "active",
  },
  {
    id: "tavo",
    name: "tavo",
    type: "pet software",
    activity: 63,
    status: "building",
  },
  {
    id: "launchstack",
    name: "launchstack",
    type: "agent runtime",
    activity: 52,
    status: "active",
  },
  {
    id: "sivlo",
    name: "sivlo",
    type: "desktop ai",
    activity: 36,
    status: "paused",
  },
];

const activity = [
  {
    time: "04:52",
    msg: "menace-voice  production deploy",
    state: "success",
  },
  {
    time: "03:18",
    msg: "system-bento  component iteration",
    state: "success",
  },
  {
    time: "01:46",
    msg: "squid  agent planning updated",
    state: "success",
  },
  {
    time: "00:21",
    msg: "tavo  schema experiment reverted",
    state: "rollback",
  },
];

const stack = [
  { label: "typescript", pct: 39, color: COLORS.accent },
  { label: "next.js", pct: 27, color: "#c9c9d1" },
  { label: "ai", pct: 22, color: "#5c5c66" },
  { label: "infra", pct: 12, color: "#3a3a41" },
];

const collaborators = ["DS", "AI", "CX", "+∞"];

const cellVariants = {
  hidden: {
    opacity: 0,
    y: 14,
    scale: 0.985,
  },
  visible: (index: number) => ({
    opacity: 1,
    y: 0,
    scale: 1,
    transition: {
      delay: 0.08 + index * 0.055,
      duration: 0.55,
      ease: [0.22, 1, 0.36, 1],
    },
  }),
};

function useTicker(start: number, step: number, intervalMs: number) {
  const [value, setValue] = useState(start);

  useEffect(() => {
    const id = setInterval(() => {
      setValue((v) => Math.max(0, v + Math.round((Math.random() - 0.38) * step)));
    }, intervalMs);

    return () => clearInterval(id);
  }, [step, intervalMs]);

  return value;
}

function AnimatedNumber({ value }: { value: number }) {
  const motionValue = useMotionValue(value);
  const spring = useSpring(motionValue, {
    damping: 28,
    stiffness: 100,
    mass: 0.8,
  });

  const [display, setDisplay] = useState(value);

  useEffect(() => {
    motionValue.set(value);
  }, [value, motionValue]);

  useEffect(() => {
    return spring.on("change", (latest) => {
      setDisplay(Math.round(latest));
    });
  }, [spring]);

  return <>{display.toLocaleString()}</>;
}

function Sparkline() {
  const points = [18, 22, 19, 28, 26, 34, 31, 40, 37, 46, 42, 52, 48, 58];

  const w = 100;
  const h = 100;
  const max = Math.max(...points);
  const min = Math.min(...points);
  const step = w / (points.length - 1);

  const coords = points.map((point, index) => {
    const x = index * step;
    const y = h - ((point - min) / (max - min)) * (h - 14) - 4;
    return [x, y];
  });

  const line = coords
    .map(([x, y], index) => `${index === 0 ? "M" : "L"}${x},${y}`)
    .join(" ");

  const area = `${line} L${w},${h} L0,${h} Z`;

  const [lastX, lastY] = coords[coords.length - 1];

  return (
    <svg
      viewBox={`0 0 ${w} ${h}`}
      preserveAspectRatio="none"
      style={{
        width: "100%",
        height: "100%",
        overflow: "visible",
      }}
    >
      <motion.path
        d={area}
        fill={COLORS.accent}
        initial={{ opacity: 0 }}
        animate={{ opacity: 0.075 }}
        transition={{
          duration: 1,
          delay: 0.7,
        }}
      />

      <motion.path
        d={line}
        fill="none"
        stroke={COLORS.accent}
        strokeWidth="1.6"
        vectorEffect="non-scaling-stroke"
        strokeLinecap="round"
        strokeLinejoin="round"
        initial={{ pathLength: 0, opacity: 0 }}
        animate={{ pathLength: 1, opacity: 1 }}
        transition={{
          pathLength: {
            duration: 1.3,
            delay: 0.35,
            ease: [0.22, 1, 0.36, 1],
          },
          opacity: {
            duration: 0.3,
            delay: 0.35,
          },
        }}
      />

      <motion.circle
        cx={lastX}
        cy={lastY}
        r="2.6"
        fill={COLORS.accent}
        initial={{ scale: 0 }}
        animate={{
          scale: [1, 1.7, 1],
          opacity: [1, 0.55, 1],
        }}
        transition={{
          scale: {
            duration: 2.8,
            repeat: Infinity,
            ease: "easeInOut",
          },
          opacity: {
            duration: 2.8,
            repeat: Infinity,
            ease: "easeInOut",
          },
          delay: 1.45,
        }}
      />
    </svg>
  );
}

function RingProgress({
  pct = 99.6,
}: {
  pct?: number;
}) {
  const r = 34;
  const circumference = 2 * Math.PI * r;

  return (
    <motion.div
      style={{
        display: "flex",
        flexDirection: "column",
        alignItems: "center",
      }}
      whileHover={{
        scale: 1.025,
      }}
      transition={{
        type: "spring",
        stiffness: 280,
        damping: 20,
      }}
    >
      <svg width="88" height="88" viewBox="0 0 88 88">
        <circle
          cx="44"
          cy="44"
          r={r}
          fill="none"
          stroke={COLORS.border}
          strokeWidth="5"
        />

        <motion.circle
          cx="44"
          cy="44"
          r={r}
          fill="none"
          stroke={COLORS.good}
          strokeWidth="5"
          strokeLinecap="round"
          strokeDasharray={circumference}
          transform="rotate(-90 44 44)"
          initial={{
            strokeDashoffset: circumference,
          }}
          animate={{
            strokeDashoffset:
              circumference - (pct / 100) * circumference,
          }}
          transition={{
            duration: 1.25,
            delay: 0.3,
            ease: [0.22, 1, 0.36, 1],
          }}
        />

        <text
          x="44"
          y="41"
          textAnchor="middle"
          fill={COLORS.text}
          fontSize="15"
          fontFamily="'IBM Plex Mono', monospace"
          fontWeight="600"
        >
          {pct}%
        </text>

        <text
          x="44"
          y="55"
          textAnchor="middle"
          fill={COLORS.textFaint}
          fontSize="7.5"
          fontFamily="'IBM Plex Mono', monospace"
          letterSpacing="0.5"
        >
          ONLINE
        </text>
      </svg>
    </motion.div>
  );
}

function Cell({
  area,
  children,
  style,
  className = "",
  index = 0,
}: {
  area: string;
  children: React.ReactNode;
  style?: React.CSSProperties;
  className?: string;
  index?: number;
}) {
  const rotateX = useMotionValue(0);
  const rotateY = useMotionValue(0);

  const springRotateX = useSpring(rotateX, {
    stiffness: 250,
    damping: 28,
  });

  const springRotateY = useSpring(rotateY, {
    stiffness: 250,
    damping: 28,
  });

  function handleMouseMove(event: React.MouseEvent<HTMLDivElement>) {
    const rect = event.currentTarget.getBoundingClientRect();

    const x = event.clientX - rect.left;
    const y = event.clientY - rect.top;

    const centerX = rect.width / 2;
    const centerY = rect.height / 2;

    rotateY.set(((x - centerX) / centerX) * 0.8);
    rotateX.set(-((y - centerY) / centerY) * 0.8);
  }

  function handleMouseLeave() {
    rotateX.set(0);
    rotateY.set(0);
  }

  return (
    <motion.div
      custom={index}
      variants={cellVariants}
      initial="hidden"
      animate="visible"
      whileHover={{
        y: -2,
        backgroundColor: COLORS.cardHover,
        borderColor: COLORS.borderStrong,
      }}
      onMouseMove={handleMouseMove}
      onMouseLeave={handleMouseLeave}
      className={`group relative flex flex-col ${className}`}
      style={{
        gridArea: area,
        background: COLORS.card,
        border: `1px solid ${COLORS.border}`,
        borderRadius: 14,
        padding: 18,
        rotateX: springRotateX,
        rotateY: springRotateY,
        transformPerspective: 900,
        transformStyle: "preserve-3d",
        ...style,
      }}
      transition={{
        y: {
          type: "spring",
          stiffness: 300,
          damping: 24,
        },
        backgroundColor: {
          duration: 0.16,
        },
        borderColor: {
          duration: 0.16,
        },
      }}
    >
      {children}
    </motion.div>
  );
}

function Label({
  children,
  icon: Icon,
}: {
  children: React.ReactNode;
  icon?: React.ComponentType<any>;
}) {
  return (
    <div
      style={{
        display: "flex",
        alignItems: "center",
        gap: 6,
        fontFamily: "'IBM Plex Mono', monospace",
        fontSize: 10.5,
        letterSpacing: "0.09em",
        textTransform: "uppercase",
        color: COLORS.textFaint,
      }}
    >
      {Icon && <Icon size={11.5} strokeWidth={2} />}
      {children}
    </div>
  );
}

function LiveDot({
  color = COLORS.good,
  size = 7,
}: {
  color?: string;
  size?: number;
}) {
  return (
    <span
      style={{
        width: size,
        height: size,
        position: "relative",
        display: "inline-flex",
        flexShrink: 0,
      }}
    >
      <motion.span
        style={{
          position: "absolute",
          inset: 0,
          borderRadius: 999,
          background: color,
        }}
        animate={{
          scale: [1, 1.45, 1],
          opacity: [0.35, 0, 0.35],
        }}
        transition={{
          duration: 2.4,
          repeat: Infinity,
          ease: "easeOut",
        }}
      />

      <span
        style={{
          position: "absolute",
          inset: 1,
          borderRadius: 999,
          background: color,
        }}
      />
    </span>
  );
}

export default function BuilderSystemBento() {
  const tokens = useTicker(184_700, 120, 1700);

  return (
    <div
      style={{
        background: COLORS.bg,
        minHeight: "100vh",
        width: "100%",
        display: "flex",
        alignItems: "center",
        justifyContent: "center",
        padding: 28,
        fontFamily: "'IBM Plex Mono', monospace",
        overflow: "hidden",
      }}
    >
      <style>{FONT_IMPORT}</style>

      <motion.div
        initial={{
          opacity: 0,
          scale: 0.97,
          y: 18,
        }}
        animate={{
          opacity: 1,
          scale: 1,
          y: 0,
        }}
        transition={{
          duration: 0.7,
          ease: [0.22, 1, 0.36, 1],
        }}
        style={{
          width: "100%",
          maxWidth: 860,
          background: COLORS.panel,
          border: `1px solid ${COLORS.border}`,
          borderRadius: 20,
          padding: 20,
        }}
      >
        {/* HEADER */}

        <div
          style={{
            display: "flex",
            alignItems: "center",
            justifyContent: "space-between",
            padding: "4px 6px 18px",
          }}
        >
          <div
            style={{
              display: "flex",
              alignItems: "center",
              gap: 10,
            }}
          >
            <LiveDot />

            <span
              style={{
                color: COLORS.text,
                fontSize: 13,
                fontWeight: 600,
                letterSpacing: "0.02em",
              }}
            >
              drew.system
            </span>

            <span
              style={{
                color: COLORS.textFaint,
                fontSize: 12,
              }}
            >
              / building
            </span>
          </div>

          <motion.div
            animate={{
              opacity: [0.72, 1, 0.72],
            }}
            transition={{
              duration: 3.2,
              repeat: Infinity,
              ease: "easeInOut",
            }}
            style={{
              display: "flex",
              alignItems: "center",
              gap: 6,
              color: COLORS.textMuted,
              fontSize: 11,
            }}
          >
            <Radio size={12} strokeWidth={2} />
            shipping live
          </motion.div>
        </div>

        {/* GRID */}

        <div
          style={{
            display: "grid",
            gridTemplateColumns: "1.55fr 1fr 1fr 1.05fr",
            gridTemplateRows: "108px 108px 108px 96px",
            gridTemplateAreas: `
              "traffic traffic uptime projects"
              "traffic traffic focus projects"
              "log     stack   stack  projects"
              "log     latency team   team"
            `,
            gap: 10,
          }}
        >
          {/* AI ACTIVITY */}

          <Cell area="traffic" index={0}>
            <Label icon={BrainCircuit}>ai tokens / hour</Label>

            <div
              style={{
                display: "flex",
                alignItems: "baseline",
                gap: 8,
                marginTop: 10,
              }}
            >
              <span
                style={{
                  fontFamily: "'Instrument Serif', serif",
                  fontStyle: "italic",
                  fontSize: 44,
                  color: COLORS.text,
                  lineHeight: 1,
                }}
              >
                <AnimatedNumber value={tokens} />
              </span>

              <motion.span
                animate={{
                  y: [0, -2, 0],
                }}
                transition={{
                  duration: 2.8,
                  repeat: Infinity,
                  ease: "easeInOut",
                }}
                style={{
                  display: "inline-flex",
                  alignItems: "center",
                  gap: 2,
                  color: COLORS.accent,
                  fontSize: 11,
                  fontWeight: 600,
                }}
              >
                <ArrowUpRight size={12} strokeWidth={2.5} />
                12.4%
              </motion.span>
            </div>

            <div
              style={{
                flex: 1,
                marginTop: 10,
                minHeight: 0,
              }}
            >
              <Sparkline />
            </div>
          </Cell>

          {/* UPTIME */}

          <Cell
            area="uptime"
            index={1}
            style={{
              alignItems: "center",
              justifyContent: "center",
            }}
          >
            <RingProgress pct={99.8} />
          </Cell>

          {/* CURRENT FOCUS */}

          <Cell area="focus" index={2}>
            <Label icon={Rocket} >DS</Label>

            <motion.div
              initial={{ opacity: 0, x: -6 }}
              animate={{ opacity: 1, x: 0 }}
              transition={{
                delay: 0.65,
                duration: 0.45,
              }}
              style={{
                fontFamily: "'Instrument Serif', serif",
                fontStyle: "italic",
                color: COLORS.text,
                fontSize: 18,
                marginTop: 6,
              }}
            >
              menace voice
            </motion.div>

            <div
              style={{
                marginTop: "auto",
                display: "flex",
                alignItems: "center",
                gap: 6,
                color: COLORS.textMuted,
                fontSize: 8.5,
              }}
            >
              <LiveDot size={6} color={COLORS.accent} />
              agent infrastructure
            </div>
          </Cell>

          {/* PROJECTS */}

          <Cell area="projects" index={3}>
            <Label icon={Code2}>active projects · 5</Label>

            <div
              style={{
                marginTop: 11,
                display: "flex",
                flexDirection: "column",
                gap: 10,
                flex: 1,
              }}
            >
              {projects.map((project, index) => (
                <motion.div
                  key={project.id}
                  initial={{
                    opacity: 0,
                    x: 7,
                  }}
                  animate={{
                    opacity: 1,
                    x: 0,
                  }}
                  transition={{
                    delay: 0.5 + index * 0.08,
                    duration: 0.4,
                    ease: [0.22, 1, 0.36, 1],
                  }}
                  whileHover={{
                    x: 2,
                  }}
                  style={{
                    display: "flex",
                    flexDirection: "column",
                    gap: 4,
                  }}
                >
                  <div
                    style={{
                      display: "flex",
                      alignItems: "center",
                      justifyContent: "space-between",
                      fontSize: 11,
                    }}
                  >
                    <span
                      style={{
                        color:
                          project.status === "shipping"
                            ? COLORS.text
                            : COLORS.textMuted,
                      }}
                    >
                      {project.name}
                    </span>

                    <span
                      style={{
                        color: COLORS.textFaint,
                        fontSize: 8,
                      }}
                    >
                      {project.activity}%
                    </span>
                  </div>

                  <div
                    style={{
                      height: 2,
                      width: "100%",
                      overflow: "hidden",
                      borderRadius: 999,
                      background: COLORS.border,
                    }}
                  >
                    <motion.div
                      initial={{
                        width: 0,
                      }}
                      animate={{
                        width: `${project.activity}%`,
                      }}
                      transition={{
                        delay: 0.7 + index * 0.07,
                        duration: 0.7,
                        ease: [0.22, 1, 0.36, 1],
                      }}
                      style={{
                        height: "100%",
                        borderRadius: 999,
                        background:
                          project.status === "shipping"
                            ? COLORS.accent
                            : COLORS.textFaint,
                      }}
                    />
                  </div>
                </motion.div>
              ))}
            </div>
          </Cell>

          {/* ACTIVITY LOG */}

          <Cell area="log" index={4}>
            <Label icon={Terminal}>builder log</Label>

            <div
              style={{
                marginTop: 10,
                display: "flex",
                flexDirection: "column",
                gap: 7,
                overflow: "hidden",
              }}
            >
              {activity.map((entry, index) => (
                <motion.div
                  key={`${entry.time}-${entry.msg}`}
                  initial={{
                    opacity: 0,
                    x: -8,
                  }}
                  animate={{
                    opacity: 1,
                    x: 0,
                  }}
                  transition={{
                    delay: 0.55 + index * 0.1,
                    duration: 0.45,
                  }}
                  style={{
                    display: "flex",
                    gap: 10,
                    fontSize: 11,
                    whiteSpace: "nowrap",
                  }}
                >
                  <span
                    style={{
                      color: COLORS.textFaint,
                      flexShrink: 0,
                    }}
                  >
                    {entry.time}
                  </span>

                  <span
                    style={{
                      color:
                        entry.state === "rollback"
                          ? COLORS.warn
                          : COLORS.textMuted,
                      overflow: "hidden",
                      textOverflow: "ellipsis",
                    }}
                  >
                    {entry.msg}
                  </span>
                </motion.div>
              ))}
            </div>
          </Cell>

          {/* STACK */}

          <Cell area="stack" index={5}>
            <Label>build stack</Label>

            <div
              style={{
                marginTop: 14,
                display: "flex",
                height: 7,
                borderRadius: 999,
                overflow: "hidden",
                background: COLORS.border,
              }}
            >
              {stack.map((item, index) => (
                <motion.div
                  key={item.label}
                  initial={{
                    width: 0,
                  }}
                  animate={{
                    width: `${item.pct}%`,
                  }}
                  transition={{
                    delay: 0.6 + index * 0.08,
                    duration: 0.8,
                    ease: [0.22, 1, 0.36, 1],
                  }}
                  style={{
                    background: item.color,
                  }}
                />
              ))}
            </div>

            <div
              style={{
                marginTop: 12,
                display: "flex",
                flexWrap: "wrap",
                gap: "6px 14px",
              }}
            >
              {stack.map((item) => (
                <div
                  key={item.label}
                  style={{
                    display: "flex",
                    alignItems: "center",
                    gap: 5,
                    fontSize: 10.5,
                    color: COLORS.textMuted,
                  }}
                >
                  <span
                    style={{
                      width: 5,
                      height: 5,
                      borderRadius: 999,
                      background: item.color,
                    }}
                  />

                  {item.label}

                  <span
                    style={{
                      color: COLORS.textFaint,
                    }}
                  >
                    {item.pct}%
                  </span>
                </div>
              ))}
            </div>
          </Cell>

          {/* LOCATION */}

          <Cell area="latency" index={6}>
            <Label icon={MapPin}>base</Label>

            <div
              style={{
                marginTop: 12,
                color: COLORS.text,
                fontFamily: "'Instrument Serif', serif",
                fontStyle: "italic",
                fontSize: 25,
                lineHeight: 1,
              }}
            >
              chicago
            </div>

            <div
              style={{
                color: COLORS.textFaint,
                fontSize: 8.5,
                marginTop: 5,
              }}
            >
              building globally
            </div>
          </Cell>

          {/* COLLABORATION / SHIP STATUS */}

          <Cell
            area="team"
            index={7}
            style={{
              flexDirection: "row",
              alignItems: "center",
              justifyContent: "space-between",
            }}
          >
            <div>
              <Label icon={Users}>collaborators</Label>

              <div
                style={{
                  marginTop: 8,
                  display: "flex",
                }}
              >
                {collaborators.map((item, index) => (
                  <motion.div
                    key={item}
                    initial={{
                      opacity: 0,
                      x: -7,
                    }}
                    animate={{
                      opacity: 1,
                      x: 0,
                    }}
                    transition={{
                      delay: 0.7 + index * 0.06,
                    }}
                    whileHover={{
                      y: -3,
                      zIndex: 20,
                    }}
                    style={{
                      width: 24,
                      height: 24,
                      borderRadius: 999,
                      background: COLORS.panel,
                      border: `1px solid ${COLORS.borderStrong}`,
                      color:
                        item === "DS"
                          ? COLORS.text
                          : COLORS.textMuted,
                      fontSize: 9,
                      display: "flex",
                      alignItems: "center",
                      justifyContent: "center",
                      marginLeft: index === 0 ? 0 : -7,
                      position: "relative",
                    }}
                  >
                    {item}
                  </motion.div>
                ))}
              </div>
            </div>

            <div
              style={{
                textAlign: "right",
              }}
            >
              <Label icon={GitBranch}>last ship</Label>

              <motion.div
                animate={{
                  opacity: [0.6, 1, 0.6],
                }}
                transition={{
                  duration: 3,
                  repeat: Infinity,
                  ease: "easeInOut",
                }}
                style={{
                  marginTop: 8,
                  fontSize: 11,
                  color: COLORS.textMuted,
                }}
              >
                19m ago
              </motion.div>
            </div>
          </Cell>
        </div>
      </motion.div>
    </div>
  );
}