@touchzada/claudinho 0.1.7 → 0.1.10

package/dist/Landing/_prompts/loading-screen-analysis.md

@@ -0,0 +1,227 @@
+# Loading Screen Technical Reference
+
+## Overview
+Fullscreen loading screen with rotating text, animated counter, and progress bar. Uses Framer Motion for transitions and `requestAnimationFrame` for the counter.
+
+---
+
+## Layout & Container
+
+```
+fixed inset-0
+background: #0a0a0a (near-black)
+z-index: above all content
+font: Instrument Serif, italic
+```
+
+The container uses CSS `position: fixed` with `inset: 0` to fill the viewport. Children are centered with flexbox.
+
+---
+
+## Timing Sequence
+
+| Phase | Duration | Description |
+|---|---|---|
+| Counter animation | 2700ms | 000 to 100 via rAF |
+| Word rotation interval | 900ms | Each word displayed for 900ms |
+| Post-complete delay | 400ms | Wait after counter hits 100 |
+| **Total minimum** | **~3100ms** | Until `onComplete` fires |
+
+---
+
+## Word Rotation (Framer Motion AnimatePresence)
+
+- Words: `["Design", "Create", "Inspire"]`
+- Cycle interval: 900ms per word via `setInterval` / `setTimeout`
+- Animation: `AnimatePresence` with `mode="wait"` (ensures exit finishes before enter)
+- Each word animates in and out; no crossfade overlap
+
+Implementation pattern:
+```tsx
+function RotatingText({ words, intervalMs }) {
+  const [index, setIndex] = useState(0);
+
+  useEffect(() => {
+    const timer = setInterval(() => setIndex(i => (i + 1) % words.length), intervalMs);
+    return () => clearInterval(timer);
+  }, []);
+
+  return (
+    <AnimatePresence mode="wait">
+      <motion.span
+        key={words[index]}
+        initial={{ opacity: 0, y: 20 }}
+        animate={{ opacity: 1, y: 0 }}
+        exit={{ opacity: 0, y: -20 }}
+        transition={{ duration: 0.4 }}
+      >
+        {words[index]}
+      </motion.span>
+    </AnimatePresence>
+  );
+}
+```
+
+---
+
+## Counter Logic (requestAnimationFrame)
+
+- Range: 0 to 100 (zero-padded to 3 digits: `000` to `100`)
+- Duration: 2700ms
+- Uses `requestAnimationFrame` for smooth 60fps updates
+- Elapsed-time based calculation (not frame-count based) for accuracy
+
+Core pattern:
+```tsx
+function Counter({ duration = 2700, onComplete }) {
+  const [count, setCount] = useState(0);
+
+  useEffect(() => {
+    let startTime: number;
+    let rafId: number;
+
+    const animate = (timestamp: number) => {
+      if (!startTime) startTime = timestamp;
+      const elapsed = timestamp - startTime;
+      const progress = Math.min(elapsed / duration, 1);
+      const value = Math.floor(progress * 100);
+      setCount(value);
+
+      if (progress < 1) {
+        rafId = requestAnimationFrame(animate);
+      } else {
+        // Reached 100
+        setTimeout(() => onComplete?.(), 400);
+      }
+    };
+
+    rafId = requestAnimationFrame(animate);
+    return () => cancelAnimationFrame(rafId);
+  }, [duration, onComplete]);
+
+  return String(count).padStart(3, '0');
+}
+```
+
+Key details:
+- Zero-padding via `String(count).padStart(3, '0')`
+- Progress is `elapsed / duration`, clamped to max 1.0
+- `Math.floor` ensures integer steps 0..100
+- Cleanup cancels the rAF on unmount
+
+---
+
+## Progress Bar
+
+- Position: fixed at bottom of viewport
+- Fill uses linear gradient: `#89AACC -> #4E85BF` (light blue to darker blue)
+- Glow effect applied (CSS `box-shadow` or `filter: drop-shadow`)
+- Width animated from 0% to 100% in sync with counter (2700ms, linear easing)
+
+Implementation pattern:
+```tsx
+function ProgressBar({ duration = 2700 }) {
+  const [width, setWidth] = useState(0);
+
+  useEffect(() => {
+    let startTime: number;
+    let rafId: number;
+
+   const animate = (timestamp: number) => {
+      if (!startTime) startTime = timestamp;
+      const elapsed = timestamp - startTime;
+      const progress = Math.min(elapsed / duration, 1);
+      setWidth(progress * 100);
+
+      if (progress < 1) {
+        rafId = requestAnimationFrame(animate);
+      }
+    };
+
+    rafId = requestAnimationFrame(animate);
+    return () => cancelAnimationFrame(rafId);
+  }, [duration]);
+
+  return (
+    <div className="fixed bottom-0 left-0 right-0 h-1">
+      <div
+        style={{
+          width: `${width}%`,
+          height: '100%',
+          background: 'linear-gradient(90deg, #89AACC, #4E85BF)',
+          boxShadow: '0 0 8px rgba(137, 170, 204, 0.6)',
+        }}
+      />
+    </div>
+  );
+}
+```
+
+---
+
+## Exit Flow (Parent AnimatePresence)
+
+The parent component wraps the loader and main page in `AnimatePresence` with `mode="wait"`:
+
+```tsx
+function App() {
+  const [loaded, setLoaded] = useState(false);
+
+  return (
+    <AnimatePresence mode="wait">
+      {!loaded ? (
+        <LoadingScreen key="loader" onComplete={() => setLoaded(true)} />
+      ) : (
+        <HomePage key="page" />
+      )}
+    </AnimatePresence>
+  );
+}
+```
+
+- `mode="wait"` ensures the loading screen exit animation completes before the page mounts
+- Each child must have a unique `key` for AnimatePresence to track identity
+- LoadingScreen triggers `onComplete` 400ms after counter reaches 100, causing state change
+- React re-renders, AnimatePresence runs exit animation on loader, then mounts page
+
+---
+
+## Component Hierarchy
+
+```
+Parent (AnimatePresence mode="wait")
+  LoadingScreen (fixed inset-0, bg #0a0a0a)
+    Container (flex, centered)
+      RotatingText (AnimatePresence mode="wait", words cycle 900ms)
+      Counter (rAF, 0->100, 2700ms, padStart(3,'0'))
+    ProgressBar (fixed bottom, gradient #89AACC->#4E85BF, glow)
+  <-onComplete after 400ms delay->
+  PageContent (fades in)
+```
+
+---
+
+## Reusable Parameters
+
+| Parameter | Default | Purpose |
+|---|---|---|
+| `backgroundColor` | `#0a0a0a` | Screen background |
+| `fontFamily` | `Instrument Serif` | Typography |
+| `fontStyle` | `italic` | Text weight |
+| `counterDuration` | `2700ms` | 0-100 animation length |
+| `wordInterval` | `900ms` | Text rotation speed |
+| `words` | `["Design","Create","Inspire"]` | Rotating text array |
+| `postCompleteDelay` | `400ms` | Delay before onComplete |
+| `gradientStart` | `#89AACC` | Progress bar start color |
+| `gradientEnd` | `#4E85BF` | Progress bar end color |
+| `counterPadding` | `3` | Zero-pad digit count |
+
+---
+
+## Notes for Recreation
+
+1. The counter and progress bar share the same duration (2700ms) and should use the same timing source for perfect sync
+2. `AnimatePresence mode="wait"` is critical -- without it, the page would mount before the loader fully exits, causing a flash
+3. The 400ms post-complete delay creates a natural pause that makes the transition feel intentional rather than abrupt
+4. Word rotation continues throughout the entire counter animation; at 900ms intervals and 2700ms total, exactly 3 words cycle (one full rotation)
+5. The glow on the progress bar uses a semi-transparent variant of the gradient start color (`rgba(137, 170, 204, 0.6)`)

package/dist/Landing/_prompts/prompt-loading-screen.md

@@ -0,0 +1,43 @@
+# Prompt 1: Loading Screen (Framer Motion + Counter)
+
+Build a fullscreen loading screen component in React (Next.js 14, TypeScript). Uses Framer Motion for animations.
+
+**Theme:**
+- --bg: #0a0a0a; --text: #f5f5f5; --muted: #888888; --stroke: #1f1f1f
+- Fonts: Instrument Serif (Google Fonts, italic, 400)
+
+**Component: LoadingScreen**
+- Receives one prop: onComplete: () => void
+- Container: fixed inset-0 z-[9999] bg-bg. Exit animation: 0.6s, ease [0.4, 0, 0.2, 1]
+
+**Element 1: Label (Top-Left)**
+- "Portfolio" text, xs uppercase tracking-[0.3em]
+- Entrance: y: -20 → 0, 0.6s, delay 0.1s
+
+**Element 2: Rotating Words (Center)**
+- Three words cycle: "Design" → "Create" → "Inspire" every 900ms
+- Each is AnimatePresence mode="wait" keyed by wordIndex
+- initial: {opacity:0, y:20} → animate: {opacity:1, y:0} → exit: {opacity:0, y:-20}
+- Stops at last word (doesn't loop)
+- text-4xl md:text-6xl lg:text-7xl italic serif text/80
+
+**Element 3: Counter (Bottom-Right)**
+- Counts 000 → 100 over 2.7s using requestAnimationFrame
+- progress = elapsed / 2700 * 100
+- Zero-padded to 3 digits
+- text-6xl md:text-8xl lg:text-9xl serif tabular-nums
+- When reaches 100: wait 400ms, then call onComplete()
+
+**Element 4: Progress Bar (Bottom Edge)**
+- 3px tall track, full width
+- Fill: linear-gradient(90deg, #89AACC → #4E85BF), glow
+- initial: scaleX 0, animate: scaleX: progress/100
+
+**Timing:**
+- 0.0s: Loader appears, brand slides in, counter starts, "Design"
+- 0.9s: "Create" replaces "Design"
+- 1.8s: "Inspire" replaces "Create"
+- 2.7s: Counter hits 100, bar full
+- 3.1s: onComplete fires (400ms pause)
+- 3.1s: Loader fades out (0.6s exit)
+- 3.7s: Page content fades in (0.5s)

package/dist/Landing/dark-landing-analysis.md

@@ -0,0 +1,266 @@
+# Dark Landing Page — Technical Analysis
+
+> Extracted from specification + existing `index.html` reference implementation.
+> Target stack: React + Tailwind CSS v4 + Vite + hls.js + motion/react + lucide-react.
+
+---
+
+## 1. Design System
+
+### Color Tokens
+
+| Token | Value | Usage |
+|---|---|---|
+| `bg` | `#010101` | Page background (dark-first) |
+| Primary gradient | `from-[#FA93FA] via-[#C967E8] to-[#983AD6]` | CTAs, accents, brand marks |
+| Gradient text | white to purple/pink | H1 highlights, stat numbers |
+| Glass border | `rgba(255,255,255,0.06-0.08)` | Card borders, navbar |
+| Glass bg | `rgba(240,243,250,0.03-0.04)` | Card surfaces |
+| Muted text | `hsl(240 5% 64.9%)` | Body copy, labels |
+
+### Typography
+
+- **Font:** Inter (via Google Fonts), fallback `system-ui, sans-serif`
+- **Weights:** 400 (body), 500 (medium), 600 (semibold), 700 (bold), 800 (extrabold), 900 (black)
+- **H1 scale:** `text-5xl / md:text-7xl / lg:text-8xl` with `font-black tracking-tight`
+- **H2 scale:** `text-3xl / md:text-4xl / lg:text-5xl` with `font-bold`
+- **Body:** `text-lg / md:text-xl text-muted-foreground`
+
+### Animation Keyframes (all CSS-driven in current build; migrate to motion/react)
+
+| Name | Duration | Easing | Purpose |
+|---|---|---|---|
+| `gradient-shift` | 4-15s ease infinite | Gradient position cycling |
+| `float` | 6s ease-in-out | Decorative element hover |
+| `pulse-glow` | 3s ease-in-out | Orb glow breathing |
+| `slide-up` | 0.6s ease-out | Section entrance on scroll |
+| `slide-in` | 0.4s ease-out | Horizontal entrance |
+| `marquee` | 30s linear infinite | Logo/provider infinite scroll |
+| `border-shimmer` | 3s linear infinite | Glass border glow sweep |
+| `blink` | 1s step-end | Terminal cursor |
+
+---
+
+## 2. Core Design Patterns
+
+### 2.1 Glassmorphism
+
+```css
+.glass {
+  background: rgba(240, 243, 250, 0.03);
+  backdrop-filter: blur(16px);
+  border: 1px solid rgba(255, 255, 255, 0.06);
+}
+.glass-card {
+  background: rgba(240, 243, 250, 0.04);
+  backdrop-filter: blur(12px);
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  transition: all 0.3s ease;
+}
+.glass-card:hover {
+  background: rgba(240, 243, 250, 0.07);
+  border-color: rgba(167, 139, 250, 0.3);
+  transform: translateY(-4px);
+  box-shadow: 0 8px 32px rgba(167, 139, 250, 0.1);
+}
+```
+
+**Usage:** navbar, feature cards, provider panels, terminal demo frame, CTA boxes, pill badges, provider tabs.
+
+**Tailwind v4 equivalent:** `bg-black/20 backdrop-blur-sm border border-white/5`
+
+### 2.2 Gradient Text
+
+```css
+.gradient-text {
+  background: linear-gradient(135deg, #a78bfa, #f472b6, #22d3ee);
+  background-size: 200% 200%;
+  animation: gradient-shift 4s ease infinite;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+```
+
+**Usage:** H1 sub-spans, stat numbers, provider name highlights.
+
+**Spec gradient:** `from-[#FA93FA] via-[#C967E8] to-[#983AD6]` (newer pink-to-purple palette, replacing the current purple-pink-cyan).
+
+### 2.3 Video Overlay (Hero)
+
+- **Native `<video>` tag** (no react-player dependency)
+- **HLS stream** via `hls.js` with MP4 fallback
+- **mix-blend-screen** for light-on-dark compositing
+- **Negative margin overlap:** `-mt-[150px]` pulls video up behind text content
+- **Gradient overlay:** `from-[#010101] via-transparent to-[#010101]` fades video edges into bg
+- **Z-index layering:** video at `z-0`, text content at `z-10` or higher
+
+### 2.4 Infinite Slider (Logo Cloud / Provider Marquee)
+
+```css
+.marquee-track {
+  animation: marquee 30s linear infinite;
+}
+@keyframes marquee {
+  0% { transform: translateX(0); }
+  100% { transform: translateX(-50%); }
+}
+```
+
+**Implementation detail:** Content is duplicated (rendered twice) inside a `whitespace-nowrap` container. The CSS animation translates X from 0 to -50%, then snaps back to 0, creating a seamless loop.
+
+**Styling:** `bg-black/20 backdrop-blur-sm` glass surface, `border-y border-white/5`.
+
+**Brands referenced:** OpenAI, Nvidia, GitHub, etc. with SVG logos or text pills.
+
+**motion/react migration:** Consider `motion.div` with `animate={{ x: ["0%", "-50%"] }}` for smoother control and pause-on-hover.
+
+---
+
+## 3. Layout Decisions
+
+### 3.1 Negative Margin Overlap
+
+The hero uses `-mt-[150px]` on the video element to create a layered composition where the video bleeds behind the text content. This produces depth without requiring absolute positioning for the text layer.
+
+### 3.2 Z-Index Layering
+
+| Layer | Z-index | Element |
+|---|---|---|
+| Background orbs | `z-0` | Decorative blurred circles |
+| Video | `z-0` | Hero video (mix-blend-screen) |
+| Content | `z-10` | Hero text, CTAs, stats |
+| Navbar | `z-50` | Fixed top navigation |
+| Gradient overlay | `z-[1]` | Video-to-bg fade |
+
+### 3.3 Section Spacing
+
+- All sections: `py-24` (~96px vertical padding)
+- Max content width: `max-w-7xl` (80rem / 1280px) or `max-w-4xl` for focused sections
+- Grid gaps: `gap-6` for cards, `gap-3` for compact items
+- Responsive breakpoints: `md:` (768px) for 2-col, `lg:` (1024px) for 3-4 col
+
+### 3.4 Responsive Grid Patterns
+
+```
+Features:    grid-cols-1 → md:grid-cols-2 → lg:grid-cols-3
+Tools:       grid-cols-2 → md:grid-cols-4 → lg:grid-cols-6
+Commands:    grid-cols-1 → md:grid-cols-2 → lg:grid-cols-4
+Stats:       grid-cols-2 → md:grid-cols-4
+```
+
+---
+
+## 4. Component Architecture
+
+### 4.1 Proposed File Structure
+
+```
+src/
+  App.tsx                    # Root layout, scroll sections
+  components/
+    Hero.tsx                 # Announcement pill, H1, CTA, video, stats
+    InfiniteSlider.tsx       # Marquee logo/provider cloud
+    Navbar.tsx               # Fixed glass nav with links
+    Features.tsx             # Feature card grid
+    ProviderTabs.tsx         # Interactive provider selector
+    TerminalDemo.tsx         # Animated terminal window
+    ToolsGrid.tsx            # Tool icon grid
+    CommandsGrid.tsx         # Slash command pills
+    ArchitectureCards.tsx    # Technical stats
+    SecurityCards.tsx        # Vulnerability audit display
+    CTASection.tsx           # Final call-to-action + install code
+    Footer.tsx               # Copyright, links
+```
+
+### 4.2 Hero.tsx Responsibilities
+
+1. **Announcement pill** — gradient glow box, Zap icon (lucide), "Used by founders. Loved by devs."
+2. **H1 heading** — "Your Vision / Our Digital Reality." with gradient text on secondary line
+3. **Subheadline** — turning bold ideas into modern designs
+4. **CTA button** — "Book a 15-min call", white bg, black text, glass border
+5. **Video element** — native `<video>` with hls.js initialization, MP4 fallback, `mix-blend-screen`, `-mt-[150px]`, gradient overlay
+6. **Scroll indicator** — animated chevron or line
+
+### 4.3 InfiniteSlider.tsx Responsibilities
+
+- Accepts `logos: { src: string; alt: string; width: number }[]`
+- Renders duplicated set for seamless loop
+- Glass surface: `bg-black/20 backdrop-blur-sm`
+- Label: "Powering the best teams"
+- motion/react: consider `AnimatePresence` for hover states
+
+### 4.4 State Management
+
+- **Provider selector:** `useState<string>` for active tab, `AnimatePresence` for card transitions
+- **Scroll animations:** `IntersectionObserver` or motion/react `whileInView`
+- **Video:** HLS instance stored in `useRef`, initialized on mount, destroyed on unmount
+
+---
+
+## 5. Technical Requirements
+
+### 5.1 Dependencies
+
+| Package | Purpose |
+|---|---|
+| `react` ^19 | UI framework |
+| `tailwindcss` ^4 | Styling engine |
+| `vite` | Build tool |
+| `hls.js` | HLS video streaming |
+| `motion/react` | Animations (Framer Motion v12) |
+| `lucide-react` | Icon library |
+
+### 5.2 Video Handling
+
+- Use native `<video>` element (no react-player)
+- Initialize `hls.js` in `useEffect` on video ref mount
+- Check `Hls.isSupported()` before instantiating
+- Set `src` to fallback MP4 for browsers with native HLS (Safari)
+- Clean up `hls.destroy()` on component unmount
+- Apply `mix-blend-screen` CSS class for compositing
+- Parent container: `overflow-hidden` to contain negative margin bleed
+
+### 5.3 Animation Strategy
+
+**Prefer motion/react over CSS keyframes** for React components:
+- `motion.div` with `initial/animate/exit` for section entrances
+- `whileInView` + `viewport={{ once: true }}` for scroll-triggered reveals
+- `layout` prop for provider card transitions
+- `AnimatePresence` for crossfade between provider detail panels
+- CSS keyframes only for: marquee infinite loop, cursor blink, background gradient shift
+
+### 5.4 Accessibility
+
+- All `lucide-react` icons need `aria-hidden` or `title` props
+- Video element: `playsInline muted loop autoPlay` with fallback content
+- Focus states on interactive elements (CTA buttons, provider tabs)
+- Semantic HTML: `<section>`, `<nav>`, `<main>`, `<h1>`-`<h4>` hierarchy
+
+---
+
+## 6. Risks & Gotchas
+
+| Risk | Mitigation |
+|---|---|
+| HLS not supported in Safari natively via hls.js | Use native `<video src>` fallback for Safari (it supports HLS natively) |
+| `mix-blend-screen` behavior varies across browsers | Test on Chrome, Firefox, Safari; fallback to `opacity` if needed |
+| Negative margin `-mt-[150px]` may cause overflow clipping | Ensure parent has `overflow-hidden`, not `overflow-auto` |
+| Marquee animation jank on low-end devices | Use `will-change: transform` or `transform: translate3d()` for GPU compositing |
+| Tailwind v4 syntax differs from v3 | v4 uses CSS-first config; `@theme` directive instead of `tailwind.config.js` |
+| motion/react bundle size | Tree-shake properly; only import needed components |
+
+---
+
+## 7. Quick-Reference: Key Tailwind Utilities
+
+```
+Glass card:     bg-black/20 backdrop-blur-sm border border-white/5 rounded-xl
+Gradient text:  bg-gradient-to-r from-[#FA93FA] via-[#C967E8] to-[#983AD6] bg-clip-text text-transparent
+CTA button:     bg-white text-black glass border border-white/10 hover:bg-white/90
+Glass border:   border border-white/5 or border-white/10
+Section:        py-24 max-w-7xl mx-auto px-6
+Nav:            fixed inset-x-0 top-0 z-50 glass border-b border-white/5
+Video wrapper:  relative overflow-hidden -mt-[150px]
+Orb decoration: absolute w-64 h-64 rounded-full blur-[100px] opacity-10
+```