4d: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/2ocpj6i2oorb_.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1r51enyhosz-u.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/3qfn9_v7pj_rb.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/13f5hjswluuex.js","/_next/static/immutable/chunks/0a8eymjz3e95j.js"],"RegistryDependencies"] 4e: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/2ocpj6i2oorb_.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1r51enyhosz-u.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/3qfn9_v7pj_rb.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/13f5hjswluuex.js","/_next/static/immutable/chunks/0a8eymjz3e95j.js"],"Installation"] 4f: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/2ocpj6i2oorb_.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1r51enyhosz-u.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/3qfn9_v7pj_rb.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/13f5hjswluuex.js","/_next/static/immutable/chunks/0a8eymjz3e95j.js"],"FilesView"] 50:T3ea8,"use client"; import { AnimatePresence, motion, useReducedMotion } from "motion/react"; import { useEffect, useState } from "react"; import { CodeComparison } from "@/components/motion-lexicon/code-comparison"; import { CommandPalette, type CommandItem, } from "@/components/motion-lexicon/command-palette"; import { MegaMenu } from "@/components/motion-lexicon/mega-menu"; import { SplitTextReveal } from "@/components/motion-lexicon/split-text-reveal"; type Locale = "zh" | "en"; export type DeveloperDocsBlockProps = { locale?: Locale; className?: string }; const installCode = `npx shadcn@latest add \n https://motionlexicon.com/r/code-comparison.json`; const manualCode = `import { CodeComparison } from "@/components/code-comparison";\n\nexport function Review() {\n return ;\n}`; export function DeveloperDocsBlock({ locale = "en", className = "", }: DeveloperDocsBlockProps) { const reduced = useReducedMotion() === true; const [commandOpen, setCommandOpen] = useState(false); const [copied, setCopied] = useState(false); const [section, setSection] = useState("overview"); const c = locale === "zh" ? zh : en; useEffect(() => { const onKey = (event: KeyboardEvent) => { if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === "k") { event.preventDefault(); event.stopPropagation(); setCommandOpen(true); } }; document.addEventListener("keydown", onKey, true); return () => document.removeEventListener("keydown", onKey, true); }, []); const commands: CommandItem[] = c.commands.map((label, index) => ({ id: `command-${index}`, label, hint: c.commandHints[index], shortcut: index === 0 ? ["⌘", "K"] : undefined, })); const selectCommand = (item: CommandItem) => { setSection( item.id === "command-1" ? "install" : item.id === "command-2" ? "api" : "overview", ); setCommandOpen(false); }; const navigation = [ { id: "docs", label: c.docs, preview: (

⌘

), links: [ { id: "intro", label: c.intro, description: c.introBody, onSelect: () => setSection("overview"), }, { id: "install", label: c.install, description: c.installBody, onSelect: () => setSection("install"), }, ], }, { id: "reference", label: c.reference, preview: (

{}

), links: [ { id: "api", label: c.api, description: c.apiBody, onSelect: () => setSection("api"), }, { id: "examples", label: c.examples, description: c.examplesBody, onSelect: () => setSection("examples"), }, ], }, ]; return (

ML Motion Lexicon

{c.sections[section as keyof typeof c.sections]}

{section === "install" ? c.installLead : section === "api" ? c.apiLead : c.lead}

{section === "overview" ? (

{c.principles.map((item, index) => (

0{index + 1}

{item.title}

{item.body}

))}

) : null} {section === "install" ? (

TERMINAL

                      {installCode}

) : null} {section === "api" || section === "examples" ? ( REGISTRY READY {c.previewOne}

), }, { id: "manual", label: c.manual, meta: "02", code: manualCode, description: c.manualBody, preview: (

SOURCE CONTROL {c.previewTwo}

), }, ]} /> ) : null}

{commandOpen ? (

setCommandOpen(false)} >

event.stopPropagation()} > setCommandOpen(false)} label={c.search} placeholder={c.search} />

) : null}

); } const en = { navigation: "Documentation navigation", docs: "Docs", components: "Components", guides: "Guides", search: "Search docs", onThisPage: "On this page", intro: "Introduction", introBody: "Start with the component contract.", install: "Install", installBody: "Add a component through the Registry.", reference: "Reference", api: "API", apiBody: "Focused props and stable states.", examples: "Examples", examplesBody: "Compare source approaches.", title: "Motion that holds up in product.", lead: "Copy-ready components with an intentional primary frame, a focused API, and motion that continues to make sense when it stops.", installTitle: "Install the source you previewed.", installLead: "The Registry command installs the exact implementation, dependency list, and local source file used in this preview.", apiTitle: "Choose the integration that fits your stack.", apiLead: "Every recipe stays legible as a local component. Compare the quickest installation path with a direct source import.", sections: { overview: "Overview", install: "Install", api: "API reference", examples: "Examples", }, principles: [ { title: "Primary state", body: "Every preview is useful before it moves.", }, { title: "Focused props", body: "Useful defaults with a compact public surface.", }, { title: "Graceful motion", body: "Keyboard and reduced-motion behavior are first class.", }, ], copy: "Copy command", copied: "Copied", comparison: "Two ways to install", registry: "Registry", registryBody: "Use one command to add the exact public artifact.", manual: "Source import", manualBody: "Keep the implementation beside the rest of your product.", previewOne: "Ready in one command.", previewTwo: "Made to stay editable.", commands: ["Open overview", "Open installation", "Open API reference"], commandHints: ["Start here", "Registry command", "Props and examples"], }; const zh: typeof en = { navigation: "文档导航", docs: "文档", components: "组件", guides: "指南", search: "搜索文档", onThisPage: "本页内容", intro: "简介", introBody: "从组件契约开始。", install: "安装", installBody: "通过 Registry 添加组件。", reference: "参考", api: "API", apiBody: "聚焦的属性与稳定状态。", examples: "示例", examplesBody: "比较源码方案。", title: "经得起产品考验的动效。", lead: "可直接复制的组件拥有有意图的首帧、聚焦的 API，以及在暂停后仍然成立的动效。", installTitle: "安装你正在预览的源码。", installLead: "Registry 命令会安装这个预览使用的实现、依赖清单和本地源码。", apiTitle: "选择适合当前技术栈的集成方式。", apiLead: "每个配方都能作为本地组件清晰阅读。比较最快的安装路径和直接源码导入。", sections: { overview: "概览", install: "安装", api: "API 参考", examples: "示例", }, principles: [ { title: "首要状态", body: "每个预览在运动前也有明确价值。" }, { title: "聚焦属性", body: "有用的默认值配合紧凑公开接口。" }, { title: "优雅动效", body: "键盘与减弱动效都是一等能力。" }, ], copy: "复制命令", copied: "已复制", comparison: "两种安装方式", registry: "Registry", registryBody: "用一条命令添加完全一致的公开制品。", manual: "源码导入", manualBody: "把实现放在产品其他代码旁边维护。", previewOne: "一条命令即可准备好。", previewTwo: "始终保持可编辑。", commands: ["打开概览", "打开安装", "打开 API 参考"], commandHints: ["从这里开始", "Registry 命令", "属性与示例"], }; 49:["$","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":[["$","li","motion",{"children":["$","a",null,{"href":"https://www.npmjs.com/package/motion","target":"_blank","rel":"noopener noreferrer","className":"rounded-md border p-2 text-sm flex items-center gap-1 ","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"text-xs font-medium","children":"motion"}]]}]}]]}],["$","$L4d",null,{"registryDependencies":["https://motion-lexicon.pages.dev/r/code-comparison.json","https://motion-lexicon.pages.dev/r/command-palette.json","https://motion-lexicon.pages.dev/r/mega-menu.json","https://motion-lexicon.pages.dev/r/split-text-reveal.json"]}]]}],["$","$L4e",null,{"sourceUrl":"https://motion-lexicon.pages.dev/r/developer-docs.json","proxyUrl":"https://shadcnregistry.com/r/motion-lexicon/developer-docs","itemId":"@motion-lexicon/developer-docs"}],["$","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"}],["$","$L4f",null,{"files":[{"path":"src/registry/blocks/developer-docs.tsx","content":"$50","type":"registry:component","target":"components/motion-lexicon/blocks/developer-docs.tsx"}]}]]}],"$L51"]}]

Developer Docs

Installation

Files

components

Styles