YOU'RE THE CTO, AGENTS ARE YOUR TEAM.
``` Rules: - Use real text. - Use mono font. - Keep one line on desktop. - Allow wrap on mobile if needed. - Add angular frame corners with pseudo-elements. ### Terminal Note The dev branch note can become a cyber terminal strip. Rules: - Keep it clickable if it links to dev branch. - Use `>` prompt style. - Keep release version as small right-aligned text on desktop. - On mobile, stack release version under the terminal line. ### Feature Strip Rules: - Feature strip should not look like five separate floating cards. - Use one full-width angular rail with internal separators. - Icons can glow, but text should stay calm. - On mobile, show 2-3 compact chips or move full strip below hero. ## CSS Implementation Recipes These are the preferred low-level patterns. Use them before inventing one-off effects. ### Angular Panel Use one reusable primitive for HUD panels: ```scss .cyber-panel { position: relative; background: linear-gradient(135deg, rgba(5, 14, 31, 0.92), rgba(3, 10, 22, 0.68)); border: 1px solid rgba(0, 234, 255, 0.42); clip-path: polygon(18px 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%, 0 18px); box-shadow: 0 0 0 1px rgba(47, 125, 255, 0.12) inset, 0 0 24px rgba(0, 234, 255, 0.12); } .cyber-panel::before, .cyber-panel::after { content: ""; position: absolute; pointer-events: none; border-color: rgba(0, 234, 255, 0.78); } ``` Rules: - Use `cyber-panel` for slogan, terminal note, robot role cards, and feature rail variants. - Do not duplicate a new panel style for every component. - Use accent classes for color changes: `.cyber-panel--magenta`, `.cyber-panel--amber`. ### Neon Border Without Heavy Blur Good: ```scss .cyber-frame { border: 1px solid rgba(0, 234, 255, 0.58); box-shadow: 0 0 0 1px rgba(0, 234, 255, 0.16) inset, 0 0 20px rgba(0, 234, 255, 0.16), 0 0 48px rgba(255, 43, 255, 0.08); } ``` Avoid: ```scss /* Too expensive and visually mushy */ box-shadow: 0 0 80px #00eaff, 0 0 160px #ff2bff; filter: drop-shadow(0 0 60px #00eaff); ``` ### Scanline Layer Use a very subtle overlay: ```scss .cyber-hero__scanlines { position: absolute; inset: 0; pointer-events: none; opacity: 0.12; background-image: repeating-linear-gradient( to bottom, rgba(255, 255, 255, 0.08) 0, rgba(255, 255, 255, 0.08) 1px, transparent 1px, transparent 4px ); mix-blend-mode: overlay; } ``` Rules: - Keep opacity low. - Do not animate scanlines unless a tiny movement actually improves the scene. - Disable or reduce on mobile if text looks noisy. ### SVG Connector Style ```scss .cyber-connectors__path { fill: none; stroke: rgba(0, 234, 255, 0.36); stroke-width: 1.2; vector-effect: non-scaling-stroke; } .cyber-connectors__path-glow { fill: none; stroke: rgba(0, 234, 255, 0.18); stroke-width: 5; vector-effect: non-scaling-stroke; } .cyber-connectors__path--active { stroke: rgba(255, 43, 255, 0.86); } ``` Rules: - Render glow as separate wider low-opacity path. - Keep the base line crisp. - Use active class only for current message route. ### Responsive Typography Tokens Use bounded `clamp()`: ```scss .cyber-hero__title { font-size: clamp(2.35rem, 5.2vw, 5.8rem); line-height: 0.96; } .cyber-hero__description { font-size: clamp(1rem, 1.15vw, 1.22rem); line-height: 1.65; } ``` Rules: - Never use unbounded `vw` font sizes. - Check longest translated string before locking button widths. - Keep line length around 48-68 characters for paragraph copy. ### Stable Button Layout ```scss .cyber-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; } .cyber-hero__action { min-height: 52px; min-width: 172px; padding: 0 22px; } @media (max-width: 480px) { .cyber-hero__action { flex: 1 1 100%; min-width: 0; } } ``` Rules: - Use fixed min heights. - Do not make button width depend on hover state. - Ensure icon and text stay aligned when labels localize. ## Component Definition of Done ### `HeroSection.vue` Done when: - hero copy is semantic HTML - CTA links work - release/dev note behavior still works - no scene-specific animation state exists here - layout works with JS disabled except advanced animation ### `CyberHeroScene.vue` Done when: - all layers follow z-index contract - decorative layers do not intercept pointer events - scene has stable aspect ratio - mobile does not render a broken desktop composition - reduced motion class/prop is respected ### `CyberHeroVideoFrame.vue` Done when: - video plays, pauses, seeks, mutes, and fullscreen works - frame chrome does not clip controls - loading and error states are styled - mobile removes perspective transforms if they blur the video ### `CyberHeroRobot.vue` Done when: - robot is positioned via data-driven CSS variables - active sender/receiver states work - role card is readable - idle animation does not override parallax transform - image has width/height or reserved layout space ### `CyberHeroConnectors.vue` Done when: - paths use a shared viewbox - paths do not cross copy/CTA safe zones - active route is visually obvious - packets can be disabled without losing all meaning - SVG is `aria-hidden` ### `CyberHeroMessageBubbles.vue` Done when: - one message sequence is active at a time - timers clear on unmount - hidden tab pauses sequence - reduced motion shows static copy - bubbles never cover CTA or video controls ### `useCyberHeroParallax.ts` Done when: - listeners attach only on client - listeners are cleaned up - pointer values are clamped - RAF is used - touch/mobile and reduced motion disable it - no Vue reactive state updates every frame ## Nuxt and Vue Best Practices - Use `ClientOnly` only where browser APIs or video behavior require it. - Keep SSG-safe content rendered on server where possible. - Do not gate the whole hero behind `ClientOnly`. - Use `onMounted` only for pointer/parallax/IntersectionObserver logic. - Clear timers and observers on unmount. - Do not put random `Math.random()` values in SSR-rendered markup. Use deterministic delays from data. - Prefer typed `as const` data arrays for roles, connections, and messages. - Keep imports path-stable and avoid magic relative paths when aliases are available. - Keep local visual components under `landing/components/hero/` because this is a landing-only visual system. Hydration safety: - Initial rendered message state should be deterministic. - Do not render different robot counts on server and client based on `window.innerWidth`. - Use CSS media queries to hide/show by breakpoint, or compute client-only variants after mount with stable fallback. ## PR Slicing Strategy PR slicing score: 🎯 9 🛡️ 9 🧠 5. Do not ship the full cinematic hero as one giant unreviewable diff. ### PR 1 - Static Shell and Video Frame Scope: - new cyber hero layout - background layer - copy/CTA layout - video frame wrapper - no final robots - no parallax Expected size: **450-750 lines**. Acceptance: - page builds - hero is readable - video works - no status metrics block - screenshot review passes static composition ### PR 2 - Robot Data and Static Robots Scope: - `heroAgents.ts` - `CyberHeroRobot` - 4-6 robot assets or placeholders - role cards - basic idle CSS Expected size: **350-650 lines**. Acceptance: - robots communicate product meaning - no overlap with CTA/video - mobile hides/simplifies robots correctly ### PR 3 - Connectors and Message Bubbles Scope: - `heroConnections` - `CyberHeroConnectors` - `CyberHeroMessageBubbles` - one deterministic message cycle - reduced motion fallback Expected size: **350-650 lines**. Acceptance: - one readable handoff sequence - packets route around safe zones - timers clean up - no animation chaos ### PR 4 - Parallax and Polish Scope: - `useCyberHeroParallax` - depth variables - final responsive tuning - final asset compression - screenshot and performance pass Expected size: **250-500 lines**. Acceptance: - parallax enhances but does not carry layout - reduced motion is polished - screenshot set passes - `pnpm --dir landing generate` passes Recommended path: PR 1 -> PR 2 -> PR 3 -> PR 4. This keeps review quality high and avoids hiding layout bugs under animation. ## Visual QA Workflow Use screenshot-based review, because this hero is visual and small CSS changes can break composition. Minimum screenshot set: ```text 1440x900 desktop 1920x1080 wide desktop 1280x800 laptop 1024x768 tablet landscape 768x1024 tablet portrait 430x932 mobile 390x844 mobile 360x800 narrow mobile ``` For every screenshot, check: - headline readable - slogan readable - CTA visible without scrolling on common desktop heights - video frame visible and not covered - robots do not cover important UI - connectors do not cross CTA/headline - feature strip either peeks cleanly or moves below content - no horizontal scroll - no text clipped inside buttons Motion QA: - 30 seconds idle with no obvious jank. - Move pointer slowly across desktop hero. - Scroll hero partially out of view and back. - Switch tab away and back. - Toggle reduced motion. - Try video play/pause while animations run. Performance QA: - Check image transfer size. - Check LCP element. - Check if any animated layer repaints the whole viewport. - Check CPU usage during idle. - Check mobile scroll smoothness. ## Review Gates These gates decide whether the implementation is ready to continue. ### Gate 1 - Static Design Gate Pass when: - headline, slogan, paragraph, CTAs, video frame, and feature strip are readable at `1440x900` - mobile layout works at `390x844` - no status metrics block exists - screenshot looks like the selected reference in composition and mood Fail when: - video looks secondary - CTA is buried - background makes text hard to read - layout only works at one viewport size ### Gate 2 - Interaction Gate Pass when: - video controls work - CTA links work - keyboard focus is visible - reduced motion keeps a polished static scene - animations pause offscreen or hidden tab Fail when: - frame overlays block video controls - focus ring is clipped - animation keeps running aggressively offscreen - reduced motion leaves broken empty elements ### Gate 3 - Visual Density Gate Pass when: - active elements are visually prioritized - inactive robots/cards are quieter - packet lines are visible but not dominant - only one readable bubble sequence is active Fail when: - everything glows equally - robots compete with headline - connector lines cover CTAs - message bubbles feel like spam ### Gate 4 - Performance Gate Pass when: - first viewport image budget is near target - no obvious CLS - no obvious scroll jank - animation CPU cost is acceptable - mobile remains usable Fail when: - background or robots cause visible late layout shifts - idle animation repaints huge layers - mobile scroll feels heavy - video interaction lags ## Manual Test Script Use this exact human smoke test before calling the hero ready: 1. Open landing page fresh with cache disabled. 2. Wait 2 seconds. 3. Confirm first impression: headline, slogan, CTA, video, robots. 4. Move mouse slowly left to right. 5. Confirm parallax is subtle. 6. Click `Watch Demo` or video play. 7. Seek video. 8. Try fullscreen and exit fullscreen. 9. Scroll down until hero is half hidden. 10. Confirm animation calms down or stops. 11. Resize to `390x844`. 12. Confirm no horizontal scroll. 13. Enable reduced motion. 14. Reload and confirm static scene still looks designed. If any step fails, fix before tuning small visuals. ## Implementation Phases ### Phase 0 - Asset and layout proof Score: 🎯 9 🛡️ 9 🧠 4 - **80-160 lines** Tasks: - Confirm final desktop background crop. - Confirm mobile background crop. - Prepare 2-3 temporary robot assets or placeholders. - Create a rough CSS grid in a throwaway branch or component state. - Verify that headline, CTA, video, and 3 robots fit at 1440x900 and 390x844. Acceptance: - No full implementation starts before the composition works. - The left copy area remains readable over the background. - The video frame area has enough space for controls. - Robot placement does not depend on lucky viewport dimensions. ### Phase 1 - Static cyberpunk hero shell Score: 🎯 9 🛡️ 9 🧠 5 - **250-400 lines** Tasks: - Replace current background video hero with WebP city background layer. - Add dark gradient wash and scanline layer. - Build headline layout matching reference. - Add exact slogan strip. - Remove any status metrics block. - Keep existing CTA links and release note behavior. Acceptance: - Desktop first viewport resembles the reference composition. - Text is readable. - No animation yet. - Top-left status metrics block is absent. - The slogan is exact. - No horizontal scroll at desktop/tablet/mobile test widths. ### Phase 2 - Video frame Score: 🎯 9 🛡️ 8 🧠 6 - **180-300 lines** Tasks: - Wrap existing `HeroDemoVideo` in cyberpunk video frame. - Add angular border, glow, corner accents, and platform reflection. - Ensure video controls still work. - Verify fullscreen still works. Acceptance: - Central/right block is clearly a video. - Decorative layers do not block clicks. - Video play/pause works. - Fullscreen works. - Error fallback looks intentional. ### Phase 3 - Robot layer Score: 🎯 8 🛡️ 8 🧠 7 - **280-500 lines** Tasks: - Add `heroAgents.ts`. - Add robot assets. - Render robots through `CyberHeroRobot`. - Add role cards and short task lists. - Add idle bob, eye blink, screen pulse. Acceptance: - 8-10 robots visible on desktop. - Product meaning is obvious without reading paragraph. - No robots overlap headline, CTA, or video controls. - At least 4 roles are visually distinct. - At least 2 primary robots have active glow/eye/screen states. ### Phase 4 - Message passing 1 + 2 Score: 🎯 9 🛡️ 9 🧠 7 - **220-380 lines** Tasks: - Add SVG connector network. - Animate packet dots along paths. - Add timed message bubbles. - Tie bubble events to sender/receiver pulse classes. - Reduce message density on smaller screens. Acceptance: - It is clear that robots pass work between each other. - Animation feels alive, not chaotic. - Messages stay readable and short. - Only one readable message sequence is active at a time. - Packets do not visually cross the headline or CTA area. ### Phase 5 - Parallax Score: 🎯 8 🛡️ 8 🧠 7 - **150-260 lines** Tasks: - Add `useCyberHeroParallax`. - Track pointer and scroll with `requestAnimationFrame`. - Set CSS variables on hero root. - Apply depth-based movement to background, video, robots, connectors. - Disable on mobile and reduced motion. Acceptance: - Scene reacts subtly to pointer. - Scroll creates layer separation. - No jank on desktop. - Parallax is disabled on touch/mobile. - Reduced motion mode is static and still polished. ### Phase 6 - Responsive polish Score: 🎯 8 🛡️ 9 🧠 8 - **220-420 lines** Tasks: - Desktop, tablet, mobile layouts. - Hide or simplify robots by breakpoint. - Reduce connector complexity on mobile. - Ensure CTA and video are still first-class. - Tune feature strip. Acceptance: - No horizontal scroll. - No text overlap. - Buttons fit. - Video is usable on mobile. - Tablet does not look like a broken desktop crop. - Mobile still communicates robots/agent coordination. ### Phase 7 - Quality pass Score: 🎯 9 🛡️ 9 🧠 5 - **80-160 lines** Tasks: - Run `pnpm --dir landing lint`. - Run `pnpm --dir landing generate`. - Browser smoke in desktop and mobile widths. - Screenshot compare against reference. - Check reduced motion mode. - Check video controls. Acceptance: - Static generation succeeds. - No major visual regressions. - Hero is close to reference and still usable. - Screenshot review passes at the target viewport sizes. - Performance is acceptable with animations running. ## Verification Checklist Visual review process: 1. Start the landing dev server with `pnpm --dir landing dev`. 2. Capture desktop, tablet, and mobile screenshots. 3. Compare against the reference for composition, not pixel perfection. 4. Check hero with motion enabled. 5. Check hero with reduced motion. 6. Check video interaction. 7. Check with slow network or cached disabled once. Design acceptance rubric: - First impression - 🎯 target 9/10: product feels premium and distinctive. - Clarity - 🎯 target 9/10: user understands multi-agent coordination. - Readability - 🛡️ target 9/10: text and CTAs stay clear over background. - Responsiveness - 🛡️ target 8/10: tablet/mobile are intentionally composed. - Motion taste - 🎯 target 8/10: animated but not chaotic. - Performance - 🛡️ target 8/10: no obvious jank. - Maintainability - 🛡️ target 8/10: components/data are not tangled. - [ ] `pnpm --dir landing lint` - [ ] `pnpm --dir landing generate` - [ ] Desktop screenshot: 1440x900 - [ ] Wide desktop screenshot: 1920x1080 - [ ] Tablet screenshot: 1024x768 - [ ] Mobile screenshot: 390x844 - [ ] Video play/pause works - [ ] Video fullscreen works - [ ] CTA links work - [ ] Docs link respects locale - [ ] Reduced motion disables parallax and packet movement - [ ] No status metrics block in hero - [ ] Slogan text is exact - [ ] Robots do not cover important UI - [ ] Message bubbles do not overlap CTA/video controls ## Design and Layout Do/Don't Do: - Use real HTML for headline, CTA, nav, and slogan. - Treat video as the hero product surface. - Let robots support the video instead of fighting it. - Use strong dark washes behind readable text. - Use fewer, better neon accents. - Keep all animations transform/opacity-based. - Make mobile a different composition. - Test with screenshots before polishing tiny details. Don't: - Put the whole hero into one image. - Add random neon panels with no information purpose. - Put text inside generated assets. - Use giant glowing blur on every panel. - Animate every robot and every connector equally. - Let packets cross the CTA cluster. - Use purple/magenta everywhere. - Hide video controls under chrome overlays. - Depend on desktop absolute positions for mobile. ## Common Failure Cases ### Failure 1 - Looks like a poster, not a product page Symptoms: - video frame feels decorative - CTAs are visually weak - text is hard to read - robots dominate the page Fix: - darken copy area with a local wash - reduce robot opacity/scale near headline - make video frame larger and cleaner - simplify background behind text - keep only one active message bubble ### Failure 2 - Cyberpunk style becomes noisy Symptoms: - too many glows - every border is bright - packets everywhere - role cards fight with the video Fix: - reduce base connector opacity - keep magenta only for activity - keep cyan for structure - remove secondary HUD panels that do not explain the product - make inactive role cards quieter ### Failure 3 - Mobile is just a broken desktop crop Symptoms: - horizontal scroll - video too small - buttons wrap badly - robots cover text - connectors become random lines Fix: - switch to vertical composition - hide most robots - replace full connector network with compact agent relay row - use mobile background crop - move feature strip below hero content ### Failure 4 - Animations feel cheap Symptoms: - all robots move in sync - parallax is too strong - packets move too fast - message bubbles spam the scene Fix: - stagger durations and delays - cut parallax values by 30-50% - use one readable bubble sequence - slow packets to `2800-4600ms` - keep idle motion under 6px for most robots ### Failure 5 - Performance drops Symptoms: - scroll jank - CPU stays high while idle - mobile browser gets hot - frames drop during parallax Fix: - reduce animated shadows - remove animated filters - reduce visible packet count - disable complex animation on mobile - stop message cycle when offscreen - check if a large layer repaints every frame ## Risks ### Risk 1 - Generated assets do not match the reference Score: 🎯 7 🛡️ 6 🧠 6 Mitigation: - Generate background and robot assets separately. - Keep the current full mockup as visual reference only. - Iterate assets before deep CSS tuning. ### Risk 2 - Scene becomes too cluttered Score: 🎯 8 🛡️ 7 🧠 5 Mitigation: - Limit active message bubbles to one sequence. - Limit visible packet count. - Hide lower-priority robots on tablet/mobile. - Keep left hero area visually clean. ### Risk 3 - Animation hurts performance Score: 🎯 8 🛡️ 8 🧠 6 Mitigation: - Transform/opacity only. - No animated blur filters on large layers. - Disable heavy motion on mobile. - Respect reduced motion. ### Risk 4 - Video controls get blocked Score: 🎯 9 🛡️ 8 🧠 4 Mitigation: - All decorative frame overlays use `pointer-events: none`. - Only video controls receive pointer events inside the frame. ## Suggested First PR Scope Best first implementation slice: 1. Phase 0 layout proof with final-ish background crop and 2-3 robot placeholders. 2. Static cyberpunk hero shell. 3. Video frame with existing demo. 4. 4 placeholder robot layers with CSS animation. 5. Connector SVG with simple packets. 6. One readable message bubble sequence. 7. Keep final 8-10 robot asset pass for the next slice. Score: 🎯 9 🛡️ 8 🧠 6 - **850-1200 lines**. Reason: - Gets the visual direction into code quickly. - Keeps risk manageable. - Lets us verify layout and parallax before spending too much time on final robot assets. ## Final Target The final hero should feel like this: - The city is alive in the background. - The demo video is the central command console. - Robots are active teammates around the console. - Neon packets show work moving through the team. - Message bubbles explain the coordination in human-readable moments. - The user immediately understands: this product is an AI engineering team dashboard. ## Summary 📌 Build the hero as a layered scene: WebP background, real video frame, separate robot assets, SVG connector packets, readable message bubbles, and CSS/Vue parallax. The chosen implementation is visually strong, maintainable, SSG-safe, and realistic for the existing Nuxt landing app.