skannr 0.1.1

package/uca-landing/src/components/Install.jsx

@@ -0,0 +1,90 @@
+import { useState } from 'react'
+import Reveal from './Reveal'
+
+const tabs = ['CLI Install', 'npx', 'MCP Server']
+
+const snippets = {
+  'CLI Install': `npm install -g skannr
+
+# Ask a question about any repo
+skannr --question "how does auth work?" --root /path/to/repo
+
+# Interactive agent mode
+skannr-agent --root /path/to/repo`,
+  npx: `# Run without installing
+npx skannr --question "how does this work?" --root .
+
+# One-time cache check
+npx skannr --cache-stats`,
+  'MCP Server': `{
+  "mcpServers": {
+    "skannr": {
+      "command": "npx",
+      "args": ["skannr"]
+    }
+  }
+}`,
+}
+
+export default function Install() {
+  const [active, setActive] = useState('CLI Install')
+  const [copied, setCopied] = useState(false)
+
+  const doCopy = async () => {
+    await navigator.clipboard.writeText(snippets[active])
+    setCopied(true)
+    setTimeout(() => setCopied(false), 2000)
+  }
+
+  return (
+    <section id="install" className="py-24 px-5">
+      <div className="max-w-5xl mx-auto">
+        <Reveal>
+          <h2 className="text-3xl md:text-5xl font-bold text-center tracking-tight">Up in 30 seconds.</h2>
+        </Reveal>
+
+        <div className="mt-10 flex flex-wrap justify-center gap-2">
+          {tabs.map((tab) => (
+            <button
+              key={tab}
+              onClick={() => setActive(tab)}
+              className={`rounded-lg border px-4 py-2 text-sm transition-all duration-300 ${
+                active === tab
+                  ? 'border-accent bg-accent/10 text-accent shadow-[0_0_24px_-8px_rgba(0,212,255,0.35)]'
+                  : 'border-white/10 text-[#888] hover:border-white/25 hover:text-white'
+              }`}
+            >
+              {tab}
+            </button>
+          ))}
+        </div>
+
+        <div
+          key={active}
+          className="mt-8 overflow-hidden rounded-xl border border-border bg-card motion-safe:animate-fade-in motion-reduce:animate-none"
+        >
+          <div className="flex items-center justify-between border-b border-white/5 px-4 py-3">
+            <div className="flex gap-2">
+              <span className="h-3 w-3 rounded-full bg-[#ff5f57]" />
+              <span className="h-3 w-3 rounded-full bg-[#febc2e]" />
+              <span className="h-3 w-3 rounded-full bg-[#28c840]" />
+            </div>
+            <button
+              onClick={doCopy}
+              className="rounded-md border border-white/15 px-3 py-1 text-sm transition-all duration-300 hover:border-accent hover:text-accent hover:shadow-[0_0_16px_-4px_rgba(0,212,255,0.4)] active:scale-95"
+            >
+              {copied ? 'Copied!' : 'Copy'}
+            </button>
+          </div>
+          <pre className="overflow-x-auto p-5 font-mono text-sm text-[#e8e8e8]">{snippets[active]}</pre>
+        </div>
+
+        {active === 'MCP Server' && (
+          <p className="mt-4 text-sm text-[#888]">
+            Add this to ~/.cursor/mcp.json, ~/.gemini/config.json, or Claude Desktop config.
+          </p>
+        )}
+      </div>
+    </section>
+  )
+}

package/uca-landing/src/components/LanguageSupport.jsx

@@ -0,0 +1,63 @@
+import Reveal from './Reveal'
+
+const rows = [
+  ['TypeScript / TSX', 'Full', 'AST via ts-morph'],
+  ['JavaScript / JSX', 'Full', 'AST via ts-morph'],
+  ['Python', 'Structural', 'Regex (signatures + type hints)'],
+  ['Go, Rust, Java, others', 'Basic', 'First 50 lines fallback'],
+]
+
+function badgeClass(level) {
+  if (level === 'Full') return 'bg-green/15 text-green'
+  if (level === 'Structural') return 'bg-yellow/20 text-yellow'
+  return 'bg-white/10 text-[#c5c5c5]'
+}
+
+export default function LanguageSupport() {
+  return (
+    <section className="py-24 px-5">
+      <div className="max-w-5xl mx-auto">
+        <Reveal>
+          <h2 className="text-3xl md:text-5xl font-bold text-center tracking-tight">Works on your stack.</h2>
+        </Reveal>
+        <Reveal delay={80}>
+          <div className="mt-12 overflow-hidden rounded-xl border border-border bg-card transition-colors duration-300 hover:border-white/10">
+            <table className="w-full text-left">
+              <thead className="border-b border-white/5">
+                <tr className="text-sm text-[#888]">
+                  <th className="px-6 py-4 font-medium">Language</th>
+                  <th className="px-6 py-4 font-medium">Support</th>
+                  <th className="px-6 py-4 font-medium">Method</th>
+                </tr>
+              </thead>
+              <tbody>
+                {rows.map((row) => (
+                  <tr
+                    key={row[0]}
+                    className="border-b border-white/5 transition-colors duration-200 last:border-b-0 hover:bg-white/[0.03]"
+                  >
+                    <td className="px-6 py-4">{row[0]}</td>
+                    <td className="px-6 py-4">
+                      <span className={`inline-flex rounded-full px-3 py-1 text-sm ${badgeClass(row[1])}`}>
+                        {row[1]}
+                      </span>
+                    </td>
+                    <td className="px-6 py-4 text-[#888]">{row[2]}</td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        </Reveal>
+        <Reveal delay={120}>
+          <a
+            href="https://github.com/7vignesh/code-analyzer"
+            className="mt-6 inline-block text-[#888] transition-all duration-300 hover:text-accent hover:translate-x-1"
+          >
+            More language adapters coming. PRs welcome →
+          </a>
+        </Reveal>
+      </div>
+    </section>
+  )
+}

package/uca-landing/src/components/Navbar.jsx

@@ -0,0 +1,86 @@
+import { useState } from 'react'
+import { Menu, X } from 'lucide-react'
+import { useScrollNav } from '../hooks/useScrollNav'
+
+const links = [
+  { label: 'How it works', href: '#how-it-works' },
+  { label: 'Features', href: '#features' },
+  { label: 'Install', href: '#install' },
+  { label: 'Works with', href: '#works-with' },
+]
+
+export default function Navbar() {
+  const [open, setOpen] = useState(false)
+  const scrolled = useScrollNav(60)
+
+  return (
+    <nav
+      className={`fixed top-0 z-50 w-full transition-all duration-300 ${
+        scrolled ? 'backdrop-blur-md bg-black/60 border-b border-white/5' : ''
+      }`}
+    >
+      <div className="mx-auto max-w-6xl px-5 py-4">
+        <div className="flex items-center justify-between">
+          <a
+            href="#"
+            className="inline-flex items-center gap-2 transition-transform duration-300 hover:scale-[1.03] motion-reduce:hover:scale-100"
+          >
+            <span className="font-mono text-lg font-bold text-accent">uca</span>
+            <span className="h-2 w-2 rounded-full bg-green motion-safe:animate-pulse" />
+          </a>
+
+          <div className="hidden md:flex items-center gap-7">
+            {links.map((link) => (
+              <a
+                key={link.label}
+                href={link.href}
+                className="group relative py-1 text-sm text-[#888] transition-colors hover:text-white"
+              >
+                {link.label}
+                <span className="absolute bottom-0 left-0 h-[2px] w-0 bg-accent transition-all duration-300 ease-out group-hover:w-full" />
+              </a>
+            ))}
+            <a
+              href="https://github.com/7vignesh/code-analyzer"
+              className="border border-white/20 text-sm px-4 py-1.5 rounded-lg transition-all duration-300 hover:border-accent hover:text-accent hover:shadow-[0_0_20px_-6px_rgba(0,212,255,0.45)] hover:-translate-y-px"
+            >
+              GitHub
+            </a>
+          </div>
+
+          <button
+            className="md:hidden text-white/80 hover:text-accent transition-colors"
+            onClick={() => setOpen((v) => !v)}
+            aria-label="Toggle menu"
+          >
+            {open ? <X size={20} /> : <Menu size={20} />}
+          </button>
+        </div>
+
+        {open && (
+          <div className="mt-4 md:hidden rounded-xl border border-border bg-card p-4">
+            <div className="flex flex-col gap-3">
+              {links.map((link) => (
+                <a
+                  key={link.label}
+                  href={link.href}
+                  className="text-sm text-[#888] hover:text-white transition-colors"
+                  onClick={() => setOpen(false)}
+                >
+                  {link.label}
+                </a>
+              ))}
+              <a
+                href="https://github.com/7vignesh/code-analyzer"
+                className="mt-1 w-fit border border-white/20 text-sm px-4 py-1.5 rounded-lg hover:border-accent hover:text-accent transition-all"
+                onClick={() => setOpen(false)}
+              >
+                GitHub
+              </a>
+            </div>
+          </div>
+        )}
+      </div>
+    </nav>
+  )
+}

package/uca-landing/src/components/Problem.jsx

@@ -0,0 +1,51 @@
+import { AppWindow, Clock, GitBranch } from 'lucide-react'
+import Reveal from './Reveal'
+
+const cards = [
+  {
+    icon: AppWindow,
+    title: 'Context window limits',
+    body: "Large repos have hundreds of files. You can't paste them all. The AI only sees what you show it - and guesses the rest.",
+  },
+  {
+    icon: Clock,
+    title: 'One file at a time is slow',
+    body: "You manually hunt for relevant files, paste them one by one, and re-explain the architecture every session. It's exhausting.",
+  },
+  {
+    icon: GitBranch,
+    title: 'No structural awareness',
+    body: "Keyword search finds files that mention your term. It doesn't find the files that ARE the answer architecturally - the central import hubs and interfaces.",
+  },
+]
+
+export default function Problem() {
+  return (
+    <section className="py-24 px-5">
+      <div className="max-w-6xl mx-auto">
+        <Reveal>
+          <h2 className="text-3xl md:text-5xl font-bold text-center tracking-tight">
+            AI is brilliant. But it can't read your whole codebase.
+          </h2>
+        </Reveal>
+        <div className="mt-14 grid grid-cols-1 md:grid-cols-3 gap-5">
+          {cards.map(({ icon: Icon, title, body }, i) => (
+            <Reveal key={title} delay={i * 100} className="h-full">
+              <article className="group h-full rounded-xl border border-border bg-card p-6 transition-all duration-300 hover:-translate-y-1 hover:border-accent/20 hover:bg-card-hover hover:shadow-[0_20px_40px_-24px_rgba(0,0,0,0.8)]">
+                <Icon
+                  className="mb-5 text-accent transition-transform duration-300 group-hover:scale-110 group-hover:text-accent"
+                  size={24}
+                />
+                <h3 className="mb-2 text-xl font-semibold">{title}</h3>
+                <p className="text-[#888]">{body}</p>
+              </article>
+            </Reveal>
+          ))}
+        </div>
+        <Reveal delay={200}>
+          <p className="mt-10 text-center text-[#888]">Universal Code Analyzer fixes all three.</p>
+        </Reveal>
+      </div>
+    </section>
+  )
+}

package/uca-landing/src/components/Reveal.jsx

@@ -0,0 +1,40 @@
+import { useEffect, useRef, useState } from 'react'
+
+export default function Reveal({ children, delay = 0, className = '' }) {
+  const ref = useRef(null)
+  const [visible, setVisible] = useState(false)
+
+  useEffect(() => {
+    if (typeof window !== 'undefined' && window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
+      setVisible(true)
+      return
+    }
+
+    const el = ref.current
+    if (!el) return
+
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        if (entry.isIntersecting) setVisible(true)
+      },
+      { threshold: 0.12, rootMargin: '0px 0px -6% 0px' }
+    )
+
+    observer.observe(el)
+    return () => observer.disconnect()
+  }, [])
+
+  return (
+    <div
+      ref={ref}
+      className={[
+        'transition-[opacity,transform] duration-700 ease-[cubic-bezier(0.22,1,0.36,1)] motion-reduce:transition-none',
+        visible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-8',
+        className,
+      ].join(' ')}
+      style={{ transitionDelay: visible ? `${delay}ms` : '0ms' }}
+    >
+      {children}
+    </div>
+  )
+}

package/uca-landing/src/components/WorksWith.jsx

@@ -0,0 +1,59 @@
+import Reveal from './Reveal'
+
+const tools = [
+  {
+    name: 'Gemini CLI',
+    desc: 'Add as MCP server in ~/.gemini/config.json',
+    barClass: 'bg-accent',
+  },
+  {
+    name: 'Claude Code',
+    desc: 'Works via MCP over stdio',
+    barClass: 'bg-purple',
+  },
+  {
+    name: 'Cursor',
+    desc: 'Add to ~/.cursor/mcp.json',
+    barClass: 'bg-green',
+  },
+  {
+    name: 'Any MCP Client',
+    desc: 'Standard Model Context Protocol over stdio',
+    barClass: 'bg-yellow',
+  },
+]
+
+export default function WorksWith() {
+  return (
+    <section id="works-with" className="py-24 px-5">
+      <div className="max-w-6xl mx-auto">
+        <Reveal>
+          <h2 className="text-3xl md:text-5xl font-bold text-center tracking-tight">
+            Works with the tools you already use.
+          </h2>
+        </Reveal>
+        <div className="mt-12 grid grid-cols-1 items-stretch gap-5 sm:grid-cols-2 lg:grid-cols-4">
+          {tools.map((tool, i) => (
+            <Reveal key={tool.name} delay={i * 90} className="h-full">
+              <article className="group flex h-full min-h-[160px] gap-4 rounded-xl border border-border bg-card p-6 transition-all duration-300 hover:-translate-y-1.5 hover:border-accent/25 hover:bg-card-hover hover:shadow-[0_24px_48px_-28px_rgba(0,0,0,0.9)]">
+                <div
+                  className={`h-12 w-1 shrink-0 origin-top rounded-full ${tool.barClass} motion-safe:animate-bar-grow motion-reduce:opacity-100 motion-reduce:scale-y-100 transition-transform duration-300 motion-safe:group-hover:scale-y-110`}
+                  aria-hidden
+                />
+                <div className="flex min-w-0 flex-1 flex-col gap-2">
+                  <h3 className="text-lg font-semibold leading-snug text-[#f0f0f0] transition-colors duration-300 group-hover:text-white">
+                    {tool.name}
+                  </h3>
+                  <p className="flex-1 text-sm leading-relaxed text-[#888]">{tool.desc}</p>
+                  <span className="mt-3 inline-flex w-fit rounded-full bg-green/15 px-3 py-1 text-xs font-medium text-green transition-transform duration-300 group-hover:scale-105">
+                    Ready
+                  </span>
+                </div>
+              </article>
+            </Reveal>
+          ))}
+        </div>
+      </div>
+    </section>
+  )
+}

package/uca-landing/src/hooks/useScrollNav.js

@@ -0,0 +1,13 @@
+import { useState, useEffect } from 'react'
+
+export function useScrollNav(threshold = 60) {
+  const [scrolled, setScrolled] = useState(false)
+
+  useEffect(() => {
+    const handler = () => setScrolled(window.scrollY > threshold)
+    window.addEventListener('scroll', handler)
+    return () => window.removeEventListener('scroll', handler)
+  }, [threshold])
+
+  return scrolled
+}

package/uca-landing/src/hooks/useTypewriter.js

@@ -0,0 +1,41 @@
+import { useState, useEffect } from 'react'
+
+export function useTypewriter(lines, charDelay = 25, lineDelay = 350) {
+  const [displayed, setDisplayed] = useState([])
+  const [currentLine, setCurrentLine] = useState(0)
+  const [currentChar, setCurrentChar] = useState(0)
+  const [done, setDone] = useState(false)
+
+  useEffect(() => {
+    setDisplayed([])
+    setCurrentLine(0)
+    setCurrentChar(0)
+    setDone(false)
+  }, [lines])
+
+  useEffect(() => {
+    if (currentLine >= lines.length) {
+      setDone(true)
+      return
+    }
+    if (currentChar < lines[currentLine].length) {
+      const t = setTimeout(() => {
+        setDisplayed((prev) => {
+          const next = [...prev]
+          if (!next[currentLine]) next[currentLine] = ''
+          next[currentLine] = lines[currentLine].slice(0, currentChar + 1)
+          return next
+        })
+        setCurrentChar((c) => c + 1)
+      }, charDelay)
+      return () => clearTimeout(t)
+    }
+    const t = setTimeout(() => {
+      setCurrentLine((l) => l + 1)
+      setCurrentChar(0)
+    }, lineDelay)
+    return () => clearTimeout(t)
+  }, [currentLine, currentChar, lines, charDelay, lineDelay])
+
+  return { displayed, done }
+}

package/uca-landing/src/index.css

@@ -0,0 +1,13 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+html {
+  scroll-behavior: smooth;
+}
+
+body {
+  background-color: #0a0a0a;
+  color: #f0f0f0;
+  font-family: 'Inter', sans-serif;
+}

package/uca-landing/src/main.jsx

@@ -0,0 +1,10 @@
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import App from './App'
+import './index.css'
+
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+)

package/uca-landing/tailwind.config.js

@@ -0,0 +1,68 @@
+export default {
+  content: ['./index.html', './src/**/*.{js,jsx}'],
+  theme: {
+    extend: {
+      colors: {
+        bg: '#0a0a0a',
+        card: '#111111',
+        'card-hover': '#161616',
+        accent: '#00d4ff',
+        purple: '#a855f7',
+        green: '#22c55e',
+        yellow: '#eab308',
+        border: 'rgba(255,255,255,0.07)',
+      },
+      fontFamily: {
+        sans: ['Inter', 'sans-serif'],
+        mono: ['JetBrains Mono', 'monospace'],
+      },
+      keyframes: {
+        fadeInUp: {
+          '0%': { opacity: '0', transform: 'translateY(28px)' },
+          '100%': { opacity: '1', transform: 'translateY(0)' },
+        },
+        fadeIn: {
+          '0%': { opacity: '0' },
+          '100%': { opacity: '1' },
+        },
+        scaleIn: {
+          '0%': { opacity: '0', transform: 'scale(0.97)' },
+          '100%': { opacity: '1', transform: 'scale(1)' },
+        },
+        float: {
+          '0%, 100%': { transform: 'translateY(0)' },
+          '50%': { transform: 'translateY(-10px)' },
+        },
+        drift: {
+          '0%, 100%': { transform: 'translate(0, 0) scale(1)' },
+          '33%': { transform: 'translate(40px, -30px) scale(1.08)' },
+          '66%': { transform: 'translate(-30px, 20px) scale(0.92)' },
+        },
+        pulseGlow: {
+          '0%, 100%': {
+            boxShadow: '0 0 0 0 rgba(0, 212, 255, 0)',
+            borderColor: 'rgba(255, 255, 255, 0.07)',
+          },
+          '50%': {
+            boxShadow: '0 0 56px -8px rgba(0, 212, 255, 0.45)',
+            borderColor: 'rgba(0, 212, 255, 0.35)',
+          },
+        },
+        barGrow: {
+          '0%': { transform: 'scaleY(0.6)', opacity: '0.6' },
+          '100%': { transform: 'scaleY(1)', opacity: '1' },
+        },
+      },
+      animation: {
+        'fade-in-up': 'fadeInUp 0.85s cubic-bezier(0.22, 1, 0.36, 1) forwards',
+        'fade-in': 'fadeIn 0.45s ease-out forwards',
+        'scale-in': 'scaleIn 0.65s cubic-bezier(0.22, 1, 0.36, 1) forwards',
+        'float-slow': 'float 6s ease-in-out infinite',
+        drift: 'drift 22s ease-in-out infinite',
+        'pulse-glow': 'pulseGlow 3s ease-in-out infinite',
+        'bar-grow': 'barGrow 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards',
+      },
+    },
+  },
+  plugins: [],
+}

package/uca-landing/vite.config.js

@@ -0,0 +1,6 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+export default defineConfig({
+  plugins: [react()],
+})