51: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"] 52: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"] 53:T39e2,"use client"; import * as React from "react"; import { motion } from "framer-motion"; import { Code2, MessageSquareText, Users } from "lucide-react"; import { cn } from "@/lib/utils"; import { CodeBlock } from "@/components/code-block/code-block"; import { ChatMessages } from "@/components/chat-messages"; import { CardStackRotator } from "@/components/card-stack-rotator/card-stack-rotator"; import type { CardData } from "@/components/card-stack-rotator/card-stack-rotator"; import { EncryptedText } from "@/components/encrypted-text"; import { TypewriterEffect } from "@/components/typewriter-effect"; // ── Types ───────────────────────────────────────────────────────────────────── export type LiveCursor = { name: string; color: string; textColor?: string; path: Array<{ x: number; y: number }>; duration?: number; delay?: number; note?: string; }; export type RealTimeCursorsProps = { cursors?: LiveCursor[]; className?: string; }; // ── Cursor data ─────────────────────────────────────────────────────────────── const defaultCursors: LiveCursor[] = [ { name: "Ava", color: "#2563eb", path: [ { x: 10, y: 15 }, { x: 48, y: 8 }, { x: 68, y: 35 }, { x: 28, y: 52 }, { x: 14, y: 32 }, ], duration: 11, }, { name: "Noah", color: "#7c3aed", path: [ { x: 82, y: 68 }, { x: 58, y: 42 }, { x: 38, y: 60 }, { x: 90, y: 28 }, { x: 72, y: 80 }, ], duration: 12, delay: 0.9, }, { name: "Mira", color: "#059669", path: [ { x: 22, y: 78 }, { x: 52, y: 55 }, { x: 78, y: 72 }, { x: 36, y: 20 }, { x: 60, y: 12 }, ], duration: 10, delay: 1.8, }, { name: "Kai", color: "#e11d48", path: [ { x: 88, y: 12 }, { x: 64, y: 28 }, { x: 42, y: 6 }, { x: 18, y: 28 }, { x: 50, y: 46 }, ], duration: 13, delay: 2.6, }, ]; // ── Static demo data ────────────────────────────────────────────────────────── const CARDS: CardData[] = [ { id: "1", content: "**Real-time collaboration** changes how teams build products together.", name: "Jordan Lee", designation: "Head of Product", initials: "JL", company: "Nexus", }, { id: "2", content: "Design systems need **consistency and flexibility** in equal measure.", name: "Alex Chen", designation: "Lead Designer", initials: "AC", company: "Studio", }, { id: "3", content: "The best **developer experience** feels invisible — it just works.", name: "Maya Patel", designation: "Engineering Lead", initials: "MP", company: "Nexus", }, ]; // Defined at module level — inline array literals create a new ref each render, // which resets the TypewriterEffect animation before it can progress. const TYPEWRITER_TEXTS = [ "A stunning landing page.", "A real-time dashboard.", "A collaborative workspace.", "The next big thing.", ]; const SNIPPET = `import { RealTimeCursors } from "@nexus/ui"; export default function Canvas() { return ( ); }`; // ── Cursor SVG ──────────────────────────────────────────────────────────────── function CursorIcon({ color, size = 22 }: { color: string; size?: number }) { return ( ); } function LiveCursorMarker({ cursor }: { cursor: LiveCursor }) { const xs = cursor.path.map((p) => `${p.x}%`); const ys = cursor.path.map((p) => `${p.y}%`); return (

{cursor.name}

); } // ── Grid Cell ───────────────────────────────────────────────────────────────── function GridCell({ children, className, label, accentColor = "rgba(255,255,255,0.05)", }: { children: React.ReactNode; className?: string; label?: string; accentColor?: string; }) { return (

{label && (

{label}

)} {children}

); } // ── Main component ──────────────────────────────────────────────────────────── export function RealTimeCursors({ cursors = defaultCursors, className }: RealTimeCursorsProps) { return (

{/* Ambient blobs */}

{/* Fine grid */}

{/* ── Header ── */}

Multiplayer workspace

Live collaboration canvas

{cursors.map((c) => (

{c.name[0]}

))}

{cursors.length} online

{/* ── Bento grid — cursors float over everything ── */}

{cursors.map((c) => ( ))}

{/* 4-column grid, 4 rows — each cell a different size: Row 1 (380px): [CodeBlock — 2col] [ChatMessages — 2col] Row 2 (320px): [CardStack — 1col] [EncryptedText — 1col] [Typewriter — 2col] Row 3 (240px): [ShootingStars — 3col] [LiveCursors spotlight — 1col] */}

{/* ── Row 1 ── */} {/* CodeBlock — col span 2, tall */}

{/* ChatMessages — col span 2, tall */}

{/* ── Row 2 ── */} {/* CardStackRotator — col span 1 */} {/* overflow-visible so back-card y-offset isn't clipped by the cell border */}

{/* wrapper height = cardHeight + stackOffset so the back card fits exactly */}

{/* EncryptedText — col span 1 */}

{/* TypewriterEffect — col span 2 */}

What will you build?

Nexus UI ships production-ready components so you can focus on what matters.

{/* Footer */}

Cursor paths are simulated locally

); } export default RealTimeCursors; 54:T6610,"use client"; import * as React from "react"; import { motion, AnimatePresence } from "framer-motion"; // ── Types ───────────────────────────────────────────────────────────────────── export type CodeLanguage = | "plain" | "js" | "ts" | "jsx" | "tsx" | "css" | "json" | "html"; export type HeaderProps = { enabled?: boolean; showDots?: boolean; background?: string; title?: string; font?: React.CSSProperties; titleColor?: string; copy?: CopyProps; }; export type CopyProps = { enabled?: boolean; label?: string; copiedLabel?: string; copiedDurationMs?: number; color?: string; accentColor?: string; }; export type CodeAreaProps = { showLineNumbers?: boolean; wrap?: boolean; padding?: number; background?: string; selectionColor?: string; textColor?: string; subtleTextColor?: string; font?: React.CSSProperties; }; export type BorderProps = { color?: string; width?: number; radius?: string; }; export type CodeBlockProps = { code?: string; language?: CodeLanguage; theme?: "dark" | "light" | "custom"; header?: HeaderProps; codeArea?: CodeAreaProps; border?: BorderProps; className?: string; style?: React.CSSProperties; }; // ── Defaults ────────────────────────────────────────────────────────────────── const DEFAULT_CODE = `import React, { useState } from 'react'; export default function PricingCard() { const [isYearly, setIsYearly] = useState(false); return (

Pro Plan

\${isYearly ? '99' : '12'} /{isYearly ? 'year' : 'month'}

Unlimited Projects
Priority Support

); }`; export const DEFAULT_HEADER: HeaderProps = { enabled: true, showDots: true, background: "#1A1A1A", title: "Example", titleColor: "#E5E5E5", copy: { enabled: true, label: "Copy", copiedLabel: "Copied", copiedDurationMs: 1200, color: "#888888", accentColor: "#E5E5E5", }, }; export const DEFAULT_CODE_AREA: CodeAreaProps = { showLineNumbers: true, wrap: true, padding: 16, background: "#0D0D0D", selectionColor: "rgba(255, 255, 255, 0.1)", textColor: "#D4D4D4", subtleTextColor: "#555555", }; export const DEFAULT_BORDER: BorderProps = { color: "#1A1A1A", width: 1, radius: "12px", }; // ── Theme colors ─────────────────────────────────────────────────────────────── type ActiveColors = { border: string; containerBg: string; headerBg: string; title: string; copy: string; copyAccent: string; codeBg: string; text: string; subtleText: string; selection: string; isDark: boolean; }; function isColorDark(color: string): boolean { if (!color) return false; let r = 0, g = 0, b = 0; const c = color.trim(); if (c.startsWith("#")) { let hex = c.replace("#", ""); if (hex.length === 3) hex = hex.split("").map(x => x + x).join(""); r = parseInt(hex.substring(0, 2), 16) || 0; g = parseInt(hex.substring(2, 4), 16) || 0; b = parseInt(hex.substring(4, 6), 16) || 0; } else if (c.startsWith("rgb")) { const match = c.match(/\d+(\.\d+)?/g); if (match && match.length >= 3) { r = parseInt(match[0], 10); g = parseInt(match[1], 10); b = parseInt(match[2], 10); } } const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255; return luminance < 0.5; } function setAlpha(color: string, alpha: number): string { if (!color) return "transparent"; const c = color.trim(); if (c.startsWith("#")) { let hex = c.replace("#", ""); if (hex.length === 3) hex = hex.split("").map(x => x + x).join(""); if (hex.length === 6) { const a = Math.round(alpha * 255).toString(16).padStart(2, "0"); return `#${hex}${a}`; } if (hex.length === 8) return c; } if (c.startsWith("rgb")) { const m = c.match(/\d+(\.\d+)?/g); if (m && m.length >= 3) { return `rgba(${m[0]}, ${m[1]}, ${m[2]}, ${alpha})`; } } return c; } // ── Token types ─────────────────────────────────────────────────────────────── type TokenType = | "keyword" | "function" | "class" | "string" | "number" | "comment" | "operator" | "punct" | "tag" | "attr" | "value" | "boolean" | "nullish" | "plain"; type Token = { t: TokenType; v: string }; // ── Token color map ──────────────────────────────────────────────────────────── function tokenColor(t: TokenType, baseColor: string, isDark: boolean): string { if (isDark) { switch (t) { case "keyword": return "#D2A8FF"; case "function": return "#82AAFF"; case "class": return "#FFCB6B"; case "string": return "#C3E88D"; case "number": return "#F78C6C"; case "comment": return "#7A7A7A"; case "operator": return "#89DDFF"; case "punct": return "#D4D4D4"; case "tag": return "#F07178"; case "attr": return "#FFCB6B"; case "value": return "#C3E88D"; case "boolean": return "#F78C6C"; case "nullish": return "#F78C6C"; default: return baseColor; } } switch (t) { case "keyword": return "#8839EF"; case "function": return "#1E66F5"; case "class": return "#DF8E1D"; case "string": return "#40A02B"; case "number": return "#FE640B"; case "comment": return "#8C8FA1"; case "operator": return "#04A5E5"; case "punct": return "#4C4F69"; case "tag": return "#D20F39"; case "attr": return "#DF8E1D"; case "value": return "#40A02B"; case "boolean": return "#FE640B"; case "nullish": return "#FE640B"; default: return baseColor; } } // ── Tokenizer ────────────────────────────────────────────────────────────────── function isDigit(ch: string): boolean { return ch >= "0" && ch <= "9"; } function isIdentStart(ch: string): boolean { return (ch >= "A" && ch <= "Z") || (ch >= "a" && ch <= "z") || ch === "_" || ch === "$"; } function isIdentPart(ch: string): boolean { return isIdentStart(ch) || isDigit(ch); } function tokenizeCodeLine(line: string): Token[] { return tokenizeGeneric(line, { keywords: [ "const", "let", "var", "function", "return", "if", "else", "for", "while", "do", "switch", "case", "break", "continue", "try", "catch", "finally", "throw", "new", "class", "extends", "super", "this", "import", "from", "export", "default", "type", "interface", "implements", "public", "private", "protected", "readonly", "as", "async", "await", "yield", "in", "of", "instanceof", "typeof", "void", "delete", "get", "set", "static", ], keywordType: () => "keyword" as TokenType, commentStyle: "line+block", }); } function tokenizeJsonLine(line: string): Token[] { return tokenizeGeneric(line, { keywords: ["true", "false", "null"], keywordType: (w: string) => w === "null" ? "nullish" : "boolean", commentStyle: "none", }); } function tokenizeCssLine(line: string): Token[] { return tokenizeGeneric(line, { keywords: [], keywordType: () => "keyword" as TokenType, commentStyle: "block", }); } function tokenizeHtmlLine(line: string): Token[] { const tokens: Token[] = []; let i = 0; while (i < line.length) { const ch = line[i]; if (ch === "<") { const close = line.indexOf(">", i + 1); const end = close === -1 ? line.length : close + 1; const segment = line.slice(i, end); const m = segment.match(/^<\/?\s*([a-zA-Z0-9:-]+)/); if (m) { const tagName = m[1]; const prefixLen = segment.indexOf(tagName); if (prefixLen > 0) tokens.push({ t: "punct", v: segment.slice(0, prefixLen) }); tokens.push({ t: "tag", v: tagName }); const rest = segment.slice(prefixLen + tagName.length); tokens.push(...tokenizeHtmlAttrs(rest)); } else { tokens.push({ t: "tag", v: segment }); } i = end; continue; } const next = line.indexOf("<", i); const end = next === -1 ? line.length : next; tokens.push({ t: "plain", v: line.slice(i, end) }); i = end; } return tokens; } function tokenizeHtmlAttrs(rest: string): Token[] { const tokens: Token[] = []; let s = rest; while (s.length) { const quoteIdx = s.search(/["']/); if (quoteIdx === -1) { tokens.push({ t: "punct", v: s }); break; } if (quoteIdx > 0) { tokens.push(...tokenizeAttrNames(s.slice(0, quoteIdx))); s = s.slice(quoteIdx); } const q = s[0]; const end = s.indexOf(q, 1); const v = end === -1 ? s : s.slice(0, end + 1); tokens.push({ t: "value", v }); s = end === -1 ? "" : s.slice(end + 1); } return tokens; } function tokenizeAttrNames(text: string): Token[] { const tokens: Token[] = []; let i = 0; while (i < text.length) { const m = text.slice(i).match(/^[\s/=>]+/); if (m) { tokens.push({ t: "punct", v: m[0] }); i += m[0].length; continue; } const n = text.slice(i).match(/^[a-zA-Z_:][-a-zA-Z0-9_:.]*/); if (n) { tokens.push({ t: "attr", v: n[0] }); i += n[0].length; continue; } tokens.push({ t: "punct", v: text[i] }); i++; } return tokens; } type GenericOpts = { keywords: string[]; keywordType: (w: string) => TokenType; commentStyle: "none" | "line" | "block" | "line+block"; }; function tokenizeGeneric(line: string, opts: GenericOpts): Token[] { const tokens: Token[] = []; const kw = new Set(opts.keywords); let i = 0; const push = (t: TokenType, v: string) => { if (!v) return; tokens.push({ t, v }); }; while (i < line.length) { const ch = line[i]; if ( (opts.commentStyle === "line" || opts.commentStyle === "line+block") && ch === "/" && line[i + 1] === "/" ) { push("comment", line.slice(i)); break; } if ( (opts.commentStyle === "block" || opts.commentStyle === "line+block") && ch === "/" && line[i + 1] === "*" ) { const end = line.indexOf("*/", i + 2); const seg = end === -1 ? line.slice(i) : line.slice(i, end + 2); push("comment", seg); i += seg.length; continue; } if (ch === '"' || ch === "'" || ch === "`") { const q = ch; let j = i + 1; let escaped = false; while (j < line.length) { const cj = line[j]; if (escaped) { escaped = false; } else if (cj === "\\") { escaped = true; } else if (cj === q) { j++; break; } j++; } push("string", line.slice(i, j)); i = j; continue; } if (isDigit(ch) || (ch === "." && isDigit(line[i + 1] ?? ""))) { let j = i + 1; while (j < line.length && /[0-9._eE+-]/.test(line[j])) j++; push("number", line.slice(i, j)); i = j; continue; } if (isIdentStart(ch)) { let j = i + 1; while (j < line.length && isIdentPart(line[j])) j++; const word = line.slice(i, j); let k = j; while (k < line.length && (line[k] === " " || line[k] === "\t")) k++; const isFunctionCall = line[k] === "("; const isUppercase = /^[A-Z]/.test(word); if (kw.has(word)) push(opts.keywordType(word), word); else if (word === "true" || word === "false") push("boolean", word); else if (word === "null" || word === "undefined") push("nullish", word); else if (isFunctionCall) push("function", word); else if (isUppercase) push("class", word); else push("plain", word); i = j; continue; } if (/[=+\-*/%<>!&|^~?:]/.test(ch)) { const two = line.slice(i, i + 2); const three = line.slice(i, i + 3); if (["===", "!==", ">>>"].includes(three)) { push("operator", three); i += 3; continue; } if (["==", "!=", "<=", ">=", "=>", "&&", "||", "??", "++", "--", "+=", "-=", "*=", "/="].includes(two)) { push("operator", two); i += 2; continue; } push("operator", ch); i++; continue; } if (/[()[\]{},.;]/.test(ch)) { push("punct", ch); i++; continue; } if (ch === " " || ch === "\t") { let j = i + 1; while (j < line.length && (line[j] === " " || line[j] === "\t")) j++; push("plain", line.slice(i, j)); i = j; continue; } push("plain", ch); i++; } return tokens.length ? tokens : [{ t: "plain", v: " " }]; } function tokenizeLine(line: string, language: CodeLanguage): Token[] | null { if (language === "plain") return null; if (language === "html") return tokenizeHtmlLine(line); if (language === "json") return tokenizeJsonLine(line); if (language === "css") return tokenizeCssLine(line); return tokenizeCodeLine(line); } // ── Icons ────────────────────────────────────────────────────────────────────── function WindowDot({ color }: { color: string }) { return ( ); } function CopyIcon() { return ( ); } // ── HighlightedLine ──────────────────────────────────────────────────────────── function HighlightedLine({ tokens, baseColor, isDark, }: { tokens: Token[]; baseColor: string; isDark: boolean; }) { return ( <> {tokens.map((tok, idx) => ( {tok.v.length > 0 ? tok.v : " "} ))} ); } // ── Main Component ──────────────────────────────────────────────────────────── export function CodeBlock({ code = DEFAULT_CODE, language = "jsx", theme = "dark", header = DEFAULT_HEADER, codeArea = DEFAULT_CODE_AREA, border = DEFAULT_BORDER, className, style, }: CodeBlockProps) { const [copied, setCopied] = React.useState(false); const timerRef = React.useRef(null); React.useEffect(() => { return () => { if (timerRef.current !== null && typeof window !== "undefined") { window.clearTimeout(timerRef.current); timerRef.current = null; } }; }, []); const normalizedCode = React.useMemo(() => { return (code ?? "").replace(/\r\n/g, "\n"); }, [code]); const lines = React.useMemo(() => { const arr = normalizedCode.split("\n"); return arr.length === 0 ? [""] : arr; }, [normalizedCode]); const maxLineNumberDigits = React.useMemo(() => { return String(Math.max(1, lines.length)).length; }, [lines.length]); const tokensByLine = React.useMemo(() => { if (language === "plain") return null; return lines.map(line => tokenizeLine(line, language)); }, [lines, language]); const copyToClipboard = React.useCallback(async () => { if (typeof window === "undefined" || typeof document === "undefined") return; const text = normalizedCode; try { if (navigator?.clipboard?.writeText) { await navigator.clipboard.writeText(text); } else { const ta = document.createElement("textarea"); ta.value = text; ta.setAttribute("readonly", "true"); ta.style.position = "absolute"; ta.style.left = "-9999px"; ta.style.top = "0"; document.body.appendChild(ta); ta.select(); document.execCommand("copy"); document.body.removeChild(ta); } setCopied(true); if (timerRef.current !== null) window.clearTimeout(timerRef.current); timerRef.current = window.setTimeout(() => { setCopied(false); }, Math.max(200, header.copy?.copiedDurationMs ?? 1200)); } catch { // ignore clipboard errors silently } }, [header.copy?.copiedDurationMs, normalizedCode]); // ── Active colors ────────────────────────────────────────────────────────── const activeColors = React.useMemo(() => { if (theme === "light") { return { border: "#E5E5E5", containerBg: "#FFFFFF", headerBg: "#F5F5F5", title: "#000000", copy: "#A6A6A6", copyAccent: "#000000", codeBg: "#FFFFFF", text: "#383A42", subtleText: "#A0A1A7", selection: "rgba(0, 153, 255, 0.15)", isDark: false, }; } if (theme === "dark") { return { border: "#1A1A1A", containerBg: "#0D0D0D", headerBg: "#1A1A1A", title: "#E5E5E5", copy: "#888888", copyAccent: "#E5E5E5", codeBg: "#0D0D0D", text: "#D4D4D4", subtleText: "#555555", selection: "rgba(255, 255, 255, 0.1)", isDark: true, }; } return { border: border.color ?? "#1A1A1A", containerBg: codeArea.background ?? "#0D0D0D", headerBg: header.background ?? "#1A1A1A", title: header.titleColor ?? "#E5E5E5", copy: header.copy?.color ?? "#888888", copyAccent: header.copy?.accentColor ?? "#E5E5E5", codeBg: codeArea.background ?? "#0D0D0D", text: codeArea.textColor ?? "#D4D4D4", subtleText: codeArea.subtleTextColor ?? "#555555", selection: codeArea.selectionColor ?? "rgba(255,255,255,0.1)", isDark: isColorDark(codeArea.background ?? "#0D0D0D"), }; }, [theme, border, header, codeArea]); const containerBorder = (border.width ?? 1) > 0 ? `${border.width}px solid ${activeColors.border}` : "none"; const headerHeight = 44; // ── Header ───────────────────────────────────────────────────────────────── const headerEl = header.enabled ? (

{header.showDots && ( )}

{header.title}

{header.copy?.enabled && ( {copied ? header.copy.copiedLabel : header.copy.label} )}

) : null; // ── Render ───────────────────────────────────────────────────────────────── const showLineNumbers = codeArea.showLineNumbers ?? true; const wrap = codeArea.wrap ?? true; const padding = codeArea.padding ?? 16; return (

{headerEl}

{/* Code scroll area */}

            
              {lines.map((line, i) => {
                const ln = i + 1;
                const tokens = tokensByLine ? tokensByLine[i] : null;
                return (
                  
                    {showLineNumbers && (
                      
                        {ln}
                      
                    )}
                    
                      {tokens ? (
                        
                      ) : (
                        
                          {line.length > 0 ? line : " "}
                        
                      )}
                    
                  
                );
              })}

{/* Bottom fade gradient */}

); } export default CodeBlock; 55:T29a2,"use client"; import { useCallback, useEffect, useRef, useState, } from "react"; import { AnimatePresence, motion } from "framer-motion"; import { Send, RotateCcw, Sparkles } from "lucide-react"; import { cn } from "@/lib/utils"; export interface ChatMessage { id: string; sender: "user" | "assistant"; content: string; timestamp?: string; } export interface ChatMessagesProps { messages?: ChatMessage[]; autoPlay?: boolean; autoPlayDelay?: number; typingDuration?: number; showReplay?: boolean; interactive?: boolean; className?: string; } const DEFAULT_MESSAGES: ChatMessage[] = [ { id: "1", sender: "assistant", content: "Hello! I'm your Nexus AI assistant. How can I help you build something amazing today?" }, { id: "2", sender: "user", content: "I want to create a beautiful landing page for my SaaS product." }, { id: "3", sender: "assistant", content: "Great choice! Nexus UI has everything you need — animated components, premium styling, and easy integration. What feature would you like to showcase first?" }, { id: "4", sender: "user", content: "I need something that will impress investors during pitch meetings." }, { id: "5", sender: "assistant", content: "Perfect. I'd recommend our Hero Aurora Spotlight combined with the Cinematic Logo Cloud. They create a stunning first impression that showcases both innovation and credibility." }, { id: "6", sender: "user", content: "Can I see how they look together?" }, { id: "7", sender: "assistant", content: "Absolutely. Click any component in the sidebar to preview it live, then copy the code directly into your project. No complex setup required." }, ]; function TypingIndicator({ className }: { className?: string }) { return ( {[0, 1, 2].map((i) => ( ))} ); } function MessageBubble({ message, isLast, }: { message: ChatMessage; isLast?: boolean; }) { const isUser = message.sender === "user"; return (

{!isUser && (

)} {message.content}

); } export function ChatMessages({ messages = DEFAULT_MESSAGES, autoPlay = true, autoPlayDelay = 1800, typingDuration = 1400, showReplay = true, interactive = false, className, }: ChatMessagesProps) { const [visibleCount, setVisibleCount] = useState(autoPlay ? 0 : messages.length); const [isTyping, setIsTyping] = useState(false); const [inputValue, setInputValue] = useState(""); const [chatMessages, setChatMessages] = useState(messages); const scrollRef = useRef(null); const isAutoPlaying = useRef(false); const scrollToBottom = useCallback(() => { if (scrollRef.current) { scrollRef.current.scrollTo({ top: scrollRef.current.scrollHeight, behavior: "smooth", }); } }, []); const revealNext = useCallback( async (index: number) => { if (index >= chatMessages.length) { isAutoPlaying.current = false; return; } const message = chatMessages[index]; if (message.sender === "assistant") { setIsTyping(true); await new Promise((r) => setTimeout(r, typingDuration)); setIsTyping(false); } setVisibleCount(index + 1); await new Promise((r) => setTimeout(r, 100)); scrollToBottom(); await new Promise((r) => setTimeout(r, autoPlayDelay - (message.sender === "assistant" ? typingDuration : 0) - 100)); if (isAutoPlaying.current) { revealNext(index + 1); } }, [chatMessages, autoPlayDelay, typingDuration, scrollToBottom], ); const startAutoPlay = useCallback(() => { if (autoPlay && visibleCount === 0) { isAutoPlaying.current = true; revealNext(0); } }, [autoPlay, visibleCount, revealNext]); const replay = useCallback(() => { setVisibleCount(0); setChatMessages(messages); isAutoPlaying.current = true; setTimeout(() => revealNext(0), 100); }, [messages, revealNext]); useEffect(() => { setChatMessages(messages); if (autoPlay) { setVisibleCount(0); isAutoPlaying.current = true; const timer = setTimeout(() => revealNext(0), 500); return () => { clearTimeout(timer); isAutoPlaying.current = false; }; } else { setVisibleCount(messages.length); } }, [messages, autoPlay, revealNext]); useEffect(() => { scrollToBottom(); }, [visibleCount, isTyping, scrollToBottom]); const handleSend = useCallback(() => { if (!inputValue.trim() || !interactive) return; const newMessage: ChatMessage = { id: `user-${Date.now()}`, sender: "user", content: inputValue.trim(), }; setChatMessages((prev) => [...prev, newMessage]); setInputValue(""); setVisibleCount((prev) => prev + 1); setTimeout(() => { const assistantReply: ChatMessage = { id: `assistant-${Date.now()}`, sender: "assistant", content: "That's a great question! Let me help you explore the best options for your use case.", }; setChatMessages((prev) => [...prev, assistantReply]); setVisibleCount((prev) => prev + 1); }, typingDuration + 500); }, [inputValue, interactive, typingDuration]); const handleKeyDown = (e: React.KeyboardEvent) => { if (e.key === "Enter" && !e.shiftKey) { e.preventDefault(); handleSend(); } }; return (

{/* Header */}

Nexus AI

Always here to help

{showReplay && ( Replay )}

{/* Messages */}

{chatMessages.slice(0, visibleCount).map((message, i) => ( ))} {isTyping && }

{/* Input */}

setInputValue(e.target.value)} onKeyDown={handleKeyDown} disabled={!interactive} placeholder={interactive ? "Ask Nexus AI..." : "Demo mode - replay to watch again"} aria-label={interactive ? "Type your message" : "Chat input (demo mode)"} className="flex-1 bg-transparent text-sm text-white outline-none placeholder:text-white/30 disabled:cursor-not-allowed" />

); } 56:T2568,"use client"; import * as React from "react"; import { motion, AnimatePresence, useReducedMotion } from "framer-motion"; import { cn } from "@/lib/utils"; // ── Types ───────────────────────────────────────────────────────────────────── export interface CardData { id: string; content: string; name: string; designation: string; avatarUrl?: string; initials?: string; company?: string; companyLogoUrl?: string; } export interface CardStackRotatorProps { cards: CardData[]; rotationInterval?: number; maxVisible?: number; stackOffset?: number; scaleStep?: number; cardWidth?: string; cardHeight?: string; cardBackground?: string; cardBorderColor?: string; textColor?: string; mutedColor?: string; highlightBackground?: string; highlightTextColor?: string; contentFontSize?: string; nameFontSize?: string; designationFontSize?: string; borderRadius?: string; shadowIntensity?: number; pauseOnHover?: boolean; direction?: "forward" | "backward"; className?: string; } // ── Highlight parser ─────────────────────────────────────────────────────────── function parseHighlights(text: string): React.ReactNode[] { const parts: React.ReactNode[] = []; const segments = text.split(/(\*\*[^*]+\*\*)/); let key = 0; for (const seg of segments) { const match = seg.match(/^\*\*([^*]+)\*\*$/); if (match) { parts.push( {match[1]} , ); } else if (seg) { parts.push(seg); } } return parts; } // ── Avatar ───────────────────────────────────────────────────────────────────── interface AvatarProps { src?: string; initials?: string; size?: number; background?: string; textColor?: string; } function Avatar({ src, initials, size = 40, background, textColor }: AvatarProps) { if (src) { return (

); } return (

{initials ?? "?"}

); } // ── Spring config ────────────────────────────────────────────────────────────── const SPRING_ENTER = { type: "spring" as const, stiffness: 280, damping: 30, mass: 1 }; const SPRING_EXIT = { type: "spring" as const, stiffness: 320, damping: 32, mass: 0.8 }; // ── Main component ───────────────────────────────────────────────────────────── export function CardStackRotator({ cards, rotationInterval = 3000, maxVisible = 4, stackOffset = 16, scaleStep = 0.04, cardWidth = "100%", cardHeight = "380px", cardBackground = "#111113", cardBorderColor = "rgba(255,255,255,0.07)", textColor = "#fafafa", mutedColor = "rgba(250,250,250,0.45)", highlightTextColor = "#a5b4fc", contentFontSize = "15px", nameFontSize = "15px", designationFontSize = "12px", borderRadius = "16px", shadowIntensity = 0.55, pauseOnHover = true, className, }: CardStackRotatorProps) { const reduceMotion = useReducedMotion() === true; const [frontIndex, setFrontIndex] = React.useState(0); const [isPaused, setIsPaused] = React.useState(false); const timerRef = React.useRef | null>(null); const totalCards = cards.length; const visibleCount = Math.min(maxVisible, totalCards); // Visible window: front card at position 0, subsequent cards behind const visibleCards = React.useMemo(() => { if (!totalCards) return []; const front = frontIndex % totalCards; return Array.from({ length: visibleCount }, (_, i) => { const cardIdx = (front + i) % totalCards; return { card: cards[cardIdx], stackIndex: i }; }); }, [cards, frontIndex, visibleCount, totalCards]); React.useEffect(() => { if (isPaused || reduceMotion) { if (timerRef.current) clearTimeout(timerRef.current); return; } const id = setTimeout(() => { setFrontIndex((prev) => (prev + 1) % totalCards); }, rotationInterval); timerRef.current = id; return () => clearTimeout(id); }, [isPaused, reduceMotion, frontIndex, rotationInterval, totalCards]); if (!totalCards) return null; const shadowBlur = 20 + shadowIntensity * 30; const shadowOpacity = 0.12 + shadowIntensity * 0.28; return (

pauseOnHover && setIsPaused(true)} onMouseLeave={() => pauseOnHover && setIsPaused(false)} > {visibleCards.map(({ card, stackIndex }) => { const yOffset = stackIndex * stackOffset; const scale = 1 - stackIndex * scaleStep; const zBase = visibleCount - stackIndex; return (

{/* Content */}

{parseHighlights(card.content)}

{/* Footer */}

n[0]) .join("") .slice(0, 2) .toUpperCase() } size={40} background="rgba(129,140,248,0.15)" textColor={highlightTextColor} />

{card.name}

{card.designation} {card.company ? ` · ${card.company}` : ""}

); })}

); } 57:T1ad5,"use client"; import * as React from "react"; import { useInView, useReducedMotion } from "framer-motion"; import { cn } from "@/lib/utils"; const DEFAULT_CHARSET = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789@#$%^&*!<>/|[]{}~=-_+:."; function pickRandom(chars: string): string { return chars[Math.floor(Math.random() * chars.length)] ?? chars[0]!; } function isPreserved(c: string): boolean { return c === " " || c === "\n" || c === "\t"; } type CharState = { char: string; locked: boolean }; function initStates(text: string, charset: string): CharState[] { return Array.from(text).map((c) => isPreserved(c) ? { char: c, locked: true } : { char: pickRandom(charset), locked: false }, ); } export type EncryptedTextTrigger = "load" | "hover" | "viewport" | "click"; export interface EncryptedTextProps { text: string; className?: string; /** ms between each character locking in. Default: 50 */ speed?: number; /** ms between gibberish shuffle ticks. Default: 35 */ shuffleSpeed?: number; /** ms delay before animation starts. Default: 0 */ revealDelay?: number; /** Charset for the gibberish phase. */ characters?: string; /** Shuffle cycles before first character locks in. Default: 8 */ iterations?: number; /** What triggers the reveal. Default: "load" */ trigger?: EncryptedTextTrigger; /** Loop the animation after completion. Default: false */ loop?: boolean; /** ms to wait before replaying when loop=true. Default: 2000 */ loopDelay?: number; /** Polymorphic element. Default: "span" */ as?: "span" | "p" | "h1" | "h2" | "h3" | "div"; /** Called once every character has locked in. */ onComplete?: () => void; /**ClassName applied to scrambling (unlocked) characters. Defaults to primary/cyan glow. */ scrambleClassName?: string; } export function EncryptedText({ text, className, speed = 50, shuffleSpeed = 35, revealDelay = 0, characters = DEFAULT_CHARSET, iterations = 8, trigger = "load", loop = false, loopDelay = 2000, as: Tag = "span", onComplete, scrambleClassName, }: EncryptedTextProps) { const reduceMotion = useReducedMotion(); const rootRef = React.useRef(null); const isInView = useInView(rootRef as React.RefObject, { once: !loop, amount: 0.3, }); const [states, setStates] = React.useState(() => Array.from(text).map((c) => ({ char: c, locked: true })) ); // Always-current config refs — read inside effects without stale closure risk const cfg = React.useRef({ text, characters, speed, shuffleSpeed, iterations, loop, loopDelay, onComplete }); cfg.current = { text, characters, speed, shuffleSpeed, iterations, loop, loopDelay, onComplete }; // Incrementing this triggers one animation run const [cycle, setCycle] = React.useState(0); // play() is the single entry point for all trigger modes const play = React.useCallback(() => setCycle((n) => n + 1), []); // Core animation — isolated per cycle so cleanup fully cancels the previous run React.useEffect(() => { if (cycle === 0) return; const { text: t, characters: ch, speed: sp, shuffleSpeed: ss, iterations: it, loop: lp, loopDelay: ld, onComplete: cb } = cfg.current; if (reduceMotion) { setStates(Array.from(t).map((c) => ({ char: c, locked: true }))); cb?.(); return; } let dead = false; let revealIdx = 0; setStates(initStates(t, ch)); // Phase 1 — fast shuffle of all unrevealed characters const shuffleTimer = setInterval(() => { if (dead) return; setStates((prev) => prev.map((s) => (s.locked ? s : { char: pickRandom(ch), locked: false })), ); }, ss); // Phase 2 — after warmup, lock one character per tick let revealTimer: ReturnType | null = null; let loopTimer: ReturnType | null = null; const warmupTimer = setTimeout(() => { if (dead) return; revealTimer = setInterval(() => { if (dead) return; if (revealIdx >= t.length) { clearInterval(revealTimer!); clearInterval(shuffleTimer); if (!dead) { setStates(Array.from(t).map((c) => ({ char: c, locked: true }))); cb?.(); if (lp) { loopTimer = setTimeout(() => { if (!dead) setCycle((n) => n + 1); }, ld); } } return; } const idx = revealIdx++; setStates((prev) => { const next = [...prev]; next[idx] = { char: t[idx]!, locked: true }; return next; }); }, sp); }, it * ss); return () => { dead = true; clearInterval(shuffleTimer); clearTimeout(warmupTimer); if (revealTimer) clearInterval(revealTimer); if (loopTimer) clearTimeout(loopTimer); }; }, [cycle, reduceMotion]); // Trigger: load — schedule play() after revealDelay React.useEffect(() => { if (trigger !== "load") return; const t = setTimeout(play, revealDelay); return () => clearTimeout(t); }, [trigger, revealDelay, play]); // Trigger: viewport — play() once the element enters the viewport React.useEffect(() => { if (trigger !== "viewport" || !isInView) return; const t = setTimeout(play, revealDelay); return () => clearTimeout(t); }, [trigger, isInView, revealDelay, play]); // Trigger: hover / click const handleInteraction = React.useCallback(() => { setTimeout(play, revealDelay); }, [play, revealDelay]); const interactionProps: React.HTMLAttributes = {}; if (trigger === "hover") { interactionProps.onMouseEnter = handleInteraction; } else if (trigger === "click") { interactionProps.onClick = handleInteraction; interactionProps.onKeyDown = (e: React.KeyboardEvent) => { if (e.key === "Enter" || e.key === " ") handleInteraction(); }; } return ( } aria-label={text} role={trigger === "click" ? "button" : undefined} tabIndex={trigger === "click" ? 0 : undefined} className={cn( "font-mono whitespace-pre-wrap", trigger === "click" && "cursor-pointer select-none", className, )} {...interactionProps} > {states.map((s, i) => ( ))} ); } 58:T137d,"use client"; import * as React from "react"; import { motion, useReducedMotion } from "framer-motion"; import { cn } from "@/lib/utils"; type TypewriterTag = "h1" | "h2" | "p" | "span" | "div"; type TypewriterText = string | string[]; type TypewriterPhase = "typing" | "pausing" | "deleting" | "done"; export type TypewriterEffectProps = { text: TypewriterText; typingSpeed?: number; deletingSpeed?: number; delay?: number; pauseDuration?: number; loop?: boolean; showCursor?: boolean; cursorClassName?: string; className?: string; as?: TypewriterTag; onComplete?: () => void; }; const clamp = (value: number, min: number) => Math.max(min, value); export function TypewriterEffect({ text, typingSpeed = 65, deletingSpeed = 42, delay = 0, pauseDuration = 1200, loop = false, showCursor = true, cursorClassName, className, as = "span", onComplete, }: TypewriterEffectProps) { const reduceMotion = useReducedMotion() === true; const Tag = as; const textList = React.useMemo(() => { const list = Array.isArray(text) ? text : [text]; const normalized = list.map((item) => item ?? "").filter((item) => item.length > 0); return normalized.length ? normalized : [""]; }, [text]); const [phase, setPhase] = React.useState(reduceMotion ? "done" : "typing"); const [textIndex, setTextIndex] = React.useState(0); const [charIndex, setCharIndex] = React.useState(reduceMotion ? textList[0].length : 0); const completionFiredRef = React.useRef(false); const currentText = textList[textIndex] ?? ""; const visibleText = currentText.slice(0, charIndex); const hasMultipleTexts = textList.length > 1; const canDelete = deletingSpeed > 0; const shouldLoop = loop === true; const longestChars = React.useMemo( () => textList.reduce((max, item) => Math.max(max, item.length), 0), [textList], ); React.useEffect(() => { completionFiredRef.current = false; if (reduceMotion) { setTextIndex(Math.max(0, textList.length - 1)); setCharIndex(textList[Math.max(0, textList.length - 1)]?.length ?? 0); setPhase("done"); onComplete?.(); return; } setTextIndex(0); setCharIndex(0); setPhase("typing"); }, [reduceMotion, textList, onComplete]); React.useEffect(() => { if (reduceMotion || phase === "done") return; const typeMs = clamp(typingSpeed, 10); const deleteMs = clamp(deletingSpeed, 10); const waitMs = clamp(pauseDuration, 0); const initialDelay = clamp(delay, 0); const timer = window.setTimeout(() => { if (phase === "typing") { if (charIndex < currentText.length) { setCharIndex((v) => v + 1); return; } setPhase("pausing"); return; } if (phase === "pausing") { const isLastText = textIndex === textList.length - 1; const hasNextText = !isLastText || shouldLoop; if (!hasNextText) { if (!completionFiredRef.current) { completionFiredRef.current = true; onComplete?.(); } setPhase("done"); return; } if (!canDelete) { const nextIndex = isLastText ? 0 : textIndex + 1; setTextIndex(nextIndex); setCharIndex(0); if (isLastText && shouldLoop) onComplete?.(); setPhase("typing"); return; } setPhase("deleting"); return; } if (phase === "deleting") { if (charIndex > 0) { setCharIndex((v) => v - 1); return; } const isLastText = textIndex === textList.length - 1; const nextIndex = isLastText ? 0 : textIndex + 1; if (isLastText) onComplete?.(); setTextIndex(nextIndex); setPhase("typing"); } }, phase === "typing" ? (charIndex === 0 ? initialDelay : typeMs) : phase === "pausing" ? waitMs : deleteMs); return () => window.clearTimeout(timer); }, [ canDelete, charIndex, currentText.length, delay, deletingSpeed, onComplete, pauseDuration, phase, reduceMotion, shouldLoop, textIndex, textList.length, typingSpeed, ]); return ( {Array.isArray(text) ? text.join(" ") : text} {visibleText} {showCursor ? ( ) : null} ); } 50:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","framer-motion",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/framer-motion","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","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":"min-w-0 break-all text-xs font-medium","children":"framer-motion"}]]}]}],["$","li","lucide-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","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":"min-w-0 break-all text-xs font-medium","children":"lucide-react"}]]}]}],["$","li","react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/react","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","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":"min-w-0 break-all text-xs font-medium","children":"react"}]]}]}]]}],["$","$L51",null,{"namespace":"@nexus-labs","registryDependencies":["https://www.nexus-ui.com/api/registry/nexus-font","utils"]}]]}],null]}],["$","$L52",null,{"files":[{"path":"next-ui/real-time-cursors/index.ts","content":"export { RealTimeCursors } from \"./real-time-cursors\";\nexport type { LiveCursor, RealTimeCursorsProps } from \"./real-time-cursors\";\n","type":"registry:lib","target":"components/real-time-cursors/index.ts"},{"path":"next-ui/real-time-cursors/real-time-cursors.tsx","content":"$53","type":"registry:component","target":"components/real-time-cursors/real-time-cursors.tsx"},{"path":"next-ui/code-block/code-block.tsx","content":"$54","type":"registry:component","target":"components/code-block/code-block.tsx"},{"path":"next-ui/chat-messages/chat-messages.tsx","content":"$55","type":"registry:component","target":"components/chat-messages/chat-messages.tsx"},{"path":"next-ui/chat-messages/index.ts","content":"export { ChatMessages } from \"./chat-messages\";\nexport type { ChatMessagesProps, ChatMessage } from \"./chat-messages\";\n","type":"registry:lib","target":"components/chat-messages/index.ts"},{"path":"next-ui/card-stack-rotator/card-stack-rotator.tsx","content":"$56","type":"registry:component","target":"components/card-stack-rotator/card-stack-rotator.tsx"},{"path":"next-ui/encrypted-text/encrypted-text.tsx","content":"$57","type":"registry:component","target":"components/encrypted-text/encrypted-text.tsx"},{"path":"next-ui/encrypted-text/index.ts","content":"export type { EncryptedTextProps, EncryptedTextTrigger } from \"./encrypted-text\";\nexport { EncryptedText } from \"./encrypted-text\";\n","type":"registry:lib","target":"components/encrypted-text/index.ts"},{"path":"next-ui/typewriter-effect/index.ts","content":"export type { TypewriterEffectProps } from \"./typewriter-effect\";\nexport { TypewriterEffect } from \"./typewriter-effect\";\n","type":"registry:lib","target":"components/typewriter-effect/index.ts"},{"path":"next-ui/typewriter-effect/typewriter-effect.tsx","content":"$58","type":"registry:component","target":"components/typewriter-effect/typewriter-effect.tsx"}],"className":"h-[70svh] min-h-80"}]]}]