diff --git a/frontend/src/components/Character3D.vue b/frontend/src/components/Character3D.vue
index 71edb66..47fc904 100644
--- a/frontend/src/components/Character3D.vue
+++ b/frontend/src/components/Character3D.vue
@@ -65,6 +65,10 @@ export default {
       type: Boolean,
       default: false
     }
+    ,lazy: {
+      type: Boolean,
+      default: false
+    }
   },
   data() {
     return {
@@ -83,6 +87,8 @@ export default {
       threeLoaders: null,
       threeModelRuntime: null
       ,resizeObserver: null
+      ,intersectionObserver: null
+      ,isVisible: false
     };
   },
   computed: {
@@ -150,11 +156,42 @@ export default {
     }
   },
   async mounted() {
-    await this.init3D();
-    await this.loadModel();
-    // Ensure renderer has correct size if the container became visible after mount
-    this.onWindowResize();
-    this.animate();
+    const container = this.$refs.container;
+    if (this.lazy && typeof window !== 'undefined' && 'IntersectionObserver' in window && container) {
+      // Defer initialization until the element is in viewport
+      this.intersectionObserver = new window.IntersectionObserver((entries) => {
+        for (const entry of entries) {
+          if (entry.isIntersecting) {
+            this.isVisible = true;
+            // start 3D when visible
+            this.intersectionObserver.disconnect();
+            this.intersectionObserver = null;
+            (async () => {
+              await this.init3D();
+              await this.loadModel();
+              this.onWindowResize();
+              this.animate();
+            })();
+            break;
+          }
+        }
+      }, { threshold: 0.1 });
+      try {
+        this.intersectionObserver.observe(container);
+      } catch (e) {
+        // fallback to immediate init
+        await this.init3D();
+        await this.loadModel();
+        this.onWindowResize();
+        this.animate();
+      }
+    } else {
+      await this.init3D();
+      await this.loadModel();
+      // Ensure renderer has correct size if the container became visible after mount
+      this.onWindowResize();
+      this.animate();
+    }
   },
   beforeUnmount() {
     this.cleanup();
@@ -512,6 +549,12 @@ export default {
         } catch (e) {}
         this.resizeObserver = null;
       }
+      if (this.intersectionObserver) {
+        try {
+          this.intersectionObserver.disconnect();
+        } catch (e) {}
+        this.intersectionObserver = null;
+      }
     }
   }
 };
diff --git a/frontend/src/views/falukant/FamilyView.vue b/frontend/src/views/falukant/FamilyView.vue
index f516681..4ab4af1 100644
--- a/frontend/src/views/falukant/FamilyView.vue
+++ b/frontend/src/views/falukant/FamilyView.vue
@@ -318,6 +318,9 @@
                                                 <Character3D
                                                     :gender="child.gender"
                                                     :age="child.age"
+                                                    :lightweight="true"
+                                                    :noBackground="true"
+                                                    :lazy="true"
                                                 />
                                             </div>
                                         </div>
@@ -392,6 +395,9 @@
                                     <Character3D
                                         :gender="lover.gender"
                                         :age="lover.age"
+                                        :lightweight="true"
+                                        :noBackground="true"
+                                        :lazy="true"
                                     />
                                 </div>
                             </div>