{"$schema":"https://ui.shadcn.com/schema/registry.json","author":"Kaiyu Hsu ","categories":["pages","minimal"],"dependencies":["@base-ui/react","@icons-pack/react-simple-icons","@radix-ui/react-use-controllable-state","cn","lucide-react","motion"],"description":"Dark emerald AI landing page template — hero demo types a question, reveals collapsible chain-of-thought steps and a sourced answer; feature cards, integrations marquee.","devDependencies":[],"files":[{"content":"\"use client\";\n\nimport type { ComponentProps, ReactNode } from \"react\";\nimport { createContext, memo, use, useMemo } from \"react\";\nimport { useControllableState } from \"@radix-ui/react-use-controllable-state\";\nimport { Collapsible as CollapsiblePrimitive } from \"@base-ui/react/collapsible\";\nimport { cn } from \"cn\";\nimport { BrainIcon, DotIcon } from \"lucide-react\";\n\nconst Collapsible = CollapsiblePrimitive.Root;\nconst CollapsibleTrigger = CollapsiblePrimitive.Trigger;\nconst CollapsibleContent = CollapsiblePrimitive.Panel;\n\ninterface ChainOfThoughtContextValue {\n isOpen: boolean;\n setIsOpen: (open: boolean) => void;\n}\n\nconst ChainOfThoughtContext = createContext(null);\n\nconst useChainOfThought = () => {\n const context = use(ChainOfThoughtContext);\n if (!context) {\n throw new Error(\"ChainOfThought components must be used within ChainOfThought\");\n }\n return context;\n};\n\nexport type ChainOfThoughtProps = ComponentProps<\"div\"> & {\n open?: boolean;\n defaultOpen?: boolean;\n onOpenChange?: (open: boolean) => void;\n};\n\nconst ChainOfThoughtRoot = ({\n className,\n open,\n defaultOpen = false,\n onOpenChange,\n children,\n ...props\n}: ChainOfThoughtProps) => {\n const [isOpen, setIsOpen] = useControllableState({\n defaultProp: defaultOpen,\n onChange: onOpenChange,\n prop: open,\n });\n\n const contextValue = useMemo(() => ({ isOpen, setIsOpen }), [isOpen, setIsOpen]);\n\n return (\n \n
\n {children}\n
\n \n );\n};\n\nexport const ChainOfThought = memo(ChainOfThoughtRoot);\n\nexport type ChainOfThoughtHeaderProps = ComponentProps;\n\nconst ChainOfThoughtHeaderBase = ({ className, children, ...props }: ChainOfThoughtHeaderProps) => {\n const { isOpen, setIsOpen } = useChainOfThought();\n\n return (\n \n \n \n {children ?? \"Chain of Thought\"}\n \n \n );\n};\n\nexport const ChainOfThoughtHeader = memo(ChainOfThoughtHeaderBase);\n\nconst stepStatusStyles = {\n active: \"text-emerald-600\",\n complete: \"text-(--muted-foreground)\",\n pending: \"text-(--muted-foreground)/50\",\n};\n\nexport type ChainOfThoughtStepProps = ComponentProps<\"div\"> & {\n icon?: ReactNode;\n label: string;\n status?: keyof typeof stepStatusStyles;\n};\n\nconst ChainOfThoughtStepBase = ({\n className,\n icon,\n label,\n status = \"complete\",\n children,\n ...props\n}: ChainOfThoughtStepProps) => (\n \n
\n {icon ?? }\n
\n
\n
\n
{label}
\n {children}\n
\n
\n);\n\nexport const ChainOfThoughtStep = memo(ChainOfThoughtStepBase);\n\nexport type ChainOfThoughtContentProps = ComponentProps;\n\nconst ChainOfThoughtContentBase = ({\n className,\n children,\n ...props\n}: ChainOfThoughtContentProps) => {\n const { isOpen } = useChainOfThought();\n\n return (\n \n \n {children}\n \n \n );\n};\n\nexport const ChainOfThoughtContent = memo(ChainOfThoughtContentBase);\n\nChainOfThought.displayName = \"ChainOfThought\";\nChainOfThoughtHeader.displayName = \"ChainOfThoughtHeader\";\nChainOfThoughtStep.displayName = \"ChainOfThoughtStep\";\nChainOfThoughtContent.displayName = \"ChainOfThoughtContent\";\n","path":"/_components/chain-of-thought.tsx","target":"uicapsule/emerald-template/_components/chain-of-thought.tsx","type":"registry:file"},{"content":"import {\n ClipboardCheckIcon,\n EyeIcon,\n KeyIcon,\n LockIcon,\n SearchIcon,\n TerminalSquareIcon,\n UserIcon,\n XIcon,\n} from \"lucide-react\";\n\nimport { HomeCard, HomeCardDescriptionList } from \"./home-card\";\nimport { SourceIcon } from \"./source-icon\";\n\nexport const FeaturesSection = () => (\n
\n \n }\n inline\n >\n
\n \n \n

\n Build a churn analysis dashboard\n

\n
\n
\n
\n
\n Reference 1\n
\n
\n Reference 2\n
\n
\n
\n
\n
\n
\n
\n
\n
\n \n \n }\n pattern={\n
\n 0000101001010011011001010110001101110101011100100110100101110100011110010010000001100001011011100110010000100000010100000111001001101001011101100110000101100011011110010000101001010000011100100110100101110110011000010110001101111001001000000110000101101110011001000010000001110011011001010110001101110101011100100110100101110100011110010010000001100001011100100110010100100000011101000110111101101111001000000110100101101101011100000110111101110010011101000110000101101110011101000010000001100110011011110111001000100000011011000110010101100111011000010110110001100101011100110110010100100000010000110110110001100001011110010010000001100100011011110110010101110011001000000110111001101111011101000010000000001010010100110110010101100011011101010111001001101001011101000111100100100000011000010110111001100100001000000101000001110010011010010111011001100001011000110111100100001010010100000111001001101001011101100110000101100011011110010010000001100001011011100110010000100000011100110110010101100011011101010111001001101001011101000111100100100000011000010111001001100101001000000111010001101111011011110010000001101001011011010111000001101111011100100111010001100001011011100111010000100000011001100110111101110010001000000110110001100101011001110110000101101100011001010111001101100101001000000100001101101100011000010111100100100000011001000110111101100101011100110010000001101110011011110111010000100000000010100101001101100101011000110111010101110010011010010111010001111001001000000110000101101110011001000010000001010000011100100110100101110110011000010110001101111001000010100101000001110010011010010111011001100001011000110111100100100000011000010110111001100110111101110010001000000110110001100101011001110110000101101100011001010111001101100101001000000100001101101100011000010111100100100000011001000110111101100101011100110010000001101110011011110111010000100000000010100101001101100101011000110111010101110010011010010111010001111001001000000110000101101110011001000010000001010000011100100110100101110110011000010110001101111001000010100101000001110010011010010111011001100001011000110111100100100000011000010110110100110100101110110011000010110001101111001001000000110000101101101001101001011101100110000101100011011110010010000001100001011011\n
\n }\n inline\n >\n
\n
\n \n Secure\n
\n
\n \n Encrypted\n
\n
\n \n Compliant\n
\n
\n \n Access Control\n
\n
\n \n Observable\n
\n
\n \n Scriptable\n
\n
\n \n
\n);\n","path":"/_components/features-section.tsx","target":"uicapsule/emerald-template/_components/features-section.tsx","type":"registry:file"},{"content":"import type { ComponentType, ReactNode, SVGProps } from \"react\";\nimport { Logo } from \"./logo\";\nimport { WaitlistForm } from \"./waitlist-form\";\n\nconst TwitterIcon = (props: SVGProps) => (\n \n \n \n);\n\nconst GitHubIcon = (props: SVGProps) => (\n \n \n \n);\n\nconst SocialLink = ({\n href,\n icon: Icon,\n children,\n}: {\n href: string;\n icon: ComponentType>;\n children: ReactNode;\n}) => (\n \n {children}\n \n \n);\n\nconst SmallPrint = () => (\n
\n

\n {/* UTC, not local: this tree is prerendered on the server and hydrated in the\n browser, so a timezone-dependent year mismatches around New Year. */}\n © Copyright {new Date().getUTCFullYear()}. All rights reserved.\n

\n
\n \n Follow us on Twitter\n \n \n Follow us on GitHub\n \n
\n
\n);\n\nexport const Footer = () => (\n \n);\n","path":"/_components/footer.tsx","target":"uicapsule/emerald-template/_components/footer.tsx","type":"registry:file"},{"content":"import { useId } from \"react\";\nimport type { SVGProps } from \"react\";\n\nexport type GridPatternProps = {\n width: number;\n height: number;\n x?: number | string;\n y?: number | string;\n squares?: number[][];\n} & SVGProps;\n\nexport const GridPattern = ({ width, height, x, y, squares, ...props }: GridPatternProps) => {\n const patternId = useId();\n\n return (\n \n \n \n \n \n \n \n {squares && (\n \n {squares.map(([squareX, squareY]) => (\n \n ))}\n \n )}\n \n );\n};\n","path":"/_components/grid-pattern.tsx","target":"uicapsule/emerald-template/_components/grid-pattern.tsx","type":"registry:file"},{"content":"\"use client\";\n\nimport { useEffect, useState } from \"react\";\nimport { cn } from \"cn\";\nimport { useScroll } from \"motion/react\";\n\nimport { Logo } from \"./logo\";\n\n/** Scroll offset past which the header gains its translucent backdrop. */\nconst BLUR_SCROLL_THRESHOLD = 100;\n\nexport const Header = () => {\n const [isScrolled, setIsScrolled] = useState(false);\n\n const { scrollY } = useScroll();\n\n useEffect(() => {\n const unsubscribe = scrollY.on(\"change\", (latest) => {\n setIsScrolled(latest > BLUR_SCROLL_THRESHOLD);\n });\n return unsubscribe;\n }, [scrollY]);\n\n return (\n \n
\n
\n \n \n \n
\n \n
\n \n Login\n \n
\n
\n \n );\n};\n","path":"/_components/header.tsx","target":"uicapsule/emerald-template/_components/header.tsx","type":"registry:file"},{"content":"\"use client\";\n\nimport { createElement, memo, useCallback, useEffect, useMemo, useRef, useState } from \"react\";\nimport type { ComponentType, SVGProps } from \"react\";\nimport { Badge } from \"./ui\";\nimport { cn } from \"cn\";\nimport {\n BarChart3,\n BookOpen,\n CheckCircle,\n FileText,\n GitBranch,\n Search,\n Shield,\n Users,\n} from \"lucide-react\";\nimport {\n AnimatePresence,\n motion,\n useInView,\n useMotionValueEvent,\n useScroll,\n useTransform,\n} from \"motion/react\";\n\nimport {\n ChainOfThought,\n ChainOfThoughtContent,\n ChainOfThoughtHeader,\n ChainOfThoughtStep,\n} from \"./chain-of-thought\";\n\nconst samples = [\n {\n input: \"Can you provide a changelog of everything shipped in Dataembed this week?\",\n output: {\n reasoning: [\n {\n icon: Search,\n text: \"Searching through Asana tickets for this week...\",\n },\n {\n icon: GitBranch,\n text: \"Checking GitHub commits and pull requests...\",\n },\n {\n icon: BarChart3,\n text: \"Analyzing version releases and deployments...\",\n },\n { icon: FileText, text: \"Compiling changelog information...\" },\n ],\n references: [\n { content: \"Ticket #1704\", source: \"asana\" },\n { content: \"PR #102\", source: \"github\" },\n ],\n text: `\nAccording to Asana and Github commits, the following things were completed this week:\n\nVersion 1.1.2 launch - 3/14/2025:\n- Added a new feature for sentiment analysis, allowing users to analyze the sentiment of text inputs\n- Improved the accuracy of the image recognition module by integrating the Azure deep learning model\n- Fixed a bug that caused the application to crash when processing large datasets\n- Optimized the performance of the recommendation engine\n `.trim(),\n },\n },\n {\n input: \"Who is responsible for the new landing experience?\",\n output: {\n reasoning: [\n {\n icon: Users,\n text: \"Looking up project ownership in team directory...\",\n },\n { icon: BookOpen, text: \"Checking project documentation and specs...\" },\n {\n icon: Search,\n text: \"Finding team lead and stakeholder information...\",\n },\n { icon: FileText, text: \"Gathering project context and background...\" },\n ],\n references: [\n { content: \"Grow Team\", source: \"site\" },\n { content: \"Project Neue\", source: \"notion\" },\n { content: \"Kevin Wu (Grow)\", source: \"person\" },\n ],\n text: `\nThe team responsible for \"Project Neue\", the new landing page, is the Grow team. It is an initiative launched by Kevin Wu to showcase our free training and resources programs, to help people acquire the digital skills they need to succeed in the modern economy.\n\nThe initiative aims to bridge the digital skills gap and provide opportunities for individuals and businesses to learn and grow.\n\nThe Grow team collaborates with various partners, including educational institutions, nonprofits, and local communities, to deliver in-person workshops, online training courses, and other resources. \n `.trim(),\n },\n },\n {\n input: \"Whats our HR policy on working from home?\",\n output: {\n reasoning: [\n { icon: Search, text: \"Searching HR policy documents...\" },\n {\n icon: BookOpen,\n text: \"Checking employee handbook for remote work...\",\n },\n { icon: Shield, text: \"Looking up recent policy updates...\" },\n { icon: CheckCircle, text: \"Verifying current guidelines...\" },\n ],\n references: [\n { content: \"Onboarding 101\", source: \"ppt\" },\n { content: \"Patty (HR)\", source: \"person\" },\n ],\n text: \"According to the latest onboarding docs, we have a flexible work policy. You can work from home as long as you get your work done and are available for meetings.\",\n },\n },\n];\n\nconst wait = (delay: number) => {\n let timeout: ReturnType;\n\n // oxlint-disable-next-line promise/avoid-new -- a cancellable sleep in the browser; there is no promise-returning timer to await here\n const promise = new Promise((resolve) => {\n timeout = setTimeout(resolve, delay);\n });\n\n return {\n cancel: () => clearTimeout(timeout),\n promise,\n };\n};\n\ntype StepIcon = ComponentType<{ size?: number }>;\n\ntype StepStatus = \"complete\" | \"active\" | \"pending\";\n\nconst stepStatus = (stepIndex: number, currentStepIndex: number): StepStatus => {\n if (stepIndex < currentStepIndex) {\n return \"complete\";\n }\n if (stepIndex === currentStepIndex) {\n return \"active\";\n }\n return \"pending\";\n};\n\nconst Spinner = (props: SVGProps) => (\n \n \n \n \n \n);\n\n// Keyed elements returned directly under AnimatePresence, so the swap between\n// spinner and icon still animates out and in.\nconst statusIcon = (status: StepStatus, staticIcon: StepIcon) => {\n if (status === \"active\") {\n return (\n \n \n \n );\n }\n if (status === \"complete\") {\n return (\n \n {createElement(staticIcon, { size: 16 })}\n \n );\n }\n return (\n \n {createElement(staticIcon, { size: 16 })}\n \n );\n};\n\nconst AnimatedIconBase = ({\n stepIndex,\n staticIcon,\n currentStepIndex,\n}: {\n stepIndex: number;\n staticIcon: StepIcon;\n currentStepIndex: number;\n}) => (\n \n {statusIcon(stepStatus(stepIndex, currentStepIndex), staticIcon)}\n \n);\n\nconst AnimatedIcon = memo(AnimatedIconBase);\n\nconst MemoizedChainOfThoughtStepBase = ({\n stepIndex,\n staticIcon,\n label,\n currentStepIndex,\n}: {\n stepIndex: number;\n staticIcon: StepIcon;\n label: string;\n currentStepIndex: number;\n}) => {\n const status = stepStatus(stepIndex, currentStepIndex);\n\n return (\n \n }\n label={label}\n status={status}\n />\n );\n};\n\nconst MemoizedChainOfThoughtStep = memo(MemoizedChainOfThoughtStepBase);\n\nconst Typewriter = ({\n start,\n text,\n onTyped,\n splitType = \"letters\",\n hideCursor,\n}: {\n start: boolean;\n text: string;\n onTyped?: () => void;\n splitType?: \"letters\" | \"words\";\n hideCursor?: boolean;\n}) => {\n const textContainerRef = useRef(null);\n const finishedRef = useRef(false);\n\n useEffect(() => {\n let i = 0;\n let timeoutId: ReturnType | undefined;\n let cancelled = false;\n const splitBy = splitType === \"letters\" ? \"\" : \" \";\n const splitText = text.split(splitBy);\n\n const write = () => {\n if (cancelled || !textContainerRef.current || finishedRef.current) {\n return;\n }\n if (i < splitText.length) {\n textContainerRef.current.textContent = splitText.slice(0, i + 1).join(splitBy);\n i += 1;\n timeoutId = setTimeout(write, 25);\n } else {\n finishedRef.current = true;\n i = 0;\n onTyped?.();\n }\n };\n\n const clear = () => {\n if (cancelled || !textContainerRef.current || !finishedRef.current) {\n return;\n }\n if (i < splitText.length) {\n textContainerRef.current.textContent = splitText.slice(0, text.length - i).join(splitBy);\n i += 1;\n timeoutId = setTimeout(clear, 5);\n } else {\n finishedRef.current = false;\n i = 0;\n textContainerRef.current.textContent = \"\";\n }\n };\n\n if (start) {\n write();\n } else {\n clear();\n }\n\n return () => {\n cancelled = true;\n if (timeoutId !== undefined) {\n clearTimeout(timeoutId);\n }\n };\n }, [start, text, onTyped, splitType]);\n\n return (\n
\n \n {!hideCursor && |}\n
\n );\n};\n\nexport const ExampleChat = ({ start }: { start: boolean }) => {\n const promisesRef = useRef<(() => void)[]>([]);\n const [currentSampleIndex, setCurrentSampleIndex] = useState(0);\n const [showQuestion, setShowQuestion] = useState(true);\n const [showLoading, setShowLoading] = useState(false);\n const [showChainOfThought, setShowChainOfThought] = useState(false);\n const [chainOfThoughtOpen, setChainOfThoughtOpen] = useState(true);\n const [showAnswer, setShowAnswer] = useState(false);\n const [showFooter, setShowFooter] = useState(false);\n const [currentStepIndex, setCurrentStepIndex] = useState(-1);\n const [thinkingDuration, setThinkingDuration] = useState(null);\n const [isThinkingComplete, setIsThinkingComplete] = useState(false);\n\n const clearAll = useCallback(() => {\n setShowQuestion(false);\n setShowLoading(false);\n setShowChainOfThought(false);\n setChainOfThoughtOpen(true);\n setShowAnswer(false);\n setShowFooter(false);\n setThinkingDuration(null);\n setIsThinkingComplete(false);\n }, []);\n\n const [previousStart, setPreviousStart] = useState(start);\n if (previousStart !== start) {\n setPreviousStart(start);\n clearAll();\n setShowQuestion(start);\n }\n\n useEffect(() => {\n if (!start) {\n return;\n }\n const pending = promisesRef.current;\n return () => {\n for (const cancel of pending) {\n cancel();\n }\n pending.length = 0;\n };\n }, [start]);\n\n const showResults = async () => {\n setShowLoading(true);\n const afterShowLoading = wait(1000);\n promisesRef.current.push(afterShowLoading.cancel);\n await afterShowLoading.promise;\n\n const startTime = Date.now();\n setShowChainOfThought(true);\n setChainOfThoughtOpen(true);\n setCurrentStepIndex(-1);\n setIsThinkingComplete(false);\n\n const reasoningStepCount = samples[currentSampleIndex]?.output.reasoning.length ?? 0;\n for (let i = 0; i < reasoningStepCount; i += 1) {\n setCurrentStepIndex(i);\n const stepDelay = wait(800);\n promisesRef.current.push(stepDelay.cancel);\n await stepDelay.promise;\n }\n\n const afterAllSteps = wait(500);\n promisesRef.current.push(afterAllSteps.cancel);\n await afterAllSteps.promise;\n\n const endTime = Date.now();\n const duration = Math.round((endTime - startTime) / 1000);\n setThinkingDuration(duration);\n setIsThinkingComplete(true);\n\n setChainOfThoughtOpen(false);\n const afterCollapse = wait(300);\n promisesRef.current.push(afterCollapse.cancel);\n await afterCollapse.promise;\n\n setShowAnswer(true);\n const afterShowAnswer = wait(1000);\n promisesRef.current.push(afterShowAnswer.cancel);\n await afterShowAnswer.promise;\n\n setShowFooter(true);\n const afterShowFooter = wait(5000);\n promisesRef.current.push(afterShowFooter.cancel);\n await afterShowFooter.promise;\n\n clearAll();\n const afterClearAll = wait(1000);\n promisesRef.current.push(afterClearAll.cancel);\n await afterClearAll.promise;\n\n setCurrentSampleIndex((currentSampleIndex + 1) % samples.length);\n setShowQuestion(true);\n };\n\n const currentSample = samples[currentSampleIndex];\n\n const chainOfThoughtHeaderText = useMemo(() => {\n if (isThinkingComplete && thinkingDuration !== null) {\n return `Thought for ${thinkingDuration} second${thinkingDuration === 1 ? \"\" : \"s\"}`;\n }\n return \"Thinking...\";\n }, [isThinkingComplete, thinkingDuration]);\n\n const reasoningSteps = useMemo(\n () =>\n currentSample?.output.reasoning.map((step, index) => (\n \n )),\n [currentSample?.output.reasoning, currentStepIndex],\n );\n\n return (\n
\n
\n
\n showResults()}\n />\n
\n
\n
\n \n {start && showChainOfThought && (\n \n \n {chainOfThoughtHeaderText}\n {reasoningSteps}\n \n \n )}\n \n \n {start && showAnswer && (\n \n \n \n )}\n \n \n {start && showFooter && (\n \n
    \n {currentSample?.output.references.map((reference) => (\n {reference.content}\n ))}\n
\n \n )}\n \n
\n
\n
\n );\n};\n\nconst scrollYProgressMap = [0, 0.1];\n\nexport const HeroExample = () => {\n const [isScaled, setIsScaled] = useState(false);\n const ref = useRef(null);\n const isInView = useInView(ref, {\n amount: 1,\n });\n const { scrollYProgress } = useScroll();\n const y = useTransform(scrollYProgress, scrollYProgressMap, [21.28, 0]);\n const z = useTransform(scrollYProgress, scrollYProgressMap, [-74.56, 0]);\n const rotateX = useTransform(scrollYProgress, scrollYProgressMap, [40, 0]);\n const scale = useTransform(scrollYProgress, scrollYProgressMap, [0.9, 1]);\n\n useMotionValueEvent(scale, \"change\", (latest) => {\n if (latest > 0.97) {\n setIsScaled(true);\n } else {\n setIsScaled(false);\n }\n });\n\n const shouldRun = isScaled && isInView;\n\n return (\n <>\n \n {shouldRun && (\n \n )}\n \n \n \n \n \n );\n};\n","path":"/_components/hero-example.tsx","target":"uicapsule/emerald-template/_components/hero-example.tsx","type":"registry:file"},{"content":"import { GridPattern } from \"./grid-pattern\";\nimport { HeroExample } from \"./hero-example\";\n\nconst HeroPattern = () => (\n
\n \n
\n);\n\nexport const HeroSection = () => (\n <>\n \n
\n

\n \n Generate software products\n \n on your organization data\n

\n

\n Everyone on your team should be able to build software to automate their own day to day\n workflows\n

\n
\n \n \n
\n
\n \n \n \n \n
\n \n);\n","path":"/_components/hero-section.tsx","target":"uicapsule/emerald-template/_components/hero-section.tsx","type":"registry:file"},{"content":"import type { ComponentProps, HTMLAttributes, MouseEvent, ReactNode } from \"react\";\nimport type { MotionValue } from \"motion/react\";\n\nimport { cn } from \"cn\";\nimport { motion, useMotionTemplate, useMotionValue } from \"motion/react\";\n\nimport type { GridPatternProps } from \"./grid-pattern\";\nimport { GridPattern } from \"./grid-pattern\";\n\ntype CardGridProps = Omit;\n\nconst Pattern = ({\n mouseX,\n mouseY,\n ...gridProps\n}: CardGridProps & {\n mouseX: MotionValue;\n mouseY: MotionValue;\n}) => {\n const maskImage = useMotionTemplate`radial-gradient(1000px at ${mouseX}px ${mouseY}px, rgba(255,255,255,.5), transparent 40%)`;\n const style = { WebkitMaskImage: maskImage, maskImage };\n\n return (\n
\n
\n \n
\n \n \n \n \n
\n );\n};\n\nconst Card = ({ className, ...props }: HTMLAttributes) => (\n \n);\n\nexport const HighlightCard = ({\n className,\n gridProps,\n children,\n pattern = null,\n ...props\n}: {\n className?: string;\n gridProps?: CardGridProps;\n pattern?: ReactNode;\n children?: ReactNode;\n} & ComponentProps) => {\n const mouseX = useMotionValue(0);\n const mouseY = useMotionValue(0);\n\n const onMouseMove = ({ currentTarget, clientX, clientY }: MouseEvent) => {\n const { left, top } = currentTarget.getBoundingClientRect();\n mouseX.set(clientX - left);\n mouseY.set(clientY - top);\n };\n\n return (\n \n {pattern}\n \n
\n
{children}
\n \n );\n};\n","path":"/_components/highlight-card.tsx","target":"uicapsule/emerald-template/_components/highlight-card.tsx","type":"registry:file"},{"content":"import type { ReactNode } from \"react\";\nimport { cn } from \"cn\";\n\nimport { HighlightCard } from \"./highlight-card\";\n\nconst cardGridProps = {\n squares: [\n [-1, 2],\n [1, 3],\n ],\n y: -6,\n};\n\nexport const HomeCard = ({\n className,\n title,\n description,\n inline,\n pattern,\n children,\n}: {\n className?: string;\n title?: ReactNode;\n description?: ReactNode;\n inline?: boolean;\n pattern?: ReactNode;\n children?: ReactNode;\n}) => (\n \n \n
\n

{title}

\n
{description}
\n
\n {children}\n
\n \n);\n\nexport const HomeCardDescriptionList = ({ points }: { points: string[] }) => (\n
    \n {points.map((point) => (\n
  • \n \n \n \n {point}\n
    • \n ))}\n
\n);\n","path":"/_components/home-card.tsx","target":"uicapsule/emerald-template/_components/home-card.tsx","type":"registry:file"},{"content":"import { useCallback, useEffect, useRef, useState } from \"react\";\nimport type { ReactNode } from \"react\";\nimport { cn } from \"cn\";\n\nexport const InfiniteLooper = ({\n speed = 70,\n direction = \"right\",\n children,\n className,\n containerClassName,\n}: {\n speed?: number;\n direction?: \"right\" | \"left\";\n children: ReactNode;\n className?: string;\n containerClassName?: string;\n}) => {\n const [animating, setAnimating] = useState(true);\n const [looperInstances, setLooperInstances] = useState(1);\n const outerRef = useRef(null);\n const innerRef = useRef(null);\n\n const restartTimeoutRef = useRef(0);\n\n const setupInstances = useCallback(() => {\n const inner = innerRef.current;\n const outer = outerRef.current;\n if (!inner || !outer) {\n return;\n }\n\n const { width } = inner.getBoundingClientRect();\n const { width: parentWidth } = outer.getBoundingClientRect();\n\n const widthDeficit = parentWidth - width;\n const instanceWidth = width / inner.children.length;\n\n if (widthDeficit) {\n setLooperInstances(looperInstances + Math.ceil(widthDeficit / instanceWidth) + 1);\n }\n\n // Drop and re-add the animation class so every instance restarts in phase.\n setAnimating(false);\n window.clearTimeout(restartTimeoutRef.current);\n restartTimeoutRef.current = window.setTimeout(() => setAnimating(true), 10);\n }, [looperInstances]);\n\n useEffect(() => {\n setupInstances();\n window.addEventListener(\"resize\", setupInstances);\n\n return () => {\n window.removeEventListener(\"resize\", setupInstances);\n window.clearTimeout(restartTimeoutRef.current);\n };\n }, [setupInstances]);\n\n return (\n
\n
\n {Array.from({ length: looperInstances }, (_, index) => (\n \n {children}\n
\n ))}\n
\n
\n );\n};\n","path":"/_components/infinite-loop.tsx","target":"uicapsule/emerald-template/_components/infinite-loop.tsx","type":"registry:file"},{"content":"import type { ReactNode } from \"react\";\n\nimport { HomeCard, HomeCardDescriptionList } from \"./home-card\";\nimport { InfiniteLooper } from \"./infinite-loop\";\n\nconst QuestionCard = ({ children }: { children: ReactNode }) => (\n
\n {children}\n
\n);\n\nexport const IntegrationsSection = () => (\n \n }\n >\n
\n

Things people have asked:

\n \n When does the next fundraise start?\n Whats the latest on the Block deal?\n Who is managing design system project?\n \n \n Can you summarize the last all hands?\n Whats does the Grow team do?\n \n Can you provide a changelog of everything shipped in TC this week?\n \n Whats our HR policy on working from home?\n \n \n Who do I contact to get Airtable access?\n Who is responsible for the design of the landing experience?\n \n
\n \n);\n","path":"/_components/integrations-section.tsx","target":"uicapsule/emerald-template/_components/integrations-section.tsx","type":"registry:file"},{"content":"import type { SVGProps } from \"react\";\n\nexport const Logo = (props: SVGProps) => (\n \n \n \n);\n","path":"/_components/logo.tsx","target":"uicapsule/emerald-template/_components/logo.tsx","type":"registry:file"},{"content":"import type { ComponentType, SVGProps } from \"react\";\nimport { cn } from \"cn\";\n\nconst ICON_ASSET_BASE = \"https://d24l2zb4cwkekfpl.public.blob.vercel-storage.com/emerald-template\";\n\nconst shellClassName =\n \"inline-flex justify-center rounded-full border border-dashed border-zinc-700 bg-zinc-900 p-3 text-white\";\n\n/** An icon rendered from a component (lucide / simple-icons). */\nexport const SourceIcon = ({\n Icon,\n className,\n}: {\n Icon: ComponentType>;\n className?: string;\n}) => (\n
\n \n
\n);\n\n/** An icon rendered from a remotely hosted brand SVG, addressed by id. */\nexport const SourceAssetIcon = ({ id, className }: { id: string; className?: string }) => (\n
\n {id}\n
\n);\n","path":"/_components/source-icon.tsx","target":"uicapsule/emerald-template/_components/source-icon.tsx","type":"registry:file"},{"content":"import type { ComponentProps } from \"react\";\nimport { cn } from \"cn\";\n\nexport const Button = ({ className, ...props }: ComponentProps<\"button\">) => (\n \n);\n\nexport const Badge = ({ className, ...props }: ComponentProps<\"span\">) => (\n \n);\n","path":"/_components/ui.tsx","target":"uicapsule/emerald-template/_components/ui.tsx","type":"registry:file"},{"content":"\"use client\";\n\nimport { useState } from \"react\";\nimport type { FormEvent } from \"react\";\nimport { Button } from \"./ui\";\n\nexport const WaitlistForm = () => {\n const [email, setEmail] = useState(\"\");\n const [submitted, setSubmitted] = useState(false);\n\n const handleJoinWaitlist = (event: FormEvent) => {\n event.preventDefault();\n if (!email) {\n return;\n }\n setSubmitted(true);\n setEmail(\"\");\n };\n\n return (\n \n \n {\n setEmail(event.target.value);\n setSubmitted(false);\n }}\n />\n \n \n {submitted ? \"Waitlist joined!\" : \"\"}\n \n \n );\n};\n","path":"/_components/waitlist-form.tsx","target":"uicapsule/emerald-template/_components/waitlist-form.tsx","type":"registry:file"},{"content":"import { useEffect, useRef, useState } from \"react\";\nimport { cn } from \"cn\";\nimport { SiGithub } from \"@icons-pack/react-simple-icons\";\nimport {\n ApertureIcon,\n AppWindowIcon,\n BracesIcon,\n DatabaseIcon,\n FileSpreadsheetIcon,\n GlobeIcon,\n UploadIcon,\n} from \"lucide-react\";\nimport { motion } from \"motion/react\";\n\nimport { HomeCard } from \"./home-card\";\nimport { Logo } from \"./logo\";\nimport { SourceAssetIcon, SourceIcon } from \"./source-icon\";\n\n/** How far the source/output diagram slides up as each workflow step is highlighted. */\nconst stepTranslateY = [0, -100, -170];\n\nconst workflowSteps = [\"Connect your data source\", \"Build your app\", \"One click deploy\"];\n\nconst Lines = ({\n className,\n width,\n height,\n radius,\n strokeWidth,\n highlightStrokeWidth,\n strokeDasharray,\n invert,\n}: {\n className?: string;\n width: number;\n height: number;\n radius: number;\n strokeWidth: number;\n highlightStrokeWidth: number;\n strokeDasharray: number;\n invert?: boolean;\n}) => {\n const topLinesHeight = Math.round(height / 3);\n const bottomLineHeight = height - topLinesHeight;\n const thirdWidth = Math.round(width / 3);\n const halfWidth = Math.round(width / 2);\n const sixthWidth = Math.round(width / 6);\n\n const path = `M1 0v${\n topLinesHeight - radius\n }a${radius} ${radius} 0 00${radius} ${radius}h${halfWidth - radius}M${\n width - 1\n } 0v${topLinesHeight - radius}a${radius} ${radius} 0 01-${radius} ${radius}H${\n halfWidth + 1\n }v${bottomLineHeight}m-${sixthWidth} -${height}v${topLinesHeight}m${thirdWidth} -${topLinesHeight}v${topLinesHeight}`;\n\n const animate = invert\n ? {\n x1: [0, 0],\n x2: [0, 0],\n y1: [2.5 * height, -2 * height],\n y2: [2 * height, -2.5 * height],\n }\n : {\n x1: [0, 0],\n x2: [0, 0],\n y1: [-2.5 * height, 2 * height],\n y2: [-2 * height, 2.5 * height],\n };\n\n const animateId = `pulse-${invert ? \"inverted\" : \"normal\"}`;\n\n return (\n \n \n \n \n \n \n \n \n \n \n \n );\n};\n\nexport const WorkflowSection = () => {\n const [highlighted, setHighlighted] = useState(0);\n const sourcesContainerRef = useRef(null);\n const [sourcesContainerWidth, setSourcesContainerWidth] = useState(0);\n\n useEffect(() => {\n const container = sourcesContainerRef.current;\n if (!container) {\n return;\n }\n\n const observer = new ResizeObserver(() => {\n setSourcesContainerWidth(container.getBoundingClientRect().width);\n });\n observer.observe(container);\n\n return () => {\n observer.disconnect();\n };\n }, []);\n\n return (\n
\n

\n Simple prompt based workflow\n

\n \n {workflowSteps.map((item, index) => (\n // oxlint-disable-next-line jsx-a11y/no-noninteractive-element-interactions -- hover only previews the step's sources; nothing is actioned, so there is no keyboard equivalent to provide\n setHighlighted(index)}\n key={item}\n >\n {highlighted === index && (\n \n )}\n {item}\n \n ))}\n \n }\n >\n
\n \n
\n \n \n \n \n \n \n \n \n
\n
\n
\n \n
\n
\n
\n \n
\n
\n \n
\n
\n \n \n \n \n
\n
\n
\n \n \n );\n};\n","path":"/_components/workflow-section.tsx","target":"uicapsule/emerald-template/_components/workflow-section.tsx","type":"registry:file"},{"content":".emerald-template {\n --background: hsl(240 10% 3.9%);\n --foreground: hsl(0 0% 98%);\n --card: hsl(240 10% 3.9%);\n --card-foreground: hsl(0 0% 98%);\n --popover: hsl(240 10% 3.9%);\n --popover-foreground: hsl(0 0% 98%);\n --primary: hsl(0 0% 98%);\n --primary-foreground: hsl(240 5.9% 10%);\n --secondary: hsl(240 3.7% 15.9%);\n --secondary-foreground: hsl(0 0% 98%);\n --muted: hsl(240 3.7% 15.9%);\n --muted-foreground: hsl(240 5% 64.9%);\n --accent: hsl(240 3.7% 15.9%);\n --accent-foreground: hsl(0 0% 98%);\n --destructive: hsl(0 62.8% 30.6%);\n --destructive-foreground: hsl(0 0% 98%);\n --border: hsl(240 3.7% 15.9%);\n --input: hsl(240 3.7% 15.9%);\n --ring: hsl(240 4.9% 83.9%);\n --radius: 0.3rem;\n background: var(--background);\n color: var(--foreground);\n}\n\n.emerald-template .contained-page {\n --viewport-padding: 16px;\n\n display: grid;\n grid-template-columns:\n 1fr\n min(1024px, calc(100% - var(--viewport-padding) * 2))\n 1fr;\n gap: 0 var(--viewport-padding);\n}\n\n.emerald-template .contained-page > * {\n grid-column: 2;\n}\n\n.emerald-template .full-bleed {\n width: 100%;\n grid-column: 1 / 4;\n}\n\n@keyframes emerald-tilt {\n 0%,\n 50%,\n 100% {\n transform: rotate(0deg);\n }\n 25% {\n transform: rotate(2deg);\n }\n 75% {\n transform: rotate(-2deg);\n }\n}\n\n@keyframes emerald-disco {\n from {\n transform: translateY(-50%) rotate(0deg);\n }\n to {\n transform: translateY(-50%) rotate(360deg);\n }\n}\n\n@keyframes emerald-slide-across {\n from {\n transform: translateX(0);\n }\n to {\n transform: translateX(-100%);\n }\n}\n\n.emerald-template .animate-tilt {\n animation: emerald-tilt 6s linear infinite;\n}\n\n.emerald-template .animate-disco {\n animation: emerald-disco 6s linear infinite;\n}\n\n.emerald-template .animate-slide-across {\n animation: emerald-slide-across linear infinite;\n}\n\n.emerald-template .container {\n --border-radius: 12px;\n --height: 400px;\n\n text-align: start;\n position: relative;\n}\n\n.emerald-template .container::before {\n position: absolute;\n top: -1px;\n left: -1px;\n z-index: -1;\n width: calc(100% + 2px);\n height: calc(100% + 2px);\n background: linear-gradient(hsla(0, 0%, 100%, 0.1), transparent);\n border-radius: var(--border-radius);\n content: \"\";\n}\n\n.emerald-template .window {\n position: relative;\n width: 100%;\n overflow: hidden;\n background: linear-gradient(hsla(0, 0%, 100%, 0.06), transparent), #000;\n border-radius: var(--border-radius);\n}\n\n.emerald-template .input {\n position: relative;\n z-index: 1;\n display: flex;\n align-items: center;\n height: 86px;\n padding: 0 32px;\n color: #fff;\n background-image: linear-gradient(transparent, rgba(0, 0, 0, 0.75));\n}\n\n.emerald-template .input::before {\n position: absolute;\n top: -10px;\n left: 10%;\n z-index: -1;\n width: 80%;\n height: 20px;\n background-color: #16413d;\n border-radius: 50%;\n filter: blur(40px);\n content: \"\";\n}\n\n.emerald-template .loading {\n position: relative;\n width: 100%;\n height: 1px;\n background: linear-gradient(hsla(0, 0%, 100%, 0.25), hsla(0, 0%, 100%, 0.05));\n}\n\n.emerald-template .loading::before,\n.emerald-template .loading::after {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n background: linear-gradient(\n 90deg,\n rgba(144, 224, 196, 0),\n rgba(162, 183, 231, 0.5) 41%,\n #059669 91%,\n #6ee7b7 122%\n );\n transform-origin: 0 50%;\n opacity: 0;\n content: \"\";\n}\n\n.emerald-template .loading::before {\n height: 4px;\n filter: blur(4px) saturate(1.5);\n}\n\n.emerald-template .loading::after {\n height: 1px;\n}\n\n.emerald-template .loading.active::before,\n.emerald-template .loading.active::after {\n animation-name: emerald-loading;\n animation-duration: 1.4s;\n animation-timing-function: ease-in-out;\n animation-fill-mode: forwards;\n}\n\n@keyframes emerald-loading {\n 0% {\n transform: scaleX(0) translateX(-50%);\n opacity: 1;\n }\n 100% {\n transform: scaleX(1) translateX(100%);\n }\n}\n\n.emerald-template .output {\n height: var(--height);\n padding: 24px 32px;\n}\n\n.emerald-template .outputText {\n min-height: calc(100% - 32px);\n max-height: calc(100% - 32px);\n overflow: hidden;\n -webkit-mask-image: linear-gradient(0deg, transparent 0, #000 20%);\n mask-image: linear-gradient(0deg, transparent 0, #000 20%);\n white-space: pre-wrap;\n}\n\n.emerald-template .outputFooter {\n position: absolute;\n right: 32px;\n bottom: 24px;\n left: 32px;\n display: flex;\n justify-content: space-between;\n}\n\n.emerald-template .cursor {\n animation: emerald-cursor 1s infinite;\n margin-left: 1px;\n}\n\n@keyframes emerald-cursor {\n 0% {\n opacity: 0;\n }\n 50% {\n opacity: 1;\n }\n 100% {\n opacity: 0;\n }\n}\n\n@layer base {\n :where(.emerald-template, .emerald-template *) {\n border-color: var(--border);\n }\n}\n","path":"/preview.css","target":"uicapsule/emerald-template/preview.css","type":"registry:file"},{"content":"\"use client\";\n\nimport { FeaturesSection } from \"./_components/features-section\";\nimport { Footer } from \"./_components/footer\";\nimport { Header } from \"./_components/header\";\nimport { HeroSection } from \"./_components/hero-section\";\nimport { IntegrationsSection } from \"./_components/integrations-section\";\nimport { WorkflowSection } from \"./_components/workflow-section\";\n\nimport \"./preview.css\";\n\nconst Preview = () => (\n
\n
\n
\n \n \n \n \n
\n
\n);\n\nexport default Preview;\n","path":"/preview.tsx","target":"uicapsule/emerald-template/preview.tsx","type":"registry:file"},{"content":"declare module \"*.css\" {}\n","path":"/styles.d.ts","target":"uicapsule/emerald-template/styles.d.ts","type":"registry:file"}],"homepage":"https://www.uicapsule.com/ui/emerald-template","name":"emerald-template","registryDependencies":[],"title":"Emerald","type":"registry:block"}