New project: Magic mirror

Tweak: books levitating too often
Fix: Picture frame position, camera tweaks
2025-11-19 22:11:10 +01:00 · 2025-11-17 23:01:38 +01:00 · 2025-11-17 23:00:35 +01:00 · 2025-11-17 18:21:00 +01:00
46 changed files with 3642 additions and 38 deletions
--- a/magic-mirror/.gitignore
+++ b/magic-mirror/.gitignore
@ -0,0 +1,2 @@
+node_modules
+dist
--- a/magic-mirror/index.html
+++ b/magic-mirror/index.html
@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Magical Crystal Ball</title>
+    
+    <style>
+        /* Cheerful medieval aesthetic */
+        body {
+            background-color: #f5eeda; /* A light parchment color */
+            margin: 0;
+            overflow: hidden;
+            font-family: 'Inter', sans-serif;
+        }
+        canvas {
+            display: block;
+        }
+    </style>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script type="module" src="/src/main.js"></script>
+</head>
+<body>
+
+    <!-- Hidden Video Element --><video id="video" playsinline muted class="hidden"></video>
+
+    <!-- Controls for loading video --><div id="controls" class="fixed bottom-4 left-1/2 transform -translate-x-1/2 z-20 flex flex-col items-center space-y-2">
+
+        <!-- Hidden File Input that will be triggered by the button --><input type="file" id="fileInput" accept="video/mp4" class="hidden" multiple> 
+
+        <div class="flex space-x-4">
+            <!-- Load Tapes Button --><button id="loadTapeButton" class="px-8 py-3 bg-[#cc3333] text-white font-bold text-lg uppercase tracking-wider rounded-lg hover:bg-red-700 transition duration-150 active:translate-y-px">
+                Summon Vision
+            </button>
+        </div>
+    </div>
+
+    <!-- 3D Canvas will be injected here by Three.js -->
+</body>
+</html>
+<!-- textures sourced from https://animalia-life.club/ -->
--- a/magic-mirror/package-lock.json
+++ b/magic-mirror/package-lock.json
--- a/magic-mirror/package.json
+++ b/magic-mirror/package.json
@ -0,0 +1,17 @@
+{
+  "name": "tv-player",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "author": "",
+  "license": "ISC",
+  "devDependencies": {
+    "vite": "^7.2.2"
+  },
+  "dependencies": {
+    "three": "^0.181.1"
+  }
+}
--- a/magic-mirror/preview.sh
+++ b/magic-mirror/preview.sh
@ -0,0 +1,3 @@
+#!/usr/bin/env bash
+
+nix-shell -p nodejs --run "npx vite build && npx vite preview"
--- a/magic-mirror/serve.sh
+++ b/magic-mirror/serve.sh
@ -0,0 +1,3 @@
+#!/usr/bin/env bash
+
+nix-shell -p nodejs --run "npx vite"
--- a/magic-mirror/src/core/animate.js
+++ b/magic-mirror/src/core/animate.js
@ -0,0 +1,185 @@
+import * as THREE from 'three';
+import { updateDoor } from '../scene/door.js';
+import { updateVcrDisplay } from '../scene/vcr-display.js';
+import { state } from '../state.js';
+import { updateScreenEffect } from '../scene/magic-mirror.js'
+
+function updateCamera() {
+    const globalTime = Date.now() * 0.00003;
+    const lookAtTime = Date.now() * 0.0002;
+
+    const camAmplitude = 0.2;
+    const lookAmplitude = 0.1;
+
+    // Base Camera Position in front of the TV
+    const baseX = -0.5;
+    const baseY = 1.5;
+    const baseZ = 2.2;
+
+    // Base LookAt target (Center of the screen)
+    const baseTargetX = -0.7;
+    const baseTargetY = 1.7;
+    const baseTargetZ = -0.3;
+
+    // Camera Position Offsets (Drift)
+    const camOffsetX = Math.sin(globalTime * 3.1) * camAmplitude;
+    const camOffsetY = Math.cos(globalTime * 2.5) * camAmplitude * 0.4;
+    const camOffsetZ = Math.cos(globalTime * 3.2) * camAmplitude * 1.4;
+
+    state.camera.position.x = baseX + camOffsetX;
+    state.camera.position.y = baseY + camOffsetY;
+    state.camera.position.z = baseZ + camOffsetZ;
+
+    // LookAt Target Offsets (Subtle Gaze Shift)
+    const lookOffsetX = Math.sin(lookAtTime * 1.5) * lookAmplitude * 3;
+    const lookOffsetY = Math.cos(lookAtTime * 1.2) * lookAmplitude;
+
+    // Apply lookAt to the subtly shifted target
+    state.camera.lookAt(baseTargetX + lookOffsetX, baseTargetY + lookOffsetY, baseTargetZ);
+}
+
+function updateLampFlicker() {
+    const flickerChance = 0.995;
+    const restoreRate = 0.15;
+
+    if (state.candleLight) {
+        const elapsedTime = state.clock.getElapsedTime();
+        const flickerSpeed = 20;
+        const flickerAmount = 0.05;
+        // Make the candle flicker
+        state.candleLight.intensity = state.originalLampIntensity + Math.sin(elapsedTime * flickerSpeed) * flickerAmount;
+    }
+}
+
+function updateScreenLight() {
+    if (state.isVideoLoaded && state.screenLight.intensity > 0) {
+        const pulseTarget = state.originalScreenIntensity + (Math.random() - 0.5) * state.screenIntensityPulse;
+        state.screenLight.intensity = THREE.MathUtils.lerp(state.screenLight.intensity, pulseTarget, 0.1);
+
+        const lightTime = Date.now() * 0.0001;
+        const radius = 0.01;
+        const centerX = 0;
+        const centerY = 1.5;
+
+        state.screenLight.position.x = centerX + Math.cos(lightTime) * radius;
+        state.screenLight.position.y = centerY + Math.sin(lightTime * 1.5) * radius * 0.5; // Slightly different freq for Y
+    }
+}
+
+function updateShaderTime() {
+    if (state.tvScreen && state.tvScreen.material.uniforms && state.tvScreen.material.uniforms.u_time) {
+        if (state.tvScreenPowered) {
+            state.tvScreen.material.uniforms.u_time.value = state.clock.getElapsedTime();
+        }
+    }
+}
+
+function updateVideo() {
+    if (state.videoTexture) {
+        state.videoTexture.needsUpdate = true;
+    }
+}
+
+function updateVcr() {
+    const currentTime = state.baseTime + state.videoElement.currentTime;
+    if (Math.abs(currentTime - state.lastUpdateTime) > 0.1) {
+        updateVcrDisplay(currentTime);
+        state.lastUpdateTime = currentTime;
+    }
+    if (currentTime - state.lastBlinkToggleTime > 0.5) { // Blink every 0.5 seconds
+        state.blinkState = !state.blinkState;
+        state.lastBlinkToggleTime = currentTime;
+    }
+}
+
+function updateBooks() {
+    const LEVITATE_CHANCE = 0.0003; // Chance for a resting book to start levitating per frame
+    const LEVITATE_DURATION_MIN = 100; // frames
+    const LEVITATE_DURATION_MAX = 300; // frames
+    const LEVITATE_AMPLITUDE = 0.02; // Max vertical displacement
+    const LEVITATE_SPEED_FACTOR = 0.03; // Speed of oscillation
+    const START_RATE = 0.05; // How quickly a book starts to levitate
+    const RETURN_RATE = 0.1; // How quickly a book returns to original position
+    const START_DURATION = 120; // frames for the starting transition
+    const levitation = state.bookLevitation;
+
+    // Manage the global levitation state
+    if (levitation.state === 'resting') {
+        if (Math.random() < LEVITATE_CHANCE) {
+            levitation.state = 'starting';
+            levitation.timer = START_DURATION;
+        }
+    } else if (levitation.state === 'starting') {
+        levitation.timer--;
+        if (levitation.timer <= 0) {
+            levitation.state = 'levitating';
+            levitation.timer = LEVITATE_DURATION_MIN + Math.random() * (LEVITATE_DURATION_MAX - LEVITATE_DURATION_MIN);
+        }
+    } else if (levitation.state === 'levitating') {
+        levitation.timer--;
+        if (levitation.timer <= 0) {
+            levitation.state = 'returning';
+        }
+    }
+
+    // Animate books based on the global state
+    let allBooksReturned = true;
+    state.books.forEach(book => {
+        const data = book.userData;
+
+        if (levitation.state === 'starting') {
+            allBooksReturned = false;
+            book.position.y = THREE.MathUtils.lerp(book.position.y, data.originalY + LEVITATE_AMPLITUDE/2, START_RATE);
+            data.oscillationTime = 0;
+        } else if (levitation.state === 'levitating') {
+            allBooksReturned = false;
+            data.oscillationTime += LEVITATE_SPEED_FACTOR;
+            data.levitateOffset = Math.sin(data.oscillationTime) * LEVITATE_AMPLITUDE;
+            book.position.y = data.originalY + data.levitateOffset + LEVITATE_AMPLITUDE/2;
+        } else if (levitation.state === 'returning') {
+            book.position.y = THREE.MathUtils.lerp(book.position.y, data.originalY, RETURN_RATE);
+            data.levitateOffset = book.position.y - data.originalY;
+
+            if (Math.abs(data.levitateOffset) > 0.001) {
+                allBooksReturned = false;
+            }
+        }
+    });
+
+    if (levitation.state === 'returning' && allBooksReturned) {
+        levitation.state = 'resting';
+    }
+}
+
+function updatePictureFrame() {
+    state.pictureFrames.forEach((pictureFrame) => {
+        pictureFrame.update();
+    });
+}
+
+// --- Animation Loop ---
+export function animate() {
+    requestAnimationFrame(animate);
+
+    state.effectsManager.update();
+    updateCamera();
+    updateLampFlicker();
+    updateScreenLight();
+    updateVideo();
+    updateShaderTime();
+    // updateVcr();
+    updateBooks();
+    // updateDoor();
+    // updatePictureFrame();
+    updateScreenEffect();
+
+    // RENDER!
+    state.renderer.render(state.scene, state.camera);
+}
+
+// --- Window Resize Handler ---
+export function onWindowResize() {
+    state.camera.aspect = window.innerWidth / window.innerHeight;
+    state.camera.updateProjectionMatrix();
+    state.renderer.setSize(window.innerWidth, window.innerHeight);
+}
--- a/magic-mirror/src/core/init.js
+++ b/magic-mirror/src/core/init.js
@ -0,0 +1,62 @@
+import * as THREE from 'three';
+import { state, initState } from '../state.js';
+import { EffectsManager } from '../effects/EffectsManager.js';
+import { createSceneObjects } from '../scene/root.js';
+import { animate, onWindowResize } from './animate.js';
+import { loadVideoFile, playNextVideo } from './video-player.js';
+
+// --- Initialization ---
+export function init() {
+    initState();
+
+    // 1. Scene Setup (Dark, Ambient)
+    state.scene = new THREE.Scene();
+    state.scene.background = new THREE.Color(0x000000); 
+
+    // 2. Camera Setup
+    const FOV = 65;
+    state.camera = new THREE.PerspectiveCamera(FOV, window.innerWidth / window.innerHeight, 0.1, 1000);
+    state.camera.position.set(0, 1.5, 4);
+    
+    // 3. Renderer Setup
+    state.renderer = new THREE.WebGLRenderer({ antialias: true });
+    state.renderer.setSize(window.innerWidth, window.innerHeight);
+    state.renderer.setPixelRatio(window.devicePixelRatio);
+    // Enable shadows on the renderer
+    state.renderer.shadowMap.enabled = true;
+    state.renderer.shadowMap.type = THREE.PCFSoftShadowMap; // Softer shadows
+    
+    state.container.appendChild(state.renderer.domElement);
+
+    // 5. Build the entire scene with TV and surrounding objects
+    createSceneObjects();
+
+    // 6. Initialize all visual effects via the manager
+    state.effectsManager = new EffectsManager(state.scene);
+
+    // --- 8. Debug Visualization Helpers ---
+    // Visual aids for the light source positions
+    if (state.debugLight && THREE.PointLightHelper) {
+        const screenHelper = new THREE.PointLightHelper(state.screenLight, 0.1, 0xff0000); // Red for screen
+        state.scene.add(screenHelper);
+
+        // Lamp Helper will now work since lampLight is added to the scene
+        const lampHelperPoint = new THREE.PointLightHelper(state.lampLightPoint, 0.1, 0x00ff00); // Green for lamp
+        state.scene.add(lampHelperPoint);
+    }
+    
+    // 9. Event Listeners
+    window.addEventListener('resize', onWindowResize, false);
+    state.fileInput.addEventListener('change', loadVideoFile); 
+    
+    // Button logic
+    state.loadTapeButton.addEventListener('click', () => {
+        state.fileInput.click(); 
+    });
+    
+    // Auto-advance to the next video when the current one finishes.
+    state.videoElement.addEventListener('ended', playNextVideo);
+    
+    // Start the animation loop
+    animate();
+}
--- a/magic-mirror/src/core/video-player.js
+++ b/magic-mirror/src/core/video-player.js
@ -0,0 +1,107 @@
+import * as THREE from 'three';
+import { state } from '../state.js';
+import { turnTvScreenOff, turnTvScreenOn, setScreenEffect } from '../scene/tv-set.js';
+
+// --- Play video by index ---
+export function playVideoByIndex(index) {
+    state.currentVideoIndex = index;
+    const url = state.videoUrls[index];
+
+    // Dispose of previous texture to free resources
+    if (state.videoTexture) {
+        state.videoTexture.dispose();
+        state.videoTexture = null;
+    }
+
+    if (index < 0 || index >= state.videoUrls.length) {
+        console.info('End of playlist reached. Reload tapes to start again.');
+        turnTvScreenOff();
+        state.isVideoLoaded = false;
+        state.lastUpdateTime = -1; // force VCR to redraw
+        return;
+    }
+
+    state.videoElement.src = url;
+    state.videoElement.muted = true;
+    state.videoElement.load();
+    
+    // Set loop property: only loop if it's the only video loaded
+    state.videoElement.loop = false; //state.videoUrls.length === 1;
+
+    
+    state.videoElement.onloadeddata = () => {
+        // 1. Create the Three.js texture
+        state.videoTexture = new THREE.VideoTexture(state.videoElement);
+        state.videoTexture.minFilter = THREE.LinearFilter;
+        state.videoTexture.magFilter = THREE.LinearFilter;
+        state.videoTexture.format = THREE.RGBAFormat; 
+        state.videoTexture.needsUpdate = true;
+
+        // 2. Apply the video texture to the screen mesh
+        turnTvScreenOn();
+        
+        // 3. Start playback and trigger the warm-up effect simultaneously
+        state.videoElement.play().then(() => {
+            state.isVideoLoaded = true;
+            // Use the defined base intensity for screen glow
+            state.screenLight.intensity = state.originalScreenIntensity; 
+            // Initial status message with tape count
+            console.info(`Playing tape ${state.currentVideoIndex + 1} of ${state.videoUrls.length}.`);
+        }).catch(error => {
+            state.screenLight.intensity = state.originalScreenIntensity * 0.5; // Dim the light if playback fails
+            console.error(`Playback blocked for tape ${state.currentVideoIndex + 1}. Click Next Tape to try again.`);
+            console.error('Playback Error: Could not start video playback.', error);
+        });
+    };
+    
+    state.videoElement.onerror = (e) => {
+        state.screenLight.intensity = 0.1; // Keep minimum intensity for shadow map
+        console.error(`Error loading tape ${state.currentVideoIndex + 1}.`);
+        console.error('Video Load Error:', e);
+    };
+}
+
+// --- Cycle to the next video ---
+export function playNextVideo() {
+    // Determine the next index, cycling back to 0 if we reach the end
+    let nextIndex = state.currentVideoIndex + 1;
+    if (nextIndex < state.videoUrls.length) {
+        state.baseTime += state.videoElement.duration;
+    }
+    playVideoByIndex(nextIndex);
+}
+
+
+// --- Video Loading Logic (handles multiple files) ---
+export function loadVideoFile(event) {
+    const files = event.target.files;
+    if (files.length === 0) {
+        console.info('File selection cancelled.');
+        return;
+    }
+
+    // 1. Clear previous URLs and revoke object URLs to prevent memory leaks
+    state.videoUrls.forEach(url => URL.revokeObjectURL(url));
+    state.videoUrls = [];
+
+    // 2. Populate the new videoUrls array
+    for (let i = 0; i < files.length; i++) {
+        const file = files[i];
+        if (file.type.startsWith('video/')) {
+            state.videoUrls.push(URL.createObjectURL(file));
+        }
+    }
+
+    if (state.videoUrls.length === 0) {
+        console.info('No valid video files selected.');
+        return;
+    }
+    
+    // 3. Start playback of the first video
+    console.info(`Loaded ${state.videoUrls.length} tapes. Starting playback...`);
+    state.loadTapeButton.classList.add("hidden");
+
+    const startDelay = 5;
+    console.info(`Video will start in ${startDelay} seconds.`);
+    setTimeout(() => { playVideoByIndex(0); }, startDelay * 1000);
+}
--- a/magic-mirror/src/effects/EffectsManager.js
+++ b/magic-mirror/src/effects/EffectsManager.js
@ -0,0 +1,26 @@
+import { DustEffect } from './dust.js';
+import { FliesEffect } from './flies.js';
+import { SpiderEffect } from './spider.js';
+
+export class EffectsManager {
+    constructor(scene) {
+        this.effects = [];
+        this._initializeEffects(scene);
+    }
+
+    _initializeEffects(scene) {
+        // Add all desired effects here.
+        // This is now the single place to manage which effects are active.
+        this.addEffect(new DustEffect(scene));
+        this.addEffect(new FliesEffect(scene));
+        this.addEffect(new SpiderEffect(scene));
+    }
+
+    addEffect(effect) {
+        this.effects.push(effect);
+    }
+
+    update() {
+        this.effects.forEach(effect => effect.update());
+    }
+}
--- a/magic-mirror/src/effects/dust.js
+++ b/magic-mirror/src/effects/dust.js
@ -0,0 +1,47 @@
+import * as THREE from 'three';
+
+export class DustEffect {
+    constructor(scene) {
+        this.dust = null;
+        this._create(scene);
+    }
+
+    _create(scene) {
+        const particleCount = 2000;
+        const particlesGeometry = new THREE.BufferGeometry();
+        const positions = [];
+
+        for (let i = 0; i < particleCount; i++) {
+            positions.push(
+                (Math.random() - 0.5) * 15,
+                Math.random() * 10,
+                (Math.random() - 0.5) * 15
+            );
+        }
+        particlesGeometry.setAttribute('position', new THREE.Float32BufferAttribute(positions, 3));
+
+        const particleMaterial = new THREE.PointsMaterial({
+            color: 0xffffff,
+            size: 0.015,
+            transparent: true,
+            opacity: 0.08,
+            blending: THREE.AdditiveBlending
+        });
+
+        this.dust = new THREE.Points(particlesGeometry, particleMaterial);
+        scene.add(this.dust);
+    }
+
+    update() {
+        if (this.dust) {
+            const positions = this.dust.geometry.attributes.position.array;
+            for (let i = 1; i < positions.length; i += 3) {
+                positions[i] -= 0.001;
+                if (positions[i] < -2) {
+                    positions[i] = 8;
+                }
+            }
+            this.dust.geometry.attributes.position.needsUpdate = true;
+        }
+    }
+}
--- a/magic-mirror/src/effects/flies.js
+++ b/magic-mirror/src/effects/flies.js
@ -0,0 +1,140 @@
+import * as THREE from 'three';
+import { state } from '../state.js';
+import { degToRad } from '../utils.js';
+
+const FLIES_COUNT = 2;
+
+// --- Configuration ---
+const FLIGHT_HEIGHT_MIN = 0.5; // Min height for flying
+const FLIGHT_HEIGHT_MAX = 2;//state.roomHeight * 0.9; // Max height for flying
+const FLY_FLIGHT_SPEED_FACTOR = 0.01; // How quickly 't' increases per frame
+const FLY_WAIT_BASE = 1000;
+const FLY_LAND_CHANCE = 0.3;
+
+export class FliesEffect {
+    constructor(scene) {
+        this.flies = [];
+        this._setupFlies(scene);
+    }
+
+    _randomFlyTarget() {
+        return new THREE.Vector3(
+            (Math.random() - 0.5) * (state.roomSize - 1),
+            FLIGHT_HEIGHT_MIN + Math.random() * (FLIGHT_HEIGHT_MAX - FLIGHT_HEIGHT_MIN),
+            (Math.random() - 0.5) * (state.roomSize - 1)
+        );
+    }
+
+    _createFlyMesh() {
+        const flyGroup = new THREE.Group();
+        const flyMaterial = new THREE.MeshPhongMaterial({ color: 0x111111, shininess: 50 });
+        const bodyGeometry = new THREE.ConeGeometry(0.01, 0.02, 3);
+        const body = new THREE.Mesh(bodyGeometry, flyMaterial);
+        body.rotation.x = degToRad(90);
+        body.castShadow = true;
+        body.receiveShadow = true;
+        flyGroup.add(body);
+
+        flyGroup.userData = {
+            state: 'flying',
+            landTimer: 0,
+            t: 0,
+            speed: FLY_FLIGHT_SPEED_FACTOR + Math.random() * 0.01,
+            curve: null,
+            landCheckTimer: 0,
+            oscillationTime: Math.random() * 100,
+        };
+
+        flyGroup.position.copy(this._randomFlyTarget());
+        return flyGroup;
+    }
+
+    _createFlyCurve(fly, endPoint) {
+        const startPoint = fly.position.clone();
+        const midPoint = new THREE.Vector3().lerpVectors(startPoint, endPoint, 0.5);
+        const offsetMagnitude = startPoint.distanceTo(endPoint) * 0.5;
+        const offsetAngle = Math.random() * Math.PI * 2;
+
+        const controlPoint = new THREE.Vector3(
+            midPoint.x + Math.cos(offsetAngle) * offsetMagnitude * 0.5,
+            midPoint.y + Math.random() * 0.5 + 0.5,
+            midPoint.z + Math.sin(offsetAngle) * offsetMagnitude * 0.5
+        );
+
+        fly.userData.curve = new THREE.QuadraticBezierCurve3(startPoint, controlPoint, endPoint);
+        fly.userData.t = 0;
+        fly.userData.landCheckTimer = 50 + Math.random() * 50;
+    }
+
+    _setupFlies(scene) {
+        for (let i = 0; i < FLIES_COUNT; i++) {
+            const fly = this._createFlyMesh();
+            scene.add(fly);
+            this.flies.push(fly);
+        }
+    }
+
+    update() {
+        this.flies.forEach(fly => {
+            const data = fly.userData;
+
+            if (data.state === 'flying' || data.state === 'landing') {
+                if (!data.curve) {
+                    const newTargetPos = this._randomFlyTarget();
+                    this._createFlyCurve(fly, newTargetPos);
+                    data.t = 0;
+                }
+
+                data.t += data.speed;
+                data.landCheckTimer--;
+
+                if (data.t >= 1) {
+                    if (data.state === 'landing') {
+                        data.state = 'landed';
+                        data.landTimer = FLY_WAIT_BASE + Math.random() * 1000;
+                        data.t = 0;
+                        return;
+                    }
+
+                    if (data.landCheckTimer <= 0 && Math.random() > FLY_LAND_CHANCE) {
+                        state.raycaster.set(fly.position, new THREE.Vector3(0, -1, 0));
+                        const intersects = state.raycaster.intersectObjects(state.landingSurfaces, false);
+
+                        if (intersects.length > 0) {
+                            const intersect = intersects[0];
+                            data.state = 'landing';
+                            let newTargetPos = new THREE.Vector3(
+                                intersect.point.x,
+                                intersect.point.y + 0.05,
+                                intersect.point.z
+                            );
+                            this._createFlyCurve(fly, newTargetPos);
+                            data.t = 0;
+                        }
+                    }
+
+                    if (data.state !== 'landing') {
+                        const newTargetPos = this._randomFlyTarget();
+                        this._createFlyCurve(fly, newTargetPos);
+                        data.t = 0;
+                    }
+                }
+
+                fly.position.copy(data.curve.getPoint(Math.min(data.t, 1)));
+                const tangent = data.curve.getTangent(Math.min(data.t, 1)).normalize();
+                fly.rotation.y = Math.atan2(tangent.x, tangent.z);
+                data.oscillationTime += 0.1;
+                fly.position.y += Math.sin(data.oscillationTime * 4) * 0.01;
+
+            } else if (data.state === 'landed') {
+                data.landTimer--;
+                if (data.landTimer <= 0) {
+                    data.state = 'flying';
+                    const newTargetPos = this._randomFlyTarget();
+                    this._createFlyCurve(fly, newTargetPos);
+                    data.t = 0;
+                }
+            }
+        });
+    }
+}
--- a/magic-mirror/src/effects/spider.js
+++ b/magic-mirror/src/effects/spider.js
@ -0,0 +1,131 @@
+import * as THREE from 'three';
+import { state } from '../state.js';
+
+const SPIDER_COUNT = 5;
+const SPIDER_SPEED = 0.0001;
+const SPIDER_TURN_SPEED = 0.02;
+const SPIDER_WAIT_MIN = 200; // frames
+const SPIDER_WAIT_MAX = 500; // frames
+
+export class SpiderEffect {
+    constructor(scene) {
+        this.spiders = [];
+        this._setupSpiders(scene);
+    }
+
+    _getRandomPointOnWall(wall) {
+        const position = new THREE.Vector3();
+        const width = wall.geometry.parameters.width;
+        const height = wall.geometry.parameters.height;
+
+        position.x = (Math.random() - 0.5) * width;
+        position.y = (Math.random() - 0.5) * height;
+        position.z = 0; // Local z is 0 for a plane
+
+        // Convert local position to world position
+        return wall.localToWorld(position);
+    }
+
+    _createSpiderMesh() {
+        const spiderGroup = new THREE.Group();
+        const spiderMaterial = new THREE.MeshPhongMaterial({ color: 0x919191, shininess: 50 });
+
+        // Body
+        const bodyGeometry = new THREE.SphereGeometry(0.01, 6, 5);
+        const body = new THREE.Mesh(bodyGeometry, spiderMaterial);
+        body.scale.z = 0.6; // Flatten the sphere
+        body.castShadow = true;
+        spiderGroup.add(body);
+
+        // Head
+        const headGeometry = new THREE.SphereGeometry(0.005, 5, 4);
+        const head = new THREE.Mesh(headGeometry, spiderMaterial);
+        head.position.y = 0.015;
+        head.castShadow = true;
+        spiderGroup.add(head);
+
+        spiderGroup.userData = {
+            state: 'crawling', // 'crawling', 'waiting'
+            waitTimer: 0,
+            t: 0,
+            curve: null,
+            currentWall: null,
+        };
+
+        return spiderGroup;
+    }
+
+    _findNewTarget(spider) {
+        if (!spider.userData.currentWall) {
+            // First time, pick a random wall
+            const walls = state.crawlSurfaces;
+            if (walls.length === 0) return;
+            spider.userData.currentWall = walls[Math.floor(Math.random() * walls.length)];
+            spider.position.copy(this._getRandomPointOnWall(spider.userData.currentWall));
+        }
+
+        const startPoint = spider.position.clone();
+        const endPoint = this._getRandomPointOnWall(spider.userData.currentWall);
+
+        // Create a curved path on the wall
+        const midPoint = new THREE.Vector3().lerpVectors(startPoint, endPoint, 0.5);
+        const direction = new THREE.Vector3().subVectors(endPoint, startPoint).normalize();
+        const wallNormal = spider.userData.currentWall.getWorldDirection(new THREE.Vector3()).negate();
+        
+        // Get a perpendicular vector on the plane of the wall
+        const perpendicular = new THREE.Vector3().crossVectors(direction, wallNormal).normalize();
+        const offsetMagnitude = startPoint.distanceTo(endPoint) * (Math.random() * 0.4 - 0.2); // Random offset left or right
+        
+        const controlPoint = midPoint.clone().add(perpendicular.multiplyScalar(offsetMagnitude));
+
+        spider.userData.curve = new THREE.QuadraticBezierCurve3(startPoint, controlPoint, endPoint);
+        spider.userData.t = 0;
+        spider.userData.state = 'crawling';
+    }
+
+    _setupSpiders(scene) {
+        for (let i = 0; i < SPIDER_COUNT; i++) {
+            const spider = this._createSpiderMesh();
+            scene.add(spider);
+            this.spiders.push(spider);
+            this._findNewTarget(spider); // Initial placement
+        }
+    }
+
+    update() {
+        this.spiders.forEach(spider => {
+            const data = spider.userData;
+
+            if (data.state === 'crawling') {
+                if (!data.curve) {
+                    this._findNewTarget(spider);
+                    return;
+                }
+
+                data.t += SPIDER_SPEED;
+                if (data.t >= 1) {
+                    spider.position.copy(data.curve.v2);
+                    data.state = 'waiting';
+                    data.waitTimer = SPIDER_WAIT_MIN + Math.random() * (SPIDER_WAIT_MAX - SPIDER_WAIT_MIN);
+                } else {
+                    spider.position.copy(data.curve.getPoint(data.t));
+                    
+                    // Smoothly turn the spider towards the tangent of the curve
+                    const tangent = data.curve.getTangent(data.t);
+                    const up = data.currentWall.getWorldDirection(new THREE.Vector3()).negate();
+                    
+                    const targetQuaternion = new THREE.Quaternion().setFromUnitVectors(new THREE.Vector3(0, 1, 0), tangent).multiply(
+                        new THREE.Quaternion().setFromUnitVectors(new THREE.Vector3(0, 0, 1), up)
+                    );
+
+                    spider.quaternion.slerp(targetQuaternion, SPIDER_TURN_SPEED);
+                }
+            } else if (data.state === 'waiting') {
+                data.waitTimer--;
+                if (data.waitTimer <= 0) {
+                    this._findNewTarget(spider);
+                }
+            }
+        });
+    }
+}
--- a/magic-mirror/src/global-variables.js
+++ b/magic-mirror/src/global-variables.js
@ -0,0 +1,39 @@
+// --- Global Variables ---
+let scene, camera, renderer, tvScreen, videoTexture, screenLight, lampLightPoint, lampLightSpot, effectsManager;
+
+// VCR Display related variables
+let simulatedPlaybackTime = 0;
+let lastUpdateTime = -1;
+let baseTime = 0;
+let isVideoLoaded = false;
+let videoUrls = []; // Array to hold all video URLs
+let currentVideoIndex = -1; // Index of the currently playing video
+
+const originalLampIntensity = 0.8; // Base intensity for the flickering lamp
+const originalScreenIntensity = 0.2; // Base intensity for the screen glow
+const screenIntensityPulse = 0.2;
+
+const roomSize = 5;
+const roomHeight = 3;
+
+const container = document.body;
+const videoElement = document.getElementById('video');
+const fileInput = document.getElementById('fileInput');
+const loadTapeButton = document.getElementById('loadTapeButton');
+const loader = new THREE.TextureLoader();
+
+const debugLight = false;
+let landingSurfaces = []; // Array to hold floor and table for fly landings
+const raycaster = new THREE.Raycaster();
+
+// --- Configuration ---
+const ROOM_SIZE = roomSize;
+const FLIGHT_HEIGHT_MIN = 0.5; // Min height for flying
+const FLIGHT_HEIGHT_MAX = roomHeight * 0.9; // Max height for flying
+const FLY_FLIGHT_SPEED_FACTOR = 0.01; // How quickly 't' increases per frame
+const DAMPING_FACTOR = 0.05;
+const FLY_WAIT_BASE = 1000;
+const FLY_LAND_CHANCE = 0.3;
+
+// --- Seedable Random Number Generator (Mulberry32) ---
+let seed = 12345; // Default seed, will be overridden per shelf
--- a/magic-mirror/src/main.js
+++ b/magic-mirror/src/main.js
@ -0,0 +1,5 @@
+import * as THREE from 'three';
+import { init } from './core/init.js';
+
+// Start everything
+init();
--- a/magic-mirror/src/scene/PictureFrame.js
+++ b/magic-mirror/src/scene/PictureFrame.js
@ -0,0 +1,116 @@
+import * as THREE from 'three';
+
+const FRAME_DEPTH = 0.05;
+const TRANSITION_DURATION = 5000;
+const IMAGE_CHANGE_CHANCE = 0.0001;
+
+export class PictureFrame {
+    constructor(scene, { position, width, height, imageUrls, rotationY = 0 }) {
+        if (!imageUrls || imageUrls.length === 0) {
+            throw new Error('PictureFrame requires at least one image URL in the imageUrls array.');
+        }
+
+        this.scene = scene;
+        this.mesh = this._createPictureFrame(width, height, imageUrls, 0.05);
+
+        this.mesh.position.copy(position);
+        this.mesh.rotation.y = rotationY;
+
+        this.isTransitioning = false;
+        this.transitionStartTime = 0;
+
+        this.scene.add(this.mesh);
+    }
+
+    _createPictureFrame(width, height, imageUrls, frameThickness) {
+        const paintingGroup = new THREE.Group();
+
+        // 1. Create the wooden frame
+        const frameMaterial = new THREE.MeshPhongMaterial({ color: 0x8B4513 }); // SaddleBrown
+
+        const topFrame = new THREE.Mesh(new THREE.BoxGeometry(width + 2 * frameThickness, frameThickness, FRAME_DEPTH), frameMaterial);
+        topFrame.position.y = height / 2 + frameThickness / 2;
+        topFrame.castShadow = true;
+        topFrame.receiveShadow = true;
+        paintingGroup.add(topFrame);
+
+        const bottomFrame = new THREE.Mesh(new THREE.BoxGeometry(width + 2 * frameThickness, frameThickness, FRAME_DEPTH), frameMaterial);
+        bottomFrame.position.y = -height / 2 - frameThickness / 2;
+        bottomFrame.castShadow = true;
+        bottomFrame.receiveShadow = true;
+        paintingGroup.add(bottomFrame);
+
+        const leftFrame = new THREE.Mesh(new THREE.BoxGeometry(frameThickness, height, FRAME_DEPTH), frameMaterial);
+        leftFrame.position.x = -width / 2 - frameThickness / 2;
+        leftFrame.castShadow = true;
+        leftFrame.receiveShadow = true;
+        paintingGroup.add(leftFrame);
+
+        const rightFrame = new THREE.Mesh(new THREE.BoxGeometry(frameThickness, height, FRAME_DEPTH), frameMaterial);
+        rightFrame.position.x = width / 2 + frameThickness / 2;
+        rightFrame.castShadow = true;
+        rightFrame.receiveShadow = true;
+        paintingGroup.add(rightFrame);
+
+        // 2. Create the picture canvases with textures
+        const textureLoader = new THREE.TextureLoader();
+        this.textures = imageUrls.map(url => textureLoader.load(url));
+        this.currentTextureIndex = 0;
+
+        const pictureGeometry = new THREE.PlaneGeometry(width, height);
+
+        // Create two picture planes for cross-fading
+        this.pictureBack = new THREE.Mesh(pictureGeometry, new THREE.MeshPhongMaterial({ map: this.textures[this.currentTextureIndex] }));
+        this.pictureBack.position.z = 0.001;
+        this.pictureBack.receiveShadow = true;
+        paintingGroup.add(this.pictureBack);
+
+        this.pictureFront = new THREE.Mesh(pictureGeometry, new THREE.MeshPhongMaterial({ map: this.textures[this.currentTextureIndex], transparent: true, opacity: 0 }));
+        this.pictureFront.position.z = 0.003; // Place slightly in front to avoid z-fighting
+        this.pictureFront.receiveShadow = true;
+        paintingGroup.add(this.pictureFront);
+
+        return paintingGroup;
+    }
+
+    setPicture(index) {
+        if (this.isTransitioning || index === this.currentTextureIndex || index < 0 || index >= this.textures.length) {
+            return;
+        }
+
+        this.isTransitioning = true;
+        this.transitionStartTime = Date.now();
+
+        // Front plane fades in with the new texture
+        this.pictureFront.material.map = this.textures[index];
+        this.pictureFront.material.opacity = 0;
+
+        this.nextTextureIndex = index;
+    }
+
+    nextPicture() {
+        this.setPicture((this.currentTextureIndex + 1) % this.textures.length);
+    }
+
+    update() {
+        if (!this.isTransitioning) {
+            if (Math.random() > 1.0 - IMAGE_CHANGE_CHANCE) {
+                this.nextPicture();
+            }
+            return;
+        }
+
+        const elapsedTime = Date.now() - this.transitionStartTime;
+        const progress = Math.min(elapsedTime / TRANSITION_DURATION, 1.0);
+        this.pictureFront.material.opacity = progress;
+
+        if (progress >= 1.0) {
+            this.isTransitioning = false;
+            this.currentTextureIndex = this.nextTextureIndex;
+
+            // Reset for next transition
+            this.pictureBack.material.map = this.textures[this.currentTextureIndex];
+            this.pictureFront.material.opacity = 0;
+        }
+    }
+}
--- a/magic-mirror/src/scene/bookshelf.js
+++ b/magic-mirror/src/scene/bookshelf.js
@ -0,0 +1,124 @@
+import * as THREE from 'three';
+import { state } from '../state.js';
+import { getRandomColor, seededRandom } from '../utils.js';
+
+export function createBookshelf(x, z, rotationY, uniqueSeed) {
+    state.seed = uniqueSeed; // Reset seed for this specific shelf instance
+
+    const shelfHeight = 2.2;
+    const shelfDepth = 0.35;
+    const shelfWidth = 1.2;
+    const numShelves = 6;
+    const woodThickness = 0.04;
+    const woodColor = 0x5c4033; // Darker, richer wood
+
+    const shelfGroup = new THREE.Group();
+    shelfGroup.position.set(x, 0, z);
+    shelfGroup.rotation.y = rotationY;
+
+    const woodMaterial = new THREE.MeshPhongMaterial({ color: woodColor, shininess: 30 });
+
+    // 1. Build Frame (Hollow box)
+    // Back Panel
+    const backGeo = new THREE.BoxGeometry(shelfWidth, shelfHeight, woodThickness);
+    const backPanel = new THREE.Mesh(backGeo, woodMaterial);
+    backPanel.position.set(0, shelfHeight / 2, -shelfDepth / 2 + woodThickness / 2);
+    backPanel.castShadow = true;
+    backPanel.receiveShadow = true;
+    shelfGroup.add(backPanel);
+
+    // Side Panels (Left & Right)
+    const sideGeo = new THREE.BoxGeometry(woodThickness, shelfHeight, shelfDepth);
+    const leftSide = new THREE.Mesh(sideGeo, woodMaterial);
+    leftSide.position.set(-shelfWidth / 2 + woodThickness / 2, shelfHeight / 2, 0);
+    leftSide.castShadow = true;
+    leftSide.receiveShadow = true;
+    shelfGroup.add(leftSide);
+
+    const rightSide = new THREE.Mesh(sideGeo, woodMaterial);
+    rightSide.position.set(shelfWidth / 2 - woodThickness / 2, shelfHeight / 2, 0);
+    rightSide.castShadow = true;
+    rightSide.receiveShadow = true;
+    shelfGroup.add(rightSide);
+
+    // Top & Bottom Panels
+    const topBottomGeo = new THREE.BoxGeometry(shelfWidth, woodThickness, shelfDepth);
+    const bottomPanel = new THREE.Mesh(topBottomGeo, woodMaterial);
+    bottomPanel.position.set(0, woodThickness / 2, 0);
+    bottomPanel.receiveShadow = true;
+    shelfGroup.add(bottomPanel);
+
+    const topPanel = new THREE.Mesh(topBottomGeo, woodMaterial);
+    topPanel.position.set(0, shelfHeight - woodThickness / 2, 0);
+    topPanel.castShadow = true;
+    shelfGroup.add(topPanel);
+
+    state.landingSurfaces.push(topPanel);
+
+    // 2. Individual Shelves & Books
+    const internalHeight = shelfHeight - (2 * woodThickness);
+    const shelfSpacing = internalHeight / numShelves;
+    const internalWidth = shelfWidth - (2 * woodThickness);
+
+    for (let i = 0; i < numShelves; i++) {
+        const currentShelfY = woodThickness + (i * shelfSpacing);
+
+        // Shelf board (skip for the very bottom one as we have a bottom panel)
+        if (i > 0) {
+            const shelfBoard = new THREE.Mesh(
+                new THREE.BoxGeometry(internalWidth, woodThickness, shelfDepth - woodThickness), // Slightly shallower to fit inside back panel
+                woodMaterial
+            );
+            shelfBoard.position.set(0, currentShelfY, woodThickness / 2); // Offset forward slightly
+            shelfBoard.castShadow = true;
+            shelfBoard.receiveShadow = true;
+            shelfGroup.add(shelfBoard);
+        }
+
+        // 3. Procedural Books
+        let currentBookX = -internalWidth / 2 + 0.01; // Start at left inside edge
+        const shelfSurfaceY = currentShelfY + woodThickness / 2;
+
+        while (currentBookX < internalWidth / 2 - 0.05) {
+            // sizes vary
+            const bookWidth = 0.02 + seededRandom() * 0.05;
+            const bookHeight = (shelfSpacing * 0.6) + seededRandom() * (shelfSpacing * 0.1);
+            const bookDepth = 0.15 + seededRandom() * 0.03;
+
+            if (currentBookX + bookWidth > internalWidth / 2) break;
+
+            const bookColor = getRandomColor();
+            const bookMat = new THREE.MeshPhongMaterial({ color: bookColor, shininess: 60 });
+            const bookGeo = new THREE.BoxGeometry(bookWidth, bookHeight, bookDepth);
+            const book = new THREE.Mesh(bookGeo, bookMat);
+
+            // Position: Resting on shelf, pushed towards the back with slight random variation
+            const depthVariation = seededRandom() * 0.05;
+            book.position.set(
+                currentBookX + bookWidth / 2,
+                shelfSurfaceY + bookHeight / 2,
+                -shelfDepth / 2 + woodThickness + bookDepth / 2 + depthVariation
+            );
+            
+            book.castShadow = true;
+            book.receiveShadow = true;
+            // Store original Y position and animation data
+            book.userData.originalY = book.position.y;
+            book.userData.levitateOffset = 0;
+            book.userData.oscillationTime = Math.random() * Math.PI * 2; // Start at random phase
+            shelfGroup.add(book);
+
+            if (Math.random() > 0.8) {
+                state.books.push(book);
+            }
+
+            currentBookX += bookWidth + 0.002; // Tiny gap between books
+            
+            if (seededRandom() > 0.92) {
+                currentBookX += bookWidth * 3; // random bigger gaps
+            }
+        }
+    }
+
+    state.scene.add(shelfGroup);
+}
--- a/magic-mirror/src/scene/crystal-ball.js
+++ b/magic-mirror/src/scene/crystal-ball.js
@ -0,0 +1,167 @@
+import * as THREE from 'three';
+import { state } from '../state.js';
+import { screenVertexShader, screenFragmentShader } from '../shaders/screen-shaders.js';
+
+export function createCrystalBall(x, z, rotY) {
+    // --- Materials ---
+    const woodMaterial = new THREE.MeshPhongMaterial({ color: 0x5c4033, shininess: 30 });
+    const standMaterial = new THREE.MeshPhongMaterial({ color: 0x3d2d1d, shininess: 50, specular: 0x444444 });
+
+    const ballGroup = new THREE.Group();
+
+    // --- 1. Small Pedestal Table ---
+    const tableHeight = 0.7;
+    const tableWidth = 1.0;
+    const tableDepth = 1.0;
+    const legThickness = 0.08;
+
+    // Table Top
+    const topGeometry = new THREE.BoxGeometry(tableWidth, 0.05, tableDepth);
+    const tableTop = new THREE.Mesh(topGeometry, woodMaterial);
+    tableTop.position.y = tableHeight;
+    tableTop.castShadow = true;
+    tableTop.receiveShadow = true;
+    ballGroup.add(tableTop);
+
+    // Legs
+    const legHeight = tableHeight;
+    const legGeometry = new THREE.BoxGeometry(legThickness, legHeight, legThickness);
+    const legOffset = (tableWidth / 2) - (legThickness * 1.5);
+    const depthOffset = (tableDepth / 2) - (legThickness * 1.5);
+
+    const createLeg = (lx, lz) => {
+        const leg = new THREE.Mesh(legGeometry, woodMaterial);
+        leg.position.set(lx, legHeight / 2, lz);
+        leg.castShadow = true;
+        leg.receiveShadow = true;
+        return leg;
+    };
+
+    ballGroup.add(createLeg(-legOffset, depthOffset));
+    ballGroup.add(createLeg(legOffset, depthOffset));
+    ballGroup.add(createLeg(-legOffset, -depthOffset));
+    ballGroup.add(createLeg(legOffset, -depthOffset));
+
+    // --- 2. Crystal Ball Stand ---
+    const standBaseGeo = new THREE.CylinderGeometry(0.25, 0.35, 0.1, 16);
+    const standBase = new THREE.Mesh(standBaseGeo, standMaterial);
+    standBase.position.y = tableHeight + 0.05;
+    standBase.castShadow = true;
+    standBase.receiveShadow = true;
+    ballGroup.add(standBase);
+
+    const standNeckGeo = new THREE.CylinderGeometry(0.15, 0.20, 0.2, 12);
+    const standNeck = new THREE.Mesh(standNeckGeo, standMaterial);
+    standNeck.position.y = standBase.position.y + 0.15;
+    standNeck.castShadow = true;
+    standNeck.receiveShadow = true;
+    ballGroup.add(standNeck);
+
+    // --- 3. The Crystal Ball ---
+    const ballRadius = 0.35;
+    const ballGeometry = new THREE.SphereGeometry(ballRadius, 64, 32);
+    
+    // The 'tvScreen' from state will now be our crystal ball
+    state.tvScreen = new THREE.Mesh(ballGeometry, new THREE.MeshBasicMaterial({ color: 0x000000 }));
+    state.tvScreen.position.y = standNeck.position.y + 0.15 + ballRadius * 0.5;
+    setCrystalBallOffMaterial(); // Set its initial "off" state
+    ballGroup.add(state.tvScreen);
+
+    // --- 4. Light from the Crystal Ball ---
+    state.screenLight = new THREE.PointLight(0xffffff, 0, 10);
+    state.screenLight.position.copy(state.tvScreen.position);
+    state.screenLight.position.y += 0.1; // Position light slightly above the center
+    state.screenLight.castShadow = true;
+    state.screenLight.shadow.mapSize.width = 1024;
+    state.screenLight.shadow.mapSize.height = 1024;
+    state.screenLight.shadow.camera.near = 0.2;
+    state.screenLight.shadow.camera.far = 5;
+    ballGroup.add(state.screenLight);
+
+    // Position and rotate the entire group
+    ballGroup.position.set(x, 0, z);
+    ballGroup.rotation.y = rotY;
+
+    state.scene.add(ballGroup);
+}
+
+function setCrystalBallOffMaterial() {
+    if (state.tvScreen.material) {
+        state.tvScreen.material.dispose();
+    }
+    // A slightly reflective, dark, magical-looking material for when it's off
+    state.tvScreen.material = new THREE.MeshPhongMaterial({
+        color: 0x100510,
+        shininess: 100,
+        specular: 0xeeeeff,
+        transparent: true,
+        opacity: 0.85
+    });
+    state.tvScreen.material.needsUpdate = true;
+}
+
+export function turnTvScreenOff() {
+    if (state.tvScreenPowered) {
+        state.tvScreenPowered = false;
+        setScreenEffect(2, () => {
+            setCrystalBallOffMaterial();
+            state.screenLight.intensity = 0.0;
+        }); // Trigger power down effect
+    }
+}
+
+export function turnTvScreenOn() {
+    if (state.tvScreen.material) {
+        state.tvScreen.material.dispose();
+    }
+    // Use the same shader material as the TV for video playback
+    state.tvScreen.material = new THREE.ShaderMaterial({
+        uniforms: {
+            videoTexture: { value: state.videoTexture },
+            u_effect_type: { value: 0.0 },
+            u_effect_strength: { value: 0.0 },
+        },
+        vertexShader: screenVertexShader,
+        fragmentShader: screenFragmentShader,
+        transparent: true,
+    });
+
+    state.tvScreen.material.needsUpdate = true;
+
+    if (!state.tvScreenPowered) {
+        state.tvScreenPowered = true;
+        setScreenEffect(1); // Trigger power on effect
+    }
+}
+
+export function setScreenEffect(effectType, onComplete) {
+    const material = state.tvScreen.material;
+    if (!material.uniforms) return;
+    
+    state.screenEffect.active = true;
+    state.screenEffect.type = effectType;
+    state.screenEffect.startTime = state.clock.getElapsedTime() * 1000;
+    state.screenEffect.onComplete = onComplete;
+}
+
+export function updateScreenEffect() {
+    if (!state.screenEffect.active) return;
+    const material = state.tvScreen.material;
+    if (!material.uniforms) return;
+
+    const elapsedTime = (state.clock.getElapsedTime() * 1000) - state.screenEffect.startTime;
+    const progress = Math.min(elapsedTime / state.screenEffect.duration, 1.0);
+    const easedProgress = state.screenEffect.easing(progress);
+
+    material.uniforms.u_effect_type.value = state.screenEffect.type;
+    material.uniforms.u_effect_strength.value = easedProgress;
+
+    if (progress >= 1.0) {
+        state.screenEffect.active = false;
+        material.uniforms.u_effect_strength.value = (state.screenEffect.type === 2) ? 1.0 : 0.0;
+        if (state.screenEffect.onComplete) {
+            state.screenEffect.onComplete();
+        }
+        material.uniforms.u_effect_type.value = 0.0;
+    }
+}
--- a/magic-mirror/src/scene/door.js
+++ b/magic-mirror/src/scene/door.js
@ -0,0 +1,120 @@
+import * as THREE from 'three';
+import { state } from '../state.js';
+
+let doorGroupPanel;
+let outsideMaterial; // Declare outsideMaterial globally
+let glowIntensity = 0.0;
+let glowDirection = 1; // 1 for increasing, -1 for decreasing
+
+const DOOR_STATES = {
+    RESTING: 'resting',
+    OPENING: 'opening',
+    CLOSING: 'closing',
+};
+let doorState = DOOR_STATES.RESTING;
+let stateTimer = 0;
+
+export function createDoor(x, z, rotY) {
+    const doorWidth = 1;
+
+    const doorGroup = new THREE.Group();
+    doorGroup.position.set(x, 1.1, z); // Centered vertically for a 2.2m door
+    doorGroup.rotation.set(0, rotY, 0);
+
+    // Door Frame
+    const frameMaterial = new THREE.MeshPhongMaterial({ color: 0x473e3a }); // Dark wood for frame
+    const frameTop = new THREE.Mesh(new THREE.BoxGeometry(1.2, 0.1, 0.15), frameMaterial);
+    frameTop.position.set(0, 1.15, 0);
+    frameTop.castShadow = true;
+    doorGroup.add(frameTop);
+
+    const frameLeft = new THREE.Mesh(new THREE.BoxGeometry(0.1, 2.3, 0.15), frameMaterial);
+    frameLeft.position.set(-0.55, 0.05, 0);
+    frameLeft.castShadow = true;
+    doorGroup.add(frameLeft);
+
+    const frameRight = new THREE.Mesh(new THREE.BoxGeometry(0.1, 2.3, 0.15), frameMaterial);
+    frameRight.position.set(0.55, 0.05, 0);
+    frameRight.castShadow = true;
+    doorGroup.add(frameRight);
+
+    // Outside darkness
+    outsideMaterial = new THREE.MeshPhongMaterial({ color: 0x150505, emissive: 0x000000, shininess: 50 });
+    const outside = new THREE.Mesh(new THREE.BoxGeometry(doorWidth, 2.2, 0.04), outsideMaterial);
+    outside.position.set(0, 0, 0);
+    doorGroup.add(outside);
+
+    // Door group
+    doorGroupPanel = new THREE.Group();
+    // Main Door Panel
+    const doorMaterial = new THREE.MeshPhongMaterial({ color: 0x8b5a2b, shininess: 10 }); // Lighter wood for door
+    const door = new THREE.Mesh(new THREE.BoxGeometry(doorWidth, 2.2, 0.08), doorMaterial);
+    door.position.set(doorWidth/2, 0, 0);
+    door.castShadow = true;
+    door.receiveShadow = true;
+    doorGroupPanel.add(door);
+
+    // Door Knob
+    const knobMaterial = new THREE.MeshPhongMaterial({ color: 0xd4af37, shininess: 100 }); // Gold/Brass
+    const knob = new THREE.Mesh(new THREE.SphereGeometry(0.05, 16, 16), knobMaterial);
+    knob.position.set(doorWidth/2 + 0.4, 0, 0.06); // Position on the right side of the door
+    knob.castShadow = true;
+    doorGroupPanel.add(knob);
+    doorGroupPanel.position.x = -doorWidth/2;
+    doorGroupPanel.rotation.y = 0;
+
+    doorGroup.add(doorGroupPanel);
+
+    state.scene.add(doorGroup);
+}
+
+export function updateDoor() {
+    const speed = 0.0002;
+    const minAngle = 0;
+    const maxAngle = -0.7;
+
+    stateTimer -= 1 / 60; // Assuming 60fps
+
+    if (stateTimer <= 0) {
+        const nextState = Math.random();
+        if (nextState < 0.1) {
+            doorState = DOOR_STATES.RESTING;
+            stateTimer = 2 + Math.random() * 5;
+        } else if (nextState < 0.5) {
+            doorState = DOOR_STATES.OPENING;
+            stateTimer = 2 + Math.random() * 5;
+        } else {
+            doorState = DOOR_STATES.CLOSING;
+            stateTimer = 3 + Math.random() * 2;
+        }
+    }
+
+    switch (doorState) {
+        case DOOR_STATES.OPENING:
+            if (doorGroupPanel.rotation.y > maxAngle) {
+                doorGroupPanel.rotation.y -= speed;
+            }
+            break;
+        case DOOR_STATES.CLOSING:
+            if (doorGroupPanel.rotation.y < minAngle) {
+                doorGroupPanel.rotation.y += speed * 2;
+            }
+            break;
+    }
+
+    // Outside material pulsating glow
+    if (outsideMaterial) {
+        const glowMin = 0.001;
+        const glowMax = 0.005;
+        const glowSpeed = 0.0001; // Speed of the pulsation
+        glowIntensity += glowDirection * glowSpeed;
+        if (glowIntensity >= glowMax) {
+            glowIntensity = glowMax;
+            glowDirection = -1;
+        } else if (glowIntensity <= glowMin) {
+            glowIntensity = glowMin;
+            glowDirection = 1;
+        }
+        outsideMaterial.emissive.setRGB(glowIntensity, 0, 0);
+    }
+}
--- a/magic-mirror/src/scene/magic-mirror.js
+++ b/magic-mirror/src/scene/magic-mirror.js
@ -0,0 +1,160 @@
+import * as THREE from 'three';
+import { state } from '../state.js';
+import { screenVertexShader, screenFragmentShader } from '../shaders/screen-shaders.js';
+
+export function createMagicMirror(x, z, rotY) {
+    // --- Materials ---
+    const frameMaterial = new THREE.MeshPhongMaterial({ color: 0x8B4513, shininess: 40, specular: 0x333333 });
+    const metalMaterial = new THREE.MeshPhongMaterial({ color: 0xd4af37, shininess: 100, specular: 0xeeeeff }); // Gold-like
+
+    const mirrorGroup = new THREE.Group();
+
+    // --- 1. Mirror Stand Base ---
+    const baseWidth = 1.5;
+    const baseHeight = 0.2;
+    const baseDepth = 0.6;
+    const baseGeo = new THREE.BoxGeometry(baseWidth, baseHeight, baseDepth);
+    const base = new THREE.Mesh(baseGeo, frameMaterial);
+    base.position.y = baseHeight / 2;
+    base.castShadow = true;
+    base.receiveShadow = true;
+    mirrorGroup.add(base);
+
+    // --- 2. Stand Uprights ---
+    const uprightHeight = 2.4;
+    const uprightWidth = 0.15;
+    const uprightGeo = new THREE.BoxGeometry(uprightWidth, uprightHeight, uprightWidth);
+    
+    const createUpright = (posX) => {
+        const upright = new THREE.Mesh(uprightGeo, frameMaterial);
+        upright.position.set(posX, uprightHeight / 2, 0);
+        upright.castShadow = true;
+        upright.receiveShadow = true;
+        return upright;
+    };
+
+    const uprightOffset = baseWidth / 2 - 0.3;
+    mirrorGroup.add(createUpright(-uprightOffset));
+    mirrorGroup.add(createUpright(uprightOffset));
+
+    // --- 3. The Elliptical Mirror Surface (The "Screen") ---
+    const mirrorRadius = 0.8; // Adjusted radius for scaling
+    const mirrorGeo = new THREE.CircleGeometry(mirrorRadius, 64);
+    
+    // The 'tvScreen' from state will now be our mirror surface
+    state.tvScreen = new THREE.Mesh(mirrorGeo, new THREE.MeshBasicMaterial({ color: 0x000000 }));
+    state.tvScreen.position.y = 1.4; // Center height
+    state.tvScreen.position.z = 0.1; // Slightly forward in the frame
+    state.tvScreen.scale.set(1, 1.5, 1); // Scale Y to make it a tall ellipse
+    setMirrorOffMaterial(); // Set its initial "off" state
+    mirrorGroup.add(state.tvScreen);
+
+    // --- 4. Ornate Elliptical Mirror Frame (Torus) ---
+    const frameRadius = mirrorRadius;
+    const frameTubeRadius = 0.04; // Made the rim thinner
+    const frameRingGeo = new THREE.TorusGeometry(frameRadius, frameTubeRadius, 16, 100);
+    const frameRing = new THREE.Mesh(frameRingGeo, metalMaterial);
+    frameRing.position.copy(state.tvScreen.position);
+    frameRing.scale.copy(state.tvScreen.scale); // Apply the same scale to the frame
+    frameRing.castShadow = true;
+    mirrorGroup.add(frameRing);
+
+    // --- 5. Light from the Mirror ---
+    state.screenLight = new THREE.PointLight(0xffffff, 0, 10);
+    state.screenLight.position.copy(state.tvScreen.position);
+    state.screenLight.position.z += 0.3; // Position light in front of the mirror
+    state.screenLight.castShadow = true;
+    state.screenLight.shadow.mapSize.width = 1024;
+    state.screenLight.shadow.mapSize.height = 1024;
+    state.screenLight.shadow.camera.near = 0.2;
+    state.screenLight.shadow.camera.far = 5;
+    mirrorGroup.add(state.screenLight);
+
+    // Position and rotate the entire group
+    mirrorGroup.position.set(x, 0, z);
+    mirrorGroup.rotation.y = rotY;
+
+    state.scene.add(mirrorGroup);
+}
+
+function setMirrorOffMaterial() {
+    if (state.tvScreen.material) {
+        state.tvScreen.material.dispose();
+    }
+    // A reflective, dark material for when it's off
+    state.tvScreen.material = new THREE.MeshPhongMaterial({
+        color: 0x051020, // Dark blue tint
+        shininess: 100,
+        specular: 0xcccccc,
+        envMap: state.scene.background, // Reflect the room
+        reflectivity: 0.9 // Increased reflectivity
+    });
+    state.tvScreen.material.needsUpdate = true;
+}
+
+export function turnTvScreenOff() {
+    if (state.tvScreenPowered) {
+        state.tvScreenPowered = false;
+        setScreenEffect(2, () => {
+            setMirrorOffMaterial();
+            state.screenLight.intensity = 0.0;
+        }); // Trigger power down effect
+    }
+}
+
+export function turnTvScreenOn() {
+    if (state.tvScreen.material) {
+        state.tvScreen.material.dispose();
+    }
+    // Use the shader material for video playback
+    state.tvScreen.material = new THREE.ShaderMaterial({
+        uniforms: {
+            videoTexture: { value: state.videoTexture },
+            u_effect_type: { value: 0.0 },
+            u_effect_strength: { value: 0.0 },
+            u_time: { value: 0.0 },
+        },
+        vertexShader: screenVertexShader,
+        fragmentShader: screenFragmentShader,
+        transparent: true,
+    });
+
+    state.tvScreen.material.needsUpdate = true;
+
+    if (!state.tvScreenPowered) {
+        state.tvScreenPowered = true;
+        setScreenEffect(1); // Trigger power on effect
+    }
+}
+
+export function setScreenEffect(effectType, onComplete) {
+    const material = state.tvScreen.material;
+    if (!material.uniforms) return;
+    
+    state.screenEffect.active = true;
+    state.screenEffect.type = effectType;
+    state.screenEffect.startTime = state.clock.getElapsedTime() * 1000;
+    state.screenEffect.onComplete = onComplete;
+}
+
+export function updateScreenEffect() {
+    if (!state.screenEffect.active) return;
+    const material = state.tvScreen.material;
+    if (!material.uniforms) return;
+
+    const elapsedTime = (state.clock.getElapsedTime() * 1000) - state.screenEffect.startTime;
+    const progress = Math.min(elapsedTime / state.screenEffect.duration, 1.0);
+    const easedProgress = state.screenEffect.easing(progress);
+
+    material.uniforms.u_effect_type.value = state.screenEffect.type;
+    material.uniforms.u_effect_strength.value = easedProgress;
+
+    if (progress >= 1.0) {
+        state.screenEffect.active = false;
+        material.uniforms.u_effect_strength.value = (state.screenEffect.type === 2) ? 1.0 : 0.0;
+        if (state.screenEffect.onComplete) {
+            state.screenEffect.onComplete();
+        }
+        material.uniforms.u_effect_type.value = 0.0;
+    }
+}
--- a/magic-mirror/src/scene/room-walls.js
+++ b/magic-mirror/src/scene/room-walls.js
@ -0,0 +1,85 @@
+import * as THREE from 'three';
+import { state } from '../state.js';
+import wallTextureUrl from '/textures/wall.jpg';
+
+export function createRoomWalls() {
+    const wallTexture = state.loader.load(wallTextureUrl);
+    wallTexture.wrapS = THREE.RepeatWrapping;
+    wallTexture.wrapT = THREE.RepeatWrapping;
+    
+    // USING MeshPhongMaterial for specular highlights on walls
+    const wallMaterial = new THREE.MeshPhongMaterial({ 
+        map: wallTexture, 
+        side: THREE.FrontSide, 
+        shininess: 5, 
+        specular: 0x111111 // Subtle reflection
+    });
+    
+    // 1. Back Wall (behind the TV)
+    const backWall = new THREE.Mesh(new THREE.PlaneGeometry(state.roomSize, state.roomHeight), wallMaterial);
+    backWall.position.set(0, state.roomHeight / 2, -state.roomSize / 2);
+    backWall.receiveShadow = true; 
+    backWall.name = 'backWall';
+    state.scene.add(backWall);
+
+    // 2. Front Wall (behind the camera)
+    const frontWall = new THREE.Mesh(new THREE.PlaneGeometry(state.roomSize, state.roomHeight), wallMaterial);
+    frontWall.position.set(0, state.roomHeight / 2, state.roomSize / 2);
+    frontWall.rotation.y = Math.PI; 
+    frontWall.name = 'frontWall';
+    frontWall.receiveShadow = true;
+    state.scene.add(frontWall);
+    
+    // 3. Left Wall
+    const leftWall = new THREE.Mesh(new THREE.PlaneGeometry(state.roomSize, state.roomHeight), wallMaterial);
+    leftWall.rotation.y = Math.PI / 2; 
+    leftWall.name = 'leftWall';
+    leftWall.position.set(-state.roomSize / 2, state.roomHeight / 2, 0);
+    leftWall.receiveShadow = true;
+    state.scene.add(leftWall);
+
+    // 4. Right Wall
+    const rightWall = new THREE.Mesh(new THREE.PlaneGeometry(state.roomSize, state.roomHeight), wallMaterial);
+    rightWall.name = 'rightWall';
+    rightWall.rotation.y = -Math.PI / 2; 
+    rightWall.position.set(state.roomSize / 2, state.roomHeight / 2, 0);
+    rightWall.receiveShadow = true;
+    state.scene.add(rightWall);
+
+    // 5. Ceiling 
+    const ceilingGeometry = new THREE.PlaneGeometry(state.roomSize, state.roomSize);
+    const ceilingTexture = wallTexture; 
+    ceilingTexture.repeat.set(4, 4); 
+    // USING MeshPhongMaterial
+    const ceilingMaterial = new THREE.MeshPhongMaterial({ 
+        map: ceilingTexture, 
+        side: THREE.FrontSide,
+        shininess: 5, 
+        specular: 0x111111 
+    });
+    
+    const ceiling = new THREE.Mesh(ceilingGeometry, ceilingMaterial);
+    ceiling.rotation.x = Math.PI / 2; 
+    ceiling.position.set(0, state.roomHeight, 0);
+    ceiling.receiveShadow = true; 
+    state.scene.add(ceiling);
+
+    state.crawlSurfaces.push(backWall, leftWall, rightWall);
+    
+    // --- 6. Add a Window to the Back Wall ---
+    const windowWidth = 1.5;
+    const windowHeight = 1.2;
+    const windowGeometry = new THREE.PlaneGeometry(windowWidth, windowHeight);
+
+    const nightSkyMaterial = new THREE.MeshPhongMaterial({ 
+        color: 0x0a1a3a, 
+        emissive: 0x0a1a3a, 
+        emissiveIntensity: 0.5,
+        side: THREE.FrontSide
+    });
+    const windowPane = new THREE.Mesh(windowGeometry, nightSkyMaterial);
+
+    const windowZ = -state.roomSize / 2 + 0.001; 
+    windowPane.position.set(-3.5, state.roomHeight * 0.5 + 1.5, windowZ);
+    state.scene.add(windowPane);
+}
--- a/magic-mirror/src/scene/root.js
+++ b/magic-mirror/src/scene/root.js
@ -0,0 +1,167 @@
+import * as THREE from 'three';
+import { state } from '../state.js';
+import { createRoomWalls } from './room-walls.js';
+import { createBookshelf } from './bookshelf.js';
+import { createMagicMirror } from './magic-mirror.js';
+import { PictureFrame } from './PictureFrame.js';
+import painting1 from '/textures/painting1.jpg';
+import painting2 from '/textures/painting2.jpg';
+import floorTextureUrl from '/textures/stone_floor.png';
+import tableTextureUrl from '/textures/wood.png';
+
+// --- Scene Modeling Function ---
+export function createSceneObjects() {
+    // --- Materials (MeshPhongMaterial) ---
+    const darkMetal = new THREE.MeshPhongMaterial({ 
+        color: 0x6b6b6b, 
+        shininess: 80, 
+        specular: 0x888888 
+    });
+
+    const woodMaterial = new THREE.MeshPhongMaterial({
+        map: state.loader.load(tableTextureUrl),
+        shininess: 10,
+        specular: 0x222222
+    });
+    
+    // --- 1. Floor ---
+    const floorGeometry = new THREE.PlaneGeometry(20, 20);
+    const floorTexture = state.loader.load(floorTextureUrl);
+    floorTexture.wrapS = THREE.RepeatWrapping;
+    floorTexture.wrapT = THREE.RepeatWrapping;
+    floorTexture.repeat.set(state.roomSize, state.roomSize);
+    const floorMaterial = new THREE.MeshPhongMaterial({ map: floorTexture, color: 0xaaaaaa, shininess: 5 }); 
+    const floor = new THREE.Mesh(floorGeometry, floorMaterial);
+    floor.rotation.x = -Math.PI / 2;
+    floor.position.y = 0;
+    floor.receiveShadow = true; 
+    state.scene.add(floor);
+
+    state.landingSurfaces.push(floor);
+
+    createRoomWalls();  
+    
+    // 3. Lighting (Minimal and focused)
+    const ambientLight = new THREE.AmbientLight(0x404040, 1); 
+    state.scene.add(ambientLight);
+
+    const roomLight = new THREE.PointLight(0xffdcb4, 0.8, state.roomSize); 
+    roomLight.position.set(0, 1.8, 0); 
+    state.scene.add(roomLight);
+
+
+    createMagicMirror(0, -state.roomSize/2 + 1.0, 0);
+
+    // --- 5. Candle ---
+    const candleStickGeo = new THREE.CylinderGeometry(0.05, 0.06, 0.3, 12);
+    const candleStick = new THREE.Mesh(candleStickGeo, darkMetal);
+    candleStick.castShadow = true;
+    candleStick.receiveShadow = true;
+
+    // Candle Light (Warm Glow)
+    state.candleLight = new THREE.PointLight(0xffaa00, state.originalLampIntensity, 4); 
+    state.candleLight.position.set(0, 0.2, 0); 
+    state.candleLight.castShadow = true;
+    state.candleLight.shadow.mapSize.width = 512; 
+    state.candleLight.shadow.mapSize.height = 512;
+    state.candleLight.shadow.camera.near = 0.1;
+    state.candleLight.shadow.camera.far = 4;
+    state.candleLight.penumbra = 0.5;
+    
+    const candleGroup = new THREE.Group();
+    candleGroup.add(candleStick, state.candleLight);
+    candleGroup.position.set(0.8, 0.15, -state.roomSize/2+0.5); 
+
+    state.scene.add(candleGroup);
+
+    // --- 7. Table ---
+    const tableTopGeo = new THREE.BoxGeometry(1.5, 0.1, 0.8);
+    const tableTop = new THREE.Mesh(tableTopGeo, woodMaterial);
+    tableTop.position.y = 0.5;
+    tableTop.castShadow = true;
+    tableTop.receiveShadow = true;
+
+    const table = new THREE.Group();
+    table.add(tableTop); // You could add legs here for more detail
+    table.position.set(-1.7, 0, -0.8);
+    table.rotation.y = Math.PI / 5;
+    state.scene.add(table);
+
+    // --- 8. Timber Frames ---
+    const beamThickness = 0.15;
+    const beamDepth = 0.2;
+
+    // Ceiling Beams
+    const ceilingBeamGeoX = new THREE.BoxGeometry(state.roomSize, beamDepth, beamThickness);
+    const ceilingBeamGeoZ = new THREE.BoxGeometry(beamThickness, beamDepth, state.roomSize);
+
+    const createBeam = (geo, pos, rotY = 0) => {
+        const beam = new THREE.Mesh(geo, woodMaterial);
+        beam.position.copy(pos);
+        beam.rotation.y = rotY;
+        beam.castShadow = true;
+        beam.receiveShadow = true;
+        state.scene.add(beam);
+        return beam;
+    };
+
+    // Create a grid of ceiling beams
+    // Beams along X-axis
+    createBeam(ceilingBeamGeoX, new THREE.Vector3(0, state.roomHeight - beamDepth / 2, 0));
+    createBeam(ceilingBeamGeoX, new THREE.Vector3(0, state.roomHeight - beamDepth / 2, -state.roomSize / 2 + 1.5));
+    createBeam(ceilingBeamGeoX, new THREE.Vector3(0, state.roomHeight - beamDepth / 2, state.roomSize / 2 - 1.5));
+    // Beams along Z-axis
+    createBeam(ceilingBeamGeoZ, new THREE.Vector3(-state.roomSize / 2 + 1.5, state.roomHeight - beamDepth / 2, 0));
+    createBeam(ceilingBeamGeoZ, new THREE.Vector3(state.roomSize / 2 - 1.5, state.roomHeight - beamDepth / 2, 0));
+
+    // Wall Beams (Vertical)
+    const wallBeamGeo = new THREE.BoxGeometry(beamThickness, state.roomHeight, beamDepth);
+
+    // Back Wall
+    createBeam(wallBeamGeo, new THREE.Vector3(-1, state.roomHeight / 2, -state.roomSize / 2 + beamDepth / 2));
+    createBeam(wallBeamGeo, new THREE.Vector3(1, state.roomHeight / 2, -state.roomSize / 2 + beamDepth / 2));
+
+    // Left Wall
+    createBeam(wallBeamGeo, new THREE.Vector3(-state.roomSize / 2 + beamDepth / 2, state.roomHeight / 2, -1), Math.PI / 2);
+    createBeam(wallBeamGeo, new THREE.Vector3(-state.roomSize / 2 + beamDepth / 2, state.roomHeight / 2, 1), Math.PI / 2);
+
+    // Right Wall
+    createBeam(wallBeamGeo, new THREE.Vector3(state.roomSize / 2 - beamDepth / 2, state.roomHeight / 2, -1.5), -Math.PI / 2);
+    createBeam(wallBeamGeo, new THREE.Vector3(state.roomSize / 2 - beamDepth / 2, state.roomHeight / 2, 1.5), -Math.PI / 2);
+
+    // Wall Beams (Horizontal)
+    const wallBeamGeoX = new THREE.BoxGeometry(state.roomSize, beamThickness, beamDepth);
+    const wallBeamGeoZ = new THREE.BoxGeometry(beamDepth, beamThickness, state.roomSize);
+
+    // Back Wall
+    createBeam(wallBeamGeoX, new THREE.Vector3(0, state.roomHeight - 0.5, -state.roomSize / 2 + beamDepth / 2));
+
+    // Left Wall
+    createBeam(wallBeamGeoZ, new THREE.Vector3(-state.roomSize / 2 + beamDepth / 2, state.roomHeight - 0.5, 0));
+
+    // Right Wall
+    createBeam(wallBeamGeoZ, new THREE.Vector3(state.roomSize / 2 - beamDepth / 2, state.roomHeight - 0.5, 0));
+
+
+    createBookshelf(-state.roomSize/2 + 0.2, state.roomSize/2*0.2, Math.PI/2, 0);
+    createBookshelf(-state.roomSize/2 + 0.2, state.roomSize/2*0.7, Math.PI/2, 0);
+    createBookshelf(state.roomSize/2 * 0.7, -state.roomSize/2+0.3, 0, 1);
+    
+    const pictureFrame = new PictureFrame(state.scene, {
+        position: new THREE.Vector3(-state.roomSize/2, 2.0, -state.roomSize/2 + 1.5),
+        width: 1.5,
+        height: 1,
+        imageUrls: [painting1, painting2],
+        rotationY: Math.PI / 2
+    });
+    state.pictureFrames.push(pictureFrame);
+
+    const pictureFrame2 = new PictureFrame(state.scene, {
+        position: new THREE.Vector3(state.roomSize/2, 2.0, 0.3),
+        width: 1.5,
+        height: 1,
+        imageUrls: [painting2, painting1],
+        rotationY: -Math.PI / 2
+    });
+    state.pictureFrames.push(pictureFrame2);
+}
--- a/magic-mirror/src/scene/screen-shaders.js
+++ b/magic-mirror/src/scene/screen-shaders.js
@ -0,0 +1,18 @@
+export const screenVertexShader = `
+varying vec2 vUv;
+
+void main() {
+    vUv = uv;
+    gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
+}
+`;
+
+export const screenFragmentShader = `
+varying vec2 vUv;
+uniform sampler2D videoTexture;
+
+void main() {
+    // Sample the video texture
+    gl_FragColor = texture2D(videoTexture, vUv);
+}
+`;
--- a/magic-mirror/src/scene/tv-set.js
+++ b/magic-mirror/src/scene/tv-set.js
@ -0,0 +1,250 @@
+import * as THREE from 'three';
+import { state } from '../state.js';
+import { createVcr } from './vcr.js';
+import { screenVertexShader, screenFragmentShader } from '../shaders/screen-shaders.js';
+
+export function createTvSet(x, z, rotY) {
+    // --- Materials (MeshPhongMaterial) ---
+    const tvPlastic = new THREE.MeshPhongMaterial({ color: 0x4d4d4d, shininess: 30 });
+
+    const tvGroup = new THREE.Group();
+
+    // --- TV Table Dimensions & Material ---
+    const woodColor = 0x5a3e36; // Dark brown wood
+    const tableHeight = 0.7;    // Height from floor to top surface
+    const tableWidth = 2.0;
+    const tableDepth = 1.0;
+    const legThickness = 0.05;
+    const shelfThickness = 0.03;
+    // Use standard material for realistic shadowing
+    const material = new THREE.MeshStandardMaterial({ color: woodColor, roughness: 0.8, metalness: 0.1 });
+
+    // VCR gap dimensions calculation
+    const shelfGap = 0.2; // Height of the VCR opening
+    const shelfY = tableHeight - shelfGap - (shelfThickness / 2); // Y position of the bottom shelf
+
+
+    // 2. Table Top 
+    const topGeometry = new THREE.BoxGeometry(tableWidth, shelfThickness, tableDepth);
+    const tableTop = new THREE.Mesh(topGeometry, material);
+    tableTop.position.set(0, tableHeight, 0);
+    tableTop.castShadow = true;
+    tableTop.receiveShadow = true;
+    tvGroup.add(tableTop);
+
+    // 3. VCR Shelf (Middle Shelf)
+    const shelfGeometry = new THREE.BoxGeometry(tableWidth, shelfThickness, tableDepth);
+    const vcrShelf = new THREE.Mesh(shelfGeometry, material);
+    vcrShelf.position.set(0, shelfY, 0);
+    vcrShelf.castShadow = true; 
+    vcrShelf.receiveShadow = true;
+    tvGroup.add(vcrShelf);
+
+    // 4. Side Walls for VCR Compartment (NEW CODE)
+    const wallHeight = shelfGap; // Height is the gap itself
+    const wallThickness = shelfThickness; // Reuse the shelf thickness for the wall width/depth
+    const wallGeometry = new THREE.BoxGeometry(wallThickness, wallHeight, tableDepth);
+    
+    // Calculate the Y center position for the wall
+    const wallYCenter = tableHeight - (shelfThickness / 2) - (wallHeight / 2); 
+    
+    // Calculate the X position to be flush with the table sides
+    const wallXPosition = (tableWidth / 2) - (wallThickness / 2);
+
+    // Left Wall
+    const sideWallLeft = new THREE.Mesh(wallGeometry, material);
+    sideWallLeft.position.set(-wallXPosition, wallYCenter, 0);
+    sideWallLeft.castShadow = true;
+    sideWallLeft.receiveShadow = true;
+    tvGroup.add(sideWallLeft);
+
+    // Right Wall
+    const sideWallRight = new THREE.Mesh(wallGeometry, material);
+    sideWallRight.position.set(wallXPosition, wallYCenter, 0);
+    sideWallRight.castShadow = true;
+    sideWallRight.receiveShadow = true;
+    tvGroup.add(sideWallRight);
+
+    // 5. Legs
+    const legHeight = shelfY; // Legs go from the floor (y=0) to the shelf (y=shelfY)
+    const legGeometry = new THREE.BoxGeometry(legThickness, legHeight, legThickness);
+    
+    // Utility function to create and position a leg
+    const createLeg = (x, z) => {
+        const leg = new THREE.Mesh(legGeometry, material);
+        // Position the leg so the center is at half its height
+        leg.position.set(x, legHeight / 2, z);
+        leg.castShadow = true;
+        leg.receiveShadow = true;
+        return leg;
+    };
+
+    // Calculate offsets for positioning the legs near the corners
+    const offset = (tableWidth / 2) - (legThickness * 2); 
+    const depthOffset = (tableDepth / 2) - (legThickness * 2);
+
+    // Front Left
+    tvGroup.add(createLeg(-offset, depthOffset)); 
+    // Front Right
+    tvGroup.add(createLeg(offset, depthOffset)); 
+    // Back Left
+    tvGroup.add(createLeg(-offset, -depthOffset)); 
+    // Back Right
+    tvGroup.add(createLeg(offset, -depthOffset)); 
+
+    // --- 2. The TV box ---
+    const cabinetGeometry = new THREE.BoxGeometry(1.9, 1.5, 1.0);
+    const cabinet = new THREE.Mesh(cabinetGeometry, tvPlastic);
+    cabinet.position.y = 1.51;
+    cabinet.castShadow = true; 
+    cabinet.receiveShadow = true;
+    tvGroup.add(cabinet);
+
+    // --- 3. Screen Frame ---
+    const frameGeometry = new THREE.BoxGeometry(1.7, 1.3, 0.1);
+    const frameMaterial = new THREE.MeshPhongMaterial({ color: 0x111111, shininess: 20 });
+    const frame = new THREE.Mesh(frameGeometry, frameMaterial);
+    frame.position.set(0, 1.5, 0.68);
+    frame.castShadow = true;
+    frame.receiveShadow = true;
+    tvGroup.add(frame);
+
+    // --- 4. Curved Screen (CRT Effect) ---
+    const screenRadius = 3.0; // Radius for the subtle curve
+    const screenWidth = 1.6;
+    const screenHeight = 1.2;
+    const thetaLength = screenWidth / screenRadius; // Calculate angle needed for the arc
+
+    // Use CylinderGeometry as a segment
+    const screenGeometry = new THREE.CylinderGeometry(
+        screenRadius, screenRadius, 
+        screenHeight, // Cylinder height is the vertical dimension of the screen
+        32, 
+        1, 
+        true, 
+        (Math.PI / 2) - (thetaLength / 2), // Start angle to center the arc
+        thetaLength                        // Arc length (width)
+    ); 
+
+    // Rotate the cylinder segment:
+    // 1. Rotate around X-axis by 90 degrees to lay the height (Y) along Z (depth).
+    //screenGeometry.rotateX(Math.PI / 2); 
+    // 2. Rotate around Y-axis by 90 degrees to align the segment's arc across the X-axis (width).
+    screenGeometry.rotateY(-Math.PI/2);
+
+    const screenMaterial = new THREE.MeshBasicMaterial({ color: 0x000000 });
+    state.tvScreen = new THREE.Mesh(screenGeometry, screenMaterial);
+    
+    // Position the curved screen
+    state.tvScreen.position.set(0.0, 1.5, -2.1); 
+    setTvScreenOffMaterial();
+    tvGroup.add(state.tvScreen);
+
+    tvGroup.position.set(x, 0, z);
+    tvGroup.rotation.y = rotY;
+
+    // Light from the screen (initially low intensity, will increase when video loads)
+    state.screenLight = new THREE.PointLight(0xffffff, 0, 10); 
+    state.screenLight.position.set(0, 1.5, 1.0); 
+    // Screen light casts shadows
+    state.screenLight.castShadow = true;
+    state.screenLight.shadow.mapSize.width = 1024;
+    state.screenLight.shadow.mapSize.height = 1024;
+    state.screenLight.shadow.camera.near = 0.2;
+    state.screenLight.shadow.camera.far = 5;
+    tvGroup.add(state.screenLight);
+
+    // -- VCR --
+    const vcr = createVcr();
+    vcr.position.set(-0.3, 0.6, 0.05);
+    tvGroup.add(vcr);
+
+    state.scene.add(tvGroup);
+}
+
+function setTvScreenOffMaterial() {
+    if (state.tvScreen.material) {
+        state.tvScreen.material.dispose();
+    }
+    state.tvScreen.material = new THREE.MeshPhongMaterial({
+        color: 0x203530,
+        shininess: 45,
+        specular: 0x111111,
+    });
+    state.tvScreen.material.needsUpdate = true;
+}
+
+export function turnTvScreenOff() {
+    if (state.tvScreenPowered) {
+        state.tvScreenPowered = false;
+        setScreenEffect(2, () => {
+            setTvScreenOffMaterial();
+            state.screenLight.intensity = 0.0;
+        }); // Trigger power down
+    }
+}
+
+export function turnTvScreenOn() {
+    if (state.tvScreen.material) {
+        state.tvScreen.material.dispose();
+    }
+    state.tvScreen.material = new THREE.ShaderMaterial({
+        uniforms: {
+            videoTexture: { value: state.videoTexture },
+            u_effect_type: { value: 0.0 },
+            u_effect_strength: { value: 0.0 },
+        },
+        vertexShader: screenVertexShader,
+        fragmentShader: screenFragmentShader,
+        transparent: true,
+    });
+
+    state.tvScreen.material.needsUpdate = true;
+
+    if (!state.tvScreenPowered) {
+        state.tvScreenPowered = true;
+        setScreenEffect(1); // Trigger warm-up
+    }
+}
+
+/**
+ * Controls the warm-up and power-down effects on the TV screen.
+ * @param {number} effectType - 0 normal, 1 for warm-up, 2 for power-down.
+ * @param {function} onComplete - Optional callback when the animation finishes.
+ */
+export function setScreenEffect(effectType, onComplete) {
+    const material = state.tvScreen.material;
+    if (!material.uniforms) return;
+    
+    state.screenEffect.active = true;
+    state.screenEffect.type = effectType;
+    state.screenEffect.startTime = state.clock.getElapsedTime() * 1000;
+    state.screenEffect.onComplete = onComplete;
+}
+
+/**
+ * Updates the screen effect animation. Should be called in the main render loop.
+ */
+export function updateScreenEffect() {
+    if (!state.screenEffect.active) return;
+
+    const material = state.tvScreen.material;
+    if (!material.uniforms) return;
+
+    const elapsedTime = (state.clock.getElapsedTime() * 1000) - state.screenEffect.startTime;
+    const progress = Math.min(elapsedTime / state.screenEffect.duration, 1.0);
+    
+    const easedProgress = state.screenEffect.easing(progress);
+
+    material.uniforms.u_effect_type.value = state.screenEffect.type;
+    material.uniforms.u_effect_strength.value = easedProgress;
+
+    if (progress >= 1.0) {
+        state.screenEffect.active = false;
+        material.uniforms.u_effect_strength.value = (state.screenEffect.type === 2) ? 1.0 : 0.0; // Final state
+        if (state.screenEffect.onComplete) {
+            state.screenEffect.onComplete();
+        }
+        material.uniforms.u_effect_type.value = 0.0; // Reset effect type
+    }
+}
--- a/magic-mirror/src/scene/vcr-display.js
+++ b/magic-mirror/src/scene/vcr-display.js
@ -0,0 +1,214 @@
+import * as THREE from 'three';
+import { state } from '../state.js';
+import { formatTime } from '../utils.js';
+
+// --- Segment Display Definitions ---
+
+// Define which segments (indexed 0-6: A, B, C, D, E, F, G) are active for each digit
+// A=Top, B=TR, C=BR, D=Bottom, E=BL, F=TL, G=Middle
+const SEGMENTS = {
+    '0': [1, 1, 1, 1, 1, 1, 0],
+    '1': [0, 1, 1, 0, 0, 0, 0],
+    '2': [1, 1, 0, 1, 1, 0, 1],
+    '3': [1, 1, 1, 1, 0, 0, 1],
+    '4': [0, 1, 1, 0, 0, 1, 1],
+    '5': [1, 0, 1, 1, 0, 1, 1],
+    '6': [1, 0, 1, 1, 1, 1, 1],
+    '7': [1, 1, 1, 0, 0, 0, 0],
+    '8': [1, 1, 1, 1, 1, 1, 1],
+    '9': [1, 1, 1, 1, 0, 1, 1],
+    ' ': [0, 0, 0, 0, 0, 0, 0] 
+};
+
+const SEG_THICKNESS = 3; // Thickness of the segment line in canvas pixels
+const SEG_PADDING = 2; // Padding within a digit segment's box
+
+// Colors for active and inactive segments
+const COLOR_ACTIVE = '#00ff44'; // Bright Fluorescent Green
+const COLOR_INACTIVE = '#1a1a1a'; // Dim dark gray for 'ghost' segments
+
+/**
+ * Draws a single 7-segment digit by drawing active segments.
+ * Now includes drawing of inactive (ghost) segments for better readability.
+ * @param {CanvasRenderingContext2D} ctx 
+ * @param {string} digit The digit character (0-9).
+ * @param {number} x Left position of the digit area.
+ * @param {number} y Top position of the digit area.
+ * @param {number} H Total height of the digit area.
+ */
+function drawSegmentDigit(ctx, digit, x, y, H) {
+    const segments = SEGMENTS[digit] || SEGMENTS[' '];
+    const W = H / 2; // Width is half the height for standard aspect ratio
+
+    // Segment dimensions relative to W and H
+    const hLength = W - 2 * SEG_PADDING; 
+    // Vertical length calculation: (Total height - 2 paddings - 3 horizontal thicknesses) / 2
+    const vLength = (H - (2 * SEG_PADDING) - (3 * SEG_THICKNESS)) / 2; 
+
+    // Helper to draw horizontal segment (A, G, D)
+    const drawH = (index, x_start, y_start) => {
+        ctx.fillStyle = segments[index] ? COLOR_ACTIVE : COLOR_INACTIVE;
+        ctx.fillRect(x_start + SEG_PADDING, y_start, hLength, SEG_THICKNESS);
+    };
+
+    // Helper to draw vertical segment (F, B, E, C)
+    const drawV = (index, x_start, y_start) => {
+        ctx.fillStyle = segments[index] ? COLOR_ACTIVE : COLOR_INACTIVE;
+        ctx.fillRect(x_start, y_start, SEG_THICKNESS, vLength);
+    };
+
+    // Define segment positions 
+
+    // Horizontal segments
+    // A (Top) - index 0
+    drawH(0, x, y + SEG_PADDING);
+    // G (Middle) - index 6
+    drawH(6, x, y + H/2 - SEG_THICKNESS/2); 
+    // D (Bottom) - index 3
+    drawH(3, x, y + H - SEG_PADDING - SEG_THICKNESS);
+
+    // Vertical segments (Top Half)
+    const topVStart = y + SEG_PADDING + SEG_THICKNESS;
+    const rightVStart = x + W - SEG_PADDING - SEG_THICKNESS;
+
+    // F (Top-Left) - index 5
+    drawV(5, x + SEG_PADDING, topVStart);
+
+    // B (Top-Right) - index 1
+    drawV(1, rightVStart, topVStart);
+
+    // Vertical segments (Bottom Half)
+    const bottomVStart = y + H/2 + SEG_THICKNESS/2;
+
+    // E (Bottom-Left) - index 4
+    drawV(4, x + SEG_PADDING, bottomVStart);
+
+    // C (Bottom-Right) - index 2
+    drawV(2, rightVStart, bottomVStart);
+}
+
+// Function to draw the colon (two dots), now with blinking logic
+function drawColon(ctx, x, y, H, isVisible) {
+    const dotSize = 4;
+    ctx.fillStyle = COLOR_ACTIVE; 
+    
+    if (isVisible) {
+        // Top dot
+        ctx.fillRect(x, y + H * 0.3 - dotSize / 2, dotSize, dotSize);
+        // Bottom dot
+        ctx.fillRect(x, y + H * 0.7 - dotSize / 2, dotSize, dotSize);
+    } else {
+        // Draw inactive colon if not visible, for consistency
+        ctx.fillStyle = COLOR_INACTIVE;
+        ctx.fillRect(x, y + H * 0.3 - dotSize / 2, dotSize, dotSize);
+        ctx.fillRect(x, y + H * 0.7 - dotSize / 2, dotSize, dotSize);
+    }
+}
+
+/**
+ * Draws a simple playback arrow (triangle)
+ * @param {CanvasRenderingContext2D} ctx 
+ * @param {number} x Left position of the arrow area.
+ * @param {number} y Top position of the arrow area.
+ * @param {number} H Total height of the arrow area.
+ */
+function drawPlaybackArrow(ctx, x, y, H) {
+    const arrowWidth = H * 0.4; // Arrow width relative to digit height
+    const arrowHeight = H * 0.4; // Arrow height relative to digit height
+
+    ctx.fillStyle = COLOR_ACTIVE;
+    ctx.beginPath();
+    ctx.moveTo(x, y + H * 0.5 - arrowHeight / 2); // Top point
+    ctx.lineTo(x + arrowWidth, y + H * 0.5); // Right point (center)
+    ctx.lineTo(x, y + H * 0.5 + arrowHeight / 2); // Bottom point
+    ctx.closePath();
+    ctx.fill();
+}
+
+
+// Main function to render the entire time string using segments
+function drawSegmentDisplay(ctx, timeString) {
+    const canvasWidth = ctx.canvas.width;
+    const canvasHeight = ctx.canvas.height;
+    const timeStringLength = timeString.length;
+    
+    // Clear display to dark background
+    ctx.fillStyle = '#0a0a0a';
+    ctx.fillRect(0, 0, canvasWidth, canvasHeight);
+
+    // Constants for layout
+    const charSpacing = 8; // Spacing between digits
+    const digitHeight = canvasHeight - 2 * SEG_PADDING;
+    const digitWidth = digitHeight / 2 + SEG_PADDING; // Total width slot for one digit
+    const colonWidth = 6;
+    const arrowWidth = digitHeight * 0.7; // Approx width for the arrow
+    const arrowPadding = 10; // Space between arrow and first digit
+    
+    // Calculate total display width including arrow and spaces
+    const totalDisplayWidth = arrowWidth + arrowPadding + (4 * digitWidth) + colonWidth + ((timeStringLength - 1) * charSpacing); 
+    
+    // Calculate starting X to center the display
+    let currentX = (canvasWidth - totalDisplayWidth) / 2;
+    const currentY = SEG_PADDING; 
+
+    // Draw Playback Arrow
+    if (state.isVideoLoaded && state.videoElement.readyState >= 3) {
+        drawPlaybackArrow(ctx, currentX, currentY, digitHeight);
+    }
+    currentX += arrowWidth + arrowPadding; // Move X after arrow and its padding
+
+    for (let i = 0; i < timeStringLength; i++) {
+        const char = timeString[i];
+        
+        if (char === ':') {
+            drawColon(ctx, currentX, currentY, digitHeight, state.blinkState); // Pass blinkState
+            currentX += colonWidth; 
+        } else if (char >= '0' && char <= '9') {
+            drawSegmentDigit(ctx, char, currentX, currentY, digitHeight);
+            currentX += digitWidth; 
+        }
+        
+        // Add spacing only if it's not the last element
+        if (i < timeStringLength - 1) {
+            currentX += charSpacing; 
+        }
+    }
+}
+
+// --- VCR Display Functions ---
+export function createVcrDisplay() {
+    const canvas = document.createElement('canvas');
+    canvas.width = 160; // Increased width for arrow and better spacing
+    canvas.height = 32;
+    const ctx = canvas.getContext('2d');
+    
+    ctx.fillStyle = '#030303';
+    ctx.fillRect(0, 0, canvas.width, canvas.height);
+
+    state.vcrDisplayTexture = new THREE.CanvasTexture(canvas);
+    state.vcrDisplayTexture.needsUpdate = true;
+    
+    const displayGeometry = new THREE.PlaneGeometry(0.45, 0.1); // Adjust geometry width for new canvas size
+    const displayMaterial = new THREE.MeshBasicMaterial({ 
+        map: state.vcrDisplayTexture, 
+        side: THREE.FrontSide, 
+        color: 0x105a10,
+    });
+    
+    const displayMesh = new THREE.Mesh(displayGeometry, displayMaterial);
+    return displayMesh;
+}
+
+export function updateVcrDisplay(time) {
+    if (!state.vcrDisplayTexture) return;
+
+    const canvas = state.vcrDisplayTexture.image;
+    const ctx = canvas.getContext('2d');
+    
+    const timeString = formatTime(time);
+    
+    // Uses the new segment drawing function with ghosting, including blinkState for colon
+    drawSegmentDisplay(ctx, timeString);
+    
+    state.vcrDisplayTexture.needsUpdate = true;
+}
--- a/magic-mirror/src/scene/vcr.js
+++ b/magic-mirror/src/scene/vcr.js
@ -0,0 +1,51 @@
+import * as THREE from 'three';
+import { createVcrDisplay } from './vcr-display.js';
+
+export function createVcr() {
+    // Materials
+    const vcrBodyMaterial = new THREE.MeshPhongMaterial({
+        color: 0x222222, // Dark metallic gray
+        shininess: 70,
+        specular: 0x444444
+    });
+    const slotMaterial = new THREE.MeshPhongMaterial({
+        color: 0x0a0a0a, // Deep black
+        shininess: 5,
+        specular: 0x111111
+    });
+
+    // VCR Body
+    const vcrBodyGeometry = new THREE.BoxGeometry(1.0, 0.2, 0.7);
+    const vcrBody = new THREE.Mesh(vcrBodyGeometry, vcrBodyMaterial);
+    vcrBody.position.y = 0; // Centered
+    vcrBody.castShadow = true;
+    vcrBody.receiveShadow = true;
+    
+    // Cassette Slot / Front Face
+    const slotGeometry = new THREE.BoxGeometry(0.9, 0.05, 0.01);
+    const slotMesh = new THREE.Mesh(slotGeometry, slotMaterial);
+    slotMesh.position.set(0, -0.05, 0.35 + 0.005); 
+    slotMesh.castShadow = true;
+    slotMesh.receiveShadow = true;
+
+    // VCR Display
+    const displayMesh = createVcrDisplay();
+    displayMesh.position.z = 0.35 + 0.005; 
+    displayMesh.position.x = 0.2; // Adjusted X for arrow
+    displayMesh.position.y = 0.03; 
+
+    // VCR Group
+    const vcrGroup = new THREE.Group();
+    vcrGroup.add(vcrBody, slotMesh, displayMesh);
+    vcrGroup.position.set(0, 0.1, 0); // Position the whole VCR slightly above the floor
+    
+    // Light from the VCR display itself
+    const vcrDisplayLight = new THREE.PointLight(0x00ff44, 0.03, 1.8);
+    vcrDisplayLight.position.set(0.23, 0.03, 0.35 + 0.03);
+    vcrDisplayLight.castShadow = true;
+    vcrDisplayLight.shadow.mapSize.width = 256;
+    vcrDisplayLight.shadow.mapSize.height = 256;
+    vcrGroup.add(vcrDisplayLight);
+
+    return vcrGroup;
+}
--- a/magic-mirror/src/shaders/screen-shaders.js
+++ b/magic-mirror/src/shaders/screen-shaders.js
@ -0,0 +1,76 @@
+export const screenVertexShader = `
+varying vec2 vUv;
+
+void main() {
+    vUv = uv;
+    gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
+}
+`;
+
+export const screenFragmentShader = `
+varying vec2 vUv;
+uniform sampler2D videoTexture;
+uniform float u_effect_type;     // 0: none, 1: warmup, 2: powerdown
+uniform float u_effect_strength; // 0.0 to 1.0
+uniform float u_time;
+
+// 2D Random function
+float random (vec2 st) {
+    return fract(sin(dot(st.xy,
+                         vec2(12.9898,78.233)))*
+        43758.5453123);
+}
+
+// 2D Noise function
+float noise (vec2 st) {
+    vec2 i = floor(st);
+    vec2 f = fract(st);
+
+    float a = random(i);
+    float b = random(i + vec2(1.0, 0.0));
+    float c = random(i + vec2(0.0, 1.0));
+    float d = random(i + vec2(1.0, 1.0));
+
+    vec2 u = f*f*(3.0-2.0*f);
+    return mix(a, b, u.x) +
+            (c - a)* u.y * (1.0 - u.x) +
+            (d - b) * u.x * u.y;
+}
+
+void main() {
+    vec4 finalColor;
+
+    if (u_effect_type < 0.5) { // No effect
+        vec4 videoColor = texture2D(videoTexture, vUv);
+
+        // Shimmering edge effect
+        float dist = distance(vUv, vec2(0.5));
+        float shimmer = noise(vUv * 20.0 + vec2(u_time * 2.0, 0.0));
+        float edgeFactor = smoothstep(0.3, 0.5, dist);
+        
+        vec3 shimmerColor = vec3(0.7, 0.8, 1.0) * shimmer * edgeFactor * 0.5;
+
+        finalColor = vec4(videoColor.rgb + shimmerColor, videoColor.a);
+
+    } else if (u_effect_type < 1.5) { // "Summon Vision" (Warm-up) effect
+        // Swirling mist clears to reveal the video
+        float noiseVal = noise(vUv * 10.0);
+        float revealFactor = smoothstep(0.0, 0.7, u_effect_strength);
+        float mist = smoothstep(revealFactor - 0.2, revealFactor, noiseVal);
+
+        vec4 videoColor = texture2D(videoTexture, vUv);
+        finalColor = mix(vec4(0.8, 0.7, 1.0, 1.0) * noiseVal, videoColor, mist);
+
+    } else { // "Vision Fades" (Power-down) effect
+        // Video dissolves into a magical fog
+        float noiseVal = noise(vUv * 10.0);
+        float dissolveFactor = smoothstep(0.3, 1.0, u_effect_strength);
+        float mist = smoothstep(dissolveFactor - 0.2, dissolveFactor, noiseVal);
+
+        vec4 videoColor = texture2D(videoTexture, vUv);
+        finalColor = mix(videoColor, vec4(0.8, 0.7, 1.0, 1.0) * noiseVal, mist);
+    }
+
+    gl_FragColor = finalColor;
+}
+`;
--- a/magic-mirror/src/state.js
+++ b/magic-mirror/src/state.js
@ -0,0 +1,67 @@
+import * as THREE from 'three';
+
+export let state = undefined;
+
+export function initState() {
+    state = {
+    // Core Three.js components
+    scene: null,
+    camera: null,
+    renderer: null,
+    clock: new THREE.Clock(),
+    tvScreen: null,
+    tvScreenPowered: false,
+    videoTexture: null,
+    screenLight: null, // Light from the crystal ball
+    candleLight: null, // Light from the candle
+    effectsManager: null,
+    screenEffect: {
+        active: false,
+        type: 0,
+        startTime: 0,
+        duration: 1000, // in ms
+        onComplete: null,
+        easing: (t) => t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t, // easeInOutQuad
+    },
+
+    // VCR Display
+    lastUpdateTime: -1,
+    baseTime: 0,
+    blinkState: false,
+    lastBlinkToggleTime: 0,
+    vcrDisplayTexture: null,
+
+    // Video Playback
+    isVideoLoaded: false,
+    videoUrls: [],
+    currentVideoIndex: -1,
+
+    // Scene constants
+    originalLampIntensity: 0.3,
+    originalScreenIntensity: 0.2,
+    screenIntensityPulse: 0.2,
+    roomSize: 5,
+    roomHeight: 3,
+    debugLight: false,
+
+    // DOM Elements
+    container: document.body,
+    videoElement: document.getElementById('video'),
+    fileInput: document.getElementById('fileInput'),
+    loadTapeButton: document.getElementById('loadTapeButton'),
+
+    // Utilities
+    loader: new THREE.TextureLoader(),
+    landingSurfaces: [],
+    crawlSurfaces: [], // Surfaces for spiders to crawl on
+    bookLevitation: {
+        state: 'resting', // 'resting', 'levitating', 'returning'
+        timer: 0,
+    },
+    books: [], // Array to hold all individual book meshes for animation
+    pictureFrames: [],
+    raycaster: new THREE.Raycaster(),
+    seed: 12345,
+    };
+
+}
--- a/magic-mirror/src/utils.js
+++ b/magic-mirror/src/utils.js
@ -0,0 +1,37 @@
+import * as THREE from 'three';
+import { state } from './state.js';
+
+// --- Utility: Random Color (seeded) ---
+export function getRandomColor() {
+    const hue = seededRandom();
+    const saturation = 0.6 + seededRandom() * 0.4; 
+    const lightness = 0.3 + seededRandom() * 0.4; 
+    return new THREE.Color().setHSL(hue, saturation, lightness).getHex();
+}
+
+/**
+ * Converts degrees to radians.
+ * @param {number} degrees
+ * @returns {number}
+ */
+export function degToRad(degrees) {
+    return degrees * (Math.PI / 180);
+}
+
+// --- Seedable Random Number Generator (Mulberry32) ---
+export function seededRandom() {
+    let t = state.seed += 0x6D2B79F5;
+    t = Math.imul(t ^ t >>> 15, t | 1);
+    t ^= t + Math.imul(t ^ t >>> 7, t | 61);
+    return ((t ^ t >>> 14) >>> 0) / 4294967296;
+}
+
+// --- Helper function to format seconds into MM:SS ---
+export function formatTime(seconds) {
+    if (isNaN(seconds) || seconds === Infinity || seconds < 0) return '--:--';
+    const minutes = Math.floor(seconds / 60);
+    const remainingSeconds = Math.floor(seconds % 60);
+    const paddedMinutes = String(minutes).padStart(2, '0');
+    const paddedSeconds = String(remainingSeconds).padStart(2, '0');
+    return `${paddedMinutes}:${paddedSeconds}`;
+}
--- a/magic-mirror/textures/floor.jpg
+++ b/magic-mirror/textures/floor.jpg
--- a/magic-mirror/textures/painting1.jpg
+++ b/magic-mirror/textures/painting1.jpg
--- a/magic-mirror/textures/painting2.jpg
+++ b/magic-mirror/textures/painting2.jpg
--- a/magic-mirror/textures/stone_floor.png
+++ b/magic-mirror/textures/stone_floor.png
--- a/magic-mirror/textures/wall.jpg
+++ b/magic-mirror/textures/wall.jpg
--- a/magic-mirror/textures/wood.png
+++ b/magic-mirror/textures/wood.png
--- a/magic-mirror/vendor/tailwind-3.4.17.js
+++ b/magic-mirror/vendor/tailwind-3.4.17.js
--- a/magic-mirror/vendor/three.min.js
+++ b/magic-mirror/vendor/three.min.js
--- a/tv-player/.gitignore
+++ b/tv-player/.gitignore
@ -1 +1,2 @@
-node_modules
+node_modules
+dist
--- a/tv-player/index.html
+++ b/tv-player/index.html
@ -4,9 +4,7 @@
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Retro TV Player</title>
-    <!-- Load Tailwind CSS for styling --><script src="/vendor/tailwind-3.4.17.js"></script>
-
-    <script src="./src/tailwind-config.js"></script>
+    
    <style>
        /* Dark room aesthetic */
        body {
@ -18,16 +16,9 @@
        canvas {
            display: block;
        }
-        /* Custom styles for the Load Tape button */
-        .tape-button {
-            transition: all 0.2s;
-            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1);
-        }
-        .tape-button:active {
-            transform: translateY(1px);
-            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1);
-        }
    </style>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script type="module" src="/src/main.js"></script>
 </head>
 <body>

@ -38,15 +29,12 @@
        <!-- Hidden File Input that will be triggered by the button --><input type="file" id="fileInput" accept="video/mp4" class="hidden" multiple> 

        <div class="flex space-x-4">
-            <!-- Load Tapes Button --><button id="loadTapeButton" class="tape-button px-8 py-3 bg-tape-red text-white font-bold text-lg uppercase tracking-wider rounded-lg hover:bg-red-700 transition duration-150">
+            <!-- Load Tapes Button --><button id="loadTapeButton" class="px-8 py-3 bg-[#cc3333] text-white font-bold text-lg uppercase tracking-wider rounded-lg hover:bg-red-700 transition duration-150 active:translate-y-px">
                Load tapes
            </button>
        </div>
    </div>

-    <!-- Main entry point for the application -->
-    <script type="module" src="/src/main.js"></script>
-
    <!-- 3D Canvas will be injected here by Three.js -->
 </body>
 </html>
--- a/tv-player/preview.sh
+++ b/tv-player/preview.sh
@ -0,0 +1,3 @@
+#!/usr/bin/env bash
+
+nix-shell -p nodejs --run "npx vite build && npx vite preview"
--- a/tv-player/src/core/animate.js
+++ b/tv-player/src/core/animate.js
@ -14,7 +14,7 @@ function updateCamera() {
    // Base Camera Position in front of the TV
    const baseX = -0.5;
    const baseY = 1.5;
-    const baseZ = 2.5;
+    const baseZ = 2.2;

    // Base LookAt target (Center of the screen)
    const baseTargetX = -0.7;
@ -31,7 +31,7 @@ function updateCamera() {
    state.camera.position.z = baseZ + camOffsetZ;

    // LookAt Target Offsets (Subtle Gaze Shift)
-    const lookOffsetX = Math.sin(lookAtTime * 1.5) * lookAmplitude;
+    const lookOffsetX = Math.sin(lookAtTime * 1.5) * lookAmplitude * 3;
    const lookOffsetY = Math.cos(lookAtTime * 1.2) * lookAmplitude;

    // Apply lookAt to the subtly shifted target
@ -89,7 +89,7 @@ function updateVcr() {
 }

 function updateBooks() {
-    const LEVITATE_CHANCE = 0.001; // Chance for a resting book to start levitating per frame
+    const LEVITATE_CHANCE = 0.0003; // Chance for a resting book to start levitating per frame
    const LEVITATE_DURATION_MIN = 100; // frames
    const LEVITATE_DURATION_MAX = 300; // frames
    const LEVITATE_AMPLITUDE = 0.02; // Max vertical displacement
--- a/tv-player/src/main.js
+++ b/tv-player/src/main.js
@ -1,5 +1,4 @@
 import * as THREE from 'three';
-import './tailwind-config.js';
 import { init } from './core/init.js';

 // Start everything
--- a/tv-player/src/scene/PictureFrame.js
+++ b/tv-player/src/scene/PictureFrame.js
@ -61,11 +61,12 @@ export class PictureFrame {

        // Create two picture planes for cross-fading
        this.pictureBack = new THREE.Mesh(pictureGeometry, new THREE.MeshPhongMaterial({ map: this.textures[this.currentTextureIndex] }));
+        this.pictureBack.position.z = 0.001;
        this.pictureBack.receiveShadow = true;
        paintingGroup.add(this.pictureBack);

        this.pictureFront = new THREE.Mesh(pictureGeometry, new THREE.MeshPhongMaterial({ map: this.textures[this.currentTextureIndex], transparent: true, opacity: 0 }));
-        this.pictureFront.position.z = 0.001; // Place slightly in front to avoid z-fighting
+        this.pictureFront.position.z = 0.003; // Place slightly in front to avoid z-fighting
        this.pictureFront.receiveShadow = true;
        paintingGroup.add(this.pictureFront);

--- a/tv-player/src/scene/room-walls.js
+++ b/tv-player/src/scene/room-walls.js
@ -1,8 +1,9 @@
 import * as THREE from 'three';
 import { state } from '../state.js';
+import wallTextureUrl from '/textures/wall.jpg';

 export function createRoomWalls() {
-    const wallTexture = state.loader.load('/textures/wall.jpg');
+    const wallTexture = state.loader.load(wallTextureUrl);
    wallTexture.wrapS = THREE.RepeatWrapping;
    wallTexture.wrapT = THREE.RepeatWrapping;
    
--- a/tv-player/src/scene/root.js
+++ b/tv-player/src/scene/root.js
@ -5,6 +5,9 @@ import { createBookshelf } from './bookshelf.js';
 import { createDoor } from './door.js';
 import { createTvSet } from './tv-set.js';
 import { PictureFrame } from './PictureFrame.js';
+import painting1 from '/textures/painting1.jpg';
+import painting2 from '/textures/painting2.jpg';
+import floorTextureUrl from '/textures/floor.jpg';

 // --- Scene Modeling Function ---
 export function createSceneObjects() {
@ -17,7 +20,7 @@ export function createSceneObjects() {
    
    // --- 1. Floor ---
    const floorGeometry = new THREE.PlaneGeometry(20, 20);
-    const floorTexture = state.loader.load('/textures/floor.jpg');
+    const floorTexture = state.loader.load(floorTextureUrl);
    floorTexture.wrapS = THREE.RepeatWrapping;
    floorTexture.wrapT = THREE.RepeatWrapping;
    floorTexture.repeat.set(state.roomSize, state.roomSize);
@ -136,19 +139,19 @@ export function createSceneObjects() {
    createBookshelf(state.roomSize/2 * 0.7, -state.roomSize/2+0.3, 0, 1);
    
    const pictureFrame = new PictureFrame(state.scene, {
-        position: new THREE.Vector3(-state.roomSize/2 + 0.1, 2.0, -state.roomSize/2 + 1.5),
+        position: new THREE.Vector3(-state.roomSize/2, 2.0, -state.roomSize/2 + 1.5),
        width: 1.5,
        height: 1,
-        imageUrls: ['/textures/painting1.jpg', '/textures/painting2.jpg'],
+        imageUrls: [painting1, painting2],
        rotationY: Math.PI / 2
    });
    state.pictureFrames.push(pictureFrame);

    const pictureFrame2 = new PictureFrame(state.scene, {
-        position: new THREE.Vector3(state.roomSize/2 - 0.1, 2.0, 0.5),
+        position: new THREE.Vector3(state.roomSize/2, 2.0, 0.3),
        width: 1.5,
        height: 1,
-        imageUrls: ['/textures/painting2.jpg', '/textures/painting1.jpg'],
+        imageUrls: [painting2, painting1],
        rotationY: -Math.PI / 2
    });
    state.pictureFrames.push(pictureFrame2);
--- a/tv-player/src/tailwind-config.js
+++ b/tv-player/src/tailwind-config.js
@ -1,10 +0,0 @@
-// Configure Tailwind for the button
-tailwind.config = {
-    theme: {
-        extend: {
-            colors: {
-                'tape-red': '#cc3333',
-            },
-        }
-    }
-}
Author	SHA1	Message	Date
Dejvino	da94aa0aa3	New project: Magic mirror	2025-11-19 22:11:10 +01:00
Dejvino	65ddd80f1d	Tweak: books levitating too often	2025-11-17 23:01:38 +01:00
Dejvino	e5e6312f0d	Fix: Picture frame position, camera tweaks	2025-11-17 23:00:35 +01:00
Dejvino	bc79301364	Fix: production build	2025-11-17 18:21:00 +01:00