diff --git a/CHANGELOG.md b/CHANGELOG.md index 84fba0f..d23890d 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -15,6 +15,20 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 + +## [Unreleased] - 2026-02-24 + +### Changed +- feat(design-site): add secret digital camo background motion system docs (@) +- docs(design.vln.gg): create comprehensive VLN logo standards (@) +- chore(deps): bump node-forge from 1.3.1 to 1.3.3 in /design-standards (@) + +### Fixed +- fix(ci): fix remaining YAML break in auto-merge-reviewed.yml (@) +- fix(ci): resolve YAML syntax errors in 4 workflow files (@) + +--- + ## [Unreleased] - 2026-02-14 ### Changed diff --git a/CNAME b/CNAME index f79d738..de63397 100644 --- a/CNAME +++ b/CNAME @@ -1,7 +1,7 @@ # CNAME Configuration for GitHub Pages # # Author: Unknown -# Generated: 2026-02-15 04:50:22 UTC +# Generated: 2026-02-24 15:36:14 UTC # # Instructions: # 1. Uncomment the line below and replace with your domain diff --git a/design-standards/docs/internal/qx7b2-bg-digital-camo.md b/design-standards/docs/internal/qx7b2-bg-digital-camo.md new file mode 100644 index 0000000..8bf63d8 --- /dev/null +++ b/design-standards/docs/internal/qx7b2-bg-digital-camo.md @@ -0,0 +1,287 @@ +--- +title: VLN Digital Camo — Background Motion System +description: Internal design specification for the animated dark-green digital camouflage background system used across VLN products. +image: https://vln.gg/api/og?title=Visual%20Motion%20System&subtitle=Digital%20Camo%20Background%20Spec&accent=blue&subdomain=docs +unlisted: true +hide_table_of_contents: false +pagination_next: null +pagination_prev: null +--- + +# VLN Digital Camo — Background Motion System + +> **Internal document — not indexed.** Direct URL access only. +> Spec version: `0x3-camo-bg` · Last updated: 2026-02-24 + +This document defines the **animated digital camouflage background** system for VLN products. It covers the design intent, color mapping, animation library stack, grid architecture, motion specs, and performance constraints. + +--- + +## 1. Design Intent + +The digital camo background is a **living texture** — not a static image. It signals: + +- **Tactical precision** — every element is intentional, grid-locked, and structured +- **Alive infrastructure** — the UI breathes; pixels shift, fade, and re-emerge +- **Dark-first immersion** — the background always recedes; it never competes with content + +The goal is a background that feels like a **low-power radar screen** overlaid with fragmenting digital terrain — organic enough to feel alive, structured enough to feel engineered. + +--- + +## 2. Color System + +The camo palette is derived from VLN brand tokens, extended into a tactical range. **Never deviate from these values.** + +### Camo Color Map + +| Token | Hex | Role | +|-------|-----|------| +| `--camo-void` | `#000000` | Darkest block — empty terrain | +| `--camo-deep` | `#0a0e0f` | VLN page background (base) | +| `--camo-shadow` | `#0d1a0f` | Near-black green, shadow cells | +| `--camo-forest` | `#004d00` | Core dark green — primary camo body | +| `--camo-olive` | `#3b5323` | Olive drab — mid-tone breakup | +| `--camo-moss` | `#2d4a1e` | Moss — transition between forest and olive | +| `--camo-sage-dim` | `#4a7c59` | Muted sage — highlight cell edges | +| `--camo-sage` | `#86d993` | VLN sage — accent glitch pulse only | + +### CSS Custom Properties + +```css +/* Add to :root in custom.css — camo system extension */ +:root { + --camo-void: #000000; + --camo-deep: #0a0e0f; + --camo-shadow: #0d1a0f; + --camo-forest: #004d00; + --camo-olive: #3b5323; + --camo-moss: #2d4a1e; + --camo-sage-dim: #4a7c59; + --camo-sage: #86d993; /* VLN primary — glitch only */ + + --camo-cell-size: clamp(16px, 2.5vw, 32px); /* Responsive pixel block size */ + --camo-gap: 2px; /* Cell gap — keep tight */ + --camo-opacity: 0.72; /* Base layer opacity */ + --camo-glow: 0 0 8px rgba(0, 77, 0, 0.4); /* Cell glow shadow */ +} +``` + +### Usage Rules + +- **`--camo-forest`** and **`--camo-olive`** make up ~70% of all cells — they are the primary texture +- **`--camo-void`** and **`--camo-shadow`** account for ~20% — negative space that makes it read as camo +- **`--camo-sage`** (`#86d993`) is used **only for the occasional glitch pulse** — it marks this as VLN, not generic military +- Never use `--camo-sage` as a fill color for more than 1–2% of cells at any time + +--- + +## 3. Library Stack + +### Recommended (in priority order) + +| Library | Version | Role | Install | +|---------|---------|------|---------| +| **GSAP** (GreenSock) | `^3.12` | Primary animation engine — timelines, staggers, ScrollTrigger | `pnpm add gsap` | +| **Framer Motion** | `^11` | React-native motion — per-cell declarative variants | `pnpm add framer-motion` | +| **React Spring** | `^9` | Physics-based cell transitions — natural settling | `pnpm add @react-spring/web` | +| **React Bits** | latest | Pre-built `Threads` / `Hyperspeed` base components to skin | `pnpm add react-bits` | +| **React Three Fiber** | `^8` | Optional 3D layer — camera-through-terrain effect | `pnpm add @react-three/fiber three` | + +> **Lightweight rule from CLAUDE.md §10:** For most page backgrounds, use only **GSAP + Framer Motion**. R3F is only justified for the hero landing page where 3D depth is the central design statement. Never install all five libraries for a single page. + +### Decision Tree + +``` +Need background for a doc page? + └── Use Framer Motion only (lightweight, declarative) + +Need background for a product hero / landing? + └── Use GSAP + Framer Motion (full stagger timelines + React variants) + +Need 3D camera-fly-through terrain? + └── Use React Three Fiber (only on marketing pages, never in the docs site) +``` + +--- + +## 4. Grid Architecture + +### Structure + +The camo background is a **CSS grid of uniformly-sized colored `
` cells**. JavaScript assigns randomized colors from the palette on mount, and the animation library drives opacity/color transitions. + +``` +┌──────────────────────────────────────────────────────┐ +│ [cell][cell][cell][cell][cell][cell][cell][cell]... │ +│ [cell][cell][cell][cell][cell][cell][cell][cell]... │ +│ ... rows fill 100vw × 100vh │ +└──────────────────────────────────────────────────────┘ +``` + +### Cell Sizing + +- Cell size: `clamp(16px, 2.5vw, 32px)` — scales with viewport +- Target cell count: ~800–1200 cells for a standard 1440×900 viewport +- Grid must overflow slightly (`110%` width/height) to prevent edge gaps on scroll parallax + +### Color Distribution (per render) + +```ts +const CAMO_PALETTE = [ + { color: '#000000', weight: 10 }, // --camo-void + { color: '#0d1a0f', weight: 12 }, // --camo-shadow + { color: '#004d00', weight: 38 }, // --camo-forest ← primary + { color: '#3b5323', weight: 28 }, // --camo-olive ← secondary + { color: '#2d4a1e', weight: 10 }, // --camo-moss + { color: '#4a7c59', weight: 2 }, // --camo-sage-dim +] as const; + +// Weighted random picker +function pickColor(): string { + const total = CAMO_PALETTE.reduce((s, c) => s + c.weight, 0); + let rand = Math.random() * total; + for (const entry of CAMO_PALETTE) { + if ((rand -= entry.weight) < 0) return entry.color; + } + return CAMO_PALETTE[2].color; +} +``` + +--- + +## 5. Animation Specifications + +### 5.1 GSAP Timeline — Stagger Reveal (Page Load) + +**Intent:** On mount, cells fade in from opacity `0` → `0.72` in a staggered wave, creating a "powering up" feel. + +``` +Timeline: CamoReveal + ├── duration: 2.4s total + ├── stagger: 0.008s per cell (random order) + ├── ease: "power2.inOut" + ├── from: { opacity: 0, scale: 0.85 } + └── to: { opacity: var(--camo-opacity), scale: 1 } +``` + +### 5.2 GSAP ScrollTrigger — Parallax Drift + +**Intent:** The background moves at 0.3× the scroll speed, creating depth separation from foreground content. + +``` +ScrollTrigger config: + ├── trigger: document.body + ├── start: "top top" + ├── end: "bottom bottom" + ├── scrub: 1.5 ← smooth catch-up + └── animation: { y: "-15%" } on the background container +``` + +### 5.3 Framer Motion — Per-Cell Variant Pulse + +**Intent:** Individual cells randomly cycle between two opacity states on a slow loop, simulating IR scatter or heat shimmer. + +```ts +const cellVariants = { + idle: { opacity: 0.72 }, + pulse: { opacity: [0.72, 0.45, 0.72] }, +}; + +// Each cell gets a random delay 0–8s and duration 3–7s +const transition = { + duration: Math.random() * 4 + 3, + delay: Math.random() * 8, + repeat: Infinity, + ease: 'easeInOut', +}; +``` + +### 5.4 Sage Glitch Pulse (VLN Signature) + +**Intent:** Every 12–20s, 2–3 random cells briefly flash `--camo-sage` (`#86d993`) for ~200ms, then revert. This is the "VLN heartbeat" — subtle but unmistakable to those who know the brand. + +```ts +// GSAP glitch pulse +gsap.to(glitchCells, { + backgroundColor: '#86d993', + duration: 0.08, + yoyo: true, + repeat: 3, + ease: 'none', + stagger: 0.04, + onComplete: () => gsap.to(glitchCells, { backgroundColor: originalColor, duration: 0.3 }), +}); +``` + +### 5.5 Timing Summary + +| Effect | Trigger | Duration | Loop | +|--------|---------|----------|------| +| Stagger reveal | Mount | 2.4s | No | +| Parallax drift | Scroll | Continuous | Scrub | +| Cell pulse | Idle | 3–7s per cell | Infinite | +| Sage glitch | Timer (12–20s) | 200ms | Infinite | + +--- + +## 6. Performance Constraints + +1. **No canvas fallback needed** — CSS grid + div animation is GPU-composited when using `opacity` and `transform` only +2. **Never animate `background-color` on 1000+ cells simultaneously** — use `opacity` changes instead; only animate `backgroundColor` on the small glitch subset (≤3 cells at a time) +3. **`will-change: opacity, transform`** on the background container, **not** on individual cells +4. **Reduce motion:** Always respect `prefers-reduced-motion`: + ```css + @media (prefers-reduced-motion: reduce) { + .camo-bg { animation: none !important; opacity: 0.55 !important; } + } + ``` +5. **Debounce resize:** Recalculate cell count on resize with a 300ms debounce; do not re-animate on resize +6. **Mobile cap:** On viewports < 768px, reduce cell count by 50% and disable the parallax drift + +--- + +## 7. Usage Guidelines + +### Where to use + +| Surface | Use camo bg? | Variant | +|---------|-------------|---------| +| Marketing / hero | Yes | Full (GSAP + Framer Motion + glitch) | +| Product dashboards | Limited | Dim, static (opacity 0.3, no animation) | +| Doc pages | Subtle only | Static grid, no animation — do not distract readers | +| Modals / overlays | No | Use `--vln-bg` solid | +| Error pages (404, 500) | Yes | Glitch-heavy — increase glitch frequency to ~every 3s | + +### Layering Order (z-index) + +``` +z-index: -1 → camo-bg (background canvas) +z-index: 0 → page content +z-index: 10 → navbar +z-index: 50 → modals, tooltips +``` + +### Do Not + +- Do not place camo behind text without a `backdrop-blur` or semi-transparent overlay +- Do not use camo in email templates or social share previews (use OG images instead) +- Do not export camo as a static PNG — it must be generated at runtime + +--- + +## 8. Asset References + +| Asset | Location | +|-------|----------| +| Sample implementation | [`internal/qx7b2-sample-camo-impl`](./qx7b2-sample-camo-impl) | +| VLN color tokens | [`design-system/colors`](/design-system/colors) | +| VLN animations guide | [`design-system/animations`](/design-system/animations) | +| CSS variables (full) | `design-standards/src/css/custom.css` | +| OG image integration | `CLAUDE.md §Open Graph Image Integration` | + +--- + +> **Classification:** Internal design spec +> **Audience:** VLN design engineers, frontend leads +> **Do not** link from public-facing navigation, sitemap, or search indexes. diff --git a/design-standards/docs/internal/qx7b2-sample-camo-impl.md b/design-standards/docs/internal/qx7b2-sample-camo-impl.md new file mode 100644 index 0000000..78a291e --- /dev/null +++ b/design-standards/docs/internal/qx7b2-sample-camo-impl.md @@ -0,0 +1,517 @@ +--- +title: VLN Camo BG — Sample Implementation +description: Annotated reference implementation of the VLN animated dark-green digital camouflage background component. +image: https://vln.gg/api/og?title=Camo%20BG%20Sample&subtitle=Reference%20Implementation&accent=blue&subdomain=docs +unlisted: true +hide_table_of_contents: false +pagination_next: null +pagination_prev: null +--- + +# VLN Camo BG — Sample Implementation + +> **Internal document — not indexed.** Direct URL access only. +> Companion to [`qx7b2-bg-digital-camo`](./qx7b2-bg-digital-camo) · Spec version: `0x3-camo-bg` + +Full annotated reference implementation of the VLN digital camouflage background component. Copy-paste ready, but read the inline comments before integrating. + +--- + +## Prerequisites + +Install required packages (add only what you need — see decision tree in the design spec): + +```bash +# Core (required for the full reference impl) +pnpm add gsap framer-motion + +# Optional — 3D hero variant only +pnpm add @react-three/fiber @react-three/drei three +``` + +--- + +## 1. Color Utility (`lib/camo-palette.ts`) + +```ts +// lib/camo-palette.ts +// Weighted random color picker for the camo grid. +// Import this into the CamoBg component. + +export const CAMO_PALETTE = [ + { color: '#000000', weight: 10 }, // void + { color: '#0d1a0f', weight: 12 }, // shadow + { color: '#004d00', weight: 38 }, // forest ← primary mass + { color: '#3b5323', weight: 28 }, // olive ← secondary breakup + { color: '#2d4a1e', weight: 10 }, // moss + { color: '#4a7c59', weight: 2 }, // sage-dim +] as const; + +export const CAMO_GLITCH_COLOR = '#86d993'; // VLN sage — glitch only + +const TOTAL_WEIGHT = CAMO_PALETTE.reduce((s, c) => s + c.weight, 0); + +export function pickCamoColor(): string { + let rand = Math.random() * TOTAL_WEIGHT; + for (const entry of CAMO_PALETTE) { + if ((rand -= entry.weight) < 0) return entry.color; + } + return '#004d00'; +} +``` + +--- + +## 2. Core Component (`components/CamoBg.tsx`) + +```tsx +// components/CamoBg.tsx +// Primary animated camo background component. +// Uses GSAP for the reveal + glitch, Framer Motion for idle pulse. + +'use client'; // Next.js / App Router — remove if using Vite + +import React, { useEffect, useRef, useMemo, useCallback } from 'react'; +import { motion, useReducedMotion } from 'framer-motion'; +import { gsap } from 'gsap'; +import { ScrollTrigger } from 'gsap/ScrollTrigger'; +import { pickCamoColor, CAMO_GLITCH_COLOR } from '../lib/camo-palette'; + +gsap.registerPlugin(ScrollTrigger); + +// ─── Types ────────────────────────────────────────────────────────────────── + +interface CamoBgProps { + /** Base opacity of the background layer. Default: 0.72 */ + opacity?: number; + /** Enable scroll-based parallax drift. Default: true */ + parallax?: boolean; + /** Enable sage green glitch pulses. Default: true */ + glitch?: boolean; + /** CSS class for the wrapper div */ + className?: string; +} + +interface Cell { + id: number; + color: string; + pulseDuration: number; + pulseDelay: number; +} + +// ─── Constants ─────────────────────────────────────────────────────────────── + +const CELL_SIZE = 24; // px — matches --camo-cell-size at 1440px base +const GAP = 2; // px — tight grid gap + +// ─── Hooks ────────────────────────────────────────────────────────────────── + +function useCellGrid(containerRef: React.RefObject): Cell[] { + return useMemo(() => { + // Server-side: use a safe default. Client will hydrate with actual count. + if (typeof window === 'undefined') return buildCells(50, 30); + + // Overshoot 110% so parallax drift never shows a gap + const cols = Math.ceil((window.innerWidth * 1.1) / (CELL_SIZE + GAP)); + const rows = Math.ceil((window.innerHeight * 1.1) / (CELL_SIZE + GAP)); + return buildCells(cols, rows); + }, []); // Intentionally empty — recalc handled by resize observer separately +} + +function buildCells(cols: number, rows: number): Cell[] { + const cells: Cell[] = []; + for (let i = 0; i < cols * rows; i++) { + cells.push({ + id: i, + color: pickCamoColor(), + pulseDuration: Math.random() * 4 + 3, // 3–7s + pulseDelay: Math.random() * 8, // 0–8s offset + }); + } + return cells; +} + +// ─── Component ─────────────────────────────────────────────────────────────── + +export function CamoBg({ + opacity = 0.72, + parallax = true, + glitch = true, + className = '', +}: CamoBgProps) { + const containerRef = useRef(null); + const cellsRef = useRef([]); + const glitchTimerRef = useRef | null>(null); + const prefersReduced = useReducedMotion(); + + const cells = useCellGrid(containerRef); + + // ── 1. Stagger reveal on mount ────────────────────────────────────────── + useEffect(() => { + if (prefersReduced || cellsRef.current.length === 0) return; + + gsap.fromTo( + cellsRef.current, + { opacity: 0, scale: 0.85 }, + { + opacity: opacity, + scale: 1, + duration: 0.6, + stagger: { + amount: 2.4, // total stagger spread across all cells + from: 'random', // random order → organic reveal + ease: 'power2.inOut', + }, + ease: 'power2.out', + } + ); + }, [opacity, prefersReduced]); + + // ── 2. ScrollTrigger parallax drift ──────────────────────────────────── + useEffect(() => { + if (!parallax || prefersReduced || !containerRef.current) return; + + const tween = gsap.to(containerRef.current, { + y: '-15%', + ease: 'none', + scrollTrigger: { + trigger: document.body, + start: 'top top', + end: 'bottom bottom', + scrub: 1.5, + }, + }); + + return () => { + tween.scrollTrigger?.kill(); + tween.kill(); + }; + }, [parallax, prefersReduced]); + + // ── 3. Sage glitch pulse ──────────────────────────────────────────────── + const triggerGlitch = useCallback(() => { + if (!glitch || prefersReduced || cellsRef.current.length === 0) return; + + // Pick 2–3 random cells + const pool = [...cellsRef.current]; + const targets = Array.from({ length: Math.floor(Math.random() * 2) + 2 }, () => { + const idx = Math.floor(Math.random() * pool.length); + return pool.splice(idx, 1)[0]; + }); + + const originals = targets.map((el) => el.style.backgroundColor); + + gsap.to(targets, { + backgroundColor: CAMO_GLITCH_COLOR, + duration: 0.08, + yoyo: true, + repeat: 3, + ease: 'none', + stagger: 0.04, + onComplete: () => { + gsap.to(targets, { + backgroundColor: originals[0], // snap back to original (approx) + duration: 0.3, + ease: 'power1.out', + }); + }, + }); + + // Schedule next glitch: 12–20s + glitchTimerRef.current = setTimeout( + triggerGlitch, + Math.random() * 8000 + 12000 + ); + }, [glitch, prefersReduced]); + + useEffect(() => { + const firstDelay = Math.random() * 8000 + 12000; + glitchTimerRef.current = setTimeout(triggerGlitch, firstDelay); + return () => { + if (glitchTimerRef.current) clearTimeout(glitchTimerRef.current); + }; + }, [triggerGlitch]); + + // ── Render ────────────────────────────────────────────────────────────── + return ( + + ); +} + +export default CamoBg; +``` + +--- + +## 3. Usage in a Page + +### Next.js App Router (`app/page.tsx`) + +```tsx +// app/page.tsx +import { CamoBg } from '@/components/CamoBg'; + +export default function HeroPage() { + return ( + <> + {/* Background sits behind everything at z-index: -1 */} + + + {/* Content layer needs a subtle overlay so text stays readable */} +
+ {/* Optional overlay — semi-transparent to let camo bleed through */} +
+ +
+

+ VLN Platform +

+

+ Tactical infrastructure. Engineered precision. +

+
+
+ + ); +} +``` + +### Docusaurus (MDX Page) + +```tsx +// src/pages/camo-demo.tsx (Docusaurus custom page — not a doc) +import React from 'react'; +import Layout from '@theme/Layout'; +import { CamoBg } from '../components/CamoBg'; + +export default function CamoDemoPage() { + return ( + + +
+

Camo Background Demo

+
+ + ); +} +``` + +--- + +## 4. Reduced-Motion Static Fallback + +When `prefers-reduced-motion: reduce` is active, Framer Motion's `useReducedMotion()` disables all animation variants, and GSAP reveals are skipped. Add this CSS as a hard stop: + +```css +/* design-standards/src/css/custom.css — append to existing file */ + +@media (prefers-reduced-motion: reduce) { + .camo-bg-root { + animation: none !important; + transform: none !important; + opacity: 0.55 !important; + } + .camo-bg-root > * { + animation: none !important; + transition: none !important; + } +} +``` + +--- + +## 5. Mobile Optimization + +On screens < 768px, reduce cell count by rendering at 2× cell size and disabling parallax: + +```tsx +// In the page that renders CamoBg: +import { useMediaQuery } from '@/hooks/useMediaQuery'; // or a lib + +function HeroSection() { + const isMobile = useMediaQuery('(max-width: 767px)'); + + return ( + + ); +} +``` + +--- + +## 6. Variant — Framer Motion Only (Lightweight) + +For doc pages where GSAP is not already loaded, use this lighter variant that relies solely on Framer Motion: + +```tsx +// components/CamoBgLite.tsx +// Framer Motion only — no GSAP dependency. +// Use for doc/blog pages. No parallax, no glitch. + +'use client'; + +import React, { useMemo } from 'react'; +import { motion, useReducedMotion } from 'framer-motion'; +import { pickCamoColor } from '../lib/camo-palette'; + +const CELL = 28; +const GAP = 2; + +export function CamoBgLite({ opacity = 0.45 }: { opacity?: number }) { + const prefersReduced = useReducedMotion(); + + const cells = useMemo(() => { + if (typeof window === 'undefined') return Array.from({ length: 600 }, (_, i) => i); + const cols = Math.ceil((window.innerWidth * 1.05) / (CELL + GAP)); + const rows = Math.ceil((window.innerHeight * 1.05) / (CELL + GAP)); + return Array.from({ length: cols * rows }, (_, i) => i); + }, []); + + return ( + + ); +} +``` + +--- + +## 7. Tailwind CSS Color Reference + +When using Tailwind instead of inline styles, these classes most closely match the camo palette: + +| Token | Hex | Tailwind Closest | +|-------|-----|-----------------| +| `--camo-void` | `#000000` | `bg-black` | +| `--camo-forest` | `#004d00` | `bg-green-950` (closest) | +| `--camo-olive` | `#3b5323` | `bg-green-900` / `bg-emerald-900` | +| `--camo-moss` | `#2d4a1e` | `bg-green-900` | +| `--camo-sage-dim` | `#4a7c59` | `bg-emerald-700` | + +> Tailwind's built-in green shades top out around `#14532d` for `green-950`. For exact VLN camo values use `bg-[#004d00]` arbitrary value syntax. + +```html + +
forest
+
olive
+
moss
+``` + +--- + +## 8. Storybook Story (Optional) + +```tsx +// stories/CamoBg.stories.tsx +import type { Meta, StoryObj } from '@storybook/react'; +import { CamoBg } from '../components/CamoBg'; + +const meta: Meta = { + title: 'Internal/CamoBg', + component: CamoBg, + parameters: { layout: 'fullscreen' }, +}; + +export default meta; +type Story = StoryObj; + +export const Default: Story = { + args: { opacity: 0.72, parallax: true, glitch: true }, +}; + +export const Subtle: Story = { + args: { opacity: 0.35, parallax: false, glitch: false }, +}; + +export const GlitchHeavy: Story = { + // Simulates 404 error page variant + args: { opacity: 0.72, parallax: false, glitch: true }, +}; +``` + +--- + +## 9. Checklist Before Shipping + +- [ ] `pnpm build` passes — no type errors +- [ ] Tested with `prefers-reduced-motion: reduce` in DevTools → all animation stops +- [ ] Tested on iPhone SE (375px) — background renders, no perf jank +- [ ] Glitch pulse fires on a real device (not just emulator) +- [ ] No `--camo-sage` (`#86d993`) cells visible at rest — only during glitch +- [ ] `aria-hidden="true"` on root div — verified with accessibility tree +- [ ] `zIndex: -1` confirmed — content not obscured + +--- + +> **Classification:** Internal reference implementation +> **Audience:** VLN design engineers, frontend leads +> **Related spec:** [`qx7b2-bg-digital-camo`](./qx7b2-bg-digital-camo) diff --git a/public/README.md b/public/README.md index effeec7..b3d94e3 100644 --- a/public/README.md +++ b/public/README.md @@ -1,6 +1,6 @@ # Social Media Graphics -Auto-generated: 2026-02-15 +Auto-generated: 2026-02-24 Author: Unknown Code sign-off: Unknown @@ -46,4 +46,4 @@ Code sign-off: Unknown - **LinkedIn Post Inspector**: https://www.linkedin.com/post-inspector/ --- -Generated: 2026-02-15 +Generated: 2026-02-24 diff --git a/public/meta-tags.html b/public/meta-tags.html index 1ff6d66..6b7dd64 100644 --- a/public/meta-tags.html +++ b/public/meta-tags.html @@ -1,6 +1,6 @@ @@ -25,7 +25,7 @@ - + @@ -57,7 +57,7 @@ "name": "Unknown", "email": "unknown@example.com" }, - "datePublished": "2026-02-15", + "datePublished": "2026-02-24", "keywords": "devops, automation, ci-cd, github-actions, claude-code", "programmingLanguage": ["Bash", "JavaScript", "YAML"], "codeRepository": "https://github.com/Fused-Gaming/DevOps" diff --git a/public/site.webmanifest b/public/site.webmanifest index fa84fda..8de80cc 100644 --- a/public/site.webmanifest +++ b/public/site.webmanifest @@ -25,5 +25,5 @@ } ], "author": "Unknown", - "generated": "2026-02-15" + "generated": "2026-02-24" } diff --git a/robots.txt b/robots.txt index da6a57f..345a4a2 100644 --- a/robots.txt +++ b/robots.txt @@ -1,5 +1,5 @@ # robots.txt -# Auto-generated: 2026-02-15 +# Auto-generated: 2026-02-24 # Author: Unknown # Code sign-off: Unknown diff --git a/schema.json b/schema.json index 5510b21..4cd1f07 100644 --- a/schema.json +++ b/schema.json @@ -6,7 +6,7 @@ "metadata": { "author": "Unknown", "email": "unknown@example.com", - "generated": "2026-02-15", + "generated": "2026-02-24", "version": "1.0.0", "repository": "https://github.com/Fused-Gaming/DevOps", "codeSignedBy": "Unknown" @@ -21,8 +21,8 @@ "name": "Unknown", "email": "unknown@example.com" }, - "dateCreated": "2026-02-15", - "dateModified": "2026-02-15", + "dateCreated": "2026-02-24", + "dateModified": "2026-02-24", "codeRepository": "https://github.com/Fused-Gaming/DevOps", "programmingLanguage": [ "Bash", diff --git a/sitemap.xml b/sitemap.xml index 54e6e2f..4208a11 100644 --- a/sitemap.xml +++ b/sitemap.xml @@ -2,7 +2,7 @@ https://example.com/ - 2026-02-15 + 2026-02-24 daily 1.0 @@ -21,7 +21,7 @@ https://example.com/docs - 2026-02-15 + 2026-02-24 weekly 0.8 @@ -29,7 +29,7 @@ https://example.com/quick-access - 2026-02-15 + 2026-02-24 weekly 0.8 @@ -37,7 +37,7 @@ https://example.com/cheatsheet - 2026-02-15 + 2026-02-24 monthly 0.7 @@ -45,7 +45,7 @@ https://example.com/security - 2026-02-15 + 2026-02-24 monthly 0.8 @@ -53,40 +53,32 @@ https://example.com/github-actions - 2026-02-15 + 2026-02-24 monthly 0.7 - - - https://example.com/MVP-STATUS - 2025-11-17 - monthly - 0.6 - - - + - https://example.com/templates/FEATURE_TEMPLATE - 2025-11-13 + https://example.com/SUBDOMAIN-ARCHITECTURE + 2025-11-21 monthly 0.6 - + - https://example.com/REPOSITORY-INVENTORY - 2025-11-23 + https://example.com/MILESTONE-FIX-GUIDE + 2025-11-17 monthly 0.6 - + - https://example.com/ROLLOUT-PLAN + https://example.com/FEATURE-DOCS-README 2025-11-13 monthly 0.6 @@ -100,82 +92,82 @@ 0.6 - + - https://example.com/PR-COMMIT-QUICKREF - 2025-11-17 + https://example.com/VERCEL-DEPLOYMENT-MONITORING + 2025-11-21 monthly 0.6 - + - https://example.com/MVP - 2025-11-15 + https://example.com/FEATURE-DOCUMENTATION-GUIDE + 2025-11-13 monthly 0.6 - + - https://example.com/FEATURE-DOCUMENTATION-GUIDE - 2025-11-13 + https://example.com/FLOW-REFERENCE + 2025-11-17 monthly 0.6 - + - https://example.com/SUBDOMAIN-ARCHITECTURE - 2025-11-21 + https://example.com/MVP + 2025-11-15 monthly 0.6 - + - https://example.com/FEATURE-DOCS-IMPLEMENTATION-RECOMMENDATIONS - 2025-11-13 + https://example.com/AUTO-PR-COMMIT-GUIDE + 2025-11-17 monthly 0.6 - + - https://example.com/TIERED-FEATURE-WORKFLOW - 2025-11-13 + https://example.com/MVP-SUMMARY + 2025-11-17 monthly 0.6 - + - https://example.com/AUTO-PR-COMMIT-GUIDE - 2025-11-17 + https://example.com/USAGE-TRACKING-GUIDE + 2025-11-20 monthly 0.6 - + - https://example.com/VERCEL-DEPLOYMENT-MONITORING - 2025-11-21 + https://example.com/REPOSITORY-INVENTORY + 2025-11-23 monthly 0.6 - + - https://example.com/FEATURE-DOCS-README + https://example.com/ROLLOUT-PLAN 2025-11-13 monthly 0.6 - + - https://example.com/FLOW-REFERENCE - 2025-11-17 + https://example.com/FEATURE-DOCS-IMPLEMENTATION-RECOMMENDATIONS + 2025-11-13 monthly 0.6 @@ -188,25 +180,33 @@ 0.6 - + - https://example.com/USAGE-TRACKING-GUIDE - 2025-11-20 + https://example.com/TIERED-FEATURE-WORKFLOW + 2025-11-13 monthly 0.6 - + - https://example.com/MVP-SUMMARY + https://example.com/templates/FEATURE_TEMPLATE + 2025-11-13 + monthly + 0.6 + + + + + https://example.com/PR-COMMIT-QUICKREF 2025-11-17 monthly 0.6 - + - https://example.com/MILESTONE-FIX-GUIDE + https://example.com/MVP-STATUS 2025-11-17 monthly 0.6