4e:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 4f:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 50:Tcdf,"use client"; import Script from "next/script"; import { createElement, useState } from "react"; import { FadeIn } from "@/components/ui/fade-in"; import { cn } from "@/lib/utils"; /** Edit CONTENT to swap demo models. */ const CONTENT = [ { id: "og-tool", title: "OG Image Generator", description: "Preview how your social cards look in 3D space before sharing.", src: "https://modelviewer.dev/shared-assets/models/Astronaut.glb", poster: "/opengraph-image", }, { id: "dashboard", title: "SaaS Dashboard MVP", description: "Interactive 3D preview of a shipped client dashboard layout.", src: "https://modelviewer.dev/shared-assets/models/NeilArmstrong.glb", }, ]; const chipBase = "border px-3 py-1.5 text-xs font-medium transition-colors"; const chipActive = "border-brand bg-brand/10 text-brand"; const chipIdle = "border-border-subtle text-muted-foreground hover:border-border hover:text-foreground"; export function ArPortfolio() { const [active, setActive] = useState(CONTENT[0]!.id); const model = CONTENT.find((m) => m.id === active) ?? CONTENT[0]!; const [scriptReady, setScriptReady] = useState(false); return ( <>