# Blueprint: Site Builder > An AI site builder's hero. A prompt types itself into the field, Enter goes down, and the field docks in the corner as the page builds beneath it. Each loop is a new prompt with different copy, colors and photos in the same layout, swapped in through `onLoop`, so the same wireframe turns into a different site. Hover to pause it. A shadcn/ui block from the [@keyframeui](https://keyframeui.com) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/keyframeui/blueprint-demo). - Page, with a live preview: https://shadcn.exchange/r/keyframeui/blueprint-demo - Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/keyframeui/blueprint-demo-light-63a2bcf47ce5e413.png - Registry item: https://keyframeui.com/r/blueprint-demo.json - Categories: layout, scroll, motion - Listed: 2026-10-14, source last changed 2026-10-15 ## Install ```bash npx shadcn@latest add https://keyframeui.com/r/blueprint-demo.json ``` Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on. ## Dependencies - Registry items: `https://keyframeui.com/r/blueprint.json` ## Notes from the registry Live preview, examples and props: https://keyframeui.com/components/blueprint#blueprint-demo ## Files ### `registry/demos/blueprint-demo.tsx` ```tsx "use client"; import * as React from "react"; import { animate, motion, useMotionValue, useReducedMotion, useTransform } from "motion/react"; import { cn } from "@/lib/utils"; import { Blueprint } from "@/components/ui/blueprint"; type Site = { prompt: string; domain: string; brand: string; nav: string[]; eyebrow: string; title: string; text: string; primary: string; secondary: string; photo: string; alt: string; note: string; /** [light, dark] */ paper: [string, string]; ink: [string, string]; accent: [string, string]; }; const sites: Site[] = [ { prompt: "A site for a ceramics studio in Lisbon", domain: "barro.studio", brand: "Barro", nav: ["Shop", "Classes", "Visit"], eyebrow: "Ceramics studio · Lisbon", title: "Pottery for slow mornings", text: "Hand-thrown in Alfama, fired twice, and made to be used every day, not saved for guests.", primary: "Visit the studio", secondary: "Shop bowls", photo: "1610701596061-2ecf227e85b2", alt: "Stoneware bowls and cups on a wooden table", note: "Wheel classes every Saturday", paper: ["#f6f1ea", "#1c1714"], ink: ["#2b211c", "#f3ebe3"], accent: ["#b4532a", "#e0875c"], }, { prompt: "A site for an architecture studio in Oslo", domain: "fjell.no", brand: "Fjell", nav: ["Projects", "Studio", "Contact"], eyebrow: "Architecture · Oslo", title: "Quiet houses for long winters", text: "Timber homes that hold the heat, frame the low light, and settle into the land around them.", primary: "See the houses", secondary: "Our approach", photo: "1600585154340-be6161a56a0c", alt: "A timber and glass house lit up at dusk", note: "Twelve houses since 2014", paper: ["#eef1ee", "#121816"], ink: ["#18221f", "#e6ece9"], accent: ["#2f5d50", "#7fb8a5"], }, { prompt: "A landing page for a wine bar in Copenhagen", domain: "lillevin.dk", brand: "Lille Vin", nav: ["Wines", "Kitchen", "Book"], eyebrow: "Natural wine · Copenhagen", title: "Small growers, long tables", text: "Sixty bottles from people who farm by hand, poured by the glass with plates to share.", primary: "Book a table", secondary: "This week's list", photo: "1510812431401-41d2bd2722f3", alt: "Friends raising glasses of red wine", note: "Open late, Wednesday to Sunday", paper: ["#f7efef", "#1d1214"], ink: ["#2a1418", "#f3e6e8"], accent: ["#7a1f3d", "#e07a9a"], }, ]; const faces = ["1438761681033-6461ffad8d80", "1500648767791-00dcc994a43e", "1534528741775-53994a69daeb"]; const photo = (id: string, w: number, h: number) => `https://images.unsplash.com/photo-${id}?auto=format&fit=crop&w=${w}&h=${h}&q=80`; // The prompt types while the loop rests on the wireframe, so the rest is long enough to hold it. const TIMING = { build: 5, hold: 2.5, unbuild: 1, rest: 3.4 }; const TYPE = { delay: 0.45, perChar: 0.032, pause: 0.3, press: 0.22 }; // s const DOCK = { type: "spring", visualDuration: 0.45, bounce: 0.12 } as const; type Phase = "typing" | "sent" | "docked"; export function BlueprintDemo() { const reduced = useReducedMotion(); const [loop, setLoop] = React.useState(0); const [site, setSite] = React.useState(0); const [phase, setPhase] = React.useState("typing"); const prompt = sites[loop % sites.length].prompt; React.useEffect(() => { for (const s of sites) { const img = new Image(); img.src = photo(s.photo, 640, 800); } }, []); // Each loop: the next prompt types in, Enter goes down, the page swaps to the new site's copy // (the wireframe re-measures under it) and the field docks in the corner before the build. React.useEffect(() => { const at = (s: number, run: () => void) => window.setTimeout(run, s * 1000); const typed = TYPE.delay + prompt.length * TYPE.perChar + TYPE.pause; const timers = reduced ? [at(0, () => setPhase("docked"))] : [ at(0, () => setPhase("typing")), at(typed, () => setPhase("sent")), at(typed + TYPE.press, () => { setSite(loop % sites.length); setPhase("docked"); }), ]; return () => timers.forEach((id) => window.clearTimeout(id)); }, [loop, prompt, reduced]); const current = sites[site]; return (
{current.domain}
); } function SitePage({ site }: { site: Site }) { const palette = { "--paper": site.paper[0], "--paper-dark": site.paper[1], "--ink": site.ink[0], "--ink-dark": site.ink[1], "--accent": site.accent[0], "--accent-dark": site.accent[1], } as React.CSSProperties; return (
{site.brand}

{site.eyebrow}

{site.title}

{site.text}

{site.primary} {site.secondary}
{faces.map((face) => ( ))}

{site.note}

{site.alt}
); } function PromptBar({ text, phase }: { text: string; phase: Phase }) { const count = useMotionValue(0); const typed = useTransform(count, (c): string => text.slice(0, Math.round(c))); const placeholder = useTransform(count, (c): string => (c < 0.5 ? "Describe a site…" : "")); React.useEffect(() => { if (phase !== "typing") { count.jump(text.length); return; } count.jump(0); const controls = animate(count, text.length, { delay: TYPE.delay, duration: text.length * TYPE.perChar, ease: "linear", }); return () => controls.stop(); }, [phase, text, count]); const docked = phase === "docked"; return (
{typed} {placeholder} {phase === "typing" && ( )} {!docked && ( ↵ )}
); } ```