@jaimevalasek/aioson 1.6.0 → 1.7.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (275) hide show
  1. package/CHANGELOG.md +74 -0
  2. package/README.md +729 -232
  3. package/docs/design-previews/pt.squarespace.com-homepage.html +889 -0
  4. package/docs/integrations/sdlc-genius-boundary.md +76 -0
  5. package/docs/integrations/sdlc-genius-eval-matrix.md +75 -0
  6. package/docs/integrations/sdlc-genius-install-checklist.md +93 -0
  7. package/docs/integrations/sdlc-genius-review-samples.md +86 -0
  8. package/docs/pt/README.md +3 -0
  9. package/docs/pt/agentes.md +1 -0
  10. package/docs/pt/comandos-cli.md +888 -2
  11. package/docs/pt/design-hybrid-forge.md +255 -6
  12. package/docs/pt/devlog-pipeline.md +270 -0
  13. package/docs/pt/fluxo-artefatos.md +178 -0
  14. package/docs/pt/hooks-session-guard.md +454 -0
  15. package/docs/pt/monitor-de-contexto.md +59 -5
  16. package/docs/pt/sdd-automation-scripts.md +557 -0
  17. package/docs/pt/site-forge.md +309 -0
  18. package/docs/pt/spec-learnings-pipeline.md +265 -0
  19. package/package.json +1 -1
  20. package/src/a2a/client.js +165 -0
  21. package/src/a2a/server.js +223 -0
  22. package/src/cli.js +235 -1
  23. package/src/commands/agent-audit.js +397 -0
  24. package/src/commands/agent-export-skill.js +229 -0
  25. package/src/commands/artifact-validate.js +189 -0
  26. package/src/commands/brief-gen.js +405 -0
  27. package/src/commands/brief-validate.js +65 -0
  28. package/src/commands/classify.js +256 -0
  29. package/src/commands/context-compact.js +49 -0
  30. package/src/commands/context-health.js +175 -0
  31. package/src/commands/context-monitor.js +71 -0
  32. package/src/commands/context-trim.js +177 -0
  33. package/src/commands/detect-test-runner.js +55 -0
  34. package/src/commands/devlog-export-brains.js +27 -0
  35. package/src/commands/devlog-process.js +292 -0
  36. package/src/commands/devlog-watch.js +131 -0
  37. package/src/commands/feature-close.js +165 -0
  38. package/src/commands/gate-check.js +228 -0
  39. package/src/commands/hooks-emit.js +253 -0
  40. package/src/commands/hooks-install.js +347 -0
  41. package/src/commands/learning-auto-promote.js +195 -0
  42. package/src/commands/learning-evolve.js +18 -9
  43. package/src/commands/learning-export.js +103 -0
  44. package/src/commands/learning-rollback.js +164 -0
  45. package/src/commands/live.js +25 -1
  46. package/src/commands/pattern-detect.js +33 -0
  47. package/src/commands/preflight-context.js +30 -0
  48. package/src/commands/preflight.js +208 -0
  49. package/src/commands/pulse-update.js +130 -0
  50. package/src/commands/runner-daemon.js +274 -0
  51. package/src/commands/runner-plan.js +70 -0
  52. package/src/commands/runner-queue-from-plan.js +166 -0
  53. package/src/commands/runner-queue.js +189 -0
  54. package/src/commands/runner-run.js +129 -0
  55. package/src/commands/runtime.js +47 -1
  56. package/src/commands/self-implement-loop.js +256 -0
  57. package/src/commands/session-guard.js +218 -0
  58. package/src/commands/sizing.js +165 -0
  59. package/src/commands/skill.js +65 -0
  60. package/src/commands/spec-checkpoint.js +177 -0
  61. package/src/commands/spec-status.js +79 -0
  62. package/src/commands/spec-sync.js +190 -0
  63. package/src/commands/spec-tasks.js +288 -0
  64. package/src/commands/squad-autorun.js +1220 -0
  65. package/src/commands/squad-bus.js +217 -0
  66. package/src/commands/squad-card.js +149 -0
  67. package/src/commands/squad-daemon.js +134 -0
  68. package/src/commands/squad-dependency-graph.js +164 -0
  69. package/src/commands/squad-review.js +106 -0
  70. package/src/commands/squad-scaffold.js +55 -0
  71. package/src/commands/squad-tool-register.js +157 -0
  72. package/src/commands/state-save.js +122 -0
  73. package/src/commands/update.js +2 -0
  74. package/src/commands/verify-gate.js +572 -0
  75. package/src/commands/workflow-execute.js +241 -0
  76. package/src/constants.js +22 -0
  77. package/src/install-profile.js +2 -2
  78. package/src/install-wizard.js +3 -2
  79. package/src/installer.js +6 -0
  80. package/src/lib/health-check.js +158 -0
  81. package/src/lib/hook-protocol.js +76 -0
  82. package/src/mcp/apps/squad-dashboard/app.js +163 -0
  83. package/src/mcp/apps/squad-dashboard/index.html +261 -0
  84. package/src/mcp/apps/squad-dashboard/mcp-manifest.json +23 -0
  85. package/src/mcp/resources/squad-state.js +130 -0
  86. package/src/preflight-engine.js +443 -0
  87. package/src/runner/cascade.js +97 -0
  88. package/src/runner/cli-launcher.js +109 -0
  89. package/src/runner/plan-importer.js +63 -0
  90. package/src/runner/queue-store.js +159 -0
  91. package/src/runtime-store.js +61 -3
  92. package/src/squad/agent-teams-adapter.js +264 -0
  93. package/src/squad/brief-validator.js +350 -0
  94. package/src/squad/bus-bridge.js +140 -0
  95. package/src/squad/context-compactor.js +265 -0
  96. package/src/squad/cross-ai-synthesizer.js +250 -0
  97. package/src/squad/hooks-generator.js +196 -0
  98. package/src/squad/inter-squad-events.js +175 -0
  99. package/src/squad/intra-bus.js +345 -0
  100. package/src/squad/learning-extractor.js +213 -0
  101. package/src/squad/pattern-detector.js +365 -0
  102. package/src/squad/preflight-context.js +296 -0
  103. package/src/squad/recovery-context.js +242 -71
  104. package/src/squad/reflection.js +365 -0
  105. package/src/squad/squad-scaffold.js +177 -0
  106. package/src/squad/state-manager.js +310 -0
  107. package/src/squad/task-decomposer.js +652 -0
  108. package/src/squad/verify-gate.js +303 -0
  109. package/src/updater.js +4 -5
  110. package/src/worker-runner.js +186 -1
  111. package/template/.aioson/agents/analyst.md +62 -1
  112. package/template/.aioson/agents/architect.md +61 -1
  113. package/template/.aioson/agents/copywriter.md +463 -0
  114. package/template/.aioson/agents/design-hybrid-forge.md +14 -0
  115. package/template/.aioson/agents/dev.md +271 -25
  116. package/template/.aioson/agents/deyvin.md +67 -8
  117. package/template/.aioson/agents/discovery-design-doc.md +44 -0
  118. package/template/.aioson/agents/genome.md +14 -0
  119. package/template/.aioson/agents/neo.md +83 -2
  120. package/template/.aioson/agents/orache.md +50 -4
  121. package/template/.aioson/agents/orchestrator.md +197 -1
  122. package/template/.aioson/agents/pm.md +35 -0
  123. package/template/.aioson/agents/product.md +50 -5
  124. package/template/.aioson/agents/profiler-enricher.md +14 -0
  125. package/template/.aioson/agents/profiler-forge.md +14 -0
  126. package/template/.aioson/agents/profiler-researcher.md +14 -0
  127. package/template/.aioson/agents/qa.md +273 -21
  128. package/template/.aioson/agents/setup.md +96 -10
  129. package/template/.aioson/agents/sheldon.md +131 -6
  130. package/template/.aioson/agents/site-forge.md +1753 -0
  131. package/template/.aioson/agents/squad.md +352 -0
  132. package/template/.aioson/agents/tester.md +53 -0
  133. package/template/.aioson/agents/ux-ui.md +203 -4
  134. package/template/.aioson/brains/README.md +128 -0
  135. package/template/.aioson/brains/_index.json +16 -0
  136. package/template/.aioson/brains/scripts/query.js +103 -0
  137. package/template/.aioson/brains/site-forge/visual-patterns.brain.json +205 -0
  138. package/template/.aioson/config.md +143 -13
  139. package/template/.aioson/constitution.md +33 -0
  140. package/template/.aioson/context/project-pulse.md +34 -0
  141. package/template/.aioson/docs/LAYERS.md +79 -0
  142. package/template/.aioson/docs/README.md +76 -0
  143. package/template/.aioson/docs/example-external-api-context.md +72 -0
  144. package/template/.aioson/genomes/copywriting.md +204 -0
  145. package/template/.aioson/locales/en/agents/architect.md +17 -0
  146. package/template/.aioson/locales/en/agents/dev.md +79 -13
  147. package/template/.aioson/locales/en/agents/orache.md +6 -0
  148. package/template/.aioson/locales/en/agents/orchestrator.md +24 -0
  149. package/template/.aioson/locales/en/agents/product.md +50 -0
  150. package/template/.aioson/locales/en/agents/sheldon.md +115 -0
  151. package/template/.aioson/locales/en/agents/squad.md +14 -0
  152. package/template/.aioson/locales/en/agents/tester.md +6 -0
  153. package/template/.aioson/locales/es/agents/analyst.md +2 -0
  154. package/template/.aioson/locales/es/agents/architect.md +19 -0
  155. package/template/.aioson/locales/es/agents/dev.md +64 -4
  156. package/template/.aioson/locales/es/agents/deyvin.md +2 -0
  157. package/template/.aioson/locales/es/agents/discovery-design-doc.md +2 -0
  158. package/template/.aioson/locales/es/agents/genome.md +2 -0
  159. package/template/.aioson/locales/es/agents/neo.md +2 -0
  160. package/template/.aioson/locales/es/agents/orache.md +2 -0
  161. package/template/.aioson/locales/es/agents/orchestrator.md +26 -0
  162. package/template/.aioson/locales/es/agents/pair.md +2 -0
  163. package/template/.aioson/locales/es/agents/pm.md +2 -0
  164. package/template/.aioson/locales/es/agents/product.md +52 -0
  165. package/template/.aioson/locales/es/agents/profiler-enricher.md +2 -0
  166. package/template/.aioson/locales/es/agents/profiler-forge.md +2 -0
  167. package/template/.aioson/locales/es/agents/profiler-researcher.md +2 -0
  168. package/template/.aioson/locales/es/agents/qa.md +2 -0
  169. package/template/.aioson/locales/es/agents/setup.md +2 -0
  170. package/template/.aioson/locales/es/agents/sheldon.md +117 -0
  171. package/template/.aioson/locales/es/agents/squad.md +16 -0
  172. package/template/.aioson/locales/es/agents/tester.md +9 -0
  173. package/template/.aioson/locales/es/agents/ux-ui.md +2 -0
  174. package/template/.aioson/locales/fr/agents/analyst.md +2 -0
  175. package/template/.aioson/locales/fr/agents/architect.md +19 -0
  176. package/template/.aioson/locales/fr/agents/dev.md +64 -4
  177. package/template/.aioson/locales/fr/agents/deyvin.md +2 -0
  178. package/template/.aioson/locales/fr/agents/discovery-design-doc.md +2 -0
  179. package/template/.aioson/locales/fr/agents/genome.md +2 -0
  180. package/template/.aioson/locales/fr/agents/neo.md +2 -0
  181. package/template/.aioson/locales/fr/agents/orache.md +2 -0
  182. package/template/.aioson/locales/fr/agents/orchestrator.md +26 -0
  183. package/template/.aioson/locales/fr/agents/pair.md +2 -0
  184. package/template/.aioson/locales/fr/agents/pm.md +2 -0
  185. package/template/.aioson/locales/fr/agents/product.md +52 -0
  186. package/template/.aioson/locales/fr/agents/profiler-enricher.md +2 -0
  187. package/template/.aioson/locales/fr/agents/profiler-forge.md +2 -0
  188. package/template/.aioson/locales/fr/agents/profiler-researcher.md +2 -0
  189. package/template/.aioson/locales/fr/agents/qa.md +2 -0
  190. package/template/.aioson/locales/fr/agents/setup.md +2 -0
  191. package/template/.aioson/locales/fr/agents/sheldon.md +117 -0
  192. package/template/.aioson/locales/fr/agents/squad.md +16 -0
  193. package/template/.aioson/locales/fr/agents/tester.md +9 -0
  194. package/template/.aioson/locales/fr/agents/ux-ui.md +2 -0
  195. package/template/.aioson/locales/pt-BR/agents/analyst.md +64 -3
  196. package/template/.aioson/locales/pt-BR/agents/architect.md +42 -0
  197. package/template/.aioson/locales/pt-BR/agents/dev.md +147 -14
  198. package/template/.aioson/locales/pt-BR/agents/deyvin.md +47 -0
  199. package/template/.aioson/locales/pt-BR/agents/neo.md +62 -1
  200. package/template/.aioson/locales/pt-BR/agents/orchestrator.md +158 -2
  201. package/template/.aioson/locales/pt-BR/agents/pm.md +95 -1
  202. package/template/.aioson/locales/pt-BR/agents/product.md +145 -18
  203. package/template/.aioson/locales/pt-BR/agents/qa.md +16 -0
  204. package/template/.aioson/locales/pt-BR/agents/setup.md +101 -18
  205. package/template/.aioson/locales/pt-BR/agents/sheldon.md +132 -1
  206. package/template/.aioson/locales/pt-BR/agents/squad.md +14 -0
  207. package/template/.aioson/locales/pt-BR/agents/tester.md +449 -0
  208. package/template/.aioson/rules/README.md +69 -0
  209. package/template/.aioson/rules/data-format-convention.md +136 -0
  210. package/template/.aioson/rules/example-monetary-values.md +30 -0
  211. package/template/.aioson/schemas/squad-manifest.schema.json +124 -3
  212. package/template/.aioson/skills/design/cognitive-core-ui/references/motion.md +2 -0
  213. package/template/.aioson/skills/design/pt.squarespace.com/.skill-meta.json +31 -0
  214. package/template/.aioson/skills/design/pt.squarespace.com/SKILL.md +66 -0
  215. package/template/.aioson/skills/design/pt.squarespace.com/references/components.md +368 -0
  216. package/template/.aioson/skills/design/pt.squarespace.com/references/design-tokens.md +150 -0
  217. package/template/.aioson/skills/design/pt.squarespace.com/references/motion.md +270 -0
  218. package/template/.aioson/skills/design/pt.squarespace.com/references/patterns.md +189 -0
  219. package/template/.aioson/skills/design/pt.squarespace.com/references/websites.md +165 -0
  220. package/template/.aioson/skills/marketing/references/anti-patterns.md +254 -0
  221. package/template/.aioson/skills/marketing/references/fascinations.md +192 -0
  222. package/template/.aioson/skills/marketing/references/five-acts.md +248 -0
  223. package/template/.aioson/skills/marketing/references/market-intelligence.md +198 -0
  224. package/template/.aioson/skills/marketing/references/offer-structure.md +203 -0
  225. package/template/.aioson/skills/marketing/references/one-belief.md +149 -0
  226. package/template/.aioson/skills/marketing/references/patterns.md +218 -0
  227. package/template/.aioson/skills/marketing/references/pms-research.md +193 -0
  228. package/template/.aioson/skills/marketing/vsl-craft.md +385 -0
  229. package/template/.aioson/skills/process/aioson-spec-driven/SKILL.md +1 -0
  230. package/template/.aioson/skills/process/aioson-spec-driven/references/analyst.md +30 -0
  231. package/template/.aioson/skills/process/aioson-spec-driven/references/architect.md +23 -0
  232. package/template/.aioson/skills/process/aioson-spec-driven/references/dev.md +47 -0
  233. package/template/.aioson/skills/process/aioson-spec-driven/references/deyvin.md +27 -0
  234. package/template/.aioson/skills/process/aioson-spec-driven/references/maintenance-and-state.md +35 -0
  235. package/template/.aioson/skills/process/aioson-spec-driven/references/product.md +25 -0
  236. package/template/.aioson/skills/process/aioson-spec-driven/references/qa.md +30 -0
  237. package/template/.aioson/skills/process/aioson-spec-driven/references/sheldon.md +25 -0
  238. package/template/.aioson/skills/process/design-hybrid-forge/SKILL.md +4 -1
  239. package/template/.aioson/skills/process/design-hybrid-forge/references/output-contract.md +15 -0
  240. package/template/.aioson/skills/process/design-hybrid-forge/references/pair-compatibility.md +32 -0
  241. package/template/.aioson/skills/process/design-hybrid-forge/references/quality-gates.md +20 -0
  242. package/template/.aioson/skills/process/simplify/SKILL.md +173 -0
  243. package/template/.aioson/skills/static/context-budget-guide.md +46 -0
  244. package/template/.aioson/skills/static/harness-sensors.md +74 -0
  245. package/template/.aioson/skills/static/landing-page-deploy.md +192 -0
  246. package/template/.aioson/skills/static/landing-page-forge.md +730 -0
  247. package/template/.aioson/skills/static/multi-agent-patterns.md +43 -0
  248. package/template/.aioson/skills/static/react-motion-patterns.md +22 -0
  249. package/template/.aioson/skills/static/static-html-patterns/checklists.md +43 -0
  250. package/template/.aioson/skills/static/static-html-patterns/css-tokens.md +609 -0
  251. package/template/.aioson/skills/static/static-html-patterns/motion.md +193 -0
  252. package/template/.aioson/skills/static/static-html-patterns/premium.md +711 -0
  253. package/template/.aioson/skills/static/static-html-patterns/structure.md +209 -0
  254. package/template/.aioson/skills/static/static-html-patterns/utilities.md +190 -0
  255. package/template/.aioson/skills/static/static-html-patterns.md +58 -1913
  256. package/template/.aioson/skills/static/threejs-patterns.md +929 -0
  257. package/template/.aioson/skills/static/ui-ux-modern.md +1 -0
  258. package/template/.aioson/skills/static/web-research-cache.md +112 -0
  259. package/template/.aioson/tasks/implementation-plan.md +21 -1
  260. package/template/.aioson/tasks/squad-create.md +22 -0
  261. package/template/.aioson/tasks/squad-design.md +30 -0
  262. package/template/.aioson/templates/squads/digital-marketing-agency/template.json +96 -0
  263. package/template/.claude/commands/aioson/agent/design-hybrid-forge.md +5 -0
  264. package/template/.claude/commands/aioson/agent/orache.md +5 -0
  265. package/template/.claude/commands/aioson/agent/sheldon.md +5 -0
  266. package/template/.claude/commands/aioson/agent/site-forge.md +5 -0
  267. package/template/AGENTS.md +55 -3
  268. package/template/CLAUDE.md +31 -0
  269. package/template/OPENCODE.md +4 -0
  270. package/template/researchs/.gitkeep +0 -0
  271. package/template/.aioson/skills/design-system/components/SKILL.md:Zone.Identifier +0 -0
  272. package/template/.aioson/skills/design-system/dashboards/SKILL.md:Zone.Identifier +0 -0
  273. package/template/.aioson/skills/design-system/foundations/SKILL.md:Zone.Identifier +0 -0
  274. package/template/.aioson/skills/design-system/motion/SKILL.md:Zone.Identifier +0 -0
  275. package/template/.aioson/skills/design-system/patterns/SKILL.md:Zone.Identifier +0 -0
package/template/.aioson/skills/static/threejs-patterns.md ADDED
@@ -0,0 +1,929 @@
1
+ # Three.js Patterns — WebGL Landing Page Production Guide
2
+
3
+ > Read this skill when the user explicitly asks for 3D, WebGL, particles, Three.js scenes,
4
+ > holographic effects, or spatial visuals. This is on-demand — never auto-loaded.
5
+ > CDN-only. No build step. No npm install required for basic patterns.
6
+
7
+ ---
8
+
9
+ ## When to apply this skill
10
+
11
+ Apply this skill when the user requests:
12
+ - "3D", "WebGL", "three.js", "Three.js"
13
+ - "partículas", "particles", "sistema de partículas"
14
+ - "cena 3D", "3D scene", "objeto 3D interativo"
15
+ - "holográfico", "holographic", "hologram effect"
16
+ - "floating 3D", "3D objects", "interactive 3D"
17
+ - "hero 3D", "3D background", "particle background"
18
+ - `design_skill: threejs-spatial` set in `project.context.md`
19
+ - Three.js as a hybrid modifier in `@design-hybrid-forge`
20
+
21
+ Do NOT apply this skill for: card tilt CSS, scroll reveals, gradient text, or any
22
+ pattern already covered by `static-html-patterns.md`. Those are CSS-only and faster.
23
+
24
+ **Stack rule:** This skill produces standalone `index.html` with CDN imports.
25
+ For React/Vue/Next.js projects, adapt the patterns to framework conventions
26
+ (React Three Fiber, TresJS, etc.) — the visual outcome is the same.
27
+
28
+ ---
29
+
30
+ ## Dependencies — CDN-only (no npm)
31
+
32
+ ```html
33
+ <!-- Importmap for clean ES module imports -->
34
+ <script type="importmap">
35
+ {
36
+ "imports": {
37
+ "three": "https://unpkg.com/three@0.160.0/build/three.module.js",
38
+ "three/addons/": "https://unpkg.com/three@0.160.0/examples/jsm/"
39
+ }
40
+ }
41
+ </script>
42
+
43
+ <!-- OrbitControls (optional, for interactive scenes) -->
44
+ <script type="module">
45
+ import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
46
+ </script>
47
+
48
+ <!-- No GSAP needed — Three.js has its own animation system via requestAnimationFrame -->
49
+ ```
50
+
51
+ ---
52
+
53
+ ## Performance Rules
54
+
55
+ 1. **Always check WebGL support first** — fallback to CSS aurora gradient if unavailable
56
+ 2. **`prefers-reduced-motion: reduce`** — skip entire canvas, show static image or CSS fallback
57
+ 3. **Mobile: reduced particle count** — detect mobile, cut particles to 30% of desktop
58
+ 4. **Lazy initialization** — don't init the renderer until the canvas is in viewport
59
+ 5. **Dispose on unmount** — always call `renderer.dispose()` and dispose geometries/materials/textures
60
+ 6. **Use `IntersectionObserver`** — only run render loop when canvas is visible
61
+
62
+ ---
63
+
64
+ ## 1. Particle Aurora Hero Background
65
+
66
+ **For:** Bold & Cinematic hero sections, crypto/AI/SaaS landing pages
67
+ **Complexity:** Low. ~80 lines of JS. Works on mobile with reduced count.
68
+ **Visual:** 3,000–8,000 particles drifting in aurora gradient colors, responding subtly to mouse.
69
+
70
+ ```html
71
+ <!DOCTYPE html>
72
+ <html lang="en">
73
+ <head>
74
+ <meta charset="UTF-8">
75
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
76
+ <title>Product — Hero</title>
77
+ <style>
78
+ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
79
+ html, body { width: 100%; height: 100%; overflow: hidden; }
80
+ body { background: #060910; font-family: system-ui, sans-serif; }
81
+
82
+ #hero-canvas {
83
+ position: fixed;
84
+ inset: 0;
85
+ width: 100%;
86
+ height: 100%;
87
+ z-index: 0;
88
+ }
89
+
90
+ .hero-content {
91
+ position: relative;
92
+ z-index: 10;
93
+ display: flex;
94
+ flex-direction: column;
95
+ align-items: center;
96
+ justify-content: center;
97
+ height: 100vh;
98
+ text-align: center;
99
+ color: #f0f4ff;
100
+ }
101
+
102
+ .hero-content h1 {
103
+ font-size: clamp(2.5rem, 8vw, 5rem);
104
+ font-weight: 800;
105
+ letter-spacing: -0.03em;
106
+ line-height: 1.1;
107
+ max-width: 900px;
108
+ padding: 0 2rem;
109
+ }
110
+
111
+ .hero-content p {
112
+ font-size: clamp(1rem, 2.5vw, 1.25rem);
113
+ color: rgba(240, 244, 255, 0.7);
114
+ margin-top: 1.5rem;
115
+ max-width: 540px;
116
+ padding: 0 2rem;
117
+ }
118
+
119
+ .hero-cta {
120
+ margin-top: 2.5rem;
121
+ display: flex;
122
+ gap: 1rem;
123
+ }
124
+
125
+ .hero-cta a {
126
+ padding: 0.875rem 2rem;
127
+ border-radius: 8px;
128
+ font-weight: 600;
129
+ font-size: 1rem;
130
+ text-decoration: none;
131
+ transition: transform 150ms ease, box-shadow 150ms ease;
132
+ }
133
+
134
+ .hero-cta a:hover {
135
+ transform: translateY(-2px);
136
+ }
137
+
138
+ .btn-primary {
139
+ background: linear-gradient(135deg, #00C8E8, #7C3AED);
140
+ color: #fff;
141
+ box-shadow: 0 4px 20px rgba(0, 200, 232, 0.3);
142
+ }
143
+
144
+ .btn-ghost {
145
+ background: rgba(255, 255, 255, 0.08);
146
+ color: #f0f4ff;
147
+ border: 1px solid rgba(255, 255, 255, 0.15);
148
+ backdrop-filter: blur(8px);
149
+ }
150
+
151
+ @media (prefers-reduced-motion: reduce) {
152
+ #hero-canvas { display: none; }
153
+ body { background: linear-gradient(135deg, #060910 0%, #0A0818 30%, #060C1A 70%, #08060F 100%); }
154
+ }
155
+ </style>
156
+ </head>
157
+ <body>
158
+
159
+ <canvas id="hero-canvas"></canvas>
160
+
161
+ <section class="hero-content">
162
+ <h1>Bold Headline That <em style="background: linear-gradient(135deg, #00C8E8, #7C3AED); -webkit-background-clip: text; -webkit-text-fill-color: transparent;">Changes Everything</em></h1>
163
+ <p>Supporting text that adds real context — who benefits, how fast, what outcome.</p>
164
+ <div class="hero-cta">
165
+ <a href="#cta" class="btn-primary">Get started</a>
166
+ <a href="#features" class="btn-ghost">Learn more</a>
167
+ </div>
168
+ </section>
169
+
170
+ <script type="importmap">
171
+ {
172
+ "imports": {
173
+ "three": "https://unpkg.com/three@0.160.0/build/three.module.js"
174
+ }
175
+ }
176
+ </script>
177
+
178
+ <script type="module">
179
+ import * as THREE from 'three';
180
+
181
+ // ─── WebGL Support Check ───────────────────────────────────────────────────
182
+ const canvas = document.getElementById('hero-canvas');
183
+ const gl = canvas.getContext('webgl') || canvas.getContext('webgl2');
184
+ if (!gl) {
185
+ canvas.style.display = 'none';
186
+ document.body.style.background = 'linear-gradient(135deg, #060910 0%, #0A0818 30%, #060C1A 70%, #08060F 100%)';
187
+ }
188
+
189
+ // ─── prefers-reduced-motion ───────────────────────────────────────────────
190
+ const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
191
+ if (prefersReducedMotion) {
192
+ canvas.style.display = 'none';
193
+ document.body.style.background = 'linear-gradient(135deg, #060910 0%, #0A0818 30%, #060C1A 70%, #08060F 100%)';
194
+ }
195
+
196
+ // ─── Scene Setup ─────────────────────────────────────────────────────────
197
+ const scene = new THREE.Scene();
198
+ const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
199
+ camera.position.z = 50;
200
+
201
+ const renderer = new THREE.WebGLRenderer({
202
+ canvas,
203
+ alpha: true,
204
+ antialias: true,
205
+ powerPreference: 'high-performance'
206
+ });
207
+ renderer.setSize(window.innerWidth, window.innerHeight);
208
+ renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
209
+ renderer.setClearColor(0x000000, 0);
210
+
211
+ // ─── Particles ────────────────────────────────────────────────────────────
212
+ const isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);
213
+ const PARTICLE_COUNT = isMobile ? 1500 : 6000;
214
+
215
+ const geometry = new THREE.BufferGeometry();
216
+ const positions = new Float32Array(PARTICLE_COUNT * 3);
217
+ const colors = new Float32Array(PARTICLE_COUNT * 3);
218
+ const sizes = new Float32Array(PARTICLE_COUNT);
219
+
220
+ // Aurora colors: teal (#00C8E8), violet (#7C3AED), blue (#3B82F6), pink (#EC4899)
221
+ const palette = [
222
+ new THREE.Color('#00C8E8'),
223
+ new THREE.Color('#7C3AED'),
224
+ new THREE.Color('#3B82F6'),
225
+ new THREE.Color('#06B6D4'),
226
+ new THREE.Color('#8B5CF6'),
227
+ ];
228
+
229
+ for (let i = 0; i < PARTICLE_COUNT; i++) {
230
+ positions[i * 3] = (Math.random() - 0.5) * 120;
231
+ positions[i * 3 + 1] = (Math.random() - 0.5) * 80;
232
+ positions[i * 3 + 2] = (Math.random() - 0.5) * 60;
233
+
234
+ const color = palette[Math.floor(Math.random() * palette.length)];
235
+ colors[i * 3] = color.r;
236
+ colors[i * 3 + 1] = color.g;
237
+ colors[i * 3 + 2] = color.b;
238
+
239
+ sizes[i] = Math.random() * 0.8 + 0.2;
240
+ }
241
+
242
+ geometry.setAttribute('position', new THREE.BufferAttribute(positions, 3));
243
+ geometry.setAttribute('color', new THREE.BufferAttribute(colors, 3));
244
+ geometry.setAttribute('size', new THREE.BufferAttribute(sizes, 1));
245
+
246
+ // ─── Shader Material ─────────────────────────────────────────────────────
247
+ const vertexShader = `
248
+ attribute float size;
249
+ varying vec3 vColor;
250
+
251
+ void main() {
252
+ vColor = color;
253
+ vec4 mvPosition = modelViewMatrix * vec4(position, 1.0);
254
+ gl_PointSize = size * (300.0 / -mvPosition.z);
255
+ gl_Position = projectionMatrix * mvPosition;
256
+ }
257
+ `;
258
+
259
+ const fragmentShader = `
260
+ varying vec3 vColor;
261
+
262
+ void main() {
263
+ float dist = length(gl_PointCoord - vec2(0.5));
264
+ if (dist > 0.5) discard;
265
+ float alpha = 1.0 - smoothstep(0.2, 0.5, dist);
266
+ gl_FragColor = vec4(vColor, alpha * 0.8);
267
+ }
268
+ `;
269
+
270
+ const material = new THREE.ShaderMaterial({
271
+ uniforms: {
272
+ uTime: { value: 0 },
273
+ },
274
+ vertexShader,
275
+ fragmentShader,
276
+ transparent: true,
277
+ vertexColors: true,
278
+ depthWrite: false,
279
+ blending: THREE.AdditiveBlending,
280
+ });
281
+
282
+ const points = new THREE.Points(geometry, material);
283
+ scene.add(points);
284
+
285
+ // ─── Mouse Interaction ────────────────────────────────────────────────────
286
+ const mouse = new THREE.Vector2(0, 0);
287
+ const targetMouse = new THREE.Vector2(0, 0);
288
+
289
+ document.addEventListener('mousemove', (e) => {
290
+ targetMouse.x = (e.clientX / window.innerWidth) * 2 - 1;
291
+ targetMouse.y = -(e.clientY / window.innerHeight) * 2 + 1;
292
+ });
293
+
294
+ // ─── Animation Loop ───────────────────────────────────────────────────────
295
+ const clock = new THREE.Clock();
296
+ let animFrameId = null;
297
+
298
+ function animate() {
299
+ if (prefersReducedMotion) return;
300
+
301
+ animFrameId = requestAnimationFrame(animate);
302
+
303
+ const elapsed = clock.getElapsedTime();
304
+
305
+ // Smooth mouse follow
306
+ mouse.x += (targetMouse.x - mouse.x) * 0.02;
307
+ mouse.y += (targetMouse.y - mouse.y) * 0.02;
308
+
309
+ // Particle drift
310
+ const positions = geometry.attributes.position.array;
311
+ for (let i = 0; i < PARTICLE_COUNT; i++) {
312
+ positions[i * 3 + 1] += Math.sin(elapsed * 0.3 + i * 0.01) * 0.01;
313
+ positions[i * 3] += Math.cos(elapsed * 0.2 + i * 0.005) * 0.008;
314
+ }
315
+ geometry.attributes.position.needsUpdate = true;
316
+
317
+ // Camera sway (subtle)
318
+ camera.position.x = mouse.x * 3;
319
+ camera.position.y = mouse.y * 2;
320
+ camera.lookAt(scene.position);
321
+
322
+ // Particle rotation (very slow)
323
+ points.rotation.y = elapsed * 0.02;
324
+ points.rotation.x = Math.sin(elapsed * 0.1) * 0.05;
325
+
326
+ material.uniforms.uTime.value = elapsed;
327
+ renderer.render(scene, camera);
328
+ }
329
+
330
+ // ─── VisibilityObserver: only run when in viewport ─────────────────────
331
+ const observer = new IntersectionObserver((entries) => {
332
+ entries.forEach(entry => {
333
+ if (entry.isIntersecting) {
334
+ if (!animFrameId) animate();
335
+ } else {
336
+ cancelAnimationFrame(animFrameId);
337
+ animFrameId = null;
338
+ }
339
+ });
340
+ }, { threshold: 0 });
341
+ observer.observe(canvas);
342
+
343
+ // ─── Resize Handler ───────────────────────────────────────────────────────
344
+ window.addEventListener('resize', () => {
345
+ camera.aspect = window.innerWidth / window.innerHeight;
346
+ camera.updateProjectionMatrix();
347
+ renderer.setSize(window.innerWidth, window.innerHeight);
348
+ });
349
+
350
+ // ─── Cleanup on page unload ───────────────────────────────────────────────
351
+ window.addEventListener('beforeunload', () => {
352
+ renderer.dispose();
353
+ geometry.dispose();
354
+ material.dispose();
355
+ });
356
+ </script>
357
+ </body>
358
+ </html>
359
+ ```
360
+
361
+ ---
362
+
363
+ ## 2. Interactive 3D Object Showcase
364
+
365
+ **For:** Product features, 3D product display, interactive demos
366
+ **Complexity:** Medium. ~120 lines of JS. Includes OrbitControls.
367
+ **Visual:** A single 3D object (torus knot, icosahedron, or custom geometry) that the user can drag to rotate. Hover highlights with glow.
368
+
369
+ ```html
370
+ <!-- In your landing page, after the hero section -->
371
+ <section class="showcase-3d" id="showcase">
372
+ <div class="showcase-container">
373
+ <canvas id="showcase-canvas"></canvas>
374
+ <div class="showcase-content">
375
+ <span class="section-label">Interactive</span>
376
+ <h2>Explore the architecture</h2>
377
+ <p>Drag to rotate. Scroll to zoom. Every detail rendered in real-time 3D.</p>
378
+ </div>
379
+ </div>
380
+ </section>
381
+
382
+ <style>
383
+ .showcase-3d { min-height: 100vh; display: flex; align-items: center; justify-content: center; }
384
+ .showcase-container { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; max-width: 1200px; margin: 0 auto; padding: 4rem 2rem; }
385
+ #showcase-canvas { width: 100%; height: 500px; border-radius: 16px; background: transparent; cursor: grab; }
386
+ #showcase-canvas:active { cursor: grabbing; }
387
+ .showcase-content h2 { font-size: clamp(1.75rem, 4vw, 2.5rem); font-weight: 700; letter-spacing: -0.02em; }
388
+ .showcase-content p { margin-top: 1rem; color: rgba(240,244,255,0.65); line-height: 1.7; }
389
+ @media (max-width: 768px) { .showcase-container { grid-template-columns: 1fr; } }
390
+ @media (prefers-reduced-motion: reduce) { #showcase-canvas { display: none; } }
391
+ </style>
392
+
393
+ <script type="importmap">
394
+ {
395
+ "imports": {
396
+ "three": "https://unpkg.com/three@0.160.0/build/three.module.js",
397
+ "three/addons/": "https://unpkg.com/three@0.160.0/examples/jsm/"
398
+ }
399
+ }
400
+ </script>
401
+
402
+ <script type="module">
403
+ import * as THREE from 'three';
404
+ import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
405
+ import { EffectComposer } from 'three/addons/postprocessing/EffectComposer.js';
406
+ import { RenderPass } from 'three/addons/postprocessing/RenderPass.js';
407
+ import { UnrealBloomPass } from 'three/addons/postprocessing/UnrealBloomPass.js';
408
+
409
+ const canvas = document.getElementById('showcase-canvas');
410
+ const gl = canvas.getContext('webgl') || canvas.getContext('webgl2');
411
+ if (!gl || window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
412
+ canvas.style.display = 'none';
413
+ }
414
+
415
+ // Scene
416
+ const scene = new THREE.Scene();
417
+ const camera = new THREE.PerspectiveCamera(45, canvas.clientWidth / canvas.clientHeight, 0.1, 100);
418
+ camera.position.set(0, 0, 6);
419
+
420
+ const renderer = new THREE.WebGLRenderer({ canvas, alpha: true, antialias: true });
421
+ renderer.setSize(canvas.clientWidth, canvas.clientHeight);
422
+ renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
423
+ renderer.setClearColor(0x000000, 0);
424
+ renderer.toneMapping = THREE.ACESFilmicToneMapping;
425
+ renderer.toneMappingExposure = 1.2;
426
+
427
+ // Bloom post-processing
428
+ const composer = new EffectComposer(renderer);
429
+ composer.addPass(new RenderPass(scene, camera));
430
+ const bloomPass = new UnrealBloomPass(
431
+ new THREE.Vector2(canvas.clientWidth, canvas.clientHeight),
432
+ 0.8, 0.4, 0.85
433
+ );
434
+ composer.addPass(bloomPass);
435
+
436
+ // Object: TorusKnot with glass-like material
437
+ const geometry = new THREE.TorusKnotGeometry(1.5, 0.4, 128, 32, 2, 3);
438
+ const material = new THREE.MeshPhysicalMaterial({
439
+ color: new THREE.Color('#00C8E8'),
440
+ metalness: 0.1,
441
+ roughness: 0.1,
442
+ transmission: 0.6,
443
+ thickness: 1.5,
444
+ envMapIntensity: 1,
445
+ clearcoat: 1,
446
+ clearcoatRoughness: 0.1,
447
+ transparent: true,
448
+ opacity: 0.9,
449
+ });
450
+ const mesh = new THREE.Mesh(geometry, material);
451
+ scene.add(mesh);
452
+
453
+ // Lights
454
+ const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
455
+ scene.add(ambientLight);
456
+
457
+ const pointLight1 = new THREE.PointLight(0x00C8E8, 2, 50);
458
+ pointLight1.position.set(5, 5, 5);
459
+ scene.add(pointLight1);
460
+
461
+ const pointLight2 = new THREE.PointLight(0x7C3AED, 2, 50);
462
+ pointLight2.position.set(-5, -5, 5);
463
+ scene.add(pointLight2);
464
+
465
+ // OrbitControls
466
+ const controls = new OrbitControls(camera, renderer.domElement);
467
+ controls.enableDamping = true;
468
+ controls.dampingFactor = 0.05;
469
+ controls.enableZoom = true;
470
+ controls.enablePan = false;
471
+ controls.minDistance = 3;
472
+ controls.maxDistance = 10;
473
+ controls.autoRotate = true;
474
+ controls.autoRotateSpeed = 0.8;
475
+
476
+ // Subtle float animation
477
+ const clock = new THREE.Clock();
478
+ function animate() {
479
+ requestAnimationFrame(animate);
480
+ const elapsed = clock.getElapsedTime();
481
+ mesh.position.y = Math.sin(elapsed * 0.5) * 0.15;
482
+ controls.update();
483
+ composer.render();
484
+ }
485
+
486
+ // Only start when visible
487
+ const observer = new IntersectionObserver((entries) => {
488
+ entries.forEach(entry => {
489
+ if (entry.isIntersecting) {
490
+ animate();
491
+ observer.disconnect();
492
+ }
493
+ });
494
+ }, { threshold: 0.1 });
495
+ observer.observe(canvas);
496
+
497
+ window.addEventListener('resize', () => {
498
+ const w = canvas.clientWidth;
499
+ const h = canvas.clientHeight;
500
+ camera.aspect = w / h;
501
+ camera.updateProjectionMatrix();
502
+ renderer.setSize(w, h);
503
+ composer.setSize(w, h);
504
+ });
505
+ </script>
506
+ ```
507
+
508
+ ---
509
+
510
+ ## 3. Scroll-Driven 3D Parallax Layers
511
+
512
+ **For:** Landing pages where scrolling moves the camera through a 3D scene
513
+ **Complexity:** Medium. Uses scroll event + camera interpolation.
514
+ **Visual:** Multiple 3D planes positioned at different depths scroll at different rates.
515
+
516
+ ```html
517
+ <section class="parallax-3d-section" id="features-3d">
518
+ <canvas id="parallax-canvas"></canvas>
519
+
520
+ <div class="parallax-content" data-depth="0.1">
521
+ <h2>First Feature</h2>
522
+ <p>Content that moves with the scene.</p>
523
+ </div>
524
+
525
+ <div class="parallax-content" data-depth="0.3">
526
+ <h2>Second Feature</h2>
527
+ <p>Deeper layer, moves faster.</p>
528
+ </div>
529
+
530
+ <div class="parallax-content" data-depth="0.6">
531
+ <h2>Third Feature</h2>
532
+ <p>Closest layer, fastest parallax.</p>
533
+ </div>
534
+ </section>
535
+
536
+ <script type="importmap">{ "imports": { "three": "https://unpkg.com/three@0.160.0/build/three.module.js" } }</script>
537
+
538
+ <script type="module">
539
+ import * as THREE from 'three';
540
+
541
+ const canvas = document.getElementById('parallax-canvas');
542
+ if (!canvas.getContext('webgl') || window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
543
+ canvas.style.display = 'none';
544
+ }
545
+
546
+ const scene = new THREE.Scene();
547
+ const camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.1, 1000);
548
+ camera.position.z = 50;
549
+
550
+ const renderer = new THREE.WebGLRenderer({ canvas, alpha: true, antialias: true });
551
+ renderer.setSize(window.innerWidth, window.innerHeight);
552
+ renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
553
+ renderer.setClearColor(0x000000, 0);
554
+
555
+ // Background particles (stars)
556
+ const starGeometry = new THREE.BufferGeometry();
557
+ const starCount = 2000;
558
+ const starPositions = new Float32Array(starCount * 3);
559
+ for (let i = 0; i < starCount * 3; i++) {
560
+ starPositions[i] = (Math.random() - 0.5) * 200;
561
+ }
562
+ starGeometry.setAttribute('position', new THREE.BufferAttribute(starPositions, 3));
563
+ const starMaterial = new THREE.PointsMaterial({ color: 0xffffff, size: 0.15, transparent: true, opacity: 0.6 });
564
+ const stars = new THREE.Points(starGeometry, starMaterial);
565
+ scene.add(stars);
566
+
567
+ // Scroll-driven camera + parallax layers
568
+ const scrollContainer = document.getElementById('features-3d');
569
+ const parallaxElements = document.querySelectorAll('.parallax-content');
570
+ let scrollProgress = 0;
571
+
572
+ window.addEventListener('scroll', () => {
573
+ const rect = scrollContainer.getBoundingClientRect();
574
+ const viewportHeight = window.innerHeight;
575
+ scrollProgress = Math.max(0, Math.min(1, -rect.top / (rect.height - viewportHeight)));
576
+ }, { passive: true });
577
+
578
+ const clock = new THREE.Clock();
579
+ let parallaxFrameId = null;
580
+
581
+ function animate() {
582
+ parallaxFrameId = requestAnimationFrame(animate);
583
+
584
+ // Camera moves forward on scroll
585
+ camera.position.z = 50 - scrollProgress * 30;
586
+ camera.position.x = Math.sin(scrollProgress * Math.PI) * 5;
587
+
588
+ // Parallax layers
589
+ parallaxElements.forEach(el => {
590
+ const depth = parseFloat(el.dataset.depth);
591
+ el.style.transform = `translateY(${-scrollProgress * 100 * depth}px)`;
592
+ });
593
+
594
+ // Stars drift
595
+ stars.rotation.y = scrollProgress * 0.3;
596
+ stars.rotation.x = clock.getElapsedTime() * 0.01;
597
+
598
+ renderer.render(scene, camera);
599
+ }
600
+
601
+ // Only run when section is in viewport
602
+ const parallaxObserver = new IntersectionObserver((entries) => {
603
+ entries.forEach(entry => {
604
+ if (entry.isIntersecting) {
605
+ if (!parallaxFrameId) animate();
606
+ } else {
607
+ cancelAnimationFrame(parallaxFrameId);
608
+ parallaxFrameId = null;
609
+ }
610
+ });
611
+ }, { threshold: 0 });
612
+ parallaxObserver.observe(document.getElementById('features-3d'));
613
+
614
+ window.addEventListener('resize', () => {
615
+ camera.aspect = window.innerWidth / window.innerHeight;
616
+ camera.updateProjectionMatrix();
617
+ renderer.setSize(window.innerWidth, window.innerHeight);
618
+ });
619
+ </script>
620
+
621
+ <style>
622
+ .parallax-3d-section { position: relative; height: 300vh; background: #060910; overflow: hidden; }
623
+ #parallax-canvas { position: sticky; top: 0; width: 100%; height: 100vh; z-index: 0; }
624
+ .parallax-content {
625
+ position: relative;
626
+ z-index: 10;
627
+ padding: 4rem 2rem;
628
+ max-width: 600px;
629
+ margin: 0 auto;
630
+ text-align: center;
631
+ color: #f0f4ff;
632
+ }
633
+ .parallax-content h2 { font-size: 2rem; font-weight: 700; }
634
+ .parallax-content p { color: rgba(240,244,255,0.65); margin-top: 0.75rem; }
635
+ </style>
636
+ ```
637
+
638
+ ---
639
+
640
+ ## 4. Holographic Glass Object
641
+
642
+ **For:** Premium dashboards, futuristic product pages, tech/SaaS
643
+ **Complexity:** Medium. Uses MeshPhysicalMaterial transmission + bloom.
644
+ **Visual:** A glass-like 3D object with holographic iridescence, floating in space.
645
+
646
+ ```html
647
+ <canvas id="holo-canvas"></canvas>
648
+
649
+ <script type="importmap">
650
+ {
651
+ "imports": {
652
+ "three": "https://unpkg.com/three@0.160.0/build/three.module.js",
653
+ "three/addons/": "https://unpkg.com/three@0.160.0/examples/jsm/"
654
+ }
655
+ }
656
+ </script>
657
+
658
+ <script type="module">
659
+ import * as THREE from 'three';
660
+ import { EffectComposer } from 'three/addons/postprocessing/EffectComposer.js';
661
+ import { RenderPass } from 'three/addons/postprocessing/RenderPass.js';
662
+ import { UnrealBloomPass } from 'three/addons/postprocessing/UnrealBloomPass.js';
663
+
664
+ const canvas = document.getElementById('holo-canvas');
665
+ const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
666
+
667
+ if (!canvas.getContext('webgl') || prefersReducedMotion) {
668
+ canvas.style.display = 'none';
669
+ document.body.style.background = 'linear-gradient(135deg, #060910, #0A0818)';
670
+ }
671
+
672
+ // Scene
673
+ const scene = new THREE.Scene();
674
+ const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 100);
675
+ camera.position.set(0, 0, 6);
676
+
677
+ const renderer = new THREE.WebGLRenderer({ canvas, alpha: true, antialias: true });
678
+ renderer.setSize(window.innerWidth, window.innerHeight);
679
+ renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
680
+ renderer.toneMapping = THREE.ACESFilmicToneMapping;
681
+ renderer.toneMappingExposure = 1.3;
682
+
683
+ // Bloom
684
+ const composer = new EffectComposer(renderer);
685
+ composer.addPass(new RenderPass(scene, camera));
686
+ const bloomPass = new UnrealBloomPass(
687
+ new THREE.Vector2(window.innerWidth, window.innerHeight), 1.2, 0.5, 0.7
688
+ );
689
+ composer.addPass(bloomPass);
690
+
691
+ // Holographic material
692
+ const holoMaterial = new THREE.MeshPhysicalMaterial({
693
+ color: new THREE.Color('#00C8E8'),
694
+ metalness: 0.9,
695
+ roughness: 0.05,
696
+ transmission: 0.4,
697
+ thickness: 0.5,
698
+ envMapIntensity: 2,
699
+ clearcoat: 1,
700
+ clearcoatRoughness: 0.05,
701
+ iridescence: 1,
702
+ iridescenceIOR: 1.5,
703
+ iridescenceThicknessRange: [100, 400],
704
+ transparent: true,
705
+ opacity: 0.85,
706
+ });
707
+
708
+ // Object: Icosahedron
709
+ const geometry = new THREE.IcosahedronGeometry(1.8, 1);
710
+ const mesh = new THREE.Mesh(geometry, holoMaterial);
711
+ scene.add(mesh);
712
+
713
+ // Wireframe overlay
714
+ const wireframeMaterial = new THREE.MeshBasicMaterial({
715
+ color: new THREE.Color('#00C8E8'),
716
+ wireframe: true,
717
+ transparent: true,
718
+ opacity: 0.15,
719
+ });
720
+ const wireframe = new THREE.Mesh(geometry, wireframeMaterial);
721
+ mesh.add(wireframe);
722
+
723
+ // Lights
724
+ scene.add(new THREE.AmbientLight(0xffffff, 0.3));
725
+ const light1 = new THREE.PointLight(0x00C8E8, 3, 20);
726
+ light1.position.set(3, 3, 3);
727
+ scene.add(light1);
728
+ const light2 = new THREE.PointLight(0x7C3AED, 3, 20);
729
+ light2.position.set(-3, -3, 3);
730
+ scene.add(light2);
731
+
732
+ // Mouse interaction (rotation)
733
+ const mouse = new THREE.Vector2(0, 0);
734
+ document.addEventListener('mousemove', (e) => {
735
+ mouse.x = (e.clientX / window.innerWidth) * 2 - 1;
736
+ mouse.y = -(e.clientY / window.innerHeight) * 2 + 1;
737
+ }, { passive: true });
738
+
739
+ const clock = new THREE.Clock();
740
+ function animate() {
741
+ requestAnimationFrame(animate);
742
+ const elapsed = clock.getElapsedTime();
743
+
744
+ mesh.rotation.x = elapsed * 0.15 + mouse.y * 0.3;
745
+ mesh.rotation.y = elapsed * 0.2 + mouse.x * 0.5;
746
+
747
+ // Pulse the iridescence via thickness range
748
+ const pulse = 200 + Math.sin(elapsed * 2) * 100;
749
+ holoMaterial.iridescenceThicknessRange = [pulse * 0.5, pulse];
750
+ holoMaterial.needsUpdate = true;
751
+
752
+ composer.render();
753
+ }
754
+ animate();
755
+
756
+ window.addEventListener('resize', () => {
757
+ camera.aspect = window.innerWidth / window.innerHeight;
758
+ camera.updateProjectionMatrix();
759
+ renderer.setSize(window.innerWidth, window.innerHeight);
760
+ composer.setSize(window.innerWidth, window.innerHeight);
761
+ });
762
+ </script>
763
+
764
+ <style>
765
+ #holo-canvas { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; }
766
+ body > *:not(#holo-canvas) { position: relative; z-index: 10; }
767
+ </style>
768
+ ```
769
+
770
+ ---
771
+
772
+ ## 5. Floating Object Array (Dashboard Cards as 3D Objects)
773
+
774
+ **For:** Premium command centers, product showcases, animated dashboard cards
775
+ **Complexity:** Medium-High. Multiple meshes with individual animations.
776
+ **Visual:** A grid of floating cards (as thin 3D boxes) that drift and respond to mouse.
777
+
778
+ ```html
779
+ <section class="floating-cards-section" id="dashboard-3d">
780
+ <canvas id="cards-canvas"></canvas>
781
+ <div class="cards-overlay">
782
+ <h2>Command everything</h2>
783
+ <p>Every metric, every system, every alert — unified in one spatial interface.</p>
784
+ </div>
785
+ </section>
786
+
787
+ <script type="importmap">{ "imports": { "three": "https://unpkg.com/three@0.160.0/build/three.module.js" } }</script>
788
+
789
+ <script type="module">
790
+ import * as THREE from 'three';
791
+
792
+ const canvas = document.getElementById('cards-canvas');
793
+ const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
794
+
795
+ if (!canvas.getContext('webgl') || prefersReducedMotion) {
796
+ canvas.style.display = 'none';
797
+ }
798
+
799
+ const scene = new THREE.Scene();
800
+ const camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 0.1, 100);
801
+ camera.position.set(0, 0, 12);
802
+
803
+ const renderer = new THREE.WebGLRenderer({ canvas, alpha: true, antialias: true });
804
+ renderer.setSize(window.innerWidth, window.innerHeight);
805
+ renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
806
+
807
+ // Card count
808
+ const isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);
809
+ const CARD_COUNT = isMobile ? 6 : 12;
810
+ const COLS = isMobile ? 3 : 4;
811
+
812
+ // Cards as thin boxes
813
+ const cards = [];
814
+ const cardGeometry = new THREE.BoxGeometry(2.2, 1.4, 0.08);
815
+ const basePositions = [];
816
+
817
+ for (let i = 0; i < CARD_COUNT; i++) {
818
+ const col = i % COLS;
819
+ const row = Math.floor(i / COLS);
820
+ const x = (col - (COLS - 1) / 2) * 2.6;
821
+ const y = (row - (Math.ceil(CARD_COUNT / COLS) - 1) / 2) * -1.8;
822
+ basePositions.push({ x, y });
823
+
824
+ // Glass-like material
825
+ const hue = (i / CARD_COUNT) * 0.3 + 0.5; // teal to violet range
826
+ const material = new THREE.MeshPhysicalMaterial({
827
+ color: new THREE.Color().setHSL(hue, 0.7, 0.3),
828
+ metalness: 0.1,
829
+ roughness: 0.2,
830
+ transmission: 0.3,
831
+ thickness: 0.5,
832
+ transparent: true,
833
+ opacity: 0.8,
834
+ clearcoat: 0.5,
835
+ });
836
+
837
+ const card = new THREE.Mesh(cardGeometry, material);
838
+ card.position.set(x, y, 0);
839
+ card.userData = {
840
+ baseY: y,
841
+ phase: Math.random() * Math.PI * 2,
842
+ floatSpeed: 0.5 + Math.random() * 0.5,
843
+ };
844
+ scene.add(card);
845
+ cards.push(card);
846
+ }
847
+
848
+ // Lighting
849
+ scene.add(new THREE.AmbientLight(0xffffff, 0.6));
850
+ const pointLight = new THREE.PointLight(0x00C8E8, 1.5, 30);
851
+ pointLight.position.set(5, 5, 5);
852
+ scene.add(pointLight);
853
+
854
+ // Mouse influence
855
+ const mouse = new THREE.Vector2(0, 0);
856
+ document.addEventListener('mousemove', (e) => {
857
+ mouse.x = (e.clientX / window.innerWidth) * 2 - 1;
858
+ mouse.y = -(e.clientY / window.innerHeight) * 2 + 1;
859
+ }, { passive: true });
860
+
861
+ const clock = new THREE.Clock();
862
+ function animate() {
863
+ requestAnimationFrame(animate);
864
+ const elapsed = clock.getElapsedTime();
865
+
866
+ cards.forEach((card, i) => {
867
+ // Float animation
868
+ card.position.y = card.userData.baseY + Math.sin(elapsed * card.userData.floatSpeed + card.userData.phase) * 0.15;
869
+
870
+ // Subtle rotation toward mouse
871
+ card.rotation.x = (mouse.y * 0.1) + Math.sin(elapsed * 0.3 + i) * 0.03;
872
+ card.rotation.y = (mouse.x * 0.15) + Math.cos(elapsed * 0.4 + i) * 0.03;
873
+
874
+ // Hover: elevate toward camera
875
+ const targetZ = (card.position.x * mouse.x + card.position.y * mouse.y) * 0.1;
876
+ card.position.z += (targetZ - card.position.z) * 0.05;
877
+ });
878
+
879
+ renderer.render(scene, camera);
880
+ }
881
+ animate();
882
+
883
+ window.addEventListener('resize', () => {
884
+ camera.aspect = window.innerWidth / window.innerHeight;
885
+ camera.updateProjectionMatrix();
886
+ renderer.setSize(window.innerWidth, window.innerHeight);
887
+ });
888
+ </script>
889
+
890
+ <style>
891
+ .floating-cards-section { position: relative; min-height: 100vh; background: #060910; overflow: hidden; }
892
+ #cards-canvas { width: 100%; height: 100vh; }
893
+ .cards-overlay {
894
+ position: absolute;
895
+ bottom: 4rem;
896
+ left: 50%;
897
+ transform: translateX(-50%);
898
+ text-align: center;
899
+ color: #f0f4ff;
900
+ z-index: 10;
901
+ }
902
+ .cards-overlay h2 { font-size: clamp(1.5rem, 4vw, 2.5rem); font-weight: 700; }
903
+ .cards-overlay p { color: rgba(240,244,255,0.6); margin-top: 0.75rem; }
904
+ </style>
905
+ ```
906
+
907
+ ---
908
+
909
+ ## Anti-Generic Rules
910
+
911
+ 1. **Never generate a generic particle starfield** — starfields are overused. Use aurora-inspired palettes and drift patterns that feel organic, not space-themed.
912
+ 2. **Three.js is enhancement, not replacement** — the content (headline, copy, CTA) still needs to be strong. A beautiful 3D scene with no message is as bad as no 3D.
913
+ 3. **Color discipline** — use the accent palette from the design skill. Do not introduce random neon colors.
914
+ 4. **No Rube Goldberg visuals** — complex choreography, bouncing, elastic physics, and elaborate animation sequences are visual noise. Subtle drift and gentle rotation communicate premium quality.
915
+ 5. **Fallback mandatory** — every pattern above includes a WebGL support check and `prefers-reduced-motion` guard. The CSS fallback must look intentional, not broken.
916
+
917
+ ---
918
+
919
+ ## Pre-delivery Checklist
920
+
921
+ - [ ] WebGL support check with graceful CSS fallback
922
+ - [ ] `prefers-reduced-motion: reduce` disables all Three.js content
923
+ - [ ] Mobile detection reduces particle count to 30% or hides canvas
924
+ - [ ] `IntersectionObserver` stops render loop when canvas is off-screen
925
+ - [ ] All geometries and materials disposed on `beforeunload`
926
+ - [ ] Canvas is `alpha: true` so CSS gradient background shows through
927
+ - [ ] Bloom post-processing adds glow without washing out content
928
+ - [ ] No network requests other than Three.js CDN (no external textures/models)
929
+ - [ ] Lighthouse Performance score ≥ 85 on desktop (canvas is GPU-heavy — acceptable)