Add chat-widget example demonstrating @lume/element and Meteor integration

_sidebar.md

@@ -25,6 +25,7 @@
   - [🌍 Hello world!](/examples/hello-world/ ':class=no-sublist')
   - [🛹 Skateboard Configurator](/examples/skateboard-configurator/ ':class=no-sublist')
   - [🟠 Lava Lamp](/examples/lava-lamp/ ':class=no-sublist')
+  - [💬 Chat Widget](/examples/chat-widget/ ':class=no-sublist')
   - [🖼️ Picture Frame](/examples/picture-frame ':class=no-sublist')
   - [🤖 NASA Astrobee Robot](/examples/nasa-astrobee-robot/ ':class=no-sublist')
   - [✨ Velodyne Lidar Scan](/examples/velodyne-lidar-scan/ ':class=no-sublist')

examples/chat-widget/README.md

@@ -0,0 +1,36 @@
+# Chat Widget
+
+A live, global chat widget built with `@lume/element` and powered by Meteor for real-time messaging and user authentication.
+
+This example demonstrates:
+
+- Creating a custom element called `<chat-widget>` using `@lume/element`
+- Real-time chat functionality with Meteor backend
+- User authentication integration
+- Simple, clean UI for messaging
+
+## Features
+
+- **Real-time messaging**: Messages appear instantly for all connected users
+- **User authentication**: Login required to send messages
+- **Simple UI**: Clean, minimal interface focused on the chat experience
+- **Custom element**: Reusable `<chat-widget>` component that can be used anywhere
+
+## Usage
+
+Simply add the custom element to any HTML page:
+
+```html
+<chat-widget></chat-widget>
+```
+
+The widget will automatically handle authentication and provide a complete chat interface.
+
+## Implementation
+
+The chat widget is built using:
+
+- `@lume/element` for the custom element definition
+- Meteor for backend data and authentication
+- Solid.js reactivity for real-time UI updates
+- Modern CSS for styling

examples/chat-widget/background-animation.js

@@ -0,0 +1,28 @@
+import {Motor} from 'lume'
+
+// Simple animation for background spheres
+export function initBackgroundAnimation() {
+	Motor.addRenderTask(time => {
+		const sphere1 = document.getElementById('sphere1')
+		const sphere2 = document.getElementById('sphere2') 
+		const sphere3 = document.getElementById('sphere3')
+
+		if (sphere1) {
+			sphere1.rotation.x = time * 0.0005
+			sphere1.rotation.y = time * 0.0003
+			sphere1.position.z = -200 + Math.sin(time * 0.001) * 30
+		}
+
+		if (sphere2) {
+			sphere2.rotation.x = time * 0.0008
+			sphere2.rotation.z = time * 0.0004
+			sphere2.position.z = -150 + Math.cos(time * 0.0012) * 25
+		}
+
+		if (sphere3) {
+			sphere3.rotation.y = time * 0.0006
+			sphere3.rotation.z = time * 0.0005
+			sphere3.position.z = -100 + Math.sin(time * 0.0008) * 20
+		}
+	})
+}