Animated developer command center with project activity, AI usage, build stack, deployment logs, uptime, collaborators, and current focus. Built with Framer Motion for subtle interactive motion.
"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>
);
}