"use client";
import { RotateCcw } from "lucide-react";
import { useEffect, useRef, useState, type ReactNode } from "react";
type Chip = {
label: string;
slug: string;
bg: string;
fg: string;
iconUrl?: string;
};
const CHIPS: Chip[] = [
{
label: "Figma",
slug: "figma",
bg: "#1f1f1f",
fg: "#ffffff",
iconUrl: "/figma.svg",
},
{
label: "React",
slug: "react",
bg: "#1FB6CB",
fg: "#ffffff",
iconUrl: "https://cdn.simpleicons.org/react",
},
{
label: "Next.js",
slug: "nextdotjs",
bg: "#1f1f1f",
fg: "#ffffff",
iconUrl: "https://cdn.simpleicons.org/nextdotjs/000000",
},
{ label: "TypeScript", slug: "typescript", bg: "#2F74C0", fg: "#ffffff" },
{ label: "shadcn/ui", slug: "shadcnui", bg: "#5b54ff", fg: "#ffffff" },
{ label: "Cursor", slug: "cursor", bg: "#111111", fg: "#ffffff" },
{ label: "GSAP", slug: "gsap", bg: "#0AE448", fg: "#0a0a0a" },
{ label: "GitHub", slug: "github", bg: "#181717", fg: "#ffffff" },
{ label: "Vercel", slug: "vercel", bg: "#0a0a0a", fg: "#ffffff" },
{ label: "Tailwind CSS", slug: "tailwindcss", bg: "#2BBCF5", fg: "#ffffff" },
];
const CHIP_RADIUS = 14;
const ICON_RADIUS = 10;
const WALL_PAD = 16;
type ChipState = {
chip: Chip;
body: Matter.Body;
width: number;
height: number;
};
type StackSize = "default" | "wide" | "embed";
type StackProps = {
showHeading?: boolean;
/** Fills a card preview — matches parent radius, no nested border */
embed?: boolean;
size?: StackSize;
};
const STAGE_CLASS: Record<StackSize, string> = {
default:
"border-foreground/5 bg-foreground/2 dark:bg-foreground/5 relative h-40 w-full touch-none overflow-hidden rounded-4xl border sm:h-64",
wide: "bg-foreground/2 dark:bg-foreground/5 relative h-52 w-full touch-none overflow-hidden rounded-4xl sm:h-72 md:h-80",
embed:
"bg-foreground/2 dark:bg-foreground/5 relative h-full w-full touch-none overflow-hidden rounded-2xl",
};
export function Stack({
showHeading = true,
embed = false,
size: sizeProp,
}: StackProps): ReactNode {
const size: StackSize = sizeProp ?? (embed ? "embed" : "default");
const containerRef = useRef<HTMLDivElement | null>(null);
const measureRef = useRef<HTMLDivElement | null>(null);
const chipRefs = useRef<Array<HTMLDivElement | null>>([]);
const [resetKey, setResetKey] = useState(0);
useEffect(() => {
const container = containerRef.current;
const measure = measureRef.current;
if (!container || !measure) return;
let cancelled = false;
let cleanup: (() => void) | undefined;
void (async () => {
const Matter = await import("matter-js");
if (cancelled) return;
const {
Engine,
Runner,
World,
Bodies,
Body,
Mouse,
MouseConstraint,
Events,
} = Matter;
const measureChildren = Array.from(measure.children) as HTMLElement[];
const dims = measureChildren.map((el) => {
const r = el.getBoundingClientRect();
return { w: Math.max(80, r.width), h: Math.max(28, r.height) };
});
let width = container.clientWidth;
let height = container.clientHeight;
const engine = Engine.create();
engine.gravity.y = 1;
const world = engine.world;
const wallThickness = 400;
const floor = Bodies.rectangle(
width / 2,
height - WALL_PAD + wallThickness / 2,
width * 3,
wallThickness,
{ isStatic: true }
);
const leftWall = Bodies.rectangle(
WALL_PAD - wallThickness / 2,
height / 2,
wallThickness,
height * 4,
{ isStatic: true }
);
const rightWall = Bodies.rectangle(
width - WALL_PAD + wallThickness / 2,
height / 2,
wallThickness,
height * 4,
{ isStatic: true }
);
World.add(world, [floor, leftWall, rightWall]);
const states: ChipState[] = CHIPS.map((chip, i) => {
const dim = dims[i] ?? { w: 120, h: 36 };
const { w, h } = dim;
const halfW = w / 2;
const minX = WALL_PAD + halfW + 4;
const maxX = width - WALL_PAD - halfW - 4;
const span = Math.max(1, maxX - minX);
const slot = (i + 0.5) / CHIPS.length;
const x =
minX +
slot * span +
(Math.random() - 0.5) * Math.min(72, span * 0.12);
const y = -80 - i * 60 - Math.random() * 120;
const body = Bodies.rectangle(x, y, w, h, {
chamfer: { radius: CHIP_RADIUS },
restitution: 0.35,
friction: 0.5,
frictionAir: 0.025,
density: 0.0018,
angle: (Math.random() - 0.5) * 0.4,
});
World.add(world, body);
return { chip, body, width: w, height: h };
});
const mouse = Mouse.create(container);
const wheelTarget = mouse.element as HTMLElement & {
mousewheel?: EventListener;
};
if (wheelTarget.mousewheel) {
wheelTarget.removeEventListener("wheel", wheelTarget.mousewheel);
wheelTarget.removeEventListener(
"DOMMouseScroll",
wheelTarget.mousewheel
);
}
const mouseConstraint = MouseConstraint.create(engine, {
mouse,
constraint: {
stiffness: 0.2,
damping: 0.2,
render: { visible: false },
},
});
World.add(world, mouseConstraint);
Events.on(mouseConstraint, "startdrag", () => {
container.style.cursor = "grabbing";
});
Events.on(mouseConstraint, "enddrag", () => {
container.style.cursor = "grab";
});
const runner = Runner.create();
Runner.run(runner, engine);
let tabVisible = true;
let onScreen = true;
const syncRunner = (): void => {
if (tabVisible && onScreen) {
Runner.run(runner, engine);
} else {
Runner.stop(runner);
}
};
const onVisibility = (): void => {
tabVisible = document.visibilityState === "visible";
syncRunner();
};
document.addEventListener("visibilitychange", onVisibility);
const visibilityIo = new IntersectionObserver(
(entries) => {
for (const e of entries) onScreen = e.isIntersecting;
syncRunner();
},
{ rootMargin: "100px" }
);
visibilityIo.observe(container);
let raf = 0;
const tick = (): void => {
if (tabVisible && onScreen) {
for (let i = 0; i < states.length; i++) {
const s = states[i];
const el = chipRefs.current[i];
if (!s || !el) continue;
const { x, y } = s.body.position;
el.style.transform = `translate3d(${x - s.width / 2}px, ${y - s.height / 2}px, 0) rotate(${s.body.angle}rad)`;
}
}
raf = requestAnimationFrame(tick);
};
raf = requestAnimationFrame(tick);
const onResize = (): void => {
const newW = container.clientWidth;
const newH = container.clientHeight;
if (newW === width && newH === height) return;
Body.setPosition(floor, {
x: newW / 2,
y: newH - WALL_PAD + wallThickness / 2,
});
Body.setPosition(leftWall, {
x: WALL_PAD - wallThickness / 2,
y: newH / 2,
});
Body.setPosition(rightWall, {
x: newW - WALL_PAD + wallThickness / 2,
y: newH / 2,
});
width = newW;
height = newH;
};
const ro = new ResizeObserver(onResize);
ro.observe(container);
cleanup = () => {
cancelAnimationFrame(raf);
document.removeEventListener("visibilitychange", onVisibility);
visibilityIo.disconnect();
ro.disconnect();
Runner.stop(runner);
World.clear(world, false);
Engine.clear(engine);
};
})();
return () => {
cancelled = true;
cleanup?.();
};
}, [resetKey]);
return (
<div
className={
embed ? "h-full w-full" : size === "wide" ? "w-full" : "flex flex-col gap-3"
}
>
{showHeading ? (
<div className="flex items-center gap-3">
<h3 className="text-foreground text-[15px] font-semibold tracking-tight">
Stack
</h3>
</div>
) : null}
<div className={STAGE_CLASS[size]}>
<button
type="button"
onClick={() => setResetKey((k) => k + 1)}
aria-label="Reset stack"
className="focus-ring border-foreground/8 bg-background text-foreground/70 hover:text-foreground absolute top-3 right-3 z-20 inline-flex h-9 w-9 items-center justify-center rounded-xl border transition-colors"
>
<RotateCcw
className="h-4 w-4"
strokeWidth={2.25}
aria-hidden="true"
/>
</button>
<div
ref={measureRef}
aria-hidden="true"
className="pointer-events-none invisible absolute top-0 left-0 flex flex-wrap gap-2"
>
{CHIPS.map((chip) => (
<ChipPill key={`m-${chip.label}`} chip={chip} />
))}
</div>
<div
ref={containerRef}
className="absolute inset-0 cursor-grab select-none"
style={{ touchAction: "none" }}
>
{CHIPS.map((chip, i) => (
<div
key={`${resetKey}-${chip.label}`}
ref={(el) => {
chipRefs.current[i] = el;
}}
data-stack-chip
className="pointer-events-none absolute top-0 left-0 will-change-transform"
style={{ transform: "translate3d(-9999px, -9999px, 0)" }}
>
<ChipPill chip={chip} />
</div>
))}
</div>
</div>
</div>
);
}
function ChipPill({ chip }: { chip: Chip }): ReactNode {
return (
<div
className="dark:ring-1 dark:ring-white/15 inline-flex items-center gap-2 p-1 pr-2 text-[15px] font-medium tracking-tight sm:text-[16px]"
style={{
backgroundColor: chip.bg,
color: chip.fg,
borderRadius: `${CHIP_RADIUS}px`,
}}
>
<span
className="inline-flex h-8 w-8 items-center justify-center bg-white/95"
style={{ borderRadius: `${ICON_RADIUS}px` }}
aria-hidden="true"
>
<img
src={chip.iconUrl ?? `https://cdn.simpleicons.org/${chip.slug}`}
alt=""
width={18}
height={18}
className="h-5 w-5"
draggable={false}
/>
</span>
<span>{chip.label}</span>
</div>
);
}
"use client";
import { RotateCcw } from "lucide-react";
import { useEffect, useRef, useState, type ReactNode } from "react";
type Chip = {
label: string;
slug: string;
bg: string;
fg: string;
iconUrl?: string;
};
const CHIPS: Chip[] = [
{
label: "Figma",
slug: "figma",
bg: "#1f1f1f",
fg: "#ffffff",
iconUrl: "/figma.svg",
},
{
label: "React",
slug: "react",
bg: "#1FB6CB",
fg: "#ffffff",
iconUrl: "https://cdn.simpleicons.org/react",
},
{
label: "Next.js",
slug: "nextdotjs",
bg: "#1f1f1f",
fg: "#ffffff",
iconUrl: "https://cdn.simpleicons.org/nextdotjs/000000",
},
{ label: "TypeScript", slug: "typescript", bg: "#2F74C0", fg: "#ffffff" },
{ label: "shadcn/ui", slug: "shadcnui", bg: "#5b54ff", fg: "#ffffff" },
{ label: "Cursor", slug: "cursor", bg: "#111111", fg: "#ffffff" },
{ label: "GSAP", slug: "gsap", bg: "#0AE448", fg: "#0a0a0a" },
{ label: "GitHub", slug: "github", bg: "#181717", fg: "#ffffff" },
{ label: "Vercel", slug: "vercel", bg: "#0a0a0a", fg: "#ffffff" },
{ label: "Tailwind CSS", slug: "tailwindcss", bg: "#2BBCF5", fg: "#ffffff" },
];
const CHIP_RADIUS = 14;
const ICON_RADIUS = 10;
const WALL_PAD = 16;
type ChipState = {
chip: Chip;
body: Matter.Body;
width: number;
height: number;
};
type StackSize = "default" | "wide" | "embed";
type StackProps = {
showHeading?: boolean;
/** Fills a card preview — matches parent radius, no nested border */
embed?: boolean;
size?: StackSize;
};
const STAGE_CLASS: Record<StackSize, string> = {
default:
"border-foreground/5 bg-foreground/2 dark:bg-foreground/5 relative h-40 w-full touch-none overflow-hidden rounded-4xl border sm:h-64",
wide: "bg-foreground/2 dark:bg-foreground/5 relative h-52 w-full touch-none overflow-hidden rounded-4xl sm:h-72 md:h-80",
embed:
"bg-foreground/2 dark:bg-foreground/5 relative h-full w-full touch-none overflow-hidden rounded-2xl",
};
export function Stack({
showHeading = true,
embed = false,
size: sizeProp,
}: StackProps): ReactNode {
const size: StackSize = sizeProp ?? (embed ? "embed" : "default");
const containerRef = useRef<HTMLDivElement | null>(null);
const measureRef = useRef<HTMLDivElement | null>(null);
const chipRefs = useRef<Array<HTMLDivElement | null>>([]);
const [resetKey, setResetKey] = useState(0);
useEffect(() => {
const container = containerRef.current;
const measure = measureRef.current;
if (!container || !measure) return;
let cancelled = false;
let cleanup: (() => void) | undefined;
void (async () => {
const Matter = await import("matter-js");
if (cancelled) return;
const {
Engine,
Runner,
World,
Bodies,
Body,
Mouse,
MouseConstraint,
Events,
} = Matter;
const measureChildren = Array.from(measure.children) as HTMLElement[];
const dims = measureChildren.map((el) => {
const r = el.getBoundingClientRect();
return { w: Math.max(80, r.width), h: Math.max(28, r.height) };
});
let width = container.clientWidth;
let height = container.clientHeight;
const engine = Engine.create();
engine.gravity.y = 1;
const world = engine.world;
const wallThickness = 400;
const floor = Bodies.rectangle(
width / 2,
height - WALL_PAD + wallThickness / 2,
width * 3,
wallThickness,
{ isStatic: true }
);
const leftWall = Bodies.rectangle(
WALL_PAD - wallThickness / 2,
height / 2,
wallThickness,
height * 4,
{ isStatic: true }
);
const rightWall = Bodies.rectangle(
width - WALL_PAD + wallThickness / 2,
height / 2,
wallThickness,
height * 4,
{ isStatic: true }
);
World.add(world, [floor, leftWall, rightWall]);
const states: ChipState[] = CHIPS.map((chip, i) => {
const dim = dims[i] ?? { w: 120, h: 36 };
const { w, h } = dim;
const halfW = w / 2;
const minX = WALL_PAD + halfW + 4;
const maxX = width - WALL_PAD - halfW - 4;
const span = Math.max(1, maxX - minX);
const slot = (i + 0.5) / CHIPS.length;
const x =
minX +
slot * span +
(Math.random() - 0.5) * Math.min(72, span * 0.12);
const y = -80 - i * 60 - Math.random() * 120;
const body = Bodies.rectangle(x, y, w, h, {
chamfer: { radius: CHIP_RADIUS },
restitution: 0.35,
friction: 0.5,
frictionAir: 0.025,
density: 0.0018,
angle: (Math.random() - 0.5) * 0.4,
});
World.add(world, body);
return { chip, body, width: w, height: h };
});
const mouse = Mouse.create(container);
const wheelTarget = mouse.element as HTMLElement & {
mousewheel?: EventListener;
};
if (wheelTarget.mousewheel) {
wheelTarget.removeEventListener("wheel", wheelTarget.mousewheel);
wheelTarget.removeEventListener(
"DOMMouseScroll",
wheelTarget.mousewheel
);
}
const mouseConstraint = MouseConstraint.create(engine, {
mouse,
constraint: {
stiffness: 0.2,
damping: 0.2,
render: { visible: false },
},
});
World.add(world, mouseConstraint);
Events.on(mouseConstraint, "startdrag", () => {
container.style.cursor = "grabbing";
});
Events.on(mouseConstraint, "enddrag", () => {
container.style.cursor = "grab";
});
const runner = Runner.create();
Runner.run(runner, engine);
let tabVisible = true;
let onScreen = true;
const syncRunner = (): void => {
if (tabVisible && onScreen) {
Runner.run(runner, engine);
} else {
Runner.stop(runner);
}
};
const onVisibility = (): void => {
tabVisible = document.visibilityState === "visible";
syncRunner();
};
document.addEventListener("visibilitychange", onVisibility);
const visibilityIo = new IntersectionObserver(
(entries) => {
for (const e of entries) onScreen = e.isIntersecting;
syncRunner();
},
{ rootMargin: "100px" }
);
visibilityIo.observe(container);
let raf = 0;
const tick = (): void => {
if (tabVisible && onScreen) {
for (let i = 0; i < states.length; i++) {
const s = states[i];
const el = chipRefs.current[i];
if (!s || !el) continue;
const { x, y } = s.body.position;
el.style.transform = `translate3d(${x - s.width / 2}px, ${y - s.height / 2}px, 0) rotate(${s.body.angle}rad)`;
}
}
raf = requestAnimationFrame(tick);
};
raf = requestAnimationFrame(tick);
const onResize = (): void => {
const newW = container.clientWidth;
const newH = container.clientHeight;
if (newW === width && newH === height) return;
Body.setPosition(floor, {
x: newW / 2,
y: newH - WALL_PAD + wallThickness / 2,
});
Body.setPosition(leftWall, {
x: WALL_PAD - wallThickness / 2,
y: newH / 2,
});
Body.setPosition(rightWall, {
x: newW - WALL_PAD + wallThickness / 2,
y: newH / 2,
});
width = newW;
height = newH;
};
const ro = new ResizeObserver(onResize);
ro.observe(container);
cleanup = () => {
cancelAnimationFrame(raf);
document.removeEventListener("visibilitychange", onVisibility);
visibilityIo.disconnect();
ro.disconnect();
Runner.stop(runner);
World.clear(world, false);
Engine.clear(engine);
};
})();
return () => {
cancelled = true;
cleanup?.();
};
}, [resetKey]);
return (
<div
className={
embed ? "h-full w-full" : size === "wide" ? "w-full" : "flex flex-col gap-3"
}
>
{showHeading ? (
<div className="flex items-center gap-3">
<h3 className="text-foreground text-[15px] font-semibold tracking-tight">
Stack
</h3>
</div>
) : null}
<div className={STAGE_CLASS[size]}>
<button
type="button"
onClick={() => setResetKey((k) => k + 1)}
aria-label="Reset stack"
className="focus-ring border-foreground/8 bg-background text-foreground/70 hover:text-foreground absolute top-3 right-3 z-20 inline-flex h-9 w-9 items-center justify-center rounded-xl border transition-colors"
>
<RotateCcw
className="h-4 w-4"
strokeWidth={2.25}
aria-hidden="true"
/>
</button>
<div
ref={measureRef}
aria-hidden="true"
className="pointer-events-none invisible absolute top-0 left-0 flex flex-wrap gap-2"
>
{CHIPS.map((chip) => (
<ChipPill key={`m-${chip.label}`} chip={chip} />
))}
</div>
<div
ref={containerRef}
className="absolute inset-0 cursor-grab select-none"
style={{ touchAction: "none" }}
>
{CHIPS.map((chip, i) => (
<div
key={`${resetKey}-${chip.label}`}
ref={(el) => {
chipRefs.current[i] = el;
}}
data-stack-chip
className="pointer-events-none absolute top-0 left-0 will-change-transform"
style={{ transform: "translate3d(-9999px, -9999px, 0)" }}
>
<ChipPill chip={chip} />
</div>
))}
</div>
</div>
</div>
);
}
function ChipPill({ chip }: { chip: Chip }): ReactNode {
return (
<div
className="dark:ring-1 dark:ring-white/15 inline-flex items-center gap-2 p-1 pr-2 text-[15px] font-medium tracking-tight sm:text-[16px]"
style={{
backgroundColor: chip.bg,
color: chip.fg,
borderRadius: `${CHIP_RADIUS}px`,
}}
>
<span
className="inline-flex h-8 w-8 items-center justify-center bg-white/95"
style={{ borderRadius: `${ICON_RADIUS}px` }}
aria-hidden="true"
>
<img
src={chip.iconUrl ?? `https://cdn.simpleicons.org/${chip.slug}`}
alt=""
width={18}
height={18}
className="h-5 w-5"
draggable={false}
/>
</span>
<span>{chip.label}</span>
</div>
);
}
