Landing Website
Relevant source files
The following files were used as context for generating this wiki page:
The Landing Website serves as the primary promotional and presentation interface for "Nudge," an AI learning assistant. It is designed as a single-page, high-fidelity "keynote" experience that utilizes a scene-based navigation system to communicate the product's value proposition, design principles, and technical architecture.
The website functions as a frontend for the larger project, which includes a local Ollama-powered desktop assistant called "Lunar." While the landing page focuses on presentation, the underlying infrastructure supports complex features such as 3D scene drafting, speech recognition, and integration with local LLMs.
Sources: website/src/renderer.js:5-10, website/README.md:1-5
Architectural Overview
The landing website is built using a lightweight Node.js backend and a custom JavaScript rendering engine. It avoids heavy frameworks in favor of direct DOM manipulation and CSS-based transitions to maintain a "premium" and "disciplined" feel.
Component Structure
The system is divided into several logical layers:
- Server Layer: A Node.js
httpserver that handles static file resolution and MIME type mapping. - Presentation Layer: A scene-driven renderer that manages stateful transitions between content sections.
- Desktop Integration Layer: An Electron main process that bridges the web interface with local system resources and AI models.
The diagram shows the relationship between the presentation logic in the browser and the backend services running locally.
Sources: website/server.js:5-30, website/src/renderer.js:220-240, website/src/main.js:25-45
The Scene Rendering System
The core of the website is the scenes array located in renderer.js. Each scene is an object containing a render function that returns a template literal of HTML. This allows for dynamic injection of content while maintaining a single-page architecture.
Scene Navigation and State
Navigation is handled by a global currentScene variable and a suite of event listeners. The system supports multiple input methods:
- Keyboard: Arrow keys, Spacebar, and PageUp/PageDown.
- Mouse/Trackpad: Scroll wheel accumulation and direct click on navigation "dots."
- Touch: Pointer events for swipe gestures.
This sequence illustrates how user input triggers a transition between different scenes in the presentation deck.
Sources: website/src/renderer.js:223-260, website/src/renderer.js:283-305
Key Navigation Functions
| Function | Description |
|---|---|
buildDeck() | Iterates through scenes to populate the HTML track and navigation dots. |
updateScene(immediate) | Updates the CSS transform of the track and refreshes UI indicators. |
goToScene(nextScene) | Handles transition state locking and bounds checking for navigation. |
onWheel(event) | Implements a threshold-based wheel accumulator for stable scrolling. |
Sources: website/src/renderer.js:223-280
Integration with Lunar Assistant
While the landing page is a presentation, it is tightly coupled with the "Lunar" Electron app. The Electron main process (main.js) handles the heavy lifting for AI and 3D processing, which can be triggered or showcased via the web interface.
IPC Handlers and AI Bridge
The landing website context (within Electron) communicates with local AI models through IPC (Inter-Process Communication):
- Ollama Status: Checks if the local LLM server is online.
- Scene Generation: Sends prompts and images to Ollama to receive JSON-formatted 3D scene descriptions.
- Blender Pipeline: Spawns a background Blender process using
lunar_blender_pipeline.pyto validate or export 3D assets.
# website/scripts/lunar_blender_pipeline.py:27-40
def main():
payload = parse_payload()
output = payload.get("output", os.path.join(os.getcwd(), "lunar-output"))
# The pipeline contract is intentionally staged
report = {
"quality_mode": payload.get("quality_mode", "preview"),
"stages": ["reference_analysis", "decomposition", "blockout", "detail", "validation", "export"],
"validation": validate_scene(),
"status": "scaffold_ready",
}
Sources: website/src/main.js:19-45, website/scripts/lunar_blender_pipeline.py:1-42
Technical Specifications
Server Configuration
The server.js file provides a minimal static file server for development and production preview.
| Parameter | Default Value | Description |
|---|---|---|
port | 4173 | The network port the web server listens on. |
root | ./src | The directory from which static files are served. |
mimeTypes | Various | Mapping for .html, .js, .css, .svg, .png, .webp, etc. |
Sources: website/server.js:5-15
Build and Execution Scripts
The project uses standard npm scripts to manage the lifecycle of the landing website and the associated desktop app.
"scripts": {
"start": "electron .",
"dev": "electron .",
"web": "node server.js",
"check": "node --check src/main.js && node --check server.js"
}
Sources: website/package.json:6-11
Conclusion
The Landing Website for Nudge is a sophisticated presentation layer that bridges high-level product marketing with low-level technical infrastructure. By utilizing a custom scene-based renderer and integrating directly with Electron-hosted AI services and Blender pipelines, it provides a comprehensive overview of the Nudge learning assistant's capabilities.
Sources: website/README.md:1-10, website/src/renderer.js:190-210