@skyf0xx/hedgehog 2.0.3 → 2.0.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skyf0xx/hedgehog",
-  "version": "2.0.3",
+  "version": "2.0.5",
   "description": "Install the Hedgehog build discipline (agents + skills) into a repo.",
   "type": "module",
   "repository": {

package/src/agents/landing-builder.md

@@ -1,6 +1,6 @@
 ---
 name: landing-builder
-description: Use for the build phase of the Chain Method (landing-page core) — implementing the audited spec exactly in Astro, Tailwind, GSAP/ScrollTrigger/Lenis, SplitType, and Paper.js/SVG for the motif, placing landing-copywriter's final copy verbatim. Runs last, only after landing-critic returns a pass. Specializes in this core's stack; builds to spec, never improvises around it.
+description: Use for the build phase of the Chain Method (landing-page core) — implementing the audited spec exactly in Astro, Tailwind, GSAP/ScrollTrigger/Lenis, SplitType, and the p5.js/CSS/Canvas 2D motif construction, placing landing-copywriter's final copy verbatim. Runs last, only after landing-critic returns a pass. Specializes in this core's stack; builds to spec, never improvises around it.
 model: sonnet
 color: green
 tools: Read, Glob, Grep, Edit, Write, Bash
@@ -28,18 +28,20 @@ never silently improvised around.
   gap in the token system, flagged back to `landing-systems`, not
   invented locally.
 - **GSAP + ScrollTrigger** — implement `landing-sequencer`'s pacing spec:
-  section transitions, timing. Import `MorphSVGPlugin` from
-  `gsap/MorphSVGPlugin` directly (it ships inside the `gsap` package —
-  no separate install).
+  section transitions, timing. Scoped to CSS/transform targets only, no
+  plugins — a `border-radius` string tween replaces shape-morphing, for
+  example.
 - **Lenis** — wire smooth-scroll globally, matching the beat structure
   `landing-sequencer` specified.
 - **SplitType** — implement copy-reveal splitting exactly where
   `landing-sequencer`'s beat structure calls for it, not on every section
   by default.
-- **Paper.js / hand-authored SVG** — implement the motif from
-  `src/motifs/` exactly as `landing-systems` specified (source,
-  persistence, continuity, scale range, literalness) — don't simplify or
-  embellish it during implementation.
+- **p5.js / CSS / Canvas 2D** — implement the motif from `src/motifs/`
+  exactly as `landing-systems` specified (source, persistence,
+  continuity, scale range, literalness), using whichever construction
+  technique the spec calls for (p5.js for organic/generative, CSS for
+  static geometric, Canvas 2D for measured/connective) — don't simplify
+  or embellish it during implementation.
 - **React Three Fiber** — only if the subject is genuinely spatial and
   `landing-systems`/`landing-sequencer` specified it; otherwise never
   reach for it.

package/src/agents/landing-systems.md

@@ -21,14 +21,19 @@ values and the signature motif.
   block in `src/styles/global.css` (Tailwind v4, CSS-first — no
   `tailwind.config.js`). No component classes, no plugin beyond the
   base.
-- **SVG-first** for the motif — hand-authored graphics, no icon library
-  or generator look to fight against.
-- **Paper.js** — canvas vector work, for a motif that needs to evolve
-  (augmentation/inversion) rather than sit static.
-- Figma MCP / Stitch MCP, if the user provides a design reference, are
-  input only — never allowed to set spacing or style values directly.
-  Anything handed off through them gets re-derived through your own
-  token system before it touches Tailwind config.
+- **Motif construction** is picked per motif type, never hand-typed
+  coordinates:
+  - **p5.js** for an organic/generative motif — described as a rule
+    (noise, jitter, growth) rather than freehand path data.
+  - **CSS** (`clip-path` / gradients / `border-radius`) for a static
+    geometric motif — spines, chevrons, blobs — directly GSAP-animatable.
+  - **Canvas 2D with computed coordinates** for a measured/connective
+    motif — threads/lines that align to real DOM positions, drawn from
+    measured values, not imagined ones.
+- This core has no design-handoff tool. Every token, dial, and motif
+  choice is derived directly from `landing-strategist`'s emotional
+  target and your own reconciliation at step 5 — never imported from an
+  external design file.
 
 ## Core Responsibilities
 
@@ -153,9 +158,16 @@ Borrowed technique:
   retrograde) for exactly how the motif is allowed to evolve as it
   recurs, rather than repeating identically or mutating arbitrarily
 
-Author the motif as hand-built SVG, or as a Paper.js sketch if it needs
-to evolve programmatically across sections — output either the SVG
-markup or the Paper.js setup into `src/motifs/`.
+Pick the construction technique from what the motif actually is, not by
+default: a p5.js sketch (driven by a formula — noise, jitter, growth) for
+an organic motif that needs to evolve programmatically across sections; a
+CSS-only treatment (`clip-path`, gradients, `border-radius`) for a static
+geometric shape; Canvas 2D driven by measured DOM coordinates for a motif
+that threads/connects across real element positions. Output the result
+into `src/motifs/`. Use the `motif-authoring` skill for the actual
+construction: build from a formula, a measurement, or a small set of
+deliberate CSS primitives — never a hand-typed freehand coordinate — that's
+the difference between a sourced motif and generic clip-art geometry.
 
 ## Workflow
 
@@ -196,8 +208,6 @@ markup or the Paper.js setup into `src/motifs/`.
   decorative asset to fill a gap — that gap is a signal to go back to the
   Ingredient Vocabulary and derive the right choice, not to default to
   something off-the-shelf.
-- Figma/Stitch MCP output, if used, is never copied through as final
-  token values — always re-derived through step 5's reconciliation.
 - Don't write section layout, pacing, or transitions — that's
   `landing-sequencer`'s step 7, working from your token system.
 - Don't touch `src/pages/`, `src/sections/` beyond what's needed to

package/src/golden-cores/landing-page/package.json

@@ -21,7 +21,8 @@
     "astro": "^7.1.3",
     "gsap": "^3.15.0",
     "lenis": "^1.3.25",
-    "paper": "^0.12.18",
+    "ogl": "^1.0.11",
+    "p5": "^2.3.1",
     "split-type": "^0.3.4",
     "tailwindcss": "^4.3.3"
   },

package/src/golden-cores/landing-page/pnpm-lock.yaml

@@ -20,9 +20,12 @@ importers:
       lenis:
         specifier: ^1.3.25
         version: 1.3.25
-      paper:
-        specifier: ^0.12.18
-        version: 0.12.18
+      ogl:
+        specifier: ^1.0.11
+        version: 1.0.11
+      p5:
+        specifier: ^2.3.1
+        version: 2.3.1
       split-type:
         specifier: ^0.3.4
         version: 0.3.4
@@ -175,6 +178,10 @@ packages:
     engines: {node: '>=6.0.0'}
     hasBin: true
 
+  '@babel/runtime@7.29.7':
+    resolution: {integrity: sha512-Nq8OhGWiZIZGV6hLHoyAKLLcJihP/xFeBMGJoUrxTX2psI8dCifzLhZISFb+VWS3wFMRDmCGw5R+dOySCqPLhw==}
+    engines: {node: '>=6.9.0'}
+
   '@babel/types@7.29.7':
     resolution: {integrity: sha512-4zBIxpPzowiZpusoFkyGVwakdRJUyuH5PxQ/PrqghfdFWWasvnCdPfQXHrenDai+gyLARulZjZowCOj6fjT4pA==}
     engines: {node: '>=6.9.0'}
@@ -236,6 +243,9 @@ packages:
     resolution: {integrity: sha512-y7/yvZ2TPAnR9+jnc00klvNNLkJiXFFrQA/hlLCcxA9a2A4zQIOimyFQ9XfwYKiGD1fb5GY8vbKIIgO8d5Tb2A==}
     engines: {node: '>= 20.12.0'}
 
+  '@davepagurek/bezier-path@0.0.7':
+    resolution: {integrity: sha512-CVlnCOrV1iy4Z12T756i9l4G6kF7r8uhlnb+xqDemAMmWQB+8Q0b+8VEqIiUfywgZDSiDr18Rm7pZlnA69rE8Q==}
+
   '@emmetio/abbreviation@2.3.3':
     resolution: {integrity: sha512-mgv58UrU3rh4YgbE/TzgLQwJ3pFsHHhCLqY20aJq+9comytTXUDNGG/SMtSeMJdkpxgXSXunBGLD8Boka3JyVA==}
 
@@ -621,6 +631,9 @@ packages:
     cpu: [x64]
     os: [win32]
 
+  '@japont/unicode-range@1.0.0':
+    resolution: {integrity: sha512-BckHvA2XdjRBVAWe2uceNuRf78lBeI28kyWEbfr/Q2pE17POkwuZ6WWY/UMv8FL9iBxhW4xfDoNLM9UVZaTeUQ==}
+
   '@jridgewell/gen-mapping@0.3.13':
     resolution: {integrity: sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA==}
 
@@ -991,6 +1004,10 @@ packages:
     peerDependencies:
       acorn: ^6.0.0 || ^7.0.0 || ^8.0.0
 
+  acorn-walk@8.3.5:
+    resolution: {integrity: sha512-HEHNfbars9v4pgpW6SO1KSPkfoS0xVOM/9UzkJltjlsHZmJasxg8aXkuZa7SMf8vKGIBhpUsPluQSqhJFCqebw==}
+    engines: {node: '>=0.4.0'}
+
   acorn@8.17.0:
     resolution: {integrity: sha512-xRQbDb9BnwDafYNn6Vwl839DYVjqXYb1XVGtWAZ1kcDc6iwAL4hg3B1dZlRiuENFeO2H53gFG3in621AdERVAg==}
     engines: {node: '>=0.4.0'}
@@ -1106,6 +1123,9 @@ packages:
   color-name@1.1.4:
     resolution: {integrity: sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==}
 
+  colorjs.io@0.6.1:
+    resolution: {integrity: sha512-8lyR2wHzuIykCpqHKgluGsqQi5iDm3/a2IgP2GBZrasn2sBRkE4NOGsglZxWLs/jZQoNkmA/KM/8NV16rLUdBg==}
+
   comma-separated-tokens@2.0.3:
     resolution: {integrity: sha512-Fu4hJdvzeylCfQPp9SGWidpzrMs7tTrlu6Vb8XGaRGck8QSNZJJp538Wrb60Lax4fPwR64ViY468OIUTbRlGZg==}
 
@@ -1242,6 +1262,11 @@ packages:
     resolution: {integrity: sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==}
     engines: {node: '>=10'}
 
+  escodegen@2.1.0:
+    resolution: {integrity: sha512-2NlIDTwUWJN0mRPQOdtQBzbUHvdGY2P1VXSyU83Q3xKxM7WHX2Ql8dKq782Q9TgQUNOLEzEYu9bzLNj1q88I5w==}
+    engines: {node: '>=6.0'}
+    hasBin: true
+
   eslint-plugin-astro@3.0.1:
     resolution: {integrity: sha512-skys0KV/5m/rQ6a4BDAGOGtrGoBlWNYiWtoDjx25bghDwTiKXng63s4Yv823iX3ht/tH/kHtoUM2poxESGsv3w==}
     engines: {node: ^22.22.3 || ^24.16.0 || >=26.3.0}
@@ -1281,6 +1306,11 @@ packages:
     resolution: {integrity: sha512-7p3DrVEIopW1B1avAGLuCSh1jubc01H2JHc8B4qqGblmg5gI9yumBgACjWo4JlIc04ufug4xJ3SQI8HkS/Rgzw==}
     engines: {node: ^20.19.0 || ^22.13.0 || >=24}
 
+  esprima@4.0.1:
+    resolution: {integrity: sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==}
+    engines: {node: '>=4'}
+    hasBin: true
+
   esquery@1.7.0:
     resolution: {integrity: sha512-Ap6G0WQwcU/LHsvLwON1fAQX9Zp0A2Y6Y/cJBl9r/JbW90Zyg4/zbG6zzKa2OTALELarYHmKu0GhpM5EO+7T0g==}
     engines: {node: '>=0.10'}
@@ -1375,6 +1405,9 @@ packages:
     resolution: {integrity: sha512-7nF7C9fIPFEMHgEMEfgIlO9wDdZ8CyHw27rWciFZfHvHDReIiPhsYuzPRXsfvBCqFy1l8RRyyWV7QLM+ZhUJsQ==}
     engines: {node: '>=20.20.0'}
 
+  gifenc@1.0.3:
+    resolution: {integrity: sha512-xdr6AdrfGBcfzncONUOlXMBuc5wJDtOueE3c5rdG0oNgtINLD+f2iFZltrBRZYzACRbKr+mSVU/x98zv2u3jmw==}
+
   github-slugger@2.0.0:
     resolution: {integrity: sha512-IaOQ9puYtjrkq7Y0Ygl9KDZnrf/aiUJYUpVf89y8kyaxbRG7Y1SrX/jaumrv81vc61+kiMempujsM3Yw7w5qcw==}
 
@@ -1422,6 +1455,12 @@ packages:
   http-cache-semantics@4.2.0:
     resolution: {integrity: sha512-dTxcvPXqPvXBQpq5dUr6mEMJX4oIEFv6bwom3FDwKRDsuIjjJGANqhBuoAn9c1RQJIdAKav33ED65E2ys+87QQ==}
 
+  i18next-browser-languagedetector@4.3.1:
+    resolution: {integrity: sha512-KIToAzf8zwWvacgnRwJp63ase26o24AuNUlfNVJ5YZAFmdGhsJpmFClxXPuk9rv1FMI4lnc8zLSqgZPEZMrW4g==}
+
+  i18next@19.9.2:
+    resolution: {integrity: sha512-0i6cuo6ER6usEOtKajUUDj92zlG+KArFia0857xxiEHAQcUwh/RtOQocui1LPJwunSYT574Pk64aNva1kwtxZg==}
+
   ignore@5.3.2:
     resolution: {integrity: sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g==}
     engines: {node: '>= 4'}
@@ -1512,6 +1551,9 @@ packages:
     resolution: {integrity: sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==}
     engines: {node: '>= 0.8.0'}
 
+  libtess@1.2.2:
+    resolution: {integrity: sha512-Nps8HPeVVcsmJxUvFLKVJcCgcz+1ajPTXDVAVPs6+giOQP4AHV31uZFFkh+CKow/bkB7GbZWKmwmit7myaqDSw==}
+
   lightningcss-android-arm64@1.32.0:
     resolution: {integrity: sha512-YK7/ClTt4kAK0vo6w3X+Pnm0D2cf2vPHbhOXdoNti1Ga0al1P4TBZhwjATvjNwLEBCnKvjJc2jQgHXH0NEwlAg==}
     engines: {node: '>= 12.0.0'}
@@ -1739,9 +1781,15 @@ packages:
   ofetch@1.5.1:
     resolution: {integrity: sha512-2W4oUZlVaqAPAil6FUg/difl6YhqhUR7x2eZY4bQCko22UXg3hptq9KLQdqFClV+Wu85UX7hNtdGTngi/1BxcA==}
 
+  ogl@1.0.11:
+    resolution: {integrity: sha512-kUpC154AFfxi16pmZUK4jk3J+8zxwTWGPo03EoYA8QPbzikHoaC82n6pNTbd+oEaJonaE8aPWBlX7ad9zrqLsA==}
+
   ohash@2.0.11:
     resolution: {integrity: sha512-RdR9FQrFwNBNXAr4GixM8YaRZRJ5PUWbKYbE5eOsrwAjJW0q2REGcf79oYPsLyskQCZG1PLN+S/K1V00joZAoQ==}
 
+  omggif@1.0.10:
+    resolution: {integrity: sha512-LMJTtvgc/nugXj0Vcrrs68Mn2D1r0zf630VNtqtpI1FEO7e+O9FP4gqs9AcnBaSEeoHIPm28u6qgPR0oyEpGSw==}
+
   oniguruma-parser@0.12.2:
     resolution: {integrity: sha512-6HVa5oIrgMC6aA6WF6XyyqbhRPJrKR02L20+2+zpDtO5QAzGHAUGw5TKQvwi5vctNnRHkJYmjAhRVQF2EKdTQw==}
 
@@ -1772,12 +1820,14 @@ packages:
     resolution: {integrity: sha512-AxTM2wDGORHGEkPCt8yqxOTMgpfbEHqF51f/5fJCmwFC3C/zNcGT63SymH2ttOAaiIws2zVg4+izQCjrakcwHg==}
     engines: {node: '>=20'}
 
+  p5@2.3.1:
+    resolution: {integrity: sha512-YOzt3oP+xagNKtCiOfXK6EaEi4i7F4+5MNGFPUu6/yEJ1QhIsZQl1Tp/uYFNldi3Y0Uwmre997Ke0vDoFwBFBw==}
+
   package-manager-detector@1.8.0:
     resolution: {integrity: sha512-yQA4H19AmPEoMUeavPMDIe1higySl/gH/yaQrkT/s07Qp+7pp2hYz30N3z2l5BkjVkF9Ow6o0wjJamm2y7Sn0A==}
 
-  paper@0.12.18:
-    resolution: {integrity: sha512-ZSLIEejQTJZuYHhSSqAf4jXOnii0kPhCJGAnYAANtdS72aNwXJ9cP95tZHgq1tnNpvEwgQhggy+4OarviqTCGw==}
-    engines: {node: '>=8.0.0'}
+  pako@2.2.0:
+    resolution: {integrity: sha512-zJq6RP/5q+TO2OpFV3FHzlPnFjmkb7Nc99a5SNjJE+uu/PkpChs+NIZSSzbBoD+6kjiISXjfYdwj1ZRQ81dz/w==}
 
   parse5@7.3.0:
     resolution: {integrity: sha512-IInvU7fabl34qmi9gY8XOVxhYyMyuH2xUNpb2q8/Y+7552KlejkRvqvD19nMoUW/uQGGbqNpA6Tufu5FL5BZgw==}
@@ -1993,6 +2043,10 @@ packages:
     resolution: {integrity: sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==}
     engines: {node: '>=0.10.0'}
 
+  source-map@0.6.1:
+    resolution: {integrity: sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==}
+    engines: {node: '>=0.10.0'}
+
   space-separated-tokens@2.0.2:
     resolution: {integrity: sha512-PEGlAwrG8yXGXRjW32fGbg66JAlOAwbObuqVoJpv/mRgoWDQfgH1wDPvtzWyUSNAXBGSk8h755YDbbcEy3SH2Q==}
 
@@ -2530,6 +2584,8 @@ snapshots:
     dependencies:
       '@babel/types': 7.29.7
 
+  '@babel/runtime@7.29.7': {}
+
   '@babel/types@7.29.7':
     dependencies:
       '@babel/helper-string-parser': 7.29.7
@@ -2582,6 +2638,8 @@ snapshots:
       fast-wrap-ansi: 0.2.2
       sisteransi: 1.0.5
 
+  '@davepagurek/bezier-path@0.0.7': {}
+
   '@emmetio/abbreviation@2.3.3':
     dependencies:
       '@emmetio/scanner': 1.0.4
@@ -2857,6 +2915,8 @@ snapshots:
   '@img/sharp-win32-x64@0.35.3':
     optional: true
 
+  '@japont/unicode-range@1.0.0': {}
+
   '@jridgewell/gen-mapping@0.3.13':
     dependencies:
       '@jridgewell/sourcemap-codec': 1.5.5
@@ -3228,6 +3288,10 @@ snapshots:
     dependencies:
       acorn: 8.17.0
 
+  acorn-walk@8.3.5:
+    dependencies:
+      acorn: 8.17.0
+
   acorn@8.17.0: {}
 
   ajv-draft-04@1.0.0(ajv@8.20.0):
@@ -3421,6 +3485,8 @@ snapshots:
 
   color-name@1.1.4: {}
 
+  colorjs.io@0.6.1: {}
+
   comma-separated-tokens@2.0.3: {}
 
   commander@11.1.0: {}
@@ -3560,6 +3626,14 @@ snapshots:
 
   escape-string-regexp@4.0.0: {}
 
+  escodegen@2.1.0:
+    dependencies:
+      esprima: 4.0.1
+      estraverse: 5.3.0
+      esutils: 2.0.3
+    optionalDependencies:
+      source-map: 0.6.1
+
   eslint-plugin-astro@3.0.1(@emnapi/core@1.11.1)(@emnapi/runtime@1.11.1)(@typescript-eslint/parser@8.65.0(eslint@10.8.0(jiti@2.7.0))(typescript@5.9.3))(eslint@10.8.0(jiti@2.7.0)):
     dependencies:
       '@eslint-community/eslint-utils': 4.10.1(eslint@10.8.0(jiti@2.7.0))
@@ -3632,6 +3706,8 @@ snapshots:
       acorn-jsx: 5.3.2(acorn@8.17.0)
       eslint-visitor-keys: 5.0.1
 
+  esprima@4.0.1: {}
+
   esquery@1.7.0:
     dependencies:
       estraverse: 5.3.0
@@ -3707,6 +3783,8 @@ snapshots:
     dependencies:
       resolve-pkg-maps: 1.0.0
 
+  gifenc@1.0.3: {}
+
   github-slugger@2.0.0: {}
 
   glob-parent@6.0.2:
@@ -3787,6 +3865,14 @@ snapshots:
 
   http-cache-semantics@4.2.0: {}
 
+  i18next-browser-languagedetector@4.3.1:
+    dependencies:
+      '@babel/runtime': 7.29.7
+
+  i18next@19.9.2:
+    dependencies:
+      '@babel/runtime': 7.29.7
+
   ignore@5.3.2: {}
 
   ignore@7.0.6: {}
@@ -3840,6 +3926,8 @@ snapshots:
       prelude-ls: 1.2.1
       type-check: 0.4.0
 
+  libtess@1.2.2: {}
+
   lightningcss-android-arm64@1.32.0:
     optional: true
 
@@ -4025,8 +4113,12 @@ snapshots:
       node-fetch-native: 1.6.7
       ufo: 1.6.4
 
+  ogl@1.0.11: {}
+
   ohash@2.0.11: {}
 
+  omggif@1.0.10: {}
+
   oniguruma-parser@0.12.2: {}
 
   oniguruma-to-es@4.3.6:
@@ -4063,9 +4155,25 @@ snapshots:
 
   p-timeout@7.0.1: {}
 
+  p5@2.3.1:
+    dependencies:
+      '@davepagurek/bezier-path': 0.0.7
+      '@japont/unicode-range': 1.0.0
+      acorn: 8.17.0
+      acorn-walk: 8.3.5
+      colorjs.io: 0.6.1
+      escodegen: 2.1.0
+      gifenc: 1.0.3
+      i18next: 19.9.2
+      i18next-browser-languagedetector: 4.3.1
+      libtess: 1.2.2
+      omggif: 1.0.10
+      pako: 2.2.0
+      zod: 4.4.3
+
   package-manager-detector@1.8.0: {}
 
-  paper@0.12.18: {}
+  pako@2.2.0: {}
 
   parse5@7.3.0:
     dependencies:
@@ -4256,6 +4364,9 @@ snapshots:
 
   source-map-js@1.2.1: {}
 
+  source-map@0.6.1:
+    optional: true
+
   space-separated-tokens@2.0.2: {}
 
   split-type@0.3.4: {}

package/src/skills/hedgehog-bootstrap-landing-page-core/SKILL.md

@@ -1,6 +1,6 @@
 ---
 name: hedgehog-bootstrap-landing-page-core
-description: Use once, at the start of a new Hedgehog project on the landing-page core, to land the pre-verified Astro + Tailwind workspace and verify it's green. Runs as the only move of the `bootstrap` agent on this core — there are no add-on steps, unlike full-stack-app. Invoked automatically by `planner` after Confirm & Lock.
+description: Use once, at the start of a new Hedgehog project on the landing-page core, to land the pre-verified Astro + Tailwind v4 workspace and verify it's green. Runs as the only move of the `bootstrap` agent on this core — there are no add-on steps, unlike full-stack-app. Invoked automatically by `planner` after Confirm & Lock.
 ---
 
 # Hedgehog Bootstrap — landing-page Core
@@ -9,8 +9,9 @@ Lands the whole of a `landing-page` project's workspace — there's no
 add-on layer to run after it, unlike `full-stack-app`'s
 `hedgehog-bootstrap` — by copying a pre-built, pre-verified workspace
 (`src/golden-cores/landing-page/` in the Hedgehog package) rather than
-generating it live: Astro workspace, Tailwind token-layer config, the
-library set this core is built on (GSAP, Lenis, SplitType, Paper.js).
+generating it live: Astro workspace, Tailwind v4 CSS-first token-layer
+config, the library set this core is built on (GSAP, Lenis, SplitType,
+p5.js, ogl).
 This piece is deterministic — the same commands produce the same output
 on every project — so the output is committed once, upstream, and copied
 here instead of re-derived by an agent on every run.
@@ -27,17 +28,15 @@ Hedgehog package, copied to the repo root:
 - Root: `astro.config.mjs`, `package.json` (with the `dev` script —
   `astro dev` — and every library in the stack pinned), `tsconfig.json`,
   `eslint.config.mjs`, `.prettierrc.js`, `.gitignore`, `pnpm-lock.yaml`.
-- `tailwind.config.ts` — the token layer only: no component classes, no
-  plugin beyond the base. Ships with placeholder tokens (a neutral
-  starting palette, a system type stack, a 4px spacing unit) that
-  `landing-systems` overwrites at its own phase — this file existing and
-  being wired into the build is what core guarantees, not any specific
-  token values.
 - `src/pages/index.astro` — a minimal placeholder page (proves the build
   pipeline works end to end), replaced by `landing-builder`'s own output
   at the build phase.
-- `src/styles/global.css` — the Tailwind import and CSS custom-property
-  scaffold `landing-systems`'s token system writes into.
+- `src/styles/global.css` — the Tailwind v4 CSS-first import and the
+  `@theme` token block: no component classes, no plugin beyond the base.
+  Ships with placeholder tokens (a neutral starting palette, a system
+  type stack, a 4px spacing unit) that `landing-systems` overwrites
+  entirely at its own phase — this block existing and being wired into
+  the build is what core guarantees, not any specific token values.
 - `src/sections/`, `src/motifs/` — empty, with a `.gitkeep`; real content
   starts at the systems and build phases.
 
@@ -125,13 +124,6 @@ like an unnecessary pin.
   root. All four are stripped before syncing — they'd otherwise collide
   with (or silently shadow) the project's real root `CLAUDE.md` and
   Hedgehog's own workspace conventions.
-- **MorphSVGPlugin ships inside the `gsap` package itself** — no
-  separate install, no Club GreenSock membership, no private registry.
-  GreenSock made every plugin free when GSAP joined Webflow in 2024.
-  Import it as `import { MorphSVGPlugin } from 'gsap/MorphSVGPlugin'`
-  directly from the `gsap` dependency already in `package.json`. Don't
-  reintroduce a separate paid-plugin workaround if this comes up again —
-  verify current licensing against gsap.com before assuming otherwise.
 
 ## If verification fails
 

package/src/skills/hedgehog-landing-loop/SKILL.md

@@ -182,9 +182,6 @@ Lock has held and its commit has landed. If not, stop and ask.
 - **The Critic's veto is real.** `landing-critic` can send any phase back
   to its owning agent, citing which audit failed; it cannot rewrite the
   artifact itself.
-- **Figma/Stitch MCP output is input only.** Anything handed off from
-  those tools is re-derived through the token system (phase 6) before it
-  touches Tailwind config — never copied through as final values.
 
 ## Core Reference Points
 

package/src/skills/motif-authoring/SKILL.md

@@ -0,0 +1,127 @@
+---
+name: motif-authoring
+description: Use whenever `landing-systems` authors the signature motif (Chain Method step 6, `hedgehog-landing-loop`) or `landing-builder` implements one from `src/motifs/`. Trigger on "draw the motif", "author the motif", "write src/motifs/". Picks the right construction technique — p5.js, CSS, or Canvas 2D — per motif type, and gives the technique for producing each without hand-typed coordinate guessing.
+---
+
+# Motif Authoring
+
+A motif is constructed from a formula or a measurement, never a
+hand-typed coordinate. Freehand numeric coordinates — a bezier control
+point, a magic pixel offset — are unreadable as numbers: there's no way
+to tell what a shape looks like from its raw values while writing them,
+so hand-typed geometry drifts into lumpy, asymmetric, or misaligned
+results that read as generic rather than the sourced, deliberate motif
+step 6 specifies.
+
+## Pick the technique from the motif type
+
+`landing-systems` step 6 names the motif's source, persistence,
+continuity, scale range, and literalness. That spec determines which of
+three techniques applies — pick one, don't mix by default:
+
+1. **Organic / generative** (a material's grain, a growth pattern, a
+   natural form that evolves) → **p5.js**. Write the motif as a rule —
+   noise, jitter, growth, a formula-driven point set — not a curve typed
+   out point by point. The generator is legible and adjustable; a
+   hand-typed curve is neither.
+2. **Static geometric** (a spine, a chevron, a blob, a simple silhouette
+   that doesn't need to evolve) → **CSS** (`clip-path`, gradients,
+   `border-radius`). Build the shape from `clip-path` polygon/shape
+   functions, layered gradients, or `border-radius` percentage strings —
+   values you can reason about exactly, animatable directly by GSAP
+   (e.g. tweening a `border-radius` string in place of shape morphing).
+3. **Measured / connective** (a thread, a line, a connector that must
+   align to real element positions across the page) → **Canvas 2D with
+   computed coordinates**. Measure the actual DOM positions
+   (`getBoundingClientRect` or equivalent) at draw time and derive the
+   path from those measured values — never an eyeballed or imagined
+   coordinate.
+
+## The rule within each technique
+
+**Never hand-write multi-point geometry as raw guessed numbers**, in any
+of the three:
+
+- **p5.js** — construct from a formula (sine-based waveform, noise
+  function, L-system, Voronoi cell, particle rule) with named parameters,
+  not a manually plotted point list. Express motif variation
+  (augmentation/inversion/retrograde, per `landing-systems` step 6's
+  music-theory vocabulary) as parameter changes on the same generator,
+  not a hand-edited copy.
+  - Use **instance mode** (`new p5(sketch, container)`), not global mode
+    — a global-mode sketch leaks `setup`/`draw`/every p5 function onto
+    `window`, which collides with Astro's own module scope and with
+    GSAP/ScrollTrigger's own render loop running on the same page.
+  - Seed every source of randomness explicitly —
+    `p.randomSeed(seed); p.noiseSeed(seed);` — with a fixed, committed
+    seed value. This is what makes "derive from a formula" mean anything
+    in practice: the same seed must always reproduce the exact same
+    motif, so a reviewer (or `landing-critic`) can re-run it and get the
+    committed result, not a fresh roll.
+  - Collect the formula's inputs (particle count, noise scale, growth
+    rate, angle — whatever the generator exposes) into one named
+    `params` object at the top of the sketch, not scattered magic
+    numbers through `draw()`. This is the same object the "state the
+    parameters and what each one is for" verification step below reads
+    from — an ungrouped generator is harder to audit, not just harder to
+    read.
+  - Mount inside a `client:*` island only where the sequencer's beat
+    structure actually calls for the motif to animate; a motif that's
+    static per section doesn't need a live p5 instance at all — render
+    once and let CSS/GSAP handle any transform-level movement instead.
+- **CSS** — build from `clip-path`'s named shape functions
+  (`polygon()`, `circle()`, `ellipse()`, `inset()` with rounded corners)
+  or `border-radius`'s percentage syntax, composed via layering and
+  transforms (rotate, scale, translate) rather than freehand
+  percentages guessed to "look right."
+- **Canvas 2D** — derive every coordinate from a measurement (a DOM
+  element's rect, a computed grid position, a formula applied to those
+  measurements) — never a literal pixel value typed from eyeballing the
+  page.
+
+## Verifying a motif before committing it
+
+A motif is not correct because it compiles. Before writing it into
+`src/motifs/` and handing off:
+
+- **Render it and look.** Use the Bash tool to run the dev server or a
+  standalone preview and view the actual output — don't judge geometry
+  or a Canvas draw call from the source alone.
+- **State the construction's parameters and what each one is for** — a
+  p5.js formula's inputs, a `clip-path` shape's control values, a Canvas
+  draw's measured inputs — before accepting it. If you can't say why a
+  value is what it is, it was guessed, not authored — redo it via the
+  technique's proper primitives.
+- **For p5.js, confirm the seed is fixed and committed**, not left to
+  default/time-based randomness — re-running the sketch must reproduce
+  the exact motif that was reviewed, not a new variation each load.
+- **Check symmetry/proportion deliberately** where the source motif
+  implies it (step 6's "literalness" and "scale range" fields).
+- **Prefer fewer parameters.** A motif with 4 deliberate formula inputs
+  or shape values reads as designed; one with 20 guessed numbers reads as
+  noise, regardless of what it depicts.
+
+## Constraints
+
+- This skill governs *how* the motif is constructed, not *what* it is —
+  the source, persistence, continuity, scale range, and literalness are
+  `landing-systems` step 6's decisions (see `landing-systems.md`); this
+  skill only prevents the geometry itself from being guessed.
+- Don't reach for an icon library or stock asset as a shortcut around
+  hard geometry — `landing-systems`'s existing constraint against generic
+  decoration still applies. A hard-to-construct motif is a signal to
+  simplify the formula or measurement, not to substitute a decorative
+  asset.
+- **Never hand-write an SVG `<path d="...">` with freehand bezier
+  coordinates**, even as a fallback when none of the three techniques
+  above feels like a clean fit. Bezier control points typed as raw
+  numbers are unreadable — there's no way to tell what a curve looks
+  like from its `d` string while writing it, so hand-typed paths drift
+  into lumpy, asymmetric, or self-intersecting geometry regardless of
+  how carefully they're written. If a motif genuinely doesn't fit p5.js,
+  CSS, or Canvas 2D, that's a signal to reconsider the motif's source or
+  literalness with `landing-systems` — not a reason to fall back to
+  hand-authored SVG.
+- `landing-builder` implements the motif exactly as authored here — a
+  motif that's hard to render cleanly should be fixed at this step, not
+  smoothed over during build.

package/src/templates/CLAUDE.core.landing-page.md

@@ -65,23 +65,29 @@ edited after a phase closes.
 ### Stack (locked, every project — no add-ons on this core)
 
 **Astro** (zero-JS-by-default shell, islands only where interaction is
-genuinely needed) · **Tailwind** (config as token layer only — no
-component library on top) · **GSAP + ScrollTrigger** (primary animation
-engine; owns Sequencer pacing and top/heart/base fade timing) ·
-**Lenis** (smooth-scroll feel) · **SVG-first** (hand-authored graphics
-for the motif — no icon library or generator look) · **SplitType**
-(line/word/char copy-reveal splitting) · **Paper.js** (canvas vector
-work for a motif that evolves across sections) · **MorphSVGPlugin**
-(GSAP — for a motif that physically transforms across sections) ·
-**custom SVG noise/grain filter** (cheap materiality/texture layer) ·
-**React Three Fiber** (rare — only when the subject is genuinely
-spatial; default is to skip it).
+genuinely needed) · **Tailwind v4, CSS-first** (config as token layer
+only — no component library on top) · **GSAP + ScrollTrigger**, scoped to
+CSS/transform targets only, no plugins (primary animation engine; owns
+Sequencer pacing and top/heart/base fade timing) · **Lenis** (smooth-
+scroll feel, the "weight and suspension" dial) · **SplitType**
+(line/word/char copy-reveal splitting) · **p5.js** (organic/generative
+motifs — described as a rule: noise, jitter, growth — not hand-typed path
+data) · **CSS `clip-path` / gradients / `border-radius`** (static
+geometric motifs — spines, chevrons, blobs — GSAP-animatable directly,
+zero coordinate-guessing risk) · **Canvas 2D with computed coordinates**
+(measured/connective motifs — threads/lines that align to real DOM
+positions, drawn from measured values) · **`ogl`** (lightweight WebGL) or
+a raw shader (a continuous background field spanning the full page
+height, so sections read as windows onto one surface) · **CSS
+`clip-path` irregular edges + `mix-blend-mode` overlap + negative-margin
+overlap** (section boundary treatment — breaks the hard horizontal seam
+between sections without a new dependency) · **CSS `mask-image` + noise
+pattern** (texture/grain layer) · **React Three Fiber** (rare — only when
+the subject is genuinely spatial; default is to skip it).
 
-Figma MCP / Stitch MCP are handoff/input tools only, used at the
-Strategist/Builder boundaries — never allowed to set spacing or style
-defaults directly. Anything they hand off is re-derived through the
-Systems Designer's token system (step 5) before it touches Tailwind
-config.
+This core has no design-handoff tool. All visual decisions are derived
+directly through the Systems Designer's token system (step 5) and the
+motif techniques above — never imported from an external design file.
 
 Don't substitute libraries. If a package name changed upstream, verify
 against current docs before running — don't swap in a different one, and
@@ -90,16 +96,22 @@ above doesn't cover; that gap is a signal to go back to the Ingredient
 Vocabulary and derive the right choice, not to default to something
 off-the-shelf.
 
+Motifs are always constructed from a formula or a measurement, never
+hand-typed coordinates: an organic motif is a p5.js rule (noise, jitter,
+growth), a static geometric motif is CSS (`clip-path`, gradients,
+`border-radius`), and a measured/connective motif is Canvas 2D drawn from
+real DOM positions. See the `motif-authoring` skill for the technique
+per motif type.
+
 ### Layout
 
 ```
 astro.config.mjs     Astro workspace root
-tailwind.config.ts    token layer only — hex values, type roles, spacing unit, easing family from Step 5
 src/
   pages/              one file per page (usually just index.astro)
   sections/           one component per page section, in Sequencer order
-  motifs/             the signature SVG/Paper.js motif + its variation rules
-  styles/             global.css — Tailwind import + CSS variable theme
+  motifs/             the signature motif (p5.js / CSS / Canvas 2D) + its variation rules
+  styles/             global.css — Tailwind v4 CSS-first import + the `@theme` token layer (hex values, type roles, spacing unit, easing family from Step 5)
 .hedgehog/
   BMAD/               vendored BMAD-METHOD shelf's raw output (brief, PR-FAQ, PRD, UX spec, research) —
                        write-once, from planner