4f:I[707087,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"RegistryDependencies"] 50:I[512940,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"Installation"] 51:I[314491,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"FilesView"] 52:T2df3,"use client"; import * as React from "react"; import { cn } from "@/lib/utils"; import { ClaudeMessage } from "@/registry/brainless/claude/claude-message"; import { ClaudeThinking } from "@/registry/brainless/claude/claude-thinking"; import { ClaudePrompt } from "@/registry/brainless/claude/claude-prompt"; import { ClaudeTodoList, type Todo } from "@/registry/brainless/claude/claude-todo-list"; /** * PiedPiperOnboarding — an interactive sign-up flow built from brainless * components. A Claude-style header with a terminal Pied Piper logo, typed * assistant lines, thinking between turns, and the real ❯ composer for input. */ const GREEN = "#39b54a"; const GREEN_DIM = "#2a8a38"; const GRAY = "#949494"; const FG = "#c0caf5"; // Side-view flute / pipe — Silicon Valley Pied Piper, as a 1-bit terminal sprite. const LOGO_BITS = [ "000000001111000000", "000000111111110000", "000011111111111100", "001111010101011110", "011111111111111111", "001111010101011110", "000011111111111100", "000000111111110000", "000000001111000000", ]; function PiedPiperLogo({ scale = 3.5, color = GREEN, className, }: { scale?: number; color?: string; className?: string; }) { const w = LOGO_BITS[0].length; const h = LOGO_BITS.length; const PH = 2.2; const rects: React.ReactElement[] = []; LOGO_BITS.forEach((row, y) => { let x = 0; while (x < w) { if (row[x] === "1") { let end = x; while (end < w && row[end] === "1") end += 1; rects.push( , ); x = end; } else { x += 1; } } }); return ( ); } function PiedPiperHeader({ className }: { className?: string }) { return (

Pied Piper v3.1.4

Welcome to Pied Piper

compression · middle-out

onboarding · new account

Tips for getting started

Tell us your name

Say what you're looking for

What's new

Middle-out compression is live

Sign-up now fits in one turn

/release-notes for more

); } type Phase = | "greeting" | "await-name" | "think-name" | "ask-looking" | "await-looking" | "think-looking" | "done" | "complete"; type ChatLine = | { kind: "assistant"; text: string; typing?: boolean } | { kind: "user"; text: string }; function useTypewriter( text: string, active: boolean, ms = 22, ): { displayed: string; done: boolean } { const [displayed, setDisplayed] = React.useState(""); const prefersReduced = usePrefersReducedMotion(); React.useEffect(() => { if (!active) return; if (prefersReduced) { setDisplayed(text); return; } setDisplayed(""); let i = 0; const id = setInterval(() => { i += 1; setDisplayed(text.slice(0, i)); if (i >= text.length) clearInterval(id); }, ms); return () => clearInterval(id); }, [text, active, ms, prefersReduced]); const done = active && displayed.length >= text.length; return { displayed, done }; } function usePrefersReducedMotion() { const [reduced, setReduced] = React.useState(false); React.useEffect(() => { const mq = window.matchMedia("(prefers-reduced-motion: reduce)"); setReduced(mq.matches); const on = () => setReduced(mq.matches); mq.addEventListener("change", on); return () => mq.removeEventListener("change", on); }, []); return reduced; } function todosFor(phase: Phase, name: string): Todo[] { const named = name.trim() || "your name"; const askName: Todo["status"] = phase === "greeting" || phase === "await-name" ? "active" : "done"; const askLooking: Todo["status"] = phase === "ask-looking" || phase === "await-looking" || phase === "think-name" ? "active" : phase === "greeting" || phase === "await-name" ? "todo" : "done"; const finish: Todo["status"] = phase === "think-looking" || phase === "done" ? "active" : phase === "complete" ? "done" : "todo"; return [ { label: `Collect ${named === "your name" ? "a name" : named}`, status: askName }, { label: "Learn what they're looking for", status: askLooking }, { label: "Create the account", status: finish }, ]; } /** * PiedPiperOnboarding — interactive demo block. */ export function PiedPiperOnboarding() { const [phase, setPhase] = React.useState("greeting"); const [lines, setLines] = React.useState([]); const [name, setName] = React.useState(""); const [lookingFor, setLookingFor] = React.useState(""); const [draft, setDraft] = React.useState(""); const rootRef = React.useRef(null); const greeting = "Hey — what's your name?"; const followUp = React.useMemo(() => { const first = name.trim().split(/\s+/)[0] || "friend"; return `Nice to meet you, ${first}. And what are you looking for?`; }, [name]); const finale = React.useMemo(() => { const first = name.trim().split(/\s+/)[0] || "friend"; const want = lookingFor.trim() || "something great"; return `You're in, ${first}. We've got you down for "${want}". Welcome to Pied Piper — compression so good, it feels illegal.`; }, [name, lookingFor]); const typingText = phase === "greeting" ? greeting : phase === "ask-looking" ? followUp : phase === "done" ? finale : ""; const { displayed, done: typed } = useTypewriter( typingText, phase === "greeting" || phase === "ask-looking" || phase === "done", ); // Commit typed lines into the transcript, then wait for input / finish. React.useEffect(() => { if (!typed) return; const commit = (text: string, next: Phase) => { setLines((prev) => { const last = prev[prev.length - 1]; if (last?.kind === "assistant" && last.text === text) return prev; return [...prev, { kind: "assistant", text }]; }); setPhase(next); }; if (phase === "greeting") commit(greeting, "await-name"); else if (phase === "ask-looking") commit(followUp, "await-looking"); else if (phase === "done") commit(finale, "complete"); }, [typed, phase, greeting, followUp, finale]); // Thinking delays. React.useEffect(() => { if (phase !== "think-name" && phase !== "think-looking") return; const ms = 1400 + Math.random() * 600; const id = setTimeout(() => { if (phase === "think-name") setPhase("ask-looking"); else setPhase("done"); }, ms); return () => clearTimeout(id); }, [phase]); // Focus the composer when waiting for input — never scroll the page. React.useEffect(() => { if (phase !== "await-name" && phase !== "await-looking" && phase !== "complete") { return; } const input = rootRef.current?.querySelector( 'input[aria-label="Prompt"]', ); input?.focus({ preventScroll: true }); }, [phase]); function submit() { const value = draft.trim(); if (!value && phase !== "complete") return; if (phase === "await-name") { setName(value); setLines((prev) => [...prev, { kind: "user", text: value }]); setDraft(""); setPhase("think-name"); return; } if (phase === "await-looking") { setLookingFor(value); setLines((prev) => [...prev, { kind: "user", text: value }]); setDraft(""); setPhase("think-looking"); return; } if (phase === "complete") { setPhase("greeting"); setLines([]); setName(""); setLookingFor(""); setDraft(""); } } const waiting = phase === "await-name" || phase === "await-looking" || phase === "complete"; const thinking = phase === "think-name" || phase === "think-looking"; const showTyping = phase === "greeting" || phase === "ask-looking" || phase === "done"; const placeholder = phase === "await-name" ? "your name" : phase === "await-looking" ? "e.g. lossless video compression" : phase === "complete" ? "press enter to restart" : ""; return (

{lines.map((line, i) => line.kind === "user" ? ( {line.text} ) : ( {line.text} ), )} {showTyping ? ( {displayed} {!typed ? ( ) : null} ) : null} {thinking ? ( ) : null}

setDraft(e.target.value)} onKeyDown={(e) => { if (e.key === "Enter") { e.preventDefault(); if (waiting) submit(); } }} placeholder={placeholder} mode="auto" effort={false} className={cn(!waiting && "pointer-events-none opacity-50")} />

{phase === "complete" ? (

✓ account created · press enter to run it again

) : null}

); } 4b:["$","div",null,{"className":"flex flex-col gap-12","children":[["$","div",null,{"className":"pt-10 flex flex-col gap-4","children":[["$","ul",null,{"className":"flex gap-2 flex-wrap","children":[]}],["$","$L4f",null,{"registryDependencies":["https://brainless.swerdlow.dev/r/claude-message.json","https://brainless.swerdlow.dev/r/claude-thinking.json","https://brainless.swerdlow.dev/r/claude-prompt.json","https://brainless.swerdlow.dev/r/claude-todo-list.json"]}]]}],["$","$L50",null,{"sourceUrl":"https://brainless.swerdlow.dev/r/pied-piper-onboarding.json","proxyUrl":"https://shadcnregistry.com/r/brainless/pied-piper-onboarding","itemId":"@brainless/pied-piper-onboarding"}],["$","section",null,{"className":"flex flex-col gap-4","id":"files","children":[["$","h2",null,{"className":"text-lg md:text-2xl font-bold font-mono","children":"Files"}],["$","$L51",null,{"files":[{"path":"registry/brainless/blocks/pied-piper-onboarding.tsx","content":"$52","type":"registry:block","target":"components/brainless/blocks/pied-piper-onboarding.tsx"}]}]]}],"$L53"]}]

Pied Piper Onboarding

Installation

Files

components

Styles