downscaled main model

.dockerignore

@@ -0,0 +1,26 @@
+# AAF Systems Homepage - Docker
+
+# Dockerfile
+node_modules/
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Development files
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# IDE files
+.vscode/
+.idea/
+
+# Build output (will be created inside container)
+dist/
+
+# Docker files
+*.tar
+aaf-systems-transfer-package/
+aaf-systems-transfer-package.tar.gz

Dockerfile

@@ -0,0 +1,26 @@
+# Use Node.js 18 alpine as base image for smaller size
+FROM node:18-alpine
+
+# Set working directory
+WORKDIR /app
+
+# Copy package files
+COPY app/package*.json ./
+
+# Install dependencies
+RUN npm install --legacy-peer-deps
+
+# Copy the rest of the application code
+COPY app/ .
+
+# Build the application
+RUN npm run build
+
+# Install a simple HTTP server to serve the built files
+RUN npm install -g serve
+
+# Expose port 8080
+EXPOSE 8080
+
+# Start the application on port 8080
+CMD ["serve", "-s", "dist", "-l", "8080"]

README.md

@@ -1,2 +1,126 @@
-# aaf-systems-homepage
+# AAF Systems Homepage
 
+A modern 3D homepage built with Three.js, TypeScript, and Vite.
+
+## Features
+
+- 3D graphics with Three.js
+- Physics simulation with Cannon.js
+- Post-processing effects
+- TypeScript for type safety
+- Hot reload development with Vite
+
+## Docker Setup
+
+### Prerequisites
+
+- Docker
+- Docker Compose (optional)
+
+### Running with Docker
+
+#### Option 1: Using Docker Compose (Recommended)
+
+```bash
+# Build and run the application
+docker-compose up --build
+
+# Run in detached mode
+docker-compose up -d --build
+
+# Stop the application
+docker-compose down
+```
+
+#### Option 2: Using Docker directly
+
+```bash
+# Build the Docker image
+docker build -t aaf-systems-homepage .
+
+# Run the container
+docker run -p 8080:8080 aaf-systems-homepage
+```
+
+The application will be available at `http://localhost:8080`
+
+## Local Development
+
+### Prerequisites
+
+- Node.js 18+
+- npm
+
+### Setup
+
+```bash
+cd app
+npm install
+npm run dev
+```
+
+The development server will start at `http://localhost:5173`
+
+### Build for Production
+
+```bash
+cd app
+npm run build
+npm run preview
+```
+
+## Project Structure
+
+- `app/` - Main application directory
+  - `src/` - TypeScript source code
+  - `public/` - Static assets
+  - `index.html` - Entry point
+- `Dockerfile` - Docker configuration
+- `docker-compose.yml` - Docker Compose configuration
+
+## Docker Packaging & Transfer
+
+### Package Image for Transfer
+
+To package the Docker image for transfer to another computer:
+
+```bash
+# Build and package the Docker image
+./package-docker.sh
+```
+
+This will create a `aaf-systems-homepage-docker.tar` file that you can transfer to another computer.
+
+### Transfer Methods
+
+**Option 1: USB/External Drive**
+```bash
+# Copy the .tar file to USB drive
+cp aaf-systems-homepage-docker.tar /path/to/usb/drive/
+```
+
+**Option 2: Network Transfer (SCP)**
+```bash
+# Transfer via SCP
+scp aaf-systems-homepage-docker.tar user@target-computer:/path/to/destination/
+```
+
+**Option 3: Cloud Storage**
+Upload `aaf-systems-homepage-docker.tar` to your preferred cloud storage service.
+
+### Load and Run on Target Computer
+
+On the target computer:
+
+1. Make sure Docker is installed and running
+2. Copy both files to the target computer:
+   - `aaf-systems-homepage-docker.tar` (the image package)
+   - `load-and-run-docker.sh` (the load script)
+3. Run the load script:
+
+```bash
+# Load and run the Docker image
+./load-and-run-docker.sh
+```
+
+The application will be available at `http://localhost:8080` on the target computer.

app/dist/assets/index-B5Qt9EMX.js

@@ -1 +0,0 @@
-(function(){const t=document.createElement("link").relList;if(t&&t.supports&&t.supports("modulepreload"))return;for(const e of document.querySelectorAll('link[rel="modulepreload"]'))i(e);new MutationObserver(e=>{for(const r of e)if(r.type==="childList")for(const o of r.addedNodes)o.tagName==="LINK"&&o.rel==="modulepreload"&&i(o)}).observe(document,{childList:!0,subtree:!0});function s(e){const r={};return e.integrity&&(r.integrity=e.integrity),e.referrerPolicy&&(r.referrerPolicy=e.referrerPolicy),e.crossOrigin==="use-credentials"?r.credentials="include":e.crossOrigin==="anonymous"?r.credentials="omit":r.credentials="same-origin",r}function i(e){if(e.ep)return;e.ep=!0;const r=s(e);fetch(e.href,r)}})();

app/dist/assets/index-BPBuaX9T.css

@@ -0,0 +1 @@
+*{margin:0;padding:0;box-sizing:border-box}html,body{height:100%;overflow:hidden;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background:#000;color:#fff}#app{width:100vw;height:100vh;position:relative}.logo{position:absolute;top:2rem;left:2rem;z-index:100;font-size:1.5rem;font-weight:600;color:#fff;text-shadow:0 2px 4px rgba(0,0,0,.5);letter-spacing:.5px;-webkit-user-select:none;user-select:none}#three-canvas{width:100%;height:100%;display:block;cursor:crosshair}.home-button{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:100;background:#ffffff1a;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.2);border-radius:12px;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:1rem;font-weight:1000;color:#fff;letter-spacing:1px;padding:1rem 2rem;cursor:pointer;-webkit-user-select:none;user-select:none;transition:all .3s cubic-bezier(.4,0,.2,1);border:none;outline:none}.home-button:hover{background:#ffffff26;border:1px solid rgba(255,255,255,.3);transform:translate(-50%,-50%) translateY(-1px);box-shadow:0 4px 20px #00000026}.home-button:active{transform:translate(-50%,-50%) translateY(0);background:#fff3}.home-button span{display:block;position:relative;color:#ffffff26;filter:blur(.3px);-webkit-filter:blur(.3px)}@media (max-width: 768px){.logo{top:1rem;left:1rem;font-size:1.25rem}.home-button{padding:1.5rem 3rem;font-size:1.5rem;letter-spacing:3px}}

app/dist/index.html

@@ -8,11 +8,15 @@
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
-    <script type="module" crossorigin src="/assets/index-B5Qt9EMX.js"></script>
+    <script type="module" crossorigin src="/assets/index-kpuvI5CD.js"></script>
+    <link rel="stylesheet" crossorigin href="/assets/index-BPBuaX9T.css">
   </head>
   <body>
     <div id="app">
       <div class="logo">AAF Systems</div>
+      <button id="home-button" class="home-button">
+        <span>Home</span>
+      </button>
       <canvas id="three-canvas"></canvas>
     </div>
   </body>

app/index.html

@@ -12,6 +12,9 @@
   <body>
     <div id="app">
       <div class="logo">AAF Systems</div>
+      <button id="home-button" class="home-button">
+        <span>Home</span>
+      </button>
       <canvas id="three-canvas"></canvas>
     </div>
     <script type="module" src="/src/main.ts"></script>

app/node_modules/.package-lock.json

@@ -897,7 +897,6 @@
       "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
       "dev": true,
       "hasInstallScript": true,
-      "ideallyInert": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -981,6 +980,15 @@
         "node": "^10 || ^12 || >=14"
       }
     },
+    "node_modules/postprocessing": {
+      "version": "6.37.6",
+      "resolved": "https://registry.npmjs.org/postprocessing/-/postprocessing-6.37.6.tgz",
+      "integrity": "sha512-KrdKLf1257RkoIk3z3nhRS0aToKrX2xJgtR0lbnOQUjd+1I4GVNv1gQYsQlfRglvEXjpzrwqOA5fXfoDBimadg==",
+      "license": "Zlib",
+      "peerDependencies": {
+        "three": ">= 0.157.0 < 0.179.0"
+      }
+    },
     "node_modules/rollup": {
       "version": "4.46.1",
       "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.46.1.tgz",
@@ -1037,6 +1045,18 @@
       "integrity": "sha512-ybFIB0+x8mz0wnZgSGy2MO/WCO6xZhQSZnmfytSPyNpM0sBafGRVhdaj+erYh5U+RhQOAg/eXqw5uVDiM2BjhQ==",
       "license": "MIT"
     },
+    "node_modules/three-good-godrays": {
+      "version": "0.7.1",
+      "resolved": "https://registry.npmjs.org/three-good-godrays/-/three-good-godrays-0.7.1.tgz",
+      "integrity": "sha512-VeaJlcWozjKPm2FgiHXPDTVmGxYr89arRYJlyLmJvLr+C+2OVm1RPsHcdXyRU4IPT33EQUfSuFBtL/z2lNqXAw==",
+      "engines": {
+        "node": ">= 0.13.2"
+      },
+      "peerDependencies": {
+        "postprocessing": "^6.33.4",
+        "three": ">= 0.125.0 <= 0.167.0"
+      }
+    },
     "node_modules/tinyglobby": {
       "version": "0.2.14",
       "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.14.tgz",

app/node_modules/.vite/deps/_metadata.json

@@ -1,25 +1,31 @@
 {
-  "hash": "4305885f",
+  "hash": "a88ce823",
   "configHash": "3b37792f",
-  "lockfileHash": "0d3c4966",
-  "browserHash": "b77d7025",
+  "lockfileHash": "5c312a08",
+  "browserHash": "152c0a59",
   "optimized": {
     "cannon-es": {
       "src": "../../cannon-es/dist/cannon-es.js",
       "file": "cannon-es.js",
-      "fileHash": "55d87002",
+      "fileHash": "8ff8e437",
       "needsInterop": false
     },
     "three": {
       "src": "../../three/build/three.module.js",
       "file": "three.js",
-      "fileHash": "c1c85acc",
+      "fileHash": "cb2e35a2",
       "needsInterop": false
     },
     "three/examples/jsm/loaders/GLTFLoader.js": {
       "src": "../../three/examples/jsm/loaders/GLTFLoader.js",
       "file": "three_examples_jsm_loaders_GLTFLoader__js.js",
-      "fileHash": "4e20fb05",
+      "fileHash": "c927b765",
+      "needsInterop": false
+    },
+    "postprocessing": {
+      "src": "../../postprocessing/build/index.js",
+      "file": "postprocessing.js",
+      "fileHash": "f93b9e9a",
       "needsInterop": false
     }
   },

app/node_modules/fsevents/LICENSE

@@ -0,0 +1,22 @@
+MIT License
+-----------
+
+Copyright (C) 2010-2020 by Philipp Dunkel, Ben Noordhuis, Elan Shankar, Paul Miller
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

app/node_modules/fsevents/README.md

@@ -0,0 +1,89 @@
+# fsevents
+
+Native access to MacOS FSEvents in [Node.js](https://nodejs.org/)
+
+The FSEvents API in MacOS allows applications to register for notifications of
+changes to a given directory tree. It is a very fast and lightweight alternative
+to kqueue.
+
+This is a low-level library. For a cross-platform file watching module that
+uses fsevents, check out [Chokidar](https://github.com/paulmillr/chokidar).
+
+## Usage
+
+```sh
+npm install fsevents
+```
+
+Supports only **Node.js v8.16 and higher**.
+
+```js
+const fsevents = require('fsevents');
+
+// To start observation
+const stop = fsevents.watch(__dirname, (path, flags, id) => {
+  const info = fsevents.getInfo(path, flags);
+});
+
+// To end observation
+stop();
+```
+
+> **Important note:** The API behaviour is slightly different from typical JS APIs. The `stop` function **must** be
+> retrieved and stored somewhere, even if you don't plan to stop the watcher. If you forget it, the garbage collector
+> will eventually kick in, the watcher will be unregistered, and your callbacks won't be called anymore.
+
+The callback passed as the second parameter to `.watch` get's called whenever the operating system detects a
+a change in the file system. It takes three arguments:
+
+###### `fsevents.watch(dirname: string, (path: string, flags: number, id: string) => void): () => Promise<undefined>`
+
+ * `path: string` - the item in the filesystem that have been changed
+ * `flags: number` - a numeric value describing what the change was
+ * `id: string` - an unique-id identifying this specific event
+
+ Returns closer callback which when called returns a Promise resolving when the watcher process has been shut down.
+
+###### `fsevents.getInfo(path: string, flags: number, id: string): FsEventInfo`
+
+The `getInfo` function takes the `path`, `flags` and `id` arguments and converts those parameters into a structure
+that is easier to digest to determine what the change was.
+
+The `FsEventsInfo` has the following shape:
+
+```js
+/**
+ * @typedef {'created'|'modified'|'deleted'|'moved'|'root-changed'|'cloned'|'unknown'} FsEventsEvent
+ * @typedef {'file'|'directory'|'symlink'} FsEventsType
+ */
+{
+  "event": "created", // {FsEventsEvent}
+  "path": "file.txt",
+  "type": "file",    // {FsEventsType}
+  "changes": {
+    "inode": true,   // Had iNode Meta-Information changed
+    "finder": false, // Had Finder Meta-Data changed
+    "access": false, // Had access permissions changed
+    "xattrs": false  // Had xAttributes changed
+  },
+  "flags": 0x100000000
+}
+```
+
+## Changelog
+
+- v2.3 supports Apple Silicon ARM CPUs
+- v2 supports node 8.16+ and reduces package size massively
+- v1.2.8 supports node 6+
+- v1.2.7 supports node 4+
+
+## Troubleshooting
+
+- I'm getting `EBADPLATFORM` `Unsupported platform for fsevents` error.
+- It's fine, nothing is broken. fsevents is macos-only. Other platforms are skipped. If you want to hide this warning, report a bug to NPM bugtracker asking them to hide ebadplatform warnings by default.
+
+## License
+
+The MIT License Copyright (C) 2010-2020 by Philipp Dunkel, Ben Noordhuis, Elan Shankar, Paul Miller — see LICENSE file.
+
+Visit our [GitHub page](https://github.com/fsevents/fsevents) and [NPM Page](https://npmjs.org/package/fsevents)

app/node_modules/fsevents/fsevents.d.ts

@@ -0,0 +1,46 @@
+declare type Event = "created" | "cloned" | "modified" | "deleted" | "moved" | "root-changed" | "unknown";
+declare type Type = "file" | "directory" | "symlink";
+declare type FileChanges = {
+  inode: boolean;
+  finder: boolean;
+  access: boolean;
+  xattrs: boolean;
+};
+declare type Info = {
+  event: Event;
+  path: string;
+  type: Type;
+  changes: FileChanges;
+  flags: number;
+};
+declare type WatchHandler = (path: string, flags: number, id: string) => void;
+export declare function watch(path: string, handler: WatchHandler): () => Promise<void>;
+export declare function watch(path: string, since: number, handler: WatchHandler): () => Promise<void>;
+export declare function getInfo(path: string, flags: number): Info;
+export declare const constants: {
+  None: 0x00000000;
+  MustScanSubDirs: 0x00000001;
+  UserDropped: 0x00000002;
+  KernelDropped: 0x00000004;
+  EventIdsWrapped: 0x00000008;
+  HistoryDone: 0x00000010;
+  RootChanged: 0x00000020;
+  Mount: 0x00000040;
+  Unmount: 0x00000080;
+  ItemCreated: 0x00000100;
+  ItemRemoved: 0x00000200;
+  ItemInodeMetaMod: 0x00000400;
+  ItemRenamed: 0x00000800;
+  ItemModified: 0x00001000;
+  ItemFinderInfoMod: 0x00002000;
+  ItemChangeOwner: 0x00004000;
+  ItemXattrMod: 0x00008000;
+  ItemIsFile: 0x00010000;
+  ItemIsDir: 0x00020000;
+  ItemIsSymlink: 0x00040000;
+  ItemIsHardlink: 0x00100000;
+  ItemIsLastHardlink: 0x00200000;
+  OwnEvent: 0x00080000;
+  ItemCloned: 0x00400000;
+};
+export {};

app/node_modules/fsevents/fsevents.js

@@ -0,0 +1,83 @@
+/*
+ ** © 2020 by Philipp Dunkel, Ben Noordhuis, Elan Shankar, Paul Miller
+ ** Licensed under MIT License.
+ */
+
+/* jshint node:true */
+"use strict";
+
+if (process.platform !== "darwin") {
+  throw new Error(`Module 'fsevents' is not compatible with platform '${process.platform}'`);
+}
+
+const Native = require("./fsevents.node");
+const events = Native.constants;
+
+function watch(path, since, handler) {
+  if (typeof path !== "string") {
+    throw new TypeError(`fsevents argument 1 must be a string and not a ${typeof path}`);
+  }
+  if ("function" === typeof since && "undefined" === typeof handler) {
+    handler = since;
+    since = Native.flags.SinceNow;
+  }
+  if (typeof since !== "number") {
+    throw new TypeError(`fsevents argument 2 must be a number and not a ${typeof since}`);
+  }
+  if (typeof handler !== "function") {
+    throw new TypeError(`fsevents argument 3 must be a function and not a ${typeof handler}`);
+  }
+
+  let instance = Native.start(Native.global, path, since, handler);
+  if (!instance) throw new Error(`could not watch: ${path}`);
+  return () => {
+    const result = instance ? Promise.resolve(instance).then(Native.stop) : Promise.resolve(undefined);
+    instance = undefined;
+    return result;
+  };
+}
+
+function getInfo(path, flags) {
+  return {
+    path,
+    flags,
+    event: getEventType(flags),
+    type: getFileType(flags),
+    changes: getFileChanges(flags),
+  };
+}
+
+function getFileType(flags) {
+  if (events.ItemIsFile & flags) return "file";
+  if (events.ItemIsDir & flags) return "directory";
+  if (events.MustScanSubDirs & flags) return "directory"; 
+  if (events.ItemIsSymlink & flags) return "symlink";
+}
+function anyIsTrue(obj) {
+  for (let key in obj) {
+    if (obj[key]) return true;
+  }
+  return false;
+}
+function getEventType(flags) {
+  if (events.ItemRemoved & flags) return "deleted";
+  if (events.ItemRenamed & flags) return "moved";
+  if (events.ItemCreated & flags) return "created";
+  if (events.ItemModified & flags) return "modified";
+  if (events.RootChanged & flags) return "root-changed";
+  if (events.ItemCloned & flags) return "cloned";
+  if (anyIsTrue(flags)) return "modified";
+  return "unknown";
+}
+function getFileChanges(flags) {
+  return {
+    inode: !!(events.ItemInodeMetaMod & flags),
+    finder: !!(events.ItemFinderInfoMod & flags),
+    access: !!(events.ItemChangeOwner & flags),
+    xattrs: !!(events.ItemXattrMod & flags),
+  };
+}
+
+exports.watch = watch;
+exports.getInfo = getInfo;
+exports.constants = events;

app/node_modules/fsevents/package.json

@@ -0,0 +1,62 @@
+{
+  "name": "fsevents",
+  "version": "2.3.3",
+  "description": "Native Access to MacOS FSEvents",
+  "main": "fsevents.js",
+  "types": "fsevents.d.ts",
+  "os": [
+    "darwin"
+  ],
+  "files": [
+    "fsevents.d.ts",
+    "fsevents.js",
+    "fsevents.node"
+  ],
+  "engines": {
+    "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
+  },
+  "scripts": {
+    "clean": "node-gyp clean && rm -f fsevents.node",
+    "build": "node-gyp clean && rm -f fsevents.node && node-gyp rebuild && node-gyp clean",
+    "test": "/bin/bash ./test.sh 2>/dev/null",
+    "prepublishOnly": "npm run build"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/fsevents/fsevents.git"
+  },
+  "keywords": [
+    "fsevents",
+    "mac"
+  ],
+  "contributors": [
+    {
+      "name": "Philipp Dunkel",
+      "email": "pip@pipobscure.com"
+    },
+    {
+      "name": "Ben Noordhuis",
+      "email": "info@bnoordhuis.nl"
+    },
+    {
+      "name": "Elan Shankar",
+      "email": "elan.shanker@gmail.com"
+    },
+    {
+      "name": "Miroslav Bajtoš",
+      "email": "mbajtoss@gmail.com"
+    },
+    {
+      "name": "Paul Miller",
+      "url": "https://paulmillr.com"
+    }
+  ],
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/fsevents/fsevents/issues"
+  },
+  "homepage": "https://github.com/fsevents/fsevents",
+  "devDependencies": {
+    "node-gyp": "^9.4.0"
+  }
+}

app/node_modules/postprocessing/LICENSE.md

@@ -0,0 +1,19 @@
+Copyright © 2015 Raoul van Rüschen
+
+This software is provided 'as-is', without any express or implied warranty. In
+no event will the authors be held liable for any damages arising from the use of
+this software.
+
+Permission is granted to anyone to use this software for any purpose, including
+commercial applications, and to alter it and redistribute it freely, subject to
+the following restrictions:
+
+1. The origin of this software must not be misrepresented; you must not claim
+   that you wrote the original software. If you use this software in a product,
+   an acknowledgment in the product documentation would be appreciated but is
+   not required.
+
+2. Altered source versions must be plainly marked as such, and must not be
+   misrepresented as being the original software.
+
+3. This notice may not be removed or altered from any source distribution.

app/node_modules/postprocessing/README.md

@@ -0,0 +1,122 @@
+# Post Processing
+
+[![CI](https://github.com/pmndrs/postprocessing/actions/workflows/ci.yml/badge.svg)](https://github.com/pmndrs/postprocessing/actions/workflows/ci.yml)
+[![Version](https://badgen.net/npm/v/postprocessing?color=green)](https://www.npmjs.com/package/postprocessing)
+
+A post processing library for [three.js](https://threejs.org/).
+
+*[Demo](https://pmndrs.github.io/postprocessing/public/demo) · [Sandbox](https://stackblitz.com/edit/postprocessing-v6) · [Documentation](https://pmndrs.github.io/postprocessing/public/docs) · [Wiki](https://github.com/pmndrs/postprocessing/wiki)*
+
+## Installation
+
+This library requires the peer dependency [three](https://github.com/mrdoob/three.js/).
+
+```sh
+npm install three postprocessing
+```
+
+## Usage
+
+Post processing introduces the concept of passes and effects to extend the common rendering workflow with fullscreen image manipulation tools. The following WebGL attributes should be used for an optimal post processing workflow:
+
+```js
+import { WebGLRenderer } from "three";
+
+const renderer = new WebGLRenderer({
+	powerPreference: "high-performance",
+	antialias: false,
+	stencil: false,
+	depth: false
+});
+```
+
+The [EffectComposer](https://pmndrs.github.io/postprocessing/public/docs/class/src/core/EffectComposer.js~EffectComposer.html) manages and runs passes. It is common practice to use a [RenderPass](https://pmndrs.github.io/postprocessing/public/docs/class/src/passes/RenderPass.js~RenderPass.html) as the first pass to automatically clear the buffers and render a scene for further processing. Fullscreen image effects are rendered via the [EffectPass](https://pmndrs.github.io/postprocessing/public/docs/class/src/passes/EffectPass.js~EffectPass.html). Please refer to the [usage example](https://github.com/mrdoob/three.js/blob/master/README.md) of three.js for more information on how to setup the renderer, scene and camera.
+
+```js
+import { BloomEffect, EffectComposer, EffectPass, RenderPass } from "postprocessing";
+
+const composer = new EffectComposer(renderer);
+composer.addPass(new RenderPass(scene, camera));
+composer.addPass(new EffectPass(camera, new BloomEffect()));
+
+requestAnimationFrame(function render() {
+
+	requestAnimationFrame(render);
+	composer.render();
+
+});
+```
+
+## Output Color Space
+
+New applications should follow a [linear workflow](https://docs.unity3d.com/Manual/LinearRendering-LinearOrGammaWorkflow.html) for color management and postprocessing supports this automatically. Simply set `WebGLRenderer.outputColorSpace` to `SRGBColorSpace` and postprocessing will follow suit.
+
+Postprocessing uses `UnsignedByteType` sRGB frame buffers to store intermediate results. This is a trade-off between hardware support, efficiency and quality since linear results normally require at least 12 bits per color channel to prevent [color degradation and banding](https://blog.demofox.org/2018/03/10/dont-convert-srgb-u8-to-linear-u8/). With low precision sRGB buffers, colors will be clamped to `[0.0, 1.0]` and information loss will shift to the darker spectrum which leads to noticable banding in dark scenes. Linear, high precision `HalfFloatType` buffers don't have these issues and are the preferred option for HDR-like workflows on desktop devices. You can enable high precision frame buffers as follows:
+
+```ts
+import { HalfFloatType } from "three";
+
+const composer = new EffectComposer(renderer, {
+	frameBufferType: HalfFloatType
+});
+```
+
+## Tone Mapping
+
+Tone mapping is the process of converting HDR colors to LDR output colors. When using postprocessing, the `toneMapping` setting on the renderer should be set to `NoToneMapping` (default) and high precision frame buffers should be enabled. Otherwise, colors will be mapped to `[0.0, 1.0]` at the start of the pipeline. To enable tone mapping, use a `ToneMappingEffect` at the end of the pipeline.
+
+Note that tone mapping is not applied to the clear color when using only the renderer because clearing doesn't involve shaders. Postprocessing applies to the full input image which means that tone mapping will also be applied uniformly. Consequently, the results of tone mapping a clear color background with and without postprocessing will be different, with the postprocessing approach being correct.
+
+## Performance
+
+This library provides an [EffectPass](https://pmndrs.github.io/postprocessing/public/docs/class/src/passes/EffectPass.js~EffectPass.html) which automatically organizes and merges any given combination of effects. This minimizes the amount of render operations and makes it possible to combine many effects without the performance penalties of traditional pass chaining. Additionally, every effect can choose its own [blend function](https://pmndrs.github.io/postprocessing/public/docs/variable/index.html#static-variable-BlendFunction).
+
+All fullscreen render operations also use a [single triangle](https://michaldrobot.com/2014/04/01/gcn-execution-patterns-in-full-screen-passes/) that fills the screen. Compared to using a quad, this approach harmonizes with modern GPU rasterization patterns and eliminates unnecessary fragment calculations along the screen diagonal. This is especially beneficial for GPGPU passes and effects that use complex fragment shaders.
+
+[Performance Test](https://pmndrs.github.io/postprocessing/public/demo/#performance)
+
+## Included Effects
+
+_The total demo download size is about `60 MB`._
+
+ - [Antialiasing](https://pmndrs.github.io/postprocessing/public/demo/#antialiasing)
+ - [Bloom](https://pmndrs.github.io/postprocessing/public/demo/#bloom)
+ - [Blur](https://pmndrs.github.io/postprocessing/public/demo/#blur)
+ - [Color Depth](https://pmndrs.github.io/postprocessing/public/demo/#color-depth)
+ - [Color Grading](https://pmndrs.github.io/postprocessing/public/demo/#color-grading)
+   - Color Average
+   - Sepia
+   - Brightness & Contrast
+   - Hue & Saturation
+   - LUT
+ - [Depth of Field](https://pmndrs.github.io/postprocessing/public/demo/#depth-of-field)
+   - Vignette
+ - [Glitch](https://pmndrs.github.io/postprocessing/public/demo/#glitch)
+   - Chromatic Aberration
+   - Noise
+ - [God Rays](https://pmndrs.github.io/postprocessing/public/demo/#god-rays)
+ - [Pattern](https://pmndrs.github.io/postprocessing/public/demo/#pattern)
+   - Dot-Screen
+   - Grid
+   - Scanline
+ - [Pixelation](https://pmndrs.github.io/postprocessing/public/demo/#pixelation)
+ - [Outline](https://pmndrs.github.io/postprocessing/public/demo/#outline)
+ - [Shock Wave](https://pmndrs.github.io/postprocessing/public/demo/#shock-wave)
+   - Depth Picking
+ - [SSAO](https://pmndrs.github.io/postprocessing/public/demo/#ssao)
+ - [Texture](https://pmndrs.github.io/postprocessing/public/demo/#texture)
+ - [Tone Mapping](https://pmndrs.github.io/postprocessing/public/demo/#tone-mapping)
+
+## Custom Effects
+
+If you want to learn how to create custom effects or passes, please check the [Wiki](https://github.com/pmndrs/postprocessing/wiki).
+
+## Contributing
+
+Please refer to the [contribution guidelines](https://github.com/pmndrs/postprocessing/blob/main/.github/CONTRIBUTING.md) for details.
+
+## License
+
+This library is licensed under the [Zlib license](https://github.com/pmndrs/postprocessing/blob/main/LICENSE.md).
+
+The original code that this library is based on, was written by [mrdoob](https://mrdoob.com) and the [three.js contributors](https://github.com/mrdoob/three.js/graphs/contributors) and is licensed under the [MIT license](https://github.com/mrdoob/three.js/blob/master/LICENSE).

app/node_modules/postprocessing/package.json

@@ -0,0 +1,132 @@
+{
+	"name": "postprocessing",
+	"version": "6.37.6",
+	"description": "A post processing library for three.js.",
+	"homepage": "https://github.com/pmndrs/postprocessing",
+	"license": "Zlib",
+	"type": "module",
+	"sideEffects": false,
+	"main": "./build/index.cjs",
+	"module": "./build/index.js",
+	"types": "./build/types/index.d.cts",
+	"exports": {
+		".": {
+			"import": {
+				"types": "./build/types/index.d.ts",
+				"default": "./build/index.js"
+			},
+			"require": {
+				"types": "./build/types/index.d.cts",
+				"default": "./build/index.cjs"
+			}
+		}
+	},
+	"keywords": [
+		"rendering",
+		"image",
+		"filter",
+		"effect",
+		"composer",
+		"pass",
+		"post",
+		"processing",
+		"gpgpu",
+		"rtt",
+		"rendertexture",
+		"rendertarget",
+		"three"
+	],
+	"author": {
+		"name": "Raoul van Rüschen",
+		"email": "vanruesc@outlook.de"
+	},
+	"repository": {
+		"url": "git+https://github.com/pmndrs/postprocessing.git"
+	},
+	"bugs": {
+		"url": "https://github.com/pmndrs/postprocessing/issues"
+	},
+	"files": [
+		"./build"
+	],
+	"ava": {
+		"failFast": true,
+		"files": [
+			"./test/**/*"
+		]
+	},
+	"pnpm": {
+		"onlyBuiltDependencies": [
+			"@parcel/watcher",
+			"core-js",
+			"esbuild",
+			"hugo-bin"
+		]
+	},
+	"scripts": {
+		"ava": "ava",
+		"build": "npm run clean && run-p build:css build:js:min build:dts",
+		"build:css": "sass --no-source-map -I manual/assets/css/src/values manual/assets/css/src:manual/assets/css/dist",
+		"build:js": "node esbuild",
+		"build:js:min": "node esbuild -m",
+		"build:dts": "cpy \"types/*\" build/types && cpy \"types/*\" build/types --rename=index.d.cts",
+		"clean": "del-cli build temp manual/resources \"manual/assets/**/dist\" public",
+		"copy": "cpy \"demo/static/**/*\" public/demo",
+		"deploy": "run-s copy postcss hugo gzip",
+		"doc": "esdoc",
+		"gzip": "gzipper c \"public\"",
+		"hugo": "hugo -s manual --minify",
+		"lint": "run-p lint:*",
+		"lint:css": "stylelint --fix manual/assets/css/src",
+		"lint:js": "eslint --fix src demo/src manual/assets/js/src",
+		"lint:dts": "tsc types/index.d.ts --noEmit",
+		"postcss": "postcss manual/assets/css/dist/index.css -o manual/assets/css/dist/index.css -c manual",
+		"prepublishOnly": "npm test",
+		"prewatch": "run-s clean copy build:css build:js",
+		"test": "run-s lint build ava doc",
+		"start": "hugo server -s manual -e development",
+		"watch": "run-p watch:* start",
+		"watch:css": "sass --no-source-map -I manual/assets/css/src/values manual/assets/css/src:manual/assets/css/dist -w",
+		"watch:js": "node esbuild -w"
+	},
+	"peerDependencies": {
+		"three": ">= 0.157.0 < 0.179.0"
+	},
+	"devDependencies": {
+		"@tweakpane/core": "2.x.x",
+		"@types/node": "24.x.x",
+		"@types/three": "0.x.x",
+		"@typescript-eslint/eslint-plugin": "8.x.x",
+		"@typescript-eslint/parser": "8.x.x",
+		"autoprefixer": "10.x.x",
+		"ava": "6.x.x",
+		"cpy-cli": "5.x.x",
+		"cssnano": "7.x.x",
+		"dat.gui": "0.x.x",
+		"del-cli": "6.x.x",
+		"esbuild": "0.25.x",
+		"esbuild-plugin-glsl": "1.x.x",
+		"esdoc": "1.x.x",
+		"esdoc-importpath-plugin": "1.x.x",
+		"esdoc-standard-plugin": "1.x.x",
+		"eslint": "9.x.x",
+		"eslint-config-aether": "2.x.x",
+		"gzipper": "8.x.x",
+		"hugo-bin": "0.x.x",
+		"npm-run-all": "4.x.x",
+		"postcss": "8.x.x",
+		"postcss-cli": "11.x.x",
+		"postcss-preset-env": "10.x.x",
+		"sass": "1.x.x",
+		"spatial-controls": "6.x.x",
+		"stylelint": "16.x.x",
+		"stylelint-config-standard-scss": "15.x.x",
+		"stylelint-order": "7.x.x",
+		"three": "0.x.x",
+		"three-demo": "5.x.x",
+		"tiny-glob": "0.x.x",
+		"tslib": "2.x.x",
+		"tweakpane": "4.x.x",
+		"typescript": "5.8.x"
+	}
+}

app/node_modules/three-good-godrays/LICENSE

@@ -0,0 +1,22 @@
+Copyright © 2022 Casey Primozic
+
+Adapted from original code (https://github.com/N8python/goodGodRays)
+by https://github.com/n8python
+
+This software is provided 'as-is', without any express or implied warranty. In
+no event will the authors be held liable for any damages arising from the use of
+this software.
+
+Permission is granted to anyone to use this software for any purpose, including
+commercial applications, and to alter it and redistribute it freely, subject to
+the following restrictions:
+
+1. The origin of this software must not be misrepresented; you must not claim
+   that you wrote the original software. If you use this software in a product,
+   an acknowledgment in the product documentation would be appreciated but is
+   not required.
+
+2. Altered source versions must be plainly marked as such, and must not be
+   misrepresented as being the original software.
+
+3. This notice may not be removed or altered from any source distribution.

app/node_modules/three-good-godrays/README.md

@@ -0,0 +1,113 @@
+# `three-good-godrays`
+
+[![CI](https://github.com/ameobea/three-good-godrays/actions/workflows/cd.yml/badge.svg)](https://github.com/ameobea/three-good-godrays/actions/workflows/ci.yml)
+[![Version](https://badgen.net/npm/v/three-good-godrays?color=green)](https://www.npmjs.com/package/three-good-godrays)
+
+Good godrays effect for three.js using the [pmndrs `postprocessing` library](https://github.com/pmndrs/postprocessing)
+
+Adapted from [original implementation](https://github.com/n8python/goodGodRays) by [@n8python](https://github.com/n8python)
+
+**Demo**: <https://three-good-godrays.ameo.design>
+
+![A screenshot showing the three-good-godrays effect in action within the sponza demo scene. A white sphere in the middle of a terrace with pillars has white godrays emanating from it along with prominent shadows.](https://ameo.link/u/al8.jpg)
+
+## Install
+
+`npm install three-good-godrays`
+
+Or import from unpkg as a module:
+
+```ts
+import { GodraysPass } from 'https://unpkg.com/three-good-godrays@0.7.1/build/three-good-godrays.esm.js';
+```
+
+## Supported Three.JS Version
+
+This library was tested to work with Three.JS versions `>= 0.125.0 <= 0.167.0`.  Although it might work with versions outside that range, support is not guaranteed.
+
+## Usage
+
+```ts
+import { EffectComposer, RenderPass } from 'postprocessing';
+import * as THREE from 'three';
+import { GodraysPass } from 'three-good-godrays';
+
+const { scene, camera, renderer } = initYourScene();
+
+// shadowmaps are needed for this effect
+renderer.shadowMap.enabled = true;
+renderer.shadowMap.type = THREE.PCFSoftShadowMap;
+renderer.shadowMap.autoUpdate = true;
+
+// Make sure to set applicable objects in your scene to cast + receive shadows
+// so that this effect will work
+scene.traverse(obj => {
+  if (obj instanceof THREE.Mesh) {
+    obj.castShadow = true;
+    obj.receiveShadow = true;
+  }
+});
+
+// godrays can be cast from either `PointLight`s or `DirectionalLight`s
+const lightPos = new THREE.Vector3(0, 20, 0);
+const pointLight = new THREE.PointLight(0xffffff, 1, 10000);
+pointLight.castShadow = true;
+pointLight.shadow.mapSize.width = 1024;
+pointLight.shadow.mapSize.height = 1024;
+pointLight.shadow.autoUpdate = true;
+pointLight.shadow.camera.near = 0.1;
+pointLight.shadow.camera.far = 1000;
+pointLight.shadow.camera.updateProjectionMatrix();
+pointLight.position.copy(lightPos);
+scene.add(pointLight);
+
+// set up rendering pipeline and add godrays pass at the end
+const composer = new EffectComposer(renderer, { frameBufferType: THREE.HalfFloatType });
+
+const renderPass = new RenderPass(scene, camera);
+renderPass.renderToScreen = false;
+composer.addPass(renderPass);
+
+// Default values are shown.  You can supply a sparse object or `undefined`.
+const params = {
+  density: 1 / 128,
+  maxDensity: 0.5,
+  edgeStrength: 2,
+  edgeRadius: 2,
+  distanceAttenuation: 2,
+  color: new THREE.Color(0xffffff),
+  raymarchSteps: 60,
+  blur: true,
+  gammaCorrection: true,
+};
+
+const godraysPass = new GodraysPass(pointLight, camera, params);
+// If this is the last pass in your pipeline, set `renderToScreen` to `true`
+godraysPass.renderToScreen = true;
+composer.addPass(godraysPass);
+
+function animate() {
+  requestAnimationFrame(animate);
+  composer.render();
+}
+requestAnimationFrame(animate);
+```
+
+### Gamma Correction
+
+Gamma correction is enabled by this effect by default, matching expectations of sRGB buffers from `postprocessing`. However, you can disable this by setting `gammaCorrection: false` in the configuration object for the pass.
+
+This may be necessary if you use other effect passes after `GodraysPass` that perform their own output encoding. If you see artifacts similar to these:
+
+![Screenshot of artifacts caused by double encoding in a Three.Js pmndrs postprocessing pipeline.  There is a grainy pattern of colorful pixels appearing over an otherwise blank black background.](https://i.ameo.link/bto.png)
+
+Try setting `gammaCorrection: false` on the `GodraysPass` or setting `encodeOutput = false` on any `EffectPass` that is added after the `GodraysPass`.
+
+## Develop + Run Demos Locally
+
+- Clone repo
+- `npm install`
+- `npm run prepublishOnly` to run initial builds
+- `npm install -g serve`
+- Run `node esbuild.mjs` whenever files are chnaged to re-build
+- Run `serve public/demo -p 5001` and visit http://localhost:5001 in your browser

app/node_modules/three-good-godrays/build/bilateralFilter.d.ts

@@ -0,0 +1,16 @@
+import { type Disposable, Pass, type Resizable } from 'postprocessing';
+import * as THREE from 'three';
+import type { GodraysBlurParams } from './index';
+export declare const GODRAYS_BLUR_RESOLUTION_SCALE = 1;
+declare class BilateralFilterMaterial extends THREE.ShaderMaterial {
+    constructor(input: THREE.Texture);
+}
+export declare class BilateralFilterPass extends Pass implements Resizable, Disposable {
+    material: BilateralFilterMaterial;
+    constructor(input: THREE.Texture);
+    setSize(width: number, height: number): void;
+    render(renderer: THREE.WebGLRenderer, _inputBuffer: THREE.WebGLRenderTarget, outputBuffer: THREE.WebGLRenderTarget, _deltaTime?: number | undefined, _stencilTest?: boolean | undefined): void;
+    updateUniforms(params: GodraysBlurParams): void;
+    dispose(): void;
+}
+export {};

app/node_modules/three-good-godrays/build/compositorPass.d.ts

@@ -0,0 +1,28 @@
+import { Pass, type Resizable } from 'postprocessing';
+import * as THREE from 'three';
+import type { PerspectiveCamera } from 'three';
+import type { GodraysPassParams } from './index';
+interface GodraysCompositorMaterialProps {
+    godrays: THREE.Texture;
+    edgeStrength: number;
+    edgeRadius: number;
+    color: THREE.Color;
+    camera: THREE.PerspectiveCamera;
+    gammaCorrection: boolean;
+}
+export declare class GodraysCompositorMaterial extends THREE.ShaderMaterial implements Resizable {
+    constructor({ godrays, edgeStrength, edgeRadius, color, camera, gammaCorrection, }: GodraysCompositorMaterialProps);
+    updateUniforms(edgeStrength: number, edgeRadius: number, color: THREE.Color, gammaCorrection: boolean, near: number, far: number): void;
+    setSize(width: number, height: number): void;
+}
+export declare class GodraysCompositorPass extends Pass {
+    sceneCamera: PerspectiveCamera;
+    private depthCopyRenderTexture;
+    private depthTextureCopyPass;
+    constructor(props: GodraysCompositorMaterialProps);
+    updateUniforms(params: GodraysPassParams): void;
+    render(renderer: THREE.WebGLRenderer, inputBuffer: THREE.WebGLRenderTarget, outputBuffer: THREE.WebGLRenderTarget | null, _deltaTime?: number | undefined, _stencilTest?: boolean | undefined): void;
+    setDepthTexture(depthTexture: THREE.Texture, depthPacking?: THREE.DepthPackingStrategies | undefined): void;
+    setSize(width: number, height: number): void;
+}
+export {};

app/node_modules/three-good-godrays/build/illumPass.d.ts

@@ -0,0 +1,21 @@
+import { Pass, type Resizable } from 'postprocessing';
+import * as THREE from 'three';
+import type { GodraysPassParams } from './index';
+export declare const GODRAYS_RESOLUTION_SCALE: number;
+export interface GodraysIllumPassProps {
+    light: THREE.PointLight | THREE.DirectionalLight;
+    camera: THREE.PerspectiveCamera;
+}
+export declare class GodraysIllumPass extends Pass implements Resizable {
+    private material;
+    private shadowMapSet;
+    private props;
+    private lastParams;
+    private lightWorldPos;
+    constructor(props: GodraysIllumPassProps, params: GodraysPassParams);
+    setSize(width: number, height: number): void;
+    render(renderer: THREE.WebGLRenderer, _inputBuffer: THREE.WebGLRenderTarget, outputBuffer: THREE.WebGLRenderTarget, _deltaTime?: number | undefined, _stencilTest?: boolean | undefined): void;
+    setDepthTexture(depthTexture: THREE.Texture, depthPacking?: THREE.DepthPackingStrategies | undefined): void;
+    private updateLightParams;
+    updateUniforms({ light, camera }: GodraysIllumPassProps, params: GodraysPassParams): void;
+}

app/node_modules/three-good-godrays/build/three-good-godrays.d.ts

@@ -0,0 +1,117 @@
+import { type Disposable, KernelSize, Pass } from 'postprocessing';
+import * as THREE from 'three';
+export interface GodraysBlurParams {
+    /**
+     * The sigma factor used by the bilateral filter for the blur.  Higher values result in more blur, but
+     * can cause artifacts.
+     *
+     * Default: 0.1
+     */
+    variance: number;
+    /**
+     * The kernel size for the bilateral filter.  Higher values blur more neighboring pixels and can smooth over higher amounts of noise,
+     * but require exponentially more texture samples and thus can be slower.
+     *
+     * Default: `KernelSize.SMALL`
+     */
+    kernelSize: KernelSize;
+}
+export interface GodraysPassParams {
+    /**
+     * The rate of accumulation for the godrays.  Higher values roughly equate to more humid air/denser fog.
+     *
+     * Default: 1 / 128
+     */
+    density: number;
+    /**
+     * The maximum density of the godrays.  Limits the maximum brightness of the godrays.
+     *
+     * Default: 0.5
+     */
+    maxDensity: number;
+    /**
+     * Default: 2
+     */
+    edgeStrength: number;
+    /**
+     * Edge radius used for depth-aware upsampling of the godrays.  Higher values can yield better edge quality at the cost of performance, as
+     * each level higher of this requires two additional texture samples.
+     *
+     * Default: 2
+     */
+    edgeRadius: number;
+    /**
+     * Higher values decrease the accumulation of godrays the further away they are from the light source.
+     *
+     * Default: 2
+     */
+    distanceAttenuation: number;
+    /**
+     * The color of the godrays.
+     *
+     * Default: `new THREE.Color(0xffffff)`
+     */
+    color: THREE.Color;
+    /**
+     * The number of raymarching steps to take per pixel.  Higher values increase the quality of the godrays at the cost of performance.
+     *
+     * Default: 60
+     */
+    raymarchSteps: number;
+    /**
+     * Whether or not to apply a bilateral blur to the godrays.  This can be used to reduce artifacts that can occur when using a low number of raymarching steps.
+     *
+     * It costs a bit of extra performance, but can allow for a lower number of raymarching steps to be used with similar quality.
+     *
+     * Default: false
+     */
+    blur: boolean | Partial<GodraysBlurParams>;
+    gammaCorrection: boolean;
+}
+export declare class GodraysPass extends Pass implements Disposable {
+    private props;
+    private depthTexture;
+    private depthPacking;
+    private lastParams;
+    private godraysRenderTarget;
+    private illumPass;
+    private enableBlurPass;
+    private blurPass;
+    private blurRenderTarget;
+    private compositorPass;
+    /**
+     * Constructs a new GodraysPass.  Casts godrays from a point light source.  Add to your scene's composer like this:
+     *
+     * ```ts
+     * import { EffectComposer, RenderPass } from 'postprocessing';
+     * import { GodraysPass } from 'three-good-godrays';
+     *
+     * const composer = new EffectComposer(renderer, { frameBufferType: THREE.HalfFloatType });
+     * const renderPass = new RenderPass(scene, camera);
+     * renderPass.renderToScreen = false;
+     * composer.addPass(renderPass);
+     *
+     * const godraysPass = new GodraysPass(pointLight, camera);
+     * godraysPass.renderToScreen = true;
+     * composer.addPass(godraysPass);
+     *
+     * function animate() {
+     *   composer.render(scene, camera);
+     * }
+     * ```
+     *
+     * @param light The light source to use for the godrays.
+     * @param camera The camera used to render the scene.
+     * @param partialParams The parameters to use for the godrays effect.  Will use default values for any parameters not specified.
+     */
+    constructor(light: THREE.PointLight | THREE.DirectionalLight, camera: THREE.PerspectiveCamera, partialParams?: Partial<GodraysPassParams>);
+    /**
+     * Updates the parameters used for the godrays effect.  Will use default values for any parameters not specified.
+     */
+    setParams(partialParams: Partial<GodraysPassParams>): void;
+    private maybeInitBlur;
+    render(renderer: THREE.WebGLRenderer, inputBuffer: THREE.WebGLRenderTarget, outputBuffer: THREE.WebGLRenderTarget, _deltaTime?: number | undefined, _stencilTest?: boolean | undefined): void;
+    setDepthTexture(depthTexture: THREE.Texture, depthPacking?: THREE.DepthPackingStrategies | undefined): void;
+    setSize(width: number, height: number): void;
+    dispose(): void;
+}

app/node_modules/three-good-godrays/package.json

@@ -0,0 +1,76 @@
+{
+  "name": "three-good-godrays",
+  "version": "0.7.1",
+  "description": "Screen-space raymarched godrays for three.js using the pmndrs postprocessing library",
+  "main": "build/three-good-godrays.js",
+  "module": "build/three-good-godrays.esm.js",
+  "exports": {
+    ".": {
+      "import": "./build/three-good-godrays.esm.js",
+      "require": "./build/three-good-godrays.js"
+    },
+    "./module": "./build/three-good-godrays.mjs"
+  },
+  "types": "build/three-good-godrays.d.ts",
+  "sideEffects": false,
+  "keywords": [
+    "three",
+    "threejs",
+    "godrays",
+    "postprocessing",
+    "raymarching"
+  ],
+  "contributors": [
+    {
+      "name": "n8programs",
+      "url": "https://github.com/n8python"
+    },
+    {
+      "name": "Casey Primozic",
+      "url": "https://github.com/ameobea"
+    }
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/ameobea/three-good-godrays.git"
+  },
+  "bugs": {
+    "url": "https://github.com/ameobea/three-good-godrays/issues"
+  },
+  "files": [
+    "build",
+    "types"
+  ],
+  "engines": {
+    "node": ">= 0.13.2"
+  },
+  "scripts": {
+    "clean": "mkdir -p build && rimraf build types",
+    "copy-files": "cp -r demo/static/* public/demo",
+    "build:js": "node esbuild.mjs",
+    "build:js:min": "node esbuild.mjs -m",
+    "build:types": "tsc --declaration --emitDeclarationOnly && rm build/bluenoise.d.ts && mv build/index.d.ts build/three-good-godrays.d.ts",
+    "prepublishOnly": "run-s clean build:types build:js:min copy-files",
+    "prettier": "prettier --write \"src/**/*.{ts,js,tsx}\" && prettier --write \"demo/**/*.{ts,js,tsx}\""
+  },
+  "peerDependencies": {
+    "postprocessing": "^6.33.4",
+    "three": ">= 0.125.0 <= 0.167.0"
+  },
+  "devDependencies": {
+    "@ianvs/prettier-plugin-sort-imports": "^4.1.1",
+    "@types/dat.gui": "^0.7.12",
+    "@types/three": "^0.167.0",
+    "dat.gui": "^0.7.9",
+    "esbuild": "^0.19.11",
+    "esbuild-plugin-glsl": "1.x.x",
+    "eslint": "8.x.x",
+    "npm-run-all": "^4.1.5",
+    "postprocessing": "^6.34.1",
+    "prettier": "^3.2.4",
+    "rimraf": "^5.0.5",
+    "three": "^0.167.0",
+    "three-demo": "^5.1.3",
+    "typescript": "^5.3.3"
+  }
+}

app/package-lock.json

@@ -10,7 +10,9 @@
       "dependencies": {
         "@types/three": "^0.178.1",
         "cannon-es": "^0.20.0",
-        "three": "^0.178.0"
+        "postprocessing": "^6.37.6",
+        "three": "^0.178.0",
+        "three-good-godrays": "^0.7.1"
       },
       "devDependencies": {
         "typescript": "~5.8.3",
@@ -949,6 +951,15 @@
         "node": "^10 || ^12 || >=14"
       }
     },
+    "node_modules/postprocessing": {
+      "version": "6.37.6",
+      "resolved": "https://registry.npmjs.org/postprocessing/-/postprocessing-6.37.6.tgz",
+      "integrity": "sha512-KrdKLf1257RkoIk3z3nhRS0aToKrX2xJgtR0lbnOQUjd+1I4GVNv1gQYsQlfRglvEXjpzrwqOA5fXfoDBimadg==",
+      "license": "Zlib",
+      "peerDependencies": {
+        "three": ">= 0.157.0 < 0.179.0"
+      }
+    },
     "node_modules/rollup": {
       "version": "4.46.1",
       "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.46.1.tgz",
@@ -1005,6 +1016,18 @@
       "integrity": "sha512-ybFIB0+x8mz0wnZgSGy2MO/WCO6xZhQSZnmfytSPyNpM0sBafGRVhdaj+erYh5U+RhQOAg/eXqw5uVDiM2BjhQ==",
       "license": "MIT"
     },
+    "node_modules/three-good-godrays": {
+      "version": "0.7.1",
+      "resolved": "https://registry.npmjs.org/three-good-godrays/-/three-good-godrays-0.7.1.tgz",
+      "integrity": "sha512-VeaJlcWozjKPm2FgiHXPDTVmGxYr89arRYJlyLmJvLr+C+2OVm1RPsHcdXyRU4IPT33EQUfSuFBtL/z2lNqXAw==",
+      "engines": {
+        "node": ">= 0.13.2"
+      },
+      "peerDependencies": {
+        "postprocessing": "^6.33.4",
+        "three": ">= 0.125.0 <= 0.167.0"
+      }
+    },
     "node_modules/tinyglobby": {
       "version": "0.2.14",
       "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.14.tgz",

app/package.json

@@ -15,6 +15,8 @@
   "dependencies": {
     "@types/three": "^0.178.1",
     "cannon-es": "^0.20.0",
-    "three": "^0.178.0"
+    "postprocessing": "^6.37.6",
+    "three": "^0.178.0",
+    "three-good-godrays": "^0.7.1"
   }
 }

app/src/main.ts

@@ -6,6 +6,7 @@ import { LightingManager } from './lighting'
 import { ModelLoader } from './model-loader'
 import { PhysicsManager } from './physics'
 import { EventManager } from './event-manager'
+import { PostProcessingManager } from './post-processing'
 
 class AAFHomepage {
   private scene: THREE.Scene
@@ -20,10 +21,12 @@ class AAFHomepage {
   private lastTime: number = 0
   private modelLoader: ModelLoader
   private eventManager: EventManager
+  private postProcessing!: PostProcessingManager
+  private usePostProcessing: boolean = true
 
   constructor() {
     this.scene = new THREE.Scene()
-    this.camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000)
+    this.camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000)
     
     const canvas = document.getElementById('three-canvas') as HTMLCanvasElement
     
@@ -52,10 +55,22 @@ class AAFHomepage {
       this.renderer
     )
 
+    // Setup home button functionality
+    this.setupHomeButton()
+
     // Initialize the scene
     this.init()
   }
 
+  private setupHomeButton(): void {
+    const homeButton = document.getElementById('home-button')
+    if (homeButton) {
+      homeButton.addEventListener('click', () => {
+        window.location.href = 'https://home.aaf.systems/'
+      })
+    }
+  }
+
   private init(): void {
     // Setup renderer
     this.renderer.setSize(window.innerWidth, window.innerHeight)
@@ -73,6 +88,21 @@ class AAFHomepage {
     // Setup lighting
     LightingManager.setupLighting(this.scene)
 
+    // Initialize post-processing
+    this.postProcessing = new PostProcessingManager(this.renderer, this.scene, this.camera)
+
+    // Setup window resize handler
+    window.addEventListener('resize', () => {
+      const width = window.innerWidth
+      const height = window.innerHeight
+      
+      this.camera.aspect = width / height
+      this.camera.updateProjectionMatrix()
+      
+      this.renderer.setSize(width, height)
+      this.postProcessing.resize(width, height)
+    })
+
     // Load and create objects from the main model
     this.loadAndCreateObjects()
 
@@ -105,7 +135,14 @@ class AAFHomepage {
       clampedDeltaTime
     )
     
-    this.renderer.render(this.scene, this.camera)
+    // Use post-processing rendering
+    if (this.usePostProcessing) {
+      this.postProcessing.update(clampedDeltaTime)
+      this.postProcessing.render(clampedDeltaTime)
+    } else {
+      // Fallback to direct rendering
+      this.renderer.render(this.scene, this.camera)
+    }
   }
 }
 

app/src/model-loader.ts

@@ -252,7 +252,7 @@ export class ModelLoader {
       }
       
       // Create multiple instances of the loaded model
-      const numInstances = 20
+      const numInstances = 30
       
       // Create polished gun metal material
       const gunMetalMaterial = new THREE.MeshStandardMaterial({

app/src/motion-blur.ts

@@ -0,0 +1,121 @@
+import * as THREE from 'three'
+
+export class MotionBlurEffect {
+  private scene: THREE.Scene
+  private camera: THREE.PerspectiveCamera
+  private renderer: THREE.WebGLRenderer
+  private renderTarget1: THREE.WebGLRenderTarget
+  private renderTarget2: THREE.WebGLRenderTarget
+  private blurMaterial: THREE.ShaderMaterial
+  private quad: THREE.Mesh
+  private intensity: number = 0.5
+  private accumulation: number = 0.8
+
+  constructor(
+    scene: THREE.Scene,
+    camera: THREE.PerspectiveCamera,
+    renderer: THREE.WebGLRenderer
+  ) {
+    this.scene = scene
+    this.camera = camera
+    this.renderer = renderer
+
+    const size = renderer.getSize(new THREE.Vector2())
+    
+    // Create render targets for accumulation
+    this.renderTarget1 = new THREE.WebGLRenderTarget(size.x, size.y, {
+      minFilter: THREE.LinearFilter,
+      magFilter: THREE.LinearFilter,
+      format: THREE.RGBAFormat,
+      type: THREE.FloatType
+    })
+    
+    this.renderTarget2 = new THREE.WebGLRenderTarget(size.x, size.y, {
+      minFilter: THREE.LinearFilter,
+      magFilter: THREE.LinearFilter,
+      format: THREE.RGBAFormat,
+      type: THREE.FloatType
+    })
+
+    // Motion blur shader material
+    this.blurMaterial = new THREE.ShaderMaterial({
+      uniforms: {
+        tCurrent: { value: null },
+        tPrevious: { value: null },
+        intensity: { value: this.intensity },
+        accumulation: { value: this.accumulation }
+      },
+      vertexShader: `
+        varying vec2 vUv;
+        void main() {
+          vUv = uv;
+          gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
+        }
+      `,
+      fragmentShader: `
+        uniform sampler2D tCurrent;
+        uniform sampler2D tPrevious;
+        uniform float intensity;
+        uniform float accumulation;
+        varying vec2 vUv;
+        
+        void main() {
+          vec4 current = texture2D(tCurrent, vUv);
+          vec4 previous = texture2D(tPrevious, vUv);
+          
+          // Blend current frame with accumulated previous frames
+          vec4 result = mix(current, previous, accumulation * intensity);
+          
+          gl_FragColor = result;
+        }
+      `
+    })
+
+    // Create fullscreen quad
+    const geometry = new THREE.PlaneGeometry(2, 2)
+    this.quad = new THREE.Mesh(geometry, this.blurMaterial)
+  }
+
+  public render(_deltaTime: number): THREE.WebGLRenderTarget {
+    // Render current frame to renderTarget1
+    this.renderer.setRenderTarget(this.renderTarget1)
+    this.renderer.render(this.scene, this.camera)
+
+    // Apply motion blur by blending with previous frame
+    this.blurMaterial.uniforms.tCurrent.value = this.renderTarget1.texture
+    this.blurMaterial.uniforms.tPrevious.value = this.renderTarget2.texture
+
+    // Render blurred result to renderTarget2
+    this.renderer.setRenderTarget(this.renderTarget2)
+    this.renderer.render(this.quad, new THREE.OrthographicCamera(-1, 1, 1, -1, 0, 1))
+
+    // Swap render targets for next frame
+    const temp = this.renderTarget1
+    this.renderTarget1 = this.renderTarget2
+    this.renderTarget2 = temp
+
+    return this.renderTarget1
+  }
+
+  public setIntensity(intensity: number): void {
+    this.intensity = intensity
+    this.blurMaterial.uniforms.intensity.value = intensity
+  }
+
+  public setAccumulation(accumulation: number): void {
+    this.accumulation = accumulation
+    this.blurMaterial.uniforms.accumulation.value = accumulation
+  }
+
+  public resize(width: number, height: number): void {
+    this.renderTarget1.setSize(width, height)
+    this.renderTarget2.setSize(width, height)
+  }
+
+  public dispose(): void {
+    this.renderTarget1.dispose()
+    this.renderTarget2.dispose()
+    this.blurMaterial.dispose()
+    this.quad.geometry.dispose()
+  }
+}

app/src/post-processing.ts

@@ -0,0 +1,122 @@
+import * as THREE from 'three'
+import {
+  EffectComposer,
+  EffectPass,
+  RenderPass,
+  BloomEffect,
+  SSAOEffect,
+  DepthOfFieldEffect,
+  NormalPass,
+  SMAAEffect
+} from 'postprocessing'
+
+export class PostProcessingManager {
+  private composer: EffectComposer
+  private bloomEffect: BloomEffect
+  private ssaoEffect: SSAOEffect
+  private depthOfFieldEffect: DepthOfFieldEffect
+  private normalPass: NormalPass
+
+  constructor(
+    renderer: THREE.WebGLRenderer,
+    scene: THREE.Scene,
+    camera: THREE.PerspectiveCamera
+  ) {
+    // Create effect composer
+    this.composer = new EffectComposer(renderer)
+
+    // Add render pass (renders the scene)
+    const renderPass = new RenderPass(scene, camera)
+    this.composer.addPass(renderPass)
+
+    // Create normal pass for SSAO
+    this.normalPass = new NormalPass(scene, camera)
+    this.composer.addPass(this.normalPass)
+
+    // Create bloom effect - enhanced for more dramatic glow
+    this.bloomEffect = new BloomEffect({
+      intensity: 1.2,
+      luminanceThreshold: 0.1,
+      luminanceSmoothing: 0.15,
+      radius: 0.9,
+      mipmapBlur: true
+    })
+
+    // Create SSAO effect - enhanced for better ambient occlusion
+    this.ssaoEffect = new SSAOEffect(camera, this.normalPass.texture, {
+      intensity: 0.8,
+      fade: 0.01,
+      radius: 0.15,
+      samples: 32,
+      rings: 4,
+      worldDistanceThreshold: 20,
+      worldDistanceFalloff: 5,
+      worldProximityThreshold: 0.0005,
+      worldProximityFalloff: 0.001,
+      luminanceInfluence: 0.7,
+      bias: 0.02
+    })
+
+    // Create depth of field effect - tighter focus for more dramatic effect
+    this.depthOfFieldEffect = new DepthOfFieldEffect(camera, {
+      focusDistance: 0.015,  // Closer focus point
+      focalLength: 0.12,     // Shorter focal length for stronger blur
+      bokehScale: 4.0,       // Larger bokeh for more pronounced blur
+      height: 480
+    })
+
+    // Create SMAA effect for better antialiasing
+    const smaaEffect = new SMAAEffect()
+
+    // Combine effects in a single pass for better performance
+    const effectPass = new EffectPass(
+      camera,
+      this.bloomEffect,
+      this.ssaoEffect,
+      this.depthOfFieldEffect,
+      smaaEffect
+    )
+
+    this.composer.addPass(effectPass)
+  }
+
+  public render(deltaTime?: number): void {
+    this.composer.render(deltaTime)
+  }
+
+  public resize(width: number, height: number): void {
+    this.composer.setSize(width, height)
+  }
+
+  // Control methods for real-time adjustments
+  public setBloomIntensity(intensity: number): void {
+    this.bloomEffect.intensity = intensity
+  }
+
+  public setSSAOIntensity(intensity: number): void {
+    this.ssaoEffect.intensity = intensity
+  }
+
+  public setDepthOfFieldFocus(focusDistance: number): void {
+    this.depthOfFieldEffect.circleOfConfusionMaterial.uniforms.focusDistance.value = focusDistance
+  }
+
+  // Get the composer for advanced usage
+  public getComposer(): EffectComposer {
+    return this.composer
+  }
+
+  // Update method for any per-frame updates
+  public update(_deltaTime: number): void {
+    // Add any custom update logic here if needed
+  }
+
+  // Dispose method for cleanup
+  public dispose(): void {
+    this.composer.dispose()
+    this.bloomEffect.dispose()
+    this.ssaoEffect.dispose()
+    this.depthOfFieldEffect.dispose()
+    this.normalPass.dispose()
+  }
+}

app/src/style.css

@@ -38,10 +38,71 @@ html, body {
   cursor: crosshair;
 }
 
+.home-button {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 100;
+  
+  /* Frosted glass effect */
+  background: rgba(255, 255, 255, 0.1);
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  border-radius: 12px;
+  
+  /* Typography */
+  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
+  font-size: 1rem;
+  font-weight: 1000;
+  color: rgb(255, 255, 255);
+  letter-spacing: 1px;
+  
+  /* Layout */
+  padding: 1rem 2rem;
+  cursor: pointer;
+  user-select: none;
+  
+  /* Transitions */
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  
+  /* Remove default button styles */
+  border: none;
+  outline: none;
+}
+
+.home-button:hover {
+  background: rgba(255, 255, 255, 0.15);
+  border: 1px solid rgba(255, 255, 255, 0.3);
+  transform: translate(-50%, -50%) translateY(-1px);
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
+}
+
+.home-button:active {
+  transform: translate(-50%, -50%) translateY(0);
+  background: rgba(255, 255, 255, 0.2);
+}
+
+.home-button span {
+  display: block;
+  position: relative;
+  color: rgba(255, 255, 255, 0.15);
+  filter: blur(0.3px);
+  -webkit-filter: blur(0.3px);
+}
+
 @media (max-width: 768px) {
   .logo {
     top: 1rem;
     left: 1rem;
     font-size: 1.25rem;
   }
+  
+  .home-button {
+    padding: 1.5rem 3rem;
+    font-size: 1.5rem;
+    letter-spacing: 3px;
+    /* Keep centered positioning on mobile */
+  }
 }

app/vite.config.ts

@@ -0,0 +1,23 @@
+import { defineConfig } from 'vite'
+
+export default defineConfig({
+  base: './',
+  build: {
+    outDir: 'dist',
+    assetsDir: 'assets',
+    sourcemap: false,
+    rollupOptions: {
+      output: {
+        manualChunks: undefined,
+      },
+    },
+  },
+  server: {
+    host: '0.0.0.0',
+    port: 8080,
+  },
+  preview: {
+    host: '0.0.0.0',
+    port: 8080,
+  },
+})

create-transfer-package.sh

@@ -0,0 +1,76 @@
+#!/bin/bash
+
+# AAF Systems Homepage - Create Transfer Package
+# This script creates a complete transfer package with the Docker image and scripts
+
+echo "📦 Creating Complete Transfer Package"
+echo "===================================="
+
+PACKAGE_DIR="aaf-systems-transfer-package"
+IMAGE_TAR="aaf-systems-homepage-docker.tar"
+
+# Check if Docker image tar exists
+if [ ! -f "$IMAGE_TAR" ]; then
+    echo "🔨 Docker image package not found. Building and packaging..."
+    ./package-docker.sh
+    
+    if [ ! -f "$IMAGE_TAR" ]; then
+        echo "❌ Failed to create Docker image package"
+        exit 1
+    fi
+fi
+
+# Create transfer package directory
+echo "📁 Creating transfer package directory..."
+rm -rf $PACKAGE_DIR
+mkdir -p $PACKAGE_DIR
+
+# Copy necessary files
+echo "📋 Copying files to package..."
+cp $IMAGE_TAR $PACKAGE_DIR/
+cp load-and-run-docker.sh $PACKAGE_DIR/
+cp stop-docker.sh $PACKAGE_DIR/
+
+# Create a README for the transfer package
+cat > $PACKAGE_DIR/README.txt << 'EOF'
+AAF Systems Homepage - Transfer Package
+======================================
+
+This package contains everything needed to run the AAF Systems Homepage on a target computer.
+
+Contents:
+- aaf-systems-homepage-docker.tar: The Docker image
+- load-and-run-docker.sh: Script to load and run the Docker image
+- stop-docker.sh: Script to stop the Docker container
+
+Instructions:
+1. Make sure Docker is installed and running on the target computer
+2. Copy this entire folder to the target computer
+3. Open terminal in this folder
+4. Run: chmod +x *.sh
+5. Run: ./load-and-run-docker.sh
+
+The application will be available at http://localhost:8080
+
+To stop the application: ./stop-docker.sh
+EOF
+
+# Create archive
+echo "🗜️  Creating compressed archive..."
+tar -czf aaf-systems-transfer-package.tar.gz $PACKAGE_DIR
+
+echo "✅ Transfer package created successfully!"
+echo ""
+echo "📦 Package Contents:"
+echo "==================="
+ls -la $PACKAGE_DIR/
+echo ""
+echo "📊 Archive Info:"
+echo "==============="
+ls -lh aaf-systems-transfer-package.tar.gz
+echo ""
+echo "🚚 Ready for Transfer:"
+echo "====================="
+echo "Transfer 'aaf-systems-transfer-package.tar.gz' to the target computer"
+echo "On target computer: tar -xzf aaf-systems-transfer-package.tar.gz"
+echo "Then follow instructions in the README.txt file"

docker-compose.yml

@@ -0,0 +1,10 @@
+version: '3.8'
+
+services:
+  aaf-systems-homepage:
+    build: .
+    ports:
+      - "8080:8080"
+    environment:
+      - NODE_ENV=production
+    restart: unless-stopped

load-and-run-docker.sh

@@ -0,0 +1,55 @@
+#!/bin/bash
+
+# AAF Systems Homepage - Docker Load Script
+# This script loads and runs a packaged Docker image on the target computer
+
+echo "🚀 AAF Systems Homepage Docker Load & Run"
+echo "========================================="
+
+IMAGE_NAME="aaf-systems-homepage"
+PACKAGE_NAME="aaf-systems-homepage-docker.tar"
+CONTAINER_NAME="aaf-systems-homepage"
+
+# Check if Docker is running
+if ! sudo docker info > /dev/null 2>&1; then
+    echo "❌ Docker is not running. Please start Docker and try again."
+    exit 1
+fi
+
+# Check if package file exists
+if [ ! -f "$PACKAGE_NAME" ]; then
+    echo "❌ Package file '$PACKAGE_NAME' not found in current directory"
+    echo "Please make sure the .tar file is in the same directory as this script"
+    exit 1
+fi
+
+echo "📦 Loading Docker image from $PACKAGE_NAME..."
+sudo docker load -i $PACKAGE_NAME
+
+if [ $? -ne 0 ]; then
+    echo "❌ Failed to load Docker image"
+    exit 1
+fi
+
+echo "🛑 Stopping any existing container..."
+sudo docker stop $CONTAINER_NAME 2>/dev/null || true
+sudo docker rm $CONTAINER_NAME 2>/dev/null || true
+
+echo "🚀 Starting container on port 8080..."
+sudo docker run -d -p 8080:8080 --name $CONTAINER_NAME $IMAGE_NAME
+
+if [ $? -eq 0 ]; then
+    echo "✅ Container started successfully!"
+    echo ""
+    echo "🌐 Application is running at: http://localhost:8080"
+    echo ""
+    echo "📋 Useful Commands:"
+    echo "=================="
+    echo "View logs:     sudo docker logs $CONTAINER_NAME"
+    echo "Stop container: sudo docker stop $CONTAINER_NAME"
+    echo "Remove container: sudo docker rm $CONTAINER_NAME"
+    echo "Check status:  sudo docker ps"
+else
+    echo "❌ Failed to start container"
+    exit 1
+fi

package-docker.sh

@@ -0,0 +1,46 @@
+#!/bin/bash
+
+# AAF Systems Homepage - Docker Package Script
+# This script builds and packages the Docker image for transfer to another computer
+
+echo "📦 AAF Systems Homepage Docker Packaging"
+echo "========================================"
+
+IMAGE_NAME="aaf-systems-homepage"
+PACKAGE_NAME="aaf-systems-homepage-docker.tar"
+
+# Check if Docker is running
+if ! sudo docker info > /dev/null 2>&1; then
+    echo "❌ Docker is not running. Please start Docker and try again."
+    exit 1
+fi
+
+echo "🔨 Building Docker image..."
+sudo docker build -t $IMAGE_NAME .
+
+if [ $? -ne 0 ]; then
+    echo "❌ Failed to build Docker image"
+    exit 1
+fi
+
+echo "📦 Packaging Docker image to $PACKAGE_NAME..."
+sudo docker save -o $PACKAGE_NAME $IMAGE_NAME
+
+if [ $? -eq 0 ]; then
+    echo "✅ Docker image packaged successfully!"
+    echo ""
+    echo "📋 Transfer Instructions:"
+    echo "========================"
+    echo "1. Copy '$PACKAGE_NAME' to the target computer"
+    echo "2. On the target computer, run:"
+    echo "   sudo docker load -i $PACKAGE_NAME"
+    echo "3. Run the container:"
+    echo "   sudo docker run -p 8080:8080 --name aaf-systems-homepage $IMAGE_NAME"
+    echo ""
+    echo "📊 Package Info:"
+    echo "==============="
+    ls -lh $PACKAGE_NAME
+else
+    echo "❌ Failed to package Docker image"
+    exit 1
+fi

run-docker.sh

@@ -0,0 +1,36 @@
+#!/bin/bash
+
+# AAF Systems Homepage - Docker Runner Script
+
+echo "🚀 AAF Systems Homepage Docker Setup"
+echo "===================================="
+
+# Check if Docker is running
+if ! sudo docker info > /dev/null 2>&1; then
+    echo "❌ Docker is not running. Please start Docker Desktop and try again."
+    exit 1
+fi
+
+# Function to build and run with Docker Compose
+run_with_compose() {
+    echo "🔨 Building and running with Docker Compose..."
+    sudo docker-compose up --build
+}
+
+# Function to build and run with Docker directly
+run_with_docker() {
+    echo "🔨 Building Docker image..."
+    sudo docker build -t aaf-systems-homepage .
+    
+    echo "🚀 Running container on port 8080..."
+    sudo docker run -p 8080:8080 --name aaf-systems-homepage aaf-systems-homepage
+}
+
+# Check if docker-compose is available
+if command -v docker-compose &> /dev/null; then
+    echo "📋 Docker Compose detected. Using docker-compose.yml..."
+    run_with_compose
+else
+    echo "📋 Docker Compose not found. Using Docker directly..."
+    run_with_docker
+fi

stop-docker.sh

@@ -0,0 +1,21 @@
+#!/bin/bash
+
+# AAF Systems Homepage - Docker Stop Script
+
+echo "🛑 Stopping AAF Systems Homepage Docker Container"
+echo "================================================"
+
+# Stop and remove the container
+echo "🔍 Stopping container..."
+sudo docker stop aaf-systems-homepage 2>/dev/null || echo "Container not running"
+
+echo "🗑️  Removing container..."
+sudo docker rm aaf-systems-homepage 2>/dev/null || echo "Container not found"
+
+# If using docker-compose, stop that too
+if command -v docker-compose &> /dev/null; then
+    echo "🔍 Stopping docker-compose services..."
+    sudo docker-compose down 2>/dev/null || echo "No docker-compose services running"
+fi
+
+echo "✅ Cleanup complete!"