diff --git a/README.md b/README.md
index 86987d33..4e2bd443 100644
--- a/README.md
+++ b/README.md
@@ -8,13 +8,7 @@
 
 \* rclnodejs development and maintenance is limited to the ROS 2 LTS releases and the Rolling development branch
 
-**rclnodejs** is a Node.js client library for the Robot Operating System
-([ROS 2](https://www.ros.org/)). It provides tooling and comprehensive
-JavaScript and TypeScript APIs for developing ROS 2 solutions capable of
-interoperating with ROS 2 nodes implemented in other languages such as
-C++ and Python.
-
-Here's an example for creating a ROS 2 node that publishes a string message in a few lines of JavaScript.
+**rclnodejs** is a Node.js client library for [ROS 2](https://www.ros.org/) that provides comprehensive JavaScript and TypeScript APIs for developing ROS 2 solutions.
 
 ```JavaScript
 const rclnodejs = require('rclnodejs');
@@ -31,11 +25,9 @@ rclnodejs.init().then(() => {
 - [Installation](#installation)
 - [rclnodejs-cli](#rclnodejs-cli)
 - [API Documentation](#api-documentation)
+- [Electron-based Visualization](#electron-based-visualization)
 - [Using TypeScript](#using-rclnodejs-with-typescript)
-- [ROS2 Interface Message Generation](#ros2-interface-message-generation-important)
-- [Examples](https://github.com/RobotWebTools/rclnodejs/tree/develop/example)
-- [Electron Demo](https://github.com/RobotWebTools/rclnodejs/tree/develop/electron_demo)
-- [TypeScript Demo](https://github.com/RobotWebTools/rclnodejs/tree/develop/ts_demo)
+- [ROS2 Interface Message Generation](#ros2-interface-message-generation)
 - [Efficient Usage Tips](./docs/EFFICIENCY.md)
 - [FAQ and Known Issues](./docs/FAQ.md)
 - [Building from Scratch](./docs/BUILDING.md)
@@ -45,42 +37,24 @@ rclnodejs.init().then(() => {
 
 ### Prerequisites
 
-Before installing `rclnodejs` please ensure the following software is installed and configured on your system:
-
-- [Nodejs](https://nodejs.org/en/) version >= 16.13.0.
-
-- [ROS 2 SDK](https://docs.ros.org/en/jazzy/Installation.html) for details.
-  **DON'T FORGET TO [SOURCE THE ROS 2 SETUP FILE](https://docs.ros.org/en/jazzy/Tutorials/Beginner-CLI-Tools/Configuring-ROS2-Environment.html#source-the-setup-files)**
+- [Node.js](https://nodejs.org/en/) version >= 16.13.0
+- [ROS 2 SDK](https://docs.ros.org/en/jazzy/Installation.html) - **Don't forget to [source the setup file](https://docs.ros.org/en/jazzy/Tutorials/Beginner-CLI-Tools/Configuring-ROS2-Environment.html#source-the-setup-files)**
 
-### Installing rclnodejs
-
-Install the rclnodejs version that is compatible with your version of ROS 2 (see table below).
-
-For the most current version of rclnodejs run:
+### Install rclnodejs
 
 ```bash
 npm i rclnodejs
 ```
 
-To install a specific version of rclnodejs use:
-
-```bash
-npm i rclnodejs@x.y.z
-```
-
 - **Note:** to install rclnodejs from GitHub: add `"rclnodejs":"RobotWebTools/rclnodejs#<branch>"` to your `package.json` dependency section.
 
+Try the [examples](https://github.com/RobotWebTools/rclnodejs/tree/develop/example) to get started.
+
 ## rclnodejs-cli
 
 [rclnodejs-cli](https://github.com/RobotWebTools/rclnodejs-cli/) is a companion project we recently launched to provide a commandline interface to a set of developer tools for working with this `rclnodejs`. You may find `rclnodejs-cli` particularly useful if you plan to create ROS 2 node(s) and launch files for working with multiple node orchestrations.
 
 ```
-           _                 _       _
-  _ __ ___| |_ __   ___   __| | ___ (_)___
- | '__/ __| | '_ \ / _ \ / _` |/ _ \| / __|
- | | | (__| | | | | (_) | (_| |  __/| \__ \
- |_|  \___|_|_| |_|\___/ \__,_|\___|/ |___/
-                                  |__/
 Usage: rclnodejs [command] [options]
 
 Options:
@@ -94,26 +68,31 @@ Commands:
 
 ## API Documentation
 
-API documentation is generated by `jsdoc` and can be viewed in the `docs/` folder or [online doc](https://robotwebtools.github.io/rclnodejs/docs/index.html). To create a local copy of the documentation run `npm run docs`.
+API documentation is available [online](https://robotwebtools.github.io/rclnodejs/docs/index.html) or generate locally with `npm run docs`.
 
-## Using rclnodejs with TypeScript
+## Electron-based Visualization
+
+Create rich, interactive desktop applications using Electron and web technologies like Three.js. Build 3D visualizations, monitoring dashboards, and control interfaces that run on Windows, macOS, and Linux.
 
-`rclnodejs` API can be used in TypeScript projects. You can find the TypeScript declaration files (\*.d.ts) in the `types/` folder.
+Try the `electron_demo/turtle_tf2` demo for real-time coordinate frame visualization with dynamic transforms and keyboard-controlled turtle movement. More examples in [electron_demo](https://github.com/RobotWebTools/rclnodejs/tree/develop/electron_demo).
 
-Your `tsconfig.json` file should include the following compiler options:
+![demo screenshot](./electron_demo/turtle_tf2/turtle-tf2-demo.png)
+
+## Using rclnodejs with TypeScript
+
+TypeScript declaration files are included in the `types/` folder. Configure your `tsconfig.json`:
 
 ```jsonc
 {
   "compilerOptions": {
     "module": "commonjs",
     "moduleResolution": "node",
-    "target": "es6",
-    // your additional options here
+    "target": "es2020",
   },
 }
 ```
 
-Here's a short `rclnodejs` TypeScript example:
+TypeScript example:
 
 ```typescript
 import * as rclnodejs from 'rclnodejs';
@@ -125,53 +104,34 @@ rclnodejs.init().then(() => {
 });
 ```
 
-The benefits of using TypeScript become evident when working with more complex use-cases. ROS messages are defined in the `types/interfaces.d.ts` module. This module is updated as part of the `generate-ros-messages` process described in the next section.
+See [TypeScript demos](https://github.com/RobotWebTools/rclnodejs/tree/develop/ts_demo) for more examples.
 
-## ROS2 Interface Message Generation (important)
+## ROS2 Interface Message Generation
 
-ROS components communicate by sending and receiving messages described
-by the interface definition language (IDL). ROS client libraries such as
-rclnodejs are responsible for converting these IDL message descriptions
-into source code of their target language. For this, rclnodejs provides
-the npm binary`generate-ros-messages` script that reads the IDL
-message files of a ROS environment and generates corresponding JavaScript
-message interface files. Additionally, the tool generates the TypeScript
-`interface.d.ts` file containing declarations for each IDL message file.
+ROS client libraries convert IDL message descriptions into target language source code. rclnodejs provides the `generate-ros-messages` script to generate JavaScript message interface files and TypeScript declarations.
 
-Learn more about ROS interfaces and IDL [here](https://docs.ros.org/en/jazzy/Concepts/Basic/About-Interfaces.html).
+Example usage:
 
-In the following example rclnodejs loads a generated JavaScript message file corresponding to the ROS `std_msgs/msg/String' definition.
-
-```
+```javascript
 import * as rclnodejs from 'rclnodejs';
 let stringMsgObject = rclnodejs.createMessageObject('std_msgs/msg/String');
 stringMsgObject.data = 'hello world';
 ```
 
-### Maintaining Generated JavaScript Message Files
-
-Message files are generated as a post-install step of the rclnodejs
-installation process. Thereafter, you will need to manually run the
-rclnodejs message generation script when new ROS message packages are installed
-for which your ROS2-nodejs project has a dependency.
+### Running Message Generation
 
-### Running `generate-ros-messages` Utility
+Run the message generation script when new ROS packages are installed:
 
-To run the `generate-ros-messages` script from your Nodejs package, use the `npx` utility included in your Nodejs installation.
-
-```
+```bash
 npx generate-ros-messages
 ```
 
-The newly generated JavaScript files can be found at
-`<yourproject>/node_modules/rclnodejs/generated/`.
+Generated files are located at `<yourproject>/node_modules/rclnodejs/generated/`.
 
 ### IDL Message Generation
 
 In addition to the standard ROS2 message generation (`.msg`, `.srv`, and `.action`), rclnodejs provides advanced support for generating JavaScript message files directly from IDL (Interface Definition Language) files. This feature is particularly useful when working with custom IDL files or when you need more control over the message generation process.
 
-#### Running `generate-messages-idl`
-
 To generate messages from IDL files, use the `generate-messages-idl` npm script:
 
 ```bash
@@ -180,42 +140,9 @@ npm run generate-messages-idl
 
 ## Contributing
 
-Please read the [Contributing Guide]() before making a pull request.
-
-Thank you to all the [people](CONTRIBUTORS.md) who already contributed to rclnodejs!
-
-<div>
-<a href="https://github.com/wayneparrott">
-  <img src="https://github.com/wayneparrott.png" width="30">
-</a>
-<a href="https://github.com/koonpeng">
-  <img src="https://github.com/koonpeng.png" width="30">
-</a>
-<a href="https://github.com/mattrichard">
-  <img src="https://github.com/mattrichard.png" width="30">
-</a>
-<a href="https://github.com/felixdivo">
-  <img src="https://github.com/felixdivo.png" width="30">
-</a>
-<a href="https://github.com/martins-mozeiko">
-  <img src="https://github.com/martins-mozeiko.png" width="30">
-</a>
-<a href="https://github.com/amikhalev">
-  <img src="https://github.com/amikhalev.png" width="30">
-</a>
-<a href="https://github.com/kenny-y">
-  <img src="https://github.com/kenny-y.png" width="30">
-</a>
-<a href="https://github.com/qiuzhong">
-  <img src="https://github.com/qiuzhong.png" width="30">
-</a>
-<a href="https://github.com/minggangw">
-  <img src="https://github.com/minggangw.png" width="30">
-</a>
-<a href="https://github.com/hanyia">
-  <img src="https://github.com/hanyia.png" width="30">
-</a>
-</div>
+Please read the [Contributing Guide](./docs/CONTRIBUTING.md) before making a pull request.
+
+Thanks to all [contributors](CONTRIBUTORS.md)!
 
 ## License
 
diff --git a/electron_demo/turtle_tf2/README.md b/electron_demo/turtle_tf2/README.md
new file mode 100644
index 00000000..89e404e1
--- /dev/null
+++ b/electron_demo/turtle_tf2/README.md
@@ -0,0 +1,385 @@
+# Turtle TF2 Electron Demo
+
+This demo replicates the functionality of the ROS2 `turtle_tf2_py` package using rclnodejs and provides a modern web-based 3D visualization interface. It demonstrates coordinate frame transformations, turtle simulation, and real-time TF2 data visualization.
+
+## Overview
+
+The turtle_tf2 demo showcases:
+
+- **Transform Broadcasting**: Multiple TF2 broadcasters publishing coordinate frame relationships
+- **Transform Listening**: Real-time monitoring and visualization of coordinate transformations
+- **Turtle Simulation**: Integration with turtlesim for turtle pose tracking and control
+- **Turtle Following**: Intelligent turtle2 behavior that automatically follows turtle1 using TF2 transforms
+- **3D Visualization**: WebGL-based rendering using Three.js for immersive coordinate frame visualization
+- **Interactive Controls**: Web interface for spawning turtles, controlling motion, and managing transforms
+
+![demo screenshot](./turtle-tf2-demo.gif)
+
+## Features
+
+### TF2 Broadcasters
+
+- **Static Frame Broadcaster**: Publishes fixed coordinate frame relationships
+- **Dynamic Frame Broadcaster**: Creates time-varying transforms with circular motion patterns
+- **Fixed Frame Broadcaster**: Maintains constant offset transforms
+- **Turtle Transform Broadcaster**: Converts turtle poses to TF2 transforms
+
+### Turtle Following System
+
+- **Real-time Following**: turtle2 automatically follows turtle1 using distance and angle calculations
+- **Smart Movement**: Proportional velocity control based on distance to target
+- **Collision Avoidance**: turtle2 stops when within optimal following distance (0.5 units)
+- **Transform Integration**: Following logic uses turtle pose data from TF2 coordinate frames
+
+### Visualization
+
+- **3D Scene**: Interactive Three.js environment with orbit controls
+- **Coordinate Frames**: Visual representation of X, Y, Z axes with color coding
+- **Turtle Models**: 3D turtle representations with real-time pose updates
+- **Transform Monitoring**: Live display of active transforms and their parameters
+- **Frame Toggles**: Show/hide specific coordinate frames
+
+### Control Interface
+
+- **Turtle Spawning**: Create turtle2 instance (turtle1 spawns automatically with turtlesim)
+- **Motion Control**: WASD keyboard controls for turtle1 movement
+- **Demo Management**: Initialize and reset demo state
+- **Transform Filtering**: Toggle visibility of different frame types
+
+## Prerequisites
+
+### System Requirements
+
+- **ROS2**: Humble, Iron, or Rolling distribution
+- **Node.js**: Version 18 or higher (for compatibility with latest Electron)
+- **turtlesim**: ROS2 turtle simulation package
+- **Electron**: For desktop application framework
+
+### ROS2 Packages
+
+```bash
+# Install required ROS2 packages
+sudo apt install ros-$ROS_DISTRO-turtlesim
+sudo apt install ros-$ROS_DISTRO-tf2-tools
+sudo apt install ros-$ROS_DISTRO-tf2-ros
+```
+
+### Node.js Dependencies
+
+The demo uses the following key dependencies:
+
+- `rclnodejs`: ROS2 bindings for Node.js
+- `electron`: Cross-platform desktop app framework
+- `three`: 3D graphics library for WebGL rendering
+
+## Installation
+
+1. **Navigate to the demo directory**:
+
+   ```bash
+   cd electron_demo/turtle_tf2
+   ```
+
+2. **Install dependencies**:
+
+   ```bash
+   npm install
+   ```
+
+3. **Rebuild native modules**:
+
+   ```bash
+   npm run rebuild
+   ```
+
+   This step is crucial for ensuring that rclnodejs and other native dependencies are properly compiled for your system.
+
+4. **Source ROS2 environment**:
+
+   ```bash
+   source /opt/ros/$ROS_DISTRO/setup.bash
+   ```
+
+   **Important**: The ROS2 environment must be sourced in the same terminal session where you run `npm start`.
+
+## Running the Demo
+
+**⚠️ Important Setup Note**: Before running the demo, make sure to:
+
+1. Source the ROS2 environment in your terminal: `source /opt/ros/$ROS_DISTRO/setup.bash`
+2. Keep this terminal session active for the entire demo run
+
+### Method 1: Complete Demo
+
+Start the full demo with all components (ensure you have run `npm install && npm run rebuild` first):
+
+```bash
+# Source ROS2 first
+source /opt/ros/$ROS_DISTRO/setup.bash
+
+# Then start the demo
+npm start
+```
+
+### Method 2: Step-by-Step Launch
+
+1. **Source ROS2 environment**:
+
+   ```bash
+   source /opt/ros/$ROS_DISTRO/setup.bash
+   ```
+
+2. **Start turtlesim (in separate terminal, also sourced)**:
+
+   ```bash
+   source /opt/ros/$ROS_DISTRO/setup.bash
+   ros2 run turtlesim turtlesim_node
+   ```
+
+3. **Launch the Electron application**:
+
+   ```bash
+   npm start
+   ```
+
+4. **Use the web interface to**:
+   - Click "Start Demo" to initialize all TF2 broadcasters
+   - Click "Spawn Turtle2" to create the second turtle (turtle1 spawns automatically)
+   - Use WASD keys to control turtle1 movement
+   - Watch turtle2 automatically follow turtle1
+   - Use frame toggle buttons to show/hide specific transforms
+
+**⚠️ Important**: The dynamic frame (`carrot1_dynamic`) orbits around the static frame (`carrot1_static`) in a circular pattern with a 2-unit radius, regardless of turtle positions.
+
+## Demo Components
+
+### Main Process (main.js)
+
+- **TF2 Static Broadcaster**: Publishes `world → carrot1_static` transform
+- **TF2 Dynamic Broadcaster**: Publishes time-varying `carrot1_static → carrot1_dynamic` transform
+- **Fixed Frame Broadcaster**: Publishes constant offset `turtle1 → carrot1_fixed` transform
+- **Turtle TF2 Broadcaster**: Converts turtle poses to `world → turtle1/turtle2` transforms
+- **Turtle TF2 Listener**: Monitors turtle poses and controls turtle2 following behavior using real-time transform data
+
+### Renderer Process (renderer.js)
+
+- **3D Scene Management**: Three.js scene setup with lighting and camera controls
+- **Coordinate Frame Visualization**: Colored axes representation (X=red, Y=green, Z=blue)
+- **Turtle Rendering**: 3D turtle models with real-time pose updates
+- **Following Logic**: Calculates distance, angle, and velocity commands for turtle2 following behavior
+- **Transform Monitoring**: Live display of transform data and frame relationships
+- **User Interaction**: Control buttons, keyboard handling, and visual feedback systems
+
+### HTML Interface (index.html)
+
+- **Control Panel**: Buttons for turtle spawning and demo management
+- **Status Display**: Real-time connection and system status
+- **Transform List**: Active transforms with position and rotation data
+- **3D Viewport**: WebGL canvas for Three.js rendering
+
+## Understanding TF2 Concepts
+
+### Coordinate Frames
+
+- **world**: Global reference frame (origin)
+- **turtle1/turtle2**: Turtle body frames following turtlesim poses
+- **carrot1_static**: Static frame with fixed relationship to world
+- **carrot1_dynamic**: Dynamic frame with circular motion around carrot1_static (2-unit radius)
+- **carrot1_fixed**: Fixed offset frame relative to turtle1
+
+### Transform Chain
+
+The demo creates the following transform chain:
+
+```
+world → carrot1_static → carrot1_dynamic
+world → turtle1 → carrot1_fixed
+world → turtle2
+```
+
+### Real-time Visualization
+
+- Coordinate frames are rendered as colored axes (X=red, Y=green, Z=blue)
+- Transforms update in real-time as turtles move and frames change
+- The transform list shows current position and rotation values
+- Interactive 3D camera allows inspection from different angles
+
+## Controls
+
+### Keyboard Controls (NEW!)
+
+**Turtle1 Movement**:
+
+- **W**: Move forward
+- **S**: Move backward
+- **A**: Turn left
+- **D**: Turn right
+
+💡 **Tip**: Click on the 3D visualization area first to ensure keyboard focus, then use WASD keys to drive turtle1 around the turtlesim environment. turtle2 will automatically follow turtle1!
+
+**Camera Controls**:
+
+- **Arrow Keys**: Move camera view
+- **Mouse Drag**: Rotate camera around scene
+- **Mouse Wheel**: Zoom in/out
+- **Right Click + Drag**: Pan camera view
+
+**Note**: Arrow keys are reserved for 3D camera navigation. Use WASD keys exclusively for turtle control to avoid conflicts.
+
+### Turtle Management
+
+- **Spawn Turtle2**: Creates turtle2 at position (4.0, 2.0) - turtle1 is automatically spawned by turtlesim
+- **Stop All**: Halts all turtle motion commands
+
+### Turtle Following Behavior
+
+Once turtle2 is spawned, it will automatically follow turtle1 with the following intelligent behaviors:
+
+- **Distance-based Speed**: turtle2 moves faster when far from turtle1, slower when close
+- **Angle Correction**: turtle2 continuously adjusts its heading to face turtle1
+- **Smart Stopping**: turtle2 stops moving when within 0.5 units of turtle1 to avoid collision
+- **Real-time Updates**: Following commands are sent every second based on current turtle positions
+
+**Following Algorithm Details**:
+
+- **Linear Velocity**: Proportional to distance (max speed: 2.0 units/sec)
+- **Angular Velocity**: Proportional to angle difference (4.0 × angle error)
+- **Minimum Following Distance**: 0.5 units (prevents excessive oscillation)
+
+You can observe the following behavior by:
+
+1. Spawning turtle2 using the "Spawn Turtle2" button
+2. Using WASD keys to move turtle1 around
+3. Watching turtle2 chase turtle1 in both the turtlesim window and 3D visualization
+
+### Demo Control
+
+- **Start Demo**: Initializes all TF2 broadcasters and systems
+- **Reset Demo**: Clears all turtles and transforms, resets to initial state
+
+### Frame Visibility
+
+- **Toggle Static**: Show/hide carrot1_static frame (red sphere, fixed position)
+- **Toggle Dynamic**: Show/hide carrot1_dynamic frame (orange sphere, orbits around carrot1_static)
+- **Toggle Fixed**: Show/hide carrot1_fixed frame (purple sphere, fixed offset from turtle1)
+
+**Visual Guide**:
+
+- **Static Frame**: Red sphere at fixed world coordinates (2.0, 3.0, 0.0)
+- **Dynamic Frame**: Orange sphere that moves in a circular pattern around the static frame (2-unit radius)
+- **Fixed Frame**: Purple sphere that maintains a constant offset relative to turtle1
+- **Turtle Frames**: Coordinate axes (X=red, Y=green, Z=blue) attached to each turtle
+
+### 3D Navigation
+
+- **Mouse Drag**: Rotate camera around scene
+- **Mouse Wheel**: Zoom in/out
+- **Right Click + Drag**: Pan camera view
+
+## Troubleshooting
+
+### Common Issues
+
+1. **"Cannot connect to ROS2" or "librcl.so: cannot open shared object file"**
+
+   - Ensure ROS2 is sourced: `source /opt/ros/$ROS_DISTRO/setup.bash`
+   - **Critical**: Source ROS2 in the SAME terminal where you run `npm start`
+   - Check if ROS2 daemon is running: `ros2 daemon status`
+   - Verify ROS2 installation: `ros2 --version`
+
+2. **"Turtlesim not responding" or "Failed to spawn turtle2"**
+
+   - Verify turtlesim is running: `ros2 run turtlesim turtlesim_node`
+   - Check available topics: `ros2 topic list`
+   - Ensure spawn service is available: `ros2 service list | grep spawn`
+   - Try restarting turtlesim_node if spawn calls fail
+
+3. **"No transforms detected"**
+
+   - Ensure demo is started: Click "Start Demo" button
+   - Check TF2 tree: `ros2 run tf2_tools view_frames`
+
+4. **"Dynamic frame not visible when toggling"**
+
+   - **Check if the demo is started**: Click "Start Demo" button first to initialize all broadcasters
+   - **Look for an orange sphere near coordinates (2,3)**: The dynamic frame appears as an orange sphere orbiting around the red static frame
+   - **Wait for circular motion**: The dynamic frame moves in a 2-unit radius circle, taking about 6 seconds for a full rotation
+   - **The orange sphere is now bigger**: The dynamic frame has been made 3x larger for better visibility
+   - **Check the transform list**: The dynamic frame should appear in the left panel's transform list with changing coordinates around (2±2, 3±2, 0)
+
+5. **"3D visualization not loading"**
+
+   - Check browser console for WebGL errors
+   - Ensure hardware acceleration is enabled
+   - Try restarting the Electron application
+
+6. **"electron: not found" or native module errors**
+
+   - Make sure you ran `npm run rebuild` after `npm install`
+   - Ensure Node.js version is compatible (18 or higher)
+   - Try deleting `node_modules` and running `npm install && npm run rebuild` again
+
+7. **"THREE is not defined" or script loading errors**
+
+   - Ensure Three.js is properly installed: `npm install three@0.155.0`
+   - Check that `node_modules/three/build/three.min.js` exists
+   - If issues persist, try reinstalling: `rm -rf node_modules && npm install && npm run rebuild`
+
+8. **WSL (Windows Subsystem for Linux) specific issues**
+   - Install audio libraries: `sudo apt install libasound2t64 libasound2-dev`
+   - Enable X11 forwarding for GUI: Install VcXsrv or similar X server
+   - Some GUI features may be limited in WSL environment
+
+### Debugging Commands
+
+```bash
+# Check TF2 transforms
+ros2 run tf2_tools view_frames
+
+# Monitor TF2 topic
+ros2 topic echo /tf
+
+# List active nodes
+ros2 node list
+
+# Check turtle poses
+ros2 topic echo /turtle1/pose
+```
+
+## Development
+
+### Project Structure
+
+```
+turtle_tf2/
+├── package.json          # Node.js dependencies and scripts
+├── main.js               # Electron main process with ROS2 nodes
+├── renderer.js           # Three.js renderer and UI logic
+├── index.html            # Web interface and controls
+└── README.md             # This documentation
+```
+
+### Key Technologies
+
+- **rclnodejs**: Provides ROS2 integration for Node.js
+- **Electron**: Enables desktop application with web technologies
+- **Three.js**: Handles 3D graphics and WebGL rendering
+- **TF2**: ROS2 transform library for coordinate frame management
+
+### Extending the Demo
+
+- Add custom coordinate frames by modifying broadcaster nodes
+- Implement additional turtle behaviors in the listener logic
+- Enhance 3D visualization with trails, grids, or measurement tools
+- Create custom transform visualizations for specific use cases
+
+## Related Resources
+
+- [ROS2 TF2 Tutorials](https://docs.ros.org/en/humble/Tutorials/Intermediate/Tf2/Tf2-Main.html)
+- [turtle_tf2_py Source](https://github.com/ros/geometry_tutorials/tree/ros2/turtle_tf2_py)
+- [Three.js Documentation](https://threejs.org/docs/)
+- [rclnodejs GitHub](https://github.com/RobotWebTools/rclnodejs)
+
+## License
+
+Licensed under the Apache License, Version 2.0. See the original rclnodejs LICENSE file for details.
diff --git a/electron_demo/turtle_tf2/index.html b/electron_demo/turtle_tf2/index.html
new file mode 100644
index 00000000..2960d89e
--- /dev/null
+++ b/electron_demo/turtle_tf2/index.html
@@ -0,0 +1,503 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="Content-Security-Policy"
+    content="default-src 'self'; script-src 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline';">
+  <title>ROS2 Turtle TF2 Demo</title>
+  <style>
+    body {
+      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+      margin: 0;
+      padding: 0;
+      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+      color: #333;
+      overflow: hidden;
+    }
+
+    .container {
+      display: flex;
+      height: 100vh;
+    }
+
+    .sidebar {
+      width: 350px;
+      background: rgba(255, 255, 255, 0.95);
+      backdrop-filter: blur(10px);
+      padding: 20px;
+      overflow-y: auto;
+      box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
+    }
+
+    .main-content {
+      flex: 1;
+      position: relative;
+      display: flex;
+      flex-direction: column;
+    }
+
+    .header {
+      background: rgba(255, 255, 255, 0.1);
+      backdrop-filter: blur(10px);
+      padding: 15px 20px;
+      border-bottom: 1px solid rgba(255, 255, 255, 0.2);
+    }
+
+    .header h1 {
+      margin: 0;
+      color: white;
+      font-size: 24px;
+      font-weight: 300;
+    }
+
+    .header .subtitle {
+      color: rgba(255, 255, 255, 0.8);
+      font-size: 14px;
+      margin-top: 5px;
+    }
+
+    #visualization-container {
+      flex: 1;
+      position: relative;
+      background: #000;
+    }
+
+    #three-canvas {
+      width: 100%;
+      height: 100%;
+      display: block;
+    }
+
+    .controls-section {
+      margin-bottom: 25px;
+      background: rgba(0, 0, 0, 0.05);
+      border-radius: 10px;
+      padding: 15px;
+    }
+
+    .section-title {
+      font-size: 16px;
+      font-weight: 600;
+      color: #444;
+      margin-bottom: 15px;
+      display: flex;
+      align-items: center;
+    }
+
+    .section-title::before {
+      content: '';
+      width: 4px;
+      height: 16px;
+      background: linear-gradient(45deg, #667eea, #764ba2);
+      margin-right: 10px;
+      border-radius: 2px;
+    }
+
+    .control-group {
+      margin-bottom: 15px;
+    }
+
+    .control-label {
+      display: block;
+      font-size: 12px;
+      font-weight: 500;
+      color: #666;
+      margin-bottom: 5px;
+      text-transform: uppercase;
+      letter-spacing: 0.5px;
+    }
+
+    .control-button {
+      background: linear-gradient(45deg, #667eea, #764ba2);
+      color: white;
+      border: none;
+      padding: 8px 16px;
+      border-radius: 6px;
+      cursor: pointer;
+      font-size: 12px;
+      font-weight: 500;
+      margin-right: 8px;
+      margin-bottom: 5px;
+      transition: all 0.3s ease;
+      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+    }
+
+    .control-button:hover {
+      transform: translateY(-1px);
+      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
+    }
+
+    .control-button:active {
+      transform: translateY(0);
+    }
+
+    .control-button.emergency {
+      background: linear-gradient(45deg, #ff6b6b, #ee5a24);
+    }
+
+    .status-panel {
+      background: rgba(0, 0, 0, 0.05);
+      border-radius: 8px;
+      padding: 12px;
+      margin-bottom: 10px;
+    }
+
+    .status-item {
+      display: flex;
+      justify-content: space-between;
+      margin-bottom: 8px;
+      font-size: 12px;
+    }
+
+    .status-label {
+      color: #666;
+      font-weight: 500;
+    }
+
+    .status-value {
+      color: #333;
+      font-family: 'Courier New', monospace;
+      font-weight: 600;
+    }
+
+    .status-value.active {
+      color: #27ae60;
+    }
+
+    .transform-list {
+      max-height: 200px;
+      overflow-y: auto;
+      background: rgba(255, 255, 255, 0.5);
+      border-radius: 6px;
+      padding: 10px;
+    }
+
+    .transform-item {
+      background: white;
+      border-radius: 4px;
+      padding: 8px;
+      margin-bottom: 5px;
+      font-size: 11px;
+      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+    }
+
+    .transform-item .frame-name {
+      font-weight: 600;
+      color: #667eea;
+      margin-bottom: 3px;
+    }
+
+    .transform-item .coordinates {
+      color: #666;
+      font-family: 'Courier New', monospace;
+    }
+
+    .legend {
+      background: rgba(255, 255, 255, 0.5);
+      border-radius: 6px;
+      padding: 10px;
+      margin-top: 10px;
+    }
+
+    .legend-item {
+      display: flex;
+      align-items: center;
+      margin-bottom: 5px;
+      font-size: 11px;
+    }
+
+    .legend-color {
+      width: 12px;
+      height: 12px;
+      border-radius: 2px;
+      margin-right: 8px;
+    }
+
+    .keyboard-legend {
+      background: rgba(255, 255, 255, 0.8);
+      border-radius: 8px;
+      padding: 12px;
+      margin: 8px 0;
+    }
+
+    .key-combo {
+      display: flex;
+      align-items: center;
+      margin: 6px 0;
+      font-size: 13px;
+      color: #555;
+    }
+
+    .key {
+      background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+      border: 1px solid #bbb;
+      border-radius: 4px;
+      padding: 4px 8px;
+      margin: 0 4px;
+      font-family: 'Courier New', monospace;
+      font-weight: bold;
+      font-size: 12px;
+      color: #333;
+      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+      min-width: 24px;
+      text-align: center;
+    }
+
+    .keyboard-note {
+      background: rgba(255, 193, 7, 0.1);
+      border-left: 3px solid #ffc107;
+      padding: 8px 12px;
+      margin: 8px 0;
+      font-size: 12px;
+      color: #856404;
+      border-radius: 0 4px 4px 0;
+    }
+
+    .instructions {
+      background: rgba(255, 255, 255, 0.3);
+      border-radius: 8px;
+      padding: 12px;
+      margin-top: 15px;
+      font-size: 11px;
+      line-height: 1.4;
+      color: #555;
+    }
+
+    .instructions h4 {
+      margin: 0 0 8px 0;
+      color: #333;
+      font-size: 12px;
+    }
+
+    .instructions ul {
+      margin: 0;
+      padding-left: 15px;
+    }
+
+    .instructions li {
+      margin-bottom: 3px;
+    }
+
+    /* Loading screen */
+    .loading-screen {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      background: rgba(0, 0, 0, 0.8);
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      color: white;
+      font-size: 18px;
+      z-index: 1000;
+    }
+
+    .loading-screen.hidden {
+      display: none;
+    }
+
+    .spinner {
+      border: 4px solid #f3f3f3;
+      border-top: 4px solid #667eea;
+      border-radius: 50%;
+      width: 40px;
+      height: 40px;
+      animation: spin 1s linear infinite;
+      margin-right: 15px;
+    }
+
+    @keyframes spin {
+      0% { transform: rotate(0deg); }
+      100% { transform: rotate(360deg); }
+    }
+
+    /* Responsive design */
+    @media (max-width: 1200px) {
+      .sidebar {
+        width: 300px;
+      }
+    }
+
+    @media (max-width: 900px) {
+      .container {
+        flex-direction: column;
+      }
+      
+      .sidebar {
+        width: 100%;
+        height: 300px;
+      }
+      
+      .main-content {
+        height: calc(100vh - 300px);
+      }
+    }
+  </style>
+</head>
+
+<body>
+  <div class="container">
+    <!-- Sidebar with controls and status -->
+    <div class="sidebar">
+      <!-- Status Panel -->
+      <div class="controls-section">
+        <div class="section-title">📊 System Status</div>
+        <div class="status-panel">
+          <div class="status-item">
+            <span class="status-label">ROS2 Status:</span>
+            <span class="status-value" id="ros-status">Initializing...</span>
+          </div>
+          <div class="status-item">
+            <span class="status-label">Turtlesim:</span>
+            <span class="status-value" id="turtlesim-status">Waiting...</span>
+          </div>
+          <div class="status-item">
+            <span class="status-label">TF2 Nodes:</span>
+            <span class="status-value" id="tf2-nodes-status">0/5</span>
+          </div>
+          <div class="status-item">
+            <span class="status-label">Active Transforms:</span>
+            <span class="status-value" id="active-transforms">0</span>
+          </div>
+        </div>
+      </div>
+
+      <!-- Turtle Control -->
+      <div class="controls-section">
+        <div class="section-title">🐢 Turtle Control</div>
+        <div class="control-group">
+          <label class="control-label">Turtle1 Movement</label>
+          <button class="control-button" id="spawn-turtle1">Spawn Turtle1</button>
+          <button class="control-button" id="spawn-turtle2">Spawn Turtle2</button>
+          <button class="control-button emergency" id="stop-all">Emergency Stop</button>
+        </div>
+        <div class="control-group">
+          <label class="control-label">Demo Control</label>
+          <button class="control-button" id="start-demo">Start Demo</button>
+          <button class="control-button" id="reset-demo">Reset Demo</button>
+        </div>
+      </div>
+
+      <!-- Keyboard Controls -->
+      <div class="controls-section">
+        <div class="section-title">⌨️ Keyboard Controls</div>
+        <div class="control-group">
+          <label class="control-label">Move Turtle1</label>
+          <div class="keyboard-legend">
+            <div class="key-combo">
+              <span class="key">W</span> - Forward
+            </div>
+            <div class="key-combo">
+              <span class="key">S</span> - Backward
+            </div>
+            <div class="key-combo">
+              <span class="key">A</span> - Turn Left
+            </div>
+            <div class="key-combo">
+              <span class="key">D</span> - Turn Right
+            </div>
+          </div>
+          <div class="keyboard-note">
+            💡 Click on the 3D scene to focus, then use WASD keys to control turtle1.<br>
+            🎥 Use arrow keys or mouse to navigate the 3D camera view.
+          </div>
+        </div>
+      </div>
+
+      <!-- Transform Broadcasters -->
+      <div class="controls-section">
+        <div class="section-title">📡 TF2 Broadcasters</div>
+        <div class="control-group">
+          <label class="control-label">Frame Broadcasters</label>
+          <button class="control-button" id="toggle-static">Static Frame</button>
+          <button class="control-button" id="toggle-dynamic">Dynamic Frame</button>
+          <button class="control-button" id="toggle-fixed">Fixed Frame</button>
+        </div>
+      </div>
+
+      <!-- Active Transforms -->
+      <div class="controls-section">
+        <div class="section-title">🔄 Active Transforms</div>
+        <div class="transform-list" id="transform-list">
+          <div class="transform-item">
+            <div class="frame-name">No transforms detected</div>
+            <div class="coordinates">Waiting for TF2 data...</div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Legend -->
+      <div class="controls-section">
+        <div class="section-title">🎨 Visualization Legend</div>
+        <div class="legend">
+          <div class="legend-item">
+            <div class="legend-color" style="background: #00ff00;"></div>
+            <span>Turtle1 (Green)</span>
+          </div>
+          <div class="legend-item">
+            <div class="legend-color" style="background: #0088ff;"></div>
+            <span>Turtle2 (Blue)</span>
+          </div>
+          <div class="legend-item">
+            <div class="legend-color" style="background: #ff4444;"></div>
+            <span>Static Frame (Red)</span>
+          </div>
+          <div class="legend-item">
+            <div class="legend-color" style="background: #ffaa00;"></div>
+            <span>Dynamic Frame (Orange)</span>
+          </div>
+          <div class="legend-item">
+            <div class="legend-color" style="background: #aa44ff;"></div>
+            <span>Fixed Frame (Purple)</span>
+          </div>
+          <div class="legend-item">
+            <div class="legend-color" style="background: #ffffff;"></div>
+            <span>Coordinate Axes</span>
+          </div>
+        </div>
+      </div>
+
+      <!-- Instructions -->
+      <div class="instructions">
+        <h4>📋 Instructions</h4>
+        <ul>
+          <li><strong>Start Demo:</strong> Click "Start Demo" to begin</li>
+          <li><strong>Turtle Control:</strong> Use turtlesim_node to control turtle1</li>
+          <li><strong>TF2 Frames:</strong> Toggle different frame broadcasters</li>
+          <li><strong>3D View:</strong> Drag to rotate, scroll to zoom</li>
+          <li><strong>Reset:</strong> Click "Reset Demo" to restart</li>
+        </ul>
+      </div>
+    </div>
+
+    <!-- Main visualization area -->
+    <div class="main-content">
+      <div class="header">
+        <h1>🐢 Turtle TF2 Transformation Demo</h1>
+        <div class="subtitle">Real-time 3D visualization of ROS2 TF2 transforms using rclnodejs</div>
+      </div>
+      
+      <div id="visualization-container">
+        <canvas id="three-canvas"></canvas>
+        
+        <!-- Loading screen -->
+        <div class="loading-screen" id="loading-screen">
+          <div class="spinner"></div>
+          <div>Initializing ROS2 TF2 Demo...</div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- Include Three.js -->
+  <script src="./node_modules/three/build/three.min.js"></script>
+  <script src="./orbit-controls.js"></script>
+  
+  <!-- Main renderer script -->
+  <script src="./renderer.js"></script>
+</body>
+
+</html>
diff --git a/electron_demo/turtle_tf2/main.js b/electron_demo/turtle_tf2/main.js
new file mode 100644
index 00000000..fe15bcdf
--- /dev/null
+++ b/electron_demo/turtle_tf2/main.js
@@ -0,0 +1,782 @@
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+const { app, BrowserWindow, ipcMain } = require('electron');
+const rclnodejs = require('rclnodejs');
+
+let mainWindow;
+let turtleTf2Nodes = {};
+
+// Quaternion from Euler helper function (from Python turtle_tf2_py)
+function quaternionFromEuler(ai, aj, ak) {
+  const ai_half = ai / 2.0;
+  const aj_half = aj / 2.0;
+  const ak_half = ak / 2.0;
+  const ci = Math.cos(ai_half);
+  const si = Math.sin(ai_half);
+  const cj = Math.cos(aj_half);
+  const sj = Math.sin(aj_half);
+  const ck = Math.cos(ak_half);
+  const sk = Math.sin(ak_half);
+  const cc = ci * ck;
+  const cs = ci * sk;
+  const sc = si * ck;
+  const ss = si * sk;
+
+  return [
+    cj * sc - sj * cs, // x
+    cj * ss + sj * cc, // y
+    cj * cs - sj * sc, // z
+    cj * cc + sj * ss, // w
+  ];
+}
+
+function createWindow() {
+  mainWindow = new BrowserWindow({
+    width: 1400,
+    height: 900,
+    webPreferences: {
+      nodeIntegration: true,
+      contextIsolation: false,
+    },
+    title: 'ROS2 Turtle TF2 Demo with 3D Visualization',
+  });
+
+  mainWindow.loadFile('index.html');
+
+  // Open DevTools for debugging (commented out for production)
+  // mainWindow.webContents.openDevTools();
+}
+
+// Initialize ROS2 nodes for turtle TF2 demo
+async function initializeROS() {
+  try {
+    console.log('Starting ROS2 initialization...');
+
+    // Notify renderer that initialization is starting
+    if (mainWindow) {
+      mainWindow.webContents.send('ros-initialization-status', {
+        status: 'initializing',
+        message: 'Initializing ROS2 context...',
+      });
+    }
+
+    await rclnodejs.init();
+    console.log('ROS2 initialized successfully');
+
+    if (mainWindow) {
+      mainWindow.webContents.send('ros-initialization-status', {
+        status: 'progress',
+        message: 'Creating TF2 nodes...',
+      });
+    }
+
+    // Create turtle TF2 broadcaster node
+    console.log('Creating turtle TF2 broadcaster...');
+    await createTurtleTf2Broadcaster();
+
+    // Create turtle TF2 listener node
+    console.log('Creating turtle TF2 listener...');
+    await createTurtleTf2Listener();
+
+    // Create static turtle TF2 broadcaster
+    console.log('Creating static TF2 broadcaster...');
+    await createStaticTurtleTf2Broadcaster();
+
+    // Create dynamic frame TF2 broadcaster
+    console.log('Creating dynamic frame TF2 broadcaster...');
+    await createDynamicFrameTf2Broadcaster();
+
+    // Create fixed frame TF2 broadcaster
+    console.log('Creating fixed frame TF2 broadcaster...');
+    await createFixedFrameTf2Broadcaster();
+
+    console.log('All turtle TF2 nodes initialized successfully');
+
+    // Notify renderer that initialization is complete
+    if (mainWindow) {
+      mainWindow.webContents.send('ros-initialization-status', {
+        status: 'ready',
+        message: 'ROS2 TF2 Demo ready!',
+      });
+    }
+  } catch (error) {
+    console.error('Failed to initialize ROS2:', error);
+
+    // Notify renderer of initialization failure
+    if (mainWindow) {
+      mainWindow.webContents.send('ros-initialization-status', {
+        status: 'error',
+        message: `Failed to initialize ROS2: ${error.message}`,
+      });
+    }
+  }
+}
+
+// Turtle TF2 Broadcaster - broadcasts turtle pose as transform
+async function createTurtleTf2Broadcaster() {
+  const node = rclnodejs.createNode('turtle_tf2_frame_publisher');
+
+  // Create transform broadcaster
+  const tfBroadcaster = node.createPublisher('tf2_msgs/msg/TFMessage', '/tf');
+
+  // Create velocity publisher for turtle control
+  const velocityPublisher = node.createPublisher(
+    'geometry_msgs/msg/Twist',
+    '/turtle1/cmd_vel'
+  );
+  turtleTf2Nodes.velocityPublisher = velocityPublisher;
+
+  // Subscribe to turtle1 pose
+  node.createSubscription('turtlesim/msg/Pose', '/turtle1/pose', (msg) => {
+    const now = node.now();
+
+    // Create transform message
+    const transform = {
+      header: {
+        stamp: now,
+        frame_id: 'world',
+      },
+      child_frame_id: 'turtle1',
+      transform: {
+        translation: {
+          x: msg.x,
+          y: msg.y,
+          z: 0.0,
+        },
+        rotation: {
+          x: 0.0,
+          y: 0.0,
+          z: Math.sin(msg.theta / 2.0),
+          w: Math.cos(msg.theta / 2.0),
+        },
+      },
+    };
+
+    // Publish transform
+    const tfMessage = {
+      transforms: [transform],
+    };
+
+    tfBroadcaster.publish(tfMessage);
+
+    // Send to renderer
+    if (mainWindow) {
+      mainWindow.webContents.send('turtle-pose-update', {
+        name: 'turtle1',
+        pose: {
+          x: msg.x,
+          y: msg.y,
+          theta: msg.theta,
+        },
+        transform: {
+          header: {
+            stamp: {
+              sec: now.sec,
+              nanosec: now.nanosec,
+            },
+            frame_id: 'world',
+          },
+          child_frame_id: 'turtle1',
+          transform: {
+            translation: {
+              x: msg.x,
+              y: msg.y,
+              z: 0.0,
+            },
+            rotation: {
+              x: 0.0,
+              y: 0.0,
+              z: Math.sin(msg.theta / 2.0),
+              w: Math.cos(msg.theta / 2.0),
+            },
+          },
+        },
+      });
+    }
+  });
+
+  // Subscribe to turtle2 pose if it exists
+  node.createSubscription('turtlesim/msg/Pose', '/turtle2/pose', (msg) => {
+    const now = node.now();
+
+    const transform = {
+      header: {
+        stamp: now,
+        frame_id: 'world',
+      },
+      child_frame_id: 'turtle2',
+      transform: {
+        translation: {
+          x: msg.x,
+          y: msg.y,
+          z: 0.0,
+        },
+        rotation: {
+          x: 0.0,
+          y: 0.0,
+          z: Math.sin(msg.theta / 2.0),
+          w: Math.cos(msg.theta / 2.0),
+        },
+      },
+    };
+
+    const tfMessage = {
+      transforms: [transform],
+    };
+
+    tfBroadcaster.publish(tfMessage);
+
+    if (mainWindow) {
+      mainWindow.webContents.send('turtle-pose-update', {
+        name: 'turtle2',
+        pose: {
+          x: msg.x,
+          y: msg.y,
+          theta: msg.theta,
+        },
+        transform: {
+          header: {
+            stamp: {
+              sec: now.sec,
+              nanosec: now.nanosec,
+            },
+            frame_id: 'world',
+          },
+          child_frame_id: 'turtle2',
+          transform: {
+            translation: {
+              x: msg.x,
+              y: msg.y,
+              z: 0.0,
+            },
+            rotation: {
+              x: 0.0,
+              y: 0.0,
+              z: Math.sin(msg.theta / 2.0),
+              w: Math.cos(msg.theta / 2.0),
+            },
+          },
+        },
+      });
+    }
+  });
+
+  rclnodejs.spin(node);
+  turtleTf2Nodes.broadcaster = node;
+}
+
+// Turtle TF2 Listener - commands turtle2 to follow turtle1
+async function createTurtleTf2Listener() {
+  const node = rclnodejs.createNode('turtle_tf2_frame_listener');
+
+  // Create velocity publisher for turtle2
+  const velocityPublisher = node.createPublisher(
+    'geometry_msgs/msg/Twist',
+    '/turtle2/cmd_vel'
+  );
+
+  // Store turtle2 velocity publisher
+  turtleTf2Nodes.turtle2VelocityPublisher = velocityPublisher;
+
+  // Create service client to spawn turtle2
+  const spawner = node.createClient('turtlesim/srv/Spawn', '/spawn');
+
+  let turtleSpawningServiceReady = false;
+
+  // Transform listener functionality
+  const tfSubscriber = node.createSubscription(
+    'tf2_msgs/msg/TFMessage',
+    '/tf',
+    (msg) => {
+      // Process transforms for visualization
+      msg.transforms.forEach((transform) => {
+        if (mainWindow) {
+          // Create a serializable version of the transform
+          const serializableTransform = {
+            header: {
+              stamp: {
+                sec: transform.header.stamp.sec,
+                nanosec: transform.header.stamp.nanosec,
+              },
+              frame_id: transform.header.frame_id,
+            },
+            child_frame_id: transform.child_frame_id,
+            transform: {
+              translation: {
+                x: transform.transform.translation.x,
+                y: transform.transform.translation.y,
+                z: transform.transform.translation.z,
+              },
+              rotation: {
+                x: transform.transform.rotation.x,
+                y: transform.transform.rotation.y,
+                z: transform.transform.rotation.z,
+                w: transform.transform.rotation.w,
+              },
+            },
+          };
+          mainWindow.webContents.send(
+            'tf-transform-update',
+            serializableTransform
+          );
+        }
+      });
+    }
+  );
+
+  // Timer to check for transforms and control turtle2
+  const timer = node.createTimer(1000, () => {
+    // Wrap the async logic in a try-catch to handle promise rejections
+    (async () => {
+      try {
+        // Don't automatically spawn turtle2 - let user control this via UI
+        // This prevents service call errors if turtlesim is not running
+
+        // Simple following logic (in real implementation, this would use TF lookup)
+        // For demo purposes, we'll simulate the transform lookup behavior
+        if (turtleTf2Nodes.turtle2Spawned) {
+          // This is a simplified version - in real TF2, we'd lookup transforms
+          // For the demo, we'll let the renderer handle the following logic
+          if (mainWindow) {
+            mainWindow.webContents.send('request-turtle-follow');
+          }
+        }
+      } catch (error) {
+        console.error('Timer callback error:', error);
+      }
+    })();
+  });
+
+  rclnodejs.spin(node);
+  turtleTf2Nodes.listener = node;
+}
+
+// Static Turtle TF2 Broadcaster
+async function createStaticTurtleTf2Broadcaster() {
+  const node = rclnodejs.createNode('static_turtle_tf2_broadcaster');
+
+  const staticTfBroadcaster = node.createPublisher(
+    'tf2_msgs/msg/TFMessage',
+    '/tf_static'
+  );
+
+  // Broadcast a static transform (carrot frame relative to world)
+  const now = node.now();
+  const staticTransform = {
+    header: {
+      stamp: now,
+      frame_id: 'world',
+    },
+    child_frame_id: 'carrot1_static',
+    transform: {
+      translation: {
+        x: 2.0,
+        y: 3.0,
+        z: 0.0,
+      },
+      rotation: {
+        x: 0.0,
+        y: 0.0,
+        z: 0.0,
+        w: 1.0,
+      },
+    },
+  };
+
+  const staticTfMessage = {
+    transforms: [staticTransform],
+  };
+
+  // Publish static transform once
+  staticTfBroadcaster.publish(staticTfMessage);
+
+  if (mainWindow) {
+    // Create serializable version
+    const serializableStaticTransform = {
+      header: {
+        stamp: {
+          sec: now.sec,
+          nanosec: now.nanosec,
+        },
+        frame_id: 'world',
+      },
+      child_frame_id: 'carrot1_static',
+      transform: {
+        translation: {
+          x: 2.0,
+          y: 3.0,
+          z: 0.0,
+        },
+        rotation: {
+          x: 0.0,
+          y: 0.0,
+          z: 0.0,
+          w: 1.0,
+        },
+      },
+    };
+    mainWindow.webContents.send(
+      'static-transform-update',
+      serializableStaticTransform
+    );
+  }
+
+  rclnodejs.spin(node);
+  turtleTf2Nodes.staticBroadcaster = node;
+}
+
+// Dynamic Frame TF2 Broadcaster
+async function createDynamicFrameTf2Broadcaster() {
+  const node = rclnodejs.createNode('dynamic_frame_tf2_broadcaster');
+
+  const tfBroadcaster = node.createPublisher('tf2_msgs/msg/TFMessage', '/tf');
+
+  // Timer to broadcast dynamic transform
+  const timer = node.createTimer(100, () => {
+    const now = node.now();
+
+    // Use a more stable time calculation to avoid NaN
+    const timeInSeconds = Date.now() / 1000.0; // Use JavaScript Date for stable timing
+    const angle = timeInSeconds * 0.5; // Slower rotation (0.5 rad/sec instead of π rad/sec)
+
+    console.log(
+      '🕒 Dynamic frame time:',
+      timeInSeconds.toFixed(2),
+      'angle:',
+      angle.toFixed(2)
+    );
+
+    const dynamicTransform = {
+      header: {
+        stamp: now,
+        frame_id: 'carrot1_static',
+      },
+      child_frame_id: 'carrot1_dynamic',
+      transform: {
+        translation: {
+          x: 2.0 * Math.sin(angle),
+          y: 2.0 * Math.cos(angle),
+          z: 0.0,
+        },
+        rotation: {
+          x: 0.0,
+          y: 0.0,
+          z: 0.0,
+          w: 1.0,
+        },
+      },
+    };
+
+    const tfMessage = {
+      transforms: [dynamicTransform],
+    };
+
+    tfBroadcaster.publish(tfMessage);
+
+    if (mainWindow) {
+      // Create serializable version
+      const serializableDynamicTransform = {
+        header: {
+          stamp: {
+            sec: now.sec,
+            nanosec: now.nanosec,
+          },
+          frame_id: 'carrot1_static',
+        },
+        child_frame_id: 'carrot1_dynamic',
+        transform: {
+          translation: {
+            x: 2.0 * Math.sin(angle),
+            y: 2.0 * Math.cos(angle),
+            z: 0.0,
+          },
+          rotation: {
+            x: 0.0,
+            y: 0.0,
+            z: 0.0,
+            w: 1.0,
+          },
+        },
+      };
+
+      console.log(
+        '📤 Sending dynamic transform:',
+        'x:',
+        (2.0 * Math.sin(angle)).toFixed(2),
+        'y:',
+        (2.0 * Math.cos(angle)).toFixed(2)
+      );
+
+      mainWindow.webContents.send(
+        'dynamic-transform-update',
+        serializableDynamicTransform
+      );
+    }
+  });
+
+  rclnodejs.spin(node);
+  turtleTf2Nodes.dynamicBroadcaster = node;
+}
+
+// Fixed Frame TF2 Broadcaster
+async function createFixedFrameTf2Broadcaster() {
+  const node = rclnodejs.createNode('fixed_frame_tf2_broadcaster');
+
+  const tfBroadcaster = node.createPublisher('tf2_msgs/msg/TFMessage', '/tf');
+
+  // Timer to broadcast fixed transform
+  const timer = node.createTimer(100, () => {
+    const now = node.now();
+    const fixedTransform = {
+      header: {
+        stamp: now,
+        frame_id: 'turtle1',
+      },
+      child_frame_id: 'carrot1_fixed',
+      transform: {
+        translation: {
+          x: 0.0,
+          y: 2.0,
+          z: 0.0,
+        },
+        rotation: {
+          x: 0.0,
+          y: 0.0,
+          z: 0.0,
+          w: 1.0,
+        },
+      },
+    };
+
+    const tfMessage = {
+      transforms: [fixedTransform],
+    };
+
+    tfBroadcaster.publish(tfMessage);
+
+    if (mainWindow) {
+      // Create serializable version
+      const serializableFixedTransform = {
+        header: {
+          stamp: {
+            sec: now.sec,
+            nanosec: now.nanosec,
+          },
+          frame_id: 'turtle1',
+        },
+        child_frame_id: 'carrot1_fixed',
+        transform: {
+          translation: {
+            x: 0.0,
+            y: 2.0,
+            z: 0.0,
+          },
+          rotation: {
+            x: 0.0,
+            y: 0.0,
+            z: 0.0,
+            w: 1.0,
+          },
+        },
+      };
+      mainWindow.webContents.send(
+        'fixed-transform-update',
+        serializableFixedTransform
+      );
+    }
+  });
+
+  rclnodejs.spin(node);
+  turtleTf2Nodes.fixedBroadcaster = node;
+}
+
+// Handle turtle velocity commands from renderer
+ipcMain.on('turtle-velocity-command', (event, data) => {
+  const { turtle, velocity } = data;
+
+  // Find the appropriate publisher (this would be created when needed)
+  if (turtleTf2Nodes.velocityPublisher) {
+    turtleTf2Nodes.velocityPublisher.publish(velocity);
+  }
+});
+
+// Handle spawning requests from renderer
+ipcMain.on('spawn-turtle-request', (event, data) => {
+  const { name, x, y, theta } = data;
+
+  if (turtleTf2Nodes.listener) {
+    console.log(
+      `Spawn request received: ${name || 'turtle2'} at (${x || 4}, ${y || 2}, ${theta || 0})`
+    );
+
+    // Use the existing spawner from the listener node or create one
+    const listenerNode = turtleTf2Nodes.listener;
+    let spawner = listenerNode._spawner;
+
+    if (!spawner) {
+      console.log('Creating new spawn service client...');
+      spawner = listenerNode.createClient('turtlesim/srv/Spawn', '/spawn');
+      listenerNode._spawner = spawner; // Cache it
+
+      // Wait for service to be ready with timeout
+      let retries = 0;
+      const maxRetries = 10;
+
+      const checkService = () => {
+        if (spawner.isServiceServerAvailable()) {
+          performSpawn();
+        } else if (retries < maxRetries) {
+          retries++;
+          console.log(`Waiting for spawn service... (attempt ${retries})`);
+          setTimeout(checkService, 200);
+        } else {
+          console.error('Turtlesim spawn service not available after waiting');
+          if (mainWindow) {
+            mainWindow.webContents.send('spawn-error', {
+              message: 'Turtlesim spawn service not available after waiting',
+            });
+          }
+        }
+      };
+
+      checkService();
+    } else {
+      performSpawn();
+    }
+
+    function performSpawn() {
+      const xPos = x || 4.0;
+      const yPos = y || 2.0;
+      const angle = theta || 0.0;
+      const turtleName = name || 'turtle2';
+
+      console.log(`Spawning ${turtleName} at (${xPos}, ${yPos}, ${angle})`);
+
+      // Use callback pattern as required by rclnodejs
+      try {
+        spawner.sendRequest(
+          {
+            x: xPos,
+            y: yPos,
+            theta: angle,
+            name: turtleName,
+          },
+          (response) => {
+            console.log('Spawn response:', response);
+
+            if (response && response.name) {
+              const spawnedName = response.name;
+              console.log(`Successfully spawned ${spawnedName}`);
+
+              // Set turtle spawned flag for following logic
+              if (spawnedName === 'turtle2') {
+                turtleTf2Nodes.turtle2Spawned = true;
+              }
+
+              if (mainWindow) {
+                mainWindow.webContents.send('turtle-spawned', {
+                  name: spawnedName,
+                  x: xPos,
+                  y: yPos,
+                  theta: angle,
+                });
+              }
+            } else {
+              console.error('Invalid or empty response from spawn service');
+              if (mainWindow) {
+                mainWindow.webContents.send('spawn-error', {
+                  message: 'Invalid response from spawn service',
+                });
+              }
+            }
+          }
+        );
+      } catch (error) {
+        console.error(`Error sending spawn request: ${error.message}`);
+        if (mainWindow) {
+          mainWindow.webContents.send('spawn-error', {
+            message: `Error sending spawn request: ${error.message}`,
+          });
+        }
+      }
+    }
+  } else {
+    console.error('Listener node not initialized');
+    if (mainWindow) {
+      mainWindow.webContents.send('spawn-error', {
+        message: 'ROS2 listener node not ready',
+      });
+    }
+  }
+});
+
+// Handle keyboard turtle control commands
+ipcMain.on('turtle-cmd-vel', (event, data) => {
+  if (turtleTf2Nodes.velocityPublisher) {
+    const velocity = {
+      linear: data.linear,
+      angular: data.angular,
+    };
+    // Send velocity command to turtle1
+    turtleTf2Nodes.velocityPublisher.publish(velocity);
+  }
+});
+
+// Handle turtle2 following commands
+ipcMain.on('turtle2-cmd-vel', (event, data) => {
+  if (turtleTf2Nodes.turtle2VelocityPublisher) {
+    const velocity = {
+      linear: data.linear,
+      angular: data.angular,
+    };
+    // Send velocity command to turtle2
+    turtleTf2Nodes.turtle2VelocityPublisher.publish(velocity);
+  }
+});
+
+app.whenReady().then(async () => {
+  createWindow();
+
+  // Wait for window to be ready to receive messages
+  mainWindow.webContents.once('did-finish-load', async () => {
+    await initializeROS();
+  });
+
+  app.on('activate', function () {
+    if (BrowserWindow.getAllWindows().length === 0) createWindow();
+  });
+});
+
+app.on('window-all-closed', function () {
+  if (process.platform !== 'darwin') {
+    // Clean up ROS2 nodes
+    Object.values(turtleTf2Nodes).forEach((node) => {
+      try {
+        rclnodejs.shutdown();
+      } catch (error) {
+        console.error('Error shutting down node:', error);
+      }
+    });
+    app.quit();
+  }
+});
+
+app.on('before-quit', () => {
+  Object.values(turtleTf2Nodes).forEach((node) => {
+    try {
+      rclnodejs.shutdown();
+    } catch (error) {
+      console.error('Error shutting down node:', error);
+    }
+  });
+});
diff --git a/electron_demo/turtle_tf2/orbit-controls.js b/electron_demo/turtle_tf2/orbit-controls.js
new file mode 100644
index 00000000..a51f933d
--- /dev/null
+++ b/electron_demo/turtle_tf2/orbit-controls.js
@@ -0,0 +1,874 @@
+// OrbitControls for Three.js - Adapted for direct inclusion
+// This is a simplified version that works without ES6 modules
+
+THREE.OrbitControls = function (object, domElement) {
+  this.object = object;
+  this.domElement = domElement !== undefined ? domElement : document;
+
+  // Set to false to disable this control
+  this.enabled = true;
+
+  // "target" sets the location of focus, where the object orbits around
+  this.target = new THREE.Vector3();
+
+  // How far you can dolly in and out (PerspectiveCamera only)
+  this.minDistance = 0;
+  this.maxDistance = Infinity;
+
+  // How far you can zoom in and out (OrthographicCamera only)
+  this.minZoom = 0;
+  this.maxZoom = Infinity;
+
+  // How far you can orbit vertically, upper and lower limits.
+  this.minPolarAngle = 0; // radians
+  this.maxPolarAngle = Math.PI; // radians
+
+  // How far you can orbit horizontally, upper and lower limits.
+  this.minAzimuthAngle = -Infinity; // radians
+  this.maxAzimuthAngle = Infinity; // radians
+
+  // Set to true to enable damping (inertia)
+  this.enableDamping = false;
+  this.dampingFactor = 0.25;
+
+  // This option actually enables dollying in and out; left as "zoom" for backwards compatibility.
+  this.enableZoom = true;
+  this.zoomSpeed = 1.0;
+
+  // Set to false to disable rotating
+  this.enableRotate = true;
+  this.rotateSpeed = 1.0;
+
+  // Set to false to disable panning
+  this.enablePan = true;
+  this.panSpeed = 1.0;
+  this.screenSpacePanning = false; // if true, pan in screen-space
+  this.keyPanSpeed = 7.0; // pixels moved per arrow key push
+
+  // Set to true to automatically rotate around the target
+  this.autoRotate = false;
+  this.autoRotateSpeed = 2.0; // 30 seconds per round when fps is 60
+
+  // Set to false to disable use of the keys
+  this.enableKeys = true;
+
+  // The four arrow keys
+  this.keys = { LEFT: 37, UP: 38, RIGHT: 39, BOTTOM: 40 };
+
+  // Mouse buttons
+  this.mouseButtons = {
+    LEFT: THREE.MOUSE.LEFT,
+    MIDDLE: THREE.MOUSE.MIDDLE,
+    RIGHT: THREE.MOUSE.RIGHT,
+  };
+
+  // for reset
+  this.target0 = this.target.clone();
+  this.position0 = this.object.position.clone();
+  this.zoom0 = this.object.zoom;
+
+  // Public methods
+
+  this.getPolarAngle = function () {
+    return spherical.phi;
+  };
+
+  this.getAzimuthalAngle = function () {
+    return spherical.theta;
+  };
+
+  this.saveState = function () {
+    scope.target0.copy(scope.target);
+    scope.position0.copy(scope.object.position);
+    scope.zoom0 = scope.object.zoom;
+  };
+
+  this.reset = function () {
+    scope.target.copy(scope.target0);
+    scope.object.position.copy(scope.position0);
+    scope.object.zoom = scope.zoom0;
+
+    scope.object.updateProjectionMatrix();
+    scope.dispatchEvent(changeEvent);
+
+    scope.update();
+
+    state = STATE.NONE;
+  };
+
+  // this method is exposed, but perhaps it would be better if we can make it private...
+  this.update = (function () {
+    var offset = new THREE.Vector3();
+
+    // so camera.up is the orbit axis
+    var quat = new THREE.Quaternion().setFromUnitVectors(
+      object.up,
+      new THREE.Vector3(0, 1, 0)
+    );
+    var quatInverse = new THREE.Quaternion().copy(quat).invert();
+
+    var lastPosition = new THREE.Vector3();
+    var lastQuaternion = new THREE.Quaternion();
+
+    return function update() {
+      var position = scope.object.position;
+
+      offset.copy(position).sub(scope.target);
+
+      // rotate offset to "y-axis-is-up" space
+      offset.applyQuaternion(quat);
+
+      // angle from z-axis around y-axis
+      spherical.setFromVector3(offset);
+
+      if (scope.autoRotate && state === STATE.NONE) {
+        rotateLeft(getAutoRotationAngle());
+      }
+
+      spherical.theta += sphericalDelta.theta;
+      spherical.phi += sphericalDelta.phi;
+
+      // restrict theta to be between desired limits
+      spherical.theta = Math.max(
+        scope.minAzimuthAngle,
+        Math.min(scope.maxAzimuthAngle, spherical.theta)
+      );
+
+      // restrict phi to be between desired limits
+      spherical.phi = Math.max(
+        scope.minPolarAngle,
+        Math.min(scope.maxPolarAngle, spherical.phi)
+      );
+
+      spherical.makeSafe();
+
+      spherical.radius *= scale;
+
+      // restrict radius to be between desired limits
+      spherical.radius = Math.max(
+        scope.minDistance,
+        Math.min(scope.maxDistance, spherical.radius)
+      );
+
+      // move target to panned location
+      scope.target.add(panOffset);
+
+      offset.setFromSpherical(spherical);
+
+      // rotate offset back to "camera-up-vector-is-up" space
+      offset.applyQuaternion(quatInverse);
+
+      position.copy(scope.target).add(offset);
+
+      scope.object.lookAt(scope.target);
+
+      if (scope.enableDamping === true) {
+        sphericalDelta.theta *= 1 - scope.dampingFactor;
+        sphericalDelta.phi *= 1 - scope.dampingFactor;
+
+        panOffset.multiplyScalar(1 - scope.dampingFactor);
+      } else {
+        sphericalDelta.set(0, 0, 0);
+        panOffset.set(0, 0, 0);
+      }
+
+      scale = 1;
+
+      // update condition is:
+      // min(camera displacement, camera rotation in radians)^2 > EPS
+      // using small-angle approximation cos(x/2) = 1 - x^2 / 8
+
+      if (
+        zoomChanged ||
+        lastPosition.distanceToSquared(scope.object.position) > EPS ||
+        8 * (1 - lastQuaternion.dot(scope.object.quaternion)) > EPS
+      ) {
+        scope.dispatchEvent(changeEvent);
+
+        lastPosition.copy(scope.object.position);
+        lastQuaternion.copy(scope.object.quaternion);
+        zoomChanged = false;
+
+        return true;
+      }
+
+      return false;
+    };
+  })();
+
+  this.dispose = function () {
+    scope.domElement.removeEventListener('contextmenu', onContextMenu, false);
+    scope.domElement.removeEventListener('mousedown', onMouseDown, false);
+    scope.domElement.removeEventListener('wheel', onMouseWheel, false);
+
+    scope.domElement.removeEventListener('touchstart', onTouchStart, false);
+    scope.domElement.removeEventListener('touchend', onTouchEnd, false);
+    scope.domElement.removeEventListener('touchmove', onTouchMove, false);
+
+    document.removeEventListener('mousemove', onMouseMove, false);
+    document.removeEventListener('mouseup', onMouseUp, false);
+
+    window.removeEventListener('keydown', onKeyDown, false);
+  };
+
+  //
+  // internals
+  //
+
+  var scope = this;
+
+  var changeEvent = { type: 'change' };
+  var startEvent = { type: 'start' };
+  var endEvent = { type: 'end' };
+
+  var STATE = {
+    NONE: -1,
+    ROTATE: 0,
+    DOLLY: 1,
+    PAN: 2,
+    TOUCH_ROTATE: 3,
+    TOUCH_DOLLY_PAN: 4,
+  };
+
+  var state = STATE.NONE;
+
+  var EPS = 0.000001;
+
+  // current position in spherical coordinates
+  var spherical = new THREE.Spherical();
+  var sphericalDelta = new THREE.Spherical();
+
+  var scale = 1;
+  var panOffset = new THREE.Vector3();
+  var zoomChanged = false;
+
+  var rotateStart = new THREE.Vector2();
+  var rotateEnd = new THREE.Vector2();
+  var rotateDelta = new THREE.Vector2();
+
+  var panStart = new THREE.Vector2();
+  var panEnd = new THREE.Vector2();
+  var panDelta = new THREE.Vector2();
+
+  var dollyStart = new THREE.Vector2();
+  var dollyEnd = new THREE.Vector2();
+  var dollyDelta = new THREE.Vector2();
+
+  function getAutoRotationAngle() {
+    return ((2 * Math.PI) / 60 / 60) * scope.autoRotateSpeed;
+  }
+
+  function getZoomScale() {
+    return Math.pow(0.95, scope.zoomSpeed);
+  }
+
+  function rotateLeft(angle) {
+    sphericalDelta.theta -= angle;
+  }
+
+  function rotateUp(angle) {
+    sphericalDelta.phi -= angle;
+  }
+
+  var panLeft = (function () {
+    var v = new THREE.Vector3();
+
+    return function panLeft(distance, objectMatrix) {
+      v.setFromMatrixColumn(objectMatrix, 0); // get X column of objectMatrix
+      v.multiplyScalar(-distance);
+      panOffset.add(v);
+    };
+  })();
+
+  var panUp = (function () {
+    var v = new THREE.Vector3();
+
+    return function panUp(distance, objectMatrix) {
+      if (scope.screenSpacePanning === true) {
+        v.setFromMatrixColumn(objectMatrix, 1);
+      } else {
+        v.setFromMatrixColumn(objectMatrix, 0);
+        v.crossVectors(scope.object.up, v);
+      }
+
+      v.multiplyScalar(distance);
+      panOffset.add(v);
+    };
+  })();
+
+  // deltaX and deltaY are in pixels; right and down are positive
+  var pan = (function () {
+    var offset = new THREE.Vector3();
+
+    return function pan(deltaX, deltaY) {
+      var element =
+        scope.domElement === document
+          ? scope.domElement.body
+          : scope.domElement;
+
+      if (scope.object.isPerspectiveCamera) {
+        // perspective
+        var position = scope.object.position;
+        offset.copy(position).sub(scope.target);
+        var targetDistance = offset.length();
+
+        // half of the fov is center to top of screen
+        targetDistance *= Math.tan(((scope.object.fov / 2) * Math.PI) / 180.0);
+
+        // we actually don't use screenWidth, since perspective camera is fixed to screen height
+        panLeft(
+          (2 * deltaX * targetDistance) / element.clientHeight,
+          scope.object.matrix
+        );
+        panUp(
+          (2 * deltaY * targetDistance) / element.clientHeight,
+          scope.object.matrix
+        );
+      } else if (scope.object.isOrthographicCamera) {
+        // orthographic
+        panLeft(
+          (deltaX * (scope.object.right - scope.object.left)) /
+            scope.object.zoom /
+            element.clientWidth,
+          scope.object.matrix
+        );
+        panUp(
+          (deltaY * (scope.object.top - scope.object.bottom)) /
+            scope.object.zoom /
+            element.clientHeight,
+          scope.object.matrix
+        );
+      } else {
+        // camera neither orthographic nor perspective
+        console.warn(
+          'WARNING: OrbitControls.js encountered an unknown camera type - pan disabled.'
+        );
+        scope.enablePan = false;
+      }
+    };
+  })();
+
+  function dollyIn(dollyScale) {
+    if (scope.object.isPerspectiveCamera) {
+      scale /= dollyScale;
+    } else if (scope.object.isOrthographicCamera) {
+      scope.object.zoom = Math.max(
+        scope.minZoom,
+        Math.min(scope.maxZoom, scope.object.zoom * dollyScale)
+      );
+      scope.object.updateProjectionMatrix();
+      zoomChanged = true;
+    } else {
+      console.warn(
+        'WARNING: OrbitControls.js encountered an unknown camera type - dolly/zoom disabled.'
+      );
+      scope.enableZoom = false;
+    }
+  }
+
+  function dollyOut(dollyScale) {
+    if (scope.object.isPerspectiveCamera) {
+      scale *= dollyScale;
+    } else if (scope.object.isOrthographicCamera) {
+      scope.object.zoom = Math.max(
+        scope.minZoom,
+        Math.min(scope.maxZoom, scope.object.zoom / dollyScale)
+      );
+      scope.object.updateProjectionMatrix();
+      zoomChanged = true;
+    } else {
+      console.warn(
+        'WARNING: OrbitControls.js encountered an unknown camera type - dolly/zoom disabled.'
+      );
+      scope.enableZoom = false;
+    }
+  }
+
+  //
+  // event callbacks - update the object state
+  //
+
+  function handleMouseDownRotate(event) {
+    rotateStart.set(event.clientX, event.clientY);
+  }
+
+  function handleMouseDownDolly(event) {
+    dollyStart.set(event.clientX, event.clientY);
+  }
+
+  function handleMouseDownPan(event) {
+    panStart.set(event.clientX, event.clientY);
+  }
+
+  function handleMouseMoveRotate(event) {
+    rotateEnd.set(event.clientX, event.clientY);
+    rotateDelta
+      .subVectors(rotateEnd, rotateStart)
+      .multiplyScalar(scope.rotateSpeed);
+
+    var element =
+      scope.domElement === document ? scope.domElement.body : scope.domElement;
+
+    rotateLeft((2 * Math.PI * rotateDelta.x) / element.clientHeight); // yes, height
+
+    rotateUp((2 * Math.PI * rotateDelta.y) / element.clientHeight);
+
+    rotateStart.copy(rotateEnd);
+
+    scope.update();
+  }
+
+  function handleMouseMoveDolly(event) {
+    dollyEnd.set(event.clientX, event.clientY);
+    dollyDelta.subVectors(dollyEnd, dollyStart);
+
+    if (dollyDelta.y > 0) {
+      dollyIn(getZoomScale());
+    } else if (dollyDelta.y < 0) {
+      dollyOut(getZoomScale());
+    }
+
+    dollyStart.copy(dollyEnd);
+
+    scope.update();
+  }
+
+  function handleMouseMovePan(event) {
+    panEnd.set(event.clientX, event.clientY);
+    panDelta.subVectors(panEnd, panStart).multiplyScalar(scope.panSpeed);
+
+    pan(panDelta.x, panDelta.y);
+
+    panStart.copy(panEnd);
+
+    scope.update();
+  }
+
+  function handleMouseUp() {
+    // no-op
+  }
+
+  function handleMouseWheel(event) {
+    if (event.deltaY < 0) {
+      dollyOut(getZoomScale());
+    } else if (event.deltaY > 0) {
+      dollyIn(getZoomScale());
+    }
+
+    scope.update();
+  }
+
+  function handleKeyDown(event) {
+    switch (event.keyCode) {
+      case scope.keys.UP:
+        pan(0, scope.keyPanSpeed);
+        scope.update();
+        break;
+
+      case scope.keys.BOTTOM:
+        pan(0, -scope.keyPanSpeed);
+        scope.update();
+        break;
+
+      case scope.keys.LEFT:
+        pan(scope.keyPanSpeed, 0);
+        scope.update();
+        break;
+
+      case scope.keys.RIGHT:
+        pan(-scope.keyPanSpeed, 0);
+        scope.update();
+        break;
+    }
+  }
+
+  function handleTouchStartRotate(event) {
+    rotateStart.set(event.touches[0].pageX, event.touches[0].pageY);
+  }
+
+  function handleTouchStartDollyPan(event) {
+    if (scope.enableZoom) {
+      var dx = event.touches[0].pageX - event.touches[1].pageX;
+      var dy = event.touches[0].pageY - event.touches[1].pageY;
+
+      var distance = Math.sqrt(dx * dx + dy * dy);
+
+      dollyStart.set(0, distance);
+    }
+
+    if (scope.enablePan) {
+      var x = 0.5 * (event.touches[0].pageX + event.touches[1].pageX);
+      var y = 0.5 * (event.touches[0].pageY + event.touches[1].pageY);
+
+      panStart.set(x, y);
+    }
+  }
+
+  function handleTouchMoveRotate(event) {
+    rotateEnd.set(event.touches[0].pageX, event.touches[0].pageY);
+    rotateDelta
+      .subVectors(rotateEnd, rotateStart)
+      .multiplyScalar(scope.rotateSpeed);
+
+    var element =
+      scope.domElement === document ? scope.domElement.body : scope.domElement;
+
+    rotateLeft((2 * Math.PI * rotateDelta.x) / element.clientHeight); // yes, height
+
+    rotateUp((2 * Math.PI * rotateDelta.y) / element.clientHeight);
+
+    rotateStart.copy(rotateEnd);
+
+    scope.update();
+  }
+
+  function handleTouchMoveDollyPan(event) {
+    if (scope.enableZoom) {
+      var dx = event.touches[0].pageX - event.touches[1].pageX;
+      var dy = event.touches[0].pageY - event.touches[1].pageY;
+
+      var distance = Math.sqrt(dx * dx + dy * dy);
+
+      dollyEnd.set(0, distance);
+
+      dollyDelta.set(0, Math.pow(dollyEnd.y / dollyStart.y, scope.zoomSpeed));
+
+      dollyIn(dollyDelta.y);
+
+      dollyStart.copy(dollyEnd);
+    }
+
+    if (scope.enablePan) {
+      var x = 0.5 * (event.touches[0].pageX + event.touches[1].pageX);
+      var y = 0.5 * (event.touches[0].pageY + event.touches[1].pageY);
+
+      panEnd.set(x, y);
+
+      panDelta.subVectors(panEnd, panStart).multiplyScalar(scope.panSpeed);
+
+      pan(panDelta.x, panDelta.y);
+
+      panStart.copy(panEnd);
+    }
+
+    scope.update();
+  }
+
+  function handleTouchEnd() {
+    // no-op
+  }
+
+  //
+  // event handlers - FSM: listen for events and reset state
+  //
+
+  function onMouseDown(event) {
+    if (scope.enabled === false) return;
+
+    event.preventDefault();
+
+    switch (event.button) {
+      case scope.mouseButtons.LEFT:
+        if (event.ctrlKey || event.metaKey || event.shiftKey) {
+          if (scope.enablePan === false) return;
+
+          handleMouseDownPan(event);
+
+          state = STATE.PAN;
+        } else {
+          if (scope.enableRotate === false) return;
+
+          handleMouseDownRotate(event);
+
+          state = STATE.ROTATE;
+        }
+
+        break;
+
+      case scope.mouseButtons.MIDDLE:
+        if (scope.enableZoom === false) return;
+
+        handleMouseDownDolly(event);
+
+        state = STATE.DOLLY;
+
+        break;
+
+      case scope.mouseButtons.RIGHT:
+        if (scope.enablePan === false) return;
+
+        handleMouseDownPan(event);
+
+        state = STATE.PAN;
+
+        break;
+    }
+
+    if (state !== STATE.NONE) {
+      document.addEventListener('mousemove', onMouseMove, false);
+      document.addEventListener('mouseup', onMouseUp, false);
+
+      scope.dispatchEvent(startEvent);
+    }
+  }
+
+  function onMouseMove(event) {
+    if (scope.enabled === false) return;
+
+    event.preventDefault();
+
+    switch (state) {
+      case STATE.ROTATE:
+        if (scope.enableRotate === false) return;
+
+        handleMouseMoveRotate(event);
+
+        break;
+
+      case STATE.DOLLY:
+        if (scope.enableZoom === false) return;
+
+        handleMouseMoveDolly(event);
+
+        break;
+
+      case STATE.PAN:
+        if (scope.enablePan === false) return;
+
+        handleMouseMovePan(event);
+
+        break;
+    }
+  }
+
+  function onMouseUp() {
+    if (scope.enabled === false) return;
+
+    handleMouseUp();
+
+    document.removeEventListener('mousemove', onMouseMove, false);
+    document.removeEventListener('mouseup', onMouseUp, false);
+
+    scope.dispatchEvent(endEvent);
+
+    state = STATE.NONE;
+  }
+
+  function onMouseWheel(event) {
+    if (
+      scope.enabled === false ||
+      scope.enableZoom === false ||
+      (state !== STATE.NONE && state !== STATE.ROTATE)
+    )
+      return;
+
+    event.preventDefault();
+    event.stopPropagation();
+
+    scope.dispatchEvent(startEvent);
+
+    handleMouseWheel(event);
+
+    scope.dispatchEvent(endEvent);
+  }
+
+  function onKeyDown(event) {
+    if (
+      scope.enabled === false ||
+      scope.enableKeys === false ||
+      scope.enablePan === false
+    )
+      return;
+
+    handleKeyDown(event);
+  }
+
+  function onTouchStart(event) {
+    if (scope.enabled === false) return;
+
+    event.preventDefault();
+
+    switch (event.touches.length) {
+      case 1: // one-fingered touch: rotate
+        if (scope.enableRotate === false) return;
+
+        handleTouchStartRotate(event);
+
+        state = STATE.TOUCH_ROTATE;
+
+        break;
+
+      case 2: // two-fingered touch: dolly-pan
+        if (scope.enableZoom === false && scope.enablePan === false) return;
+
+        handleTouchStartDollyPan(event);
+
+        state = STATE.TOUCH_DOLLY_PAN;
+
+        break;
+
+      default:
+        state = STATE.NONE;
+    }
+
+    if (state !== STATE.NONE) {
+      scope.dispatchEvent(startEvent);
+    }
+  }
+
+  function onTouchMove(event) {
+    if (scope.enabled === false) return;
+
+    event.preventDefault();
+    event.stopPropagation();
+
+    switch (event.touches.length) {
+      case 1: // one-fingered touch: rotate
+        if (scope.enableRotate === false) return;
+        if (state !== STATE.TOUCH_ROTATE) return; // is this needed?
+
+        handleTouchMoveRotate(event);
+
+        break;
+
+      case 2: // two-fingered touch: dolly-pan
+        if (scope.enableZoom === false && scope.enablePan === false) return;
+        if (state !== STATE.TOUCH_DOLLY_PAN) return; // is this needed?
+
+        handleTouchMoveDollyPan(event);
+
+        break;
+
+      default:
+        state = STATE.NONE;
+    }
+  }
+
+  function onTouchEnd() {
+    if (scope.enabled === false) return;
+
+    handleTouchEnd();
+
+    scope.dispatchEvent(endEvent);
+
+    state = STATE.NONE;
+  }
+
+  function onContextMenu(event) {
+    if (scope.enabled === false) return;
+
+    event.preventDefault();
+  }
+
+  //
+
+  scope.domElement.addEventListener('contextmenu', onContextMenu, false);
+
+  scope.domElement.addEventListener('mousedown', onMouseDown, false);
+  scope.domElement.addEventListener('wheel', onMouseWheel, false);
+
+  scope.domElement.addEventListener('touchstart', onTouchStart, false);
+  scope.domElement.addEventListener('touchend', onTouchEnd, false);
+  scope.domElement.addEventListener('touchmove', onTouchMove, false);
+
+  window.addEventListener('keydown', onKeyDown, false);
+
+  // force an update at start
+  this.update();
+};
+
+THREE.OrbitControls.prototype = Object.create(THREE.EventDispatcher.prototype);
+THREE.OrbitControls.prototype.constructor = THREE.OrbitControls;
+
+Object.defineProperties(THREE.OrbitControls.prototype, {
+  center: {
+    get: function () {
+      console.warn('THREE.OrbitControls: .center has been renamed to .target');
+      return this.target;
+    },
+  },
+  noZoom: {
+    get: function () {
+      console.warn(
+        'THREE.OrbitControls: .noZoom has been deprecated. Use .enableZoom instead.'
+      );
+      return !this.enableZoom;
+    },
+    set: function (value) {
+      console.warn(
+        'THREE.OrbitControls: .noZoom has been deprecated. Use .enableZoom instead.'
+      );
+      this.enableZoom = !value;
+    },
+  },
+  noRotate: {
+    get: function () {
+      console.warn(
+        'THREE.OrbitControls: .noRotate has been deprecated. Use .enableRotate instead.'
+      );
+      return !this.enableRotate;
+    },
+    set: function (value) {
+      console.warn(
+        'THREE.OrbitControls: .noRotate has been deprecated. Use .enableRotate instead.'
+      );
+      this.enableRotate = !value;
+    },
+  },
+  noPan: {
+    get: function () {
+      console.warn(
+        'THREE.OrbitControls: .noPan has been deprecated. Use .enablePan instead.'
+      );
+      return !this.enablePan;
+    },
+    set: function (value) {
+      console.warn(
+        'THREE.OrbitControls: .noPan has been deprecated. Use .enablePan instead.'
+      );
+      this.enablePan = !value;
+    },
+  },
+  noKeys: {
+    get: function () {
+      console.warn(
+        'THREE.OrbitControls: .noKeys has been deprecated. Use .enableKeys instead.'
+      );
+      return !this.enableKeys;
+    },
+    set: function (value) {
+      console.warn(
+        'THREE.OrbitControls: .noKeys has been deprecated. Use .enableKeys instead.'
+      );
+      this.enableKeys = !value;
+    },
+  },
+  staticMoving: {
+    get: function () {
+      console.warn(
+        'THREE.OrbitControls: .staticMoving has been deprecated. Use .enableDamping instead.'
+      );
+      return !this.enableDamping;
+    },
+    set: function (value) {
+      console.warn(
+        'THREE.OrbitControls: .staticMoving has been deprecated. Use .enableDamping instead.'
+      );
+      this.enableDamping = !value;
+    },
+  },
+  dynamicDampingFactor: {
+    get: function () {
+      console.warn(
+        'THREE.OrbitControls: .dynamicDampingFactor has been renamed. Use .dampingFactor instead.'
+      );
+      return this.dampingFactor;
+    },
+    set: function (value) {
+      console.warn(
+        'THREE.OrbitControls: .dynamicDampingFactor has been renamed. Use .dampingFactor instead.'
+      );
+      this.dampingFactor = value;
+    },
+  },
+});
diff --git a/electron_demo/turtle_tf2/package.json b/electron_demo/turtle_tf2/package.json
new file mode 100644
index 00000000..3fc38989
--- /dev/null
+++ b/electron_demo/turtle_tf2/package.json
@@ -0,0 +1,29 @@
+{
+  "name": "rclnodejs-turtle-tf2-demo",
+  "version": "1.0.0",
+  "description": "Electron application demonstrating turtle TF2 transformations using rclnodejs with 3D web visualization",
+  "main": "main.js",
+  "scripts": {
+    "start": "electron .",
+    "rebuild": "electron-rebuild"
+  },
+  "keywords": [
+    "Electron",
+    "rclnodejs",
+    "turtle",
+    "tf2",
+    "transforms",
+    "3D",
+    "visualization",
+    "demo"
+  ],
+  "license": "Apache-2.0",
+  "dependencies": {
+    "rclnodejs": "^1.5.0",
+    "three": "^0.155.0"
+  },
+  "devDependencies": {
+    "@electron/rebuild": "^3.7.2",
+    "electron": "^31.7.7"
+  }
+}
diff --git a/electron_demo/turtle_tf2/renderer.js b/electron_demo/turtle_tf2/renderer.js
new file mode 100644
index 00000000..2b2becab
--- /dev/null
+++ b/electron_demo/turtle_tf2/renderer.js
@@ -0,0 +1,717 @@
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+const { ipcRenderer } = require('electron');
+
+// 3D Scene variables
+let scene, camera, renderer, controls;
+let turtles = {};
+let frames = {};
+let coordinateFrames = {};
+let turtlePoses = {}; // Track turtle poses for following logic
+
+// Transform tracking
+let activeTransforms = new Map();
+let transformHistory = [];
+
+// Demo state
+let demoState = {
+  rosConnected: false,
+  turtlesimRunning: false,
+  activeNodes: 0,
+  totalNodes: 5,
+};
+
+// Keyboard control state
+let keyState = {
+  w: false,
+  a: false,
+  s: false,
+  d: false,
+};
+
+// Initialize when DOM is loaded
+document.addEventListener('DOMContentLoaded', function () {
+  initializeScene();
+  setupEventListeners();
+  setupKeyboardControls();
+  setupROSListeners();
+  updateStatus();
+
+  // Don't automatically hide loading screen - wait for ROS2 initialization
+}); // Initialize Three.js scene
+function initializeScene() {
+  const container = document.getElementById('visualization-container');
+  const canvas = document.getElementById('three-canvas');
+
+  // Scene setup
+  scene = new THREE.Scene();
+  scene.background = new THREE.Color(0x1a1a2e);
+
+  // Camera setup
+  camera = new THREE.PerspectiveCamera(
+    75,
+    container.clientWidth / container.clientHeight,
+    0.1,
+    1000
+  );
+  camera.position.set(15, 15, 15);
+  camera.lookAt(0, 0, 0);
+
+  // Renderer setup
+  renderer = new THREE.WebGLRenderer({
+    canvas: canvas,
+    antialias: true,
+    alpha: true,
+  });
+  renderer.setSize(container.clientWidth, container.clientHeight);
+  renderer.shadowMap.enabled = true;
+  renderer.shadowMap.type = THREE.PCFSoftShadowMap;
+
+  // Controls setup
+  controls = new THREE.OrbitControls(camera, renderer.domElement);
+  controls.enableDamping = true;
+  controls.dampingFactor = 0.05;
+  controls.maxDistance = 50;
+  controls.minDistance = 5;
+
+  // Reduce rotation sensitivity for better control
+  controls.rotateSpeed = 0.3; // Default is 1.0, lower = less sensitive
+  controls.panSpeed = 0.5; // Reduce pan sensitivity too
+  controls.zoomSpeed = 0.8; // Slightly reduce zoom sensitivity
+
+  // Lighting
+  const ambientLight = new THREE.AmbientLight(0x404040, 0.6);
+  scene.add(ambientLight);
+
+  const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);
+  directionalLight.position.set(10, 10, 5);
+  directionalLight.castShadow = true;
+  directionalLight.shadow.mapSize.width = 2048;
+  directionalLight.shadow.mapSize.height = 2048;
+  scene.add(directionalLight);
+
+  // Create ground plane
+  createGroundPlane();
+
+  // Create world coordinate frame
+  createCoordinateFrame(
+    'world',
+    { x: 0, y: 0, z: 0 },
+    { x: 0, y: 0, z: 0, w: 1 },
+    3
+  );
+
+  // Start render loop
+  animate();
+
+  // Handle window resize
+  window.addEventListener('resize', onWindowResize);
+}
+
+function createGroundPlane() {
+  const geometry = new THREE.PlaneGeometry(20, 20, 20, 20);
+  const material = new THREE.MeshLambertMaterial({
+    color: 0x2a2a3e,
+    wireframe: false,
+    transparent: true,
+    opacity: 0.8,
+  });
+
+  const plane = new THREE.Mesh(geometry, material);
+  plane.rotation.x = -Math.PI / 2;
+  plane.position.y = -0.1;
+  plane.receiveShadow = true;
+  scene.add(plane);
+
+  // Add grid
+  const gridHelper = new THREE.GridHelper(20, 20, 0x444444, 0x333333);
+  gridHelper.position.y = 0;
+  scene.add(gridHelper);
+}
+
+function createTurtle(name, position, rotation, color) {
+  const group = new THREE.Group();
+
+  // Turtle body (ellipse)
+  const bodyGeometry = new THREE.SphereGeometry(0.3, 16, 8);
+  bodyGeometry.scale(1, 0.6, 1.2);
+  const bodyMaterial = new THREE.MeshLambertMaterial({ color: color });
+  const body = new THREE.Mesh(bodyGeometry, bodyMaterial);
+  body.castShadow = true;
+  group.add(body);
+
+  // Turtle head
+  const headGeometry = new THREE.SphereGeometry(0.15, 8, 8);
+  const headMaterial = new THREE.MeshLambertMaterial({ color: color });
+  const head = new THREE.Mesh(headGeometry, headMaterial);
+  head.position.set(0.4, 0, 0);
+  head.castShadow = true;
+  group.add(head);
+
+  // Turtle shell pattern
+  const shellGeometry = new THREE.CylinderGeometry(0.25, 0.25, 0.1, 8);
+  const shellMaterial = new THREE.MeshLambertMaterial({
+    color: new THREE.Color(color).multiplyScalar(0.7),
+  });
+  const shell = new THREE.Mesh(shellGeometry, shellMaterial);
+  shell.position.y = 0.2;
+  shell.castShadow = true;
+  group.add(shell);
+
+  // Position and rotate
+  group.position.set(position.x, position.y + 0.2, position.z);
+  group.rotation.y = rotation;
+
+  // Add coordinate frame for turtle
+  const frameGroup = createCoordinateFrame(
+    name,
+    position,
+    { x: 0, y: 0, z: Math.sin(rotation / 2), w: Math.cos(rotation / 2) },
+    1
+  );
+  group.add(frameGroup);
+
+  scene.add(group);
+  turtles[name] = group;
+
+  return group;
+}
+
+function createCoordinateFrame(name, position, quaternion, scale = 1) {
+  const group = new THREE.Group();
+
+  // X axis (red)
+  const xGeometry = new THREE.CylinderGeometry(
+    0.02 * scale,
+    0.02 * scale,
+    1 * scale
+  );
+  const xMaterial = new THREE.MeshLambertMaterial({ color: 0xff0000 });
+  const xAxis = new THREE.Mesh(xGeometry, xMaterial);
+  xAxis.rotation.z = -Math.PI / 2;
+  xAxis.position.x = 0.5 * scale;
+  group.add(xAxis);
+
+  // X arrow
+  const xArrowGeometry = new THREE.ConeGeometry(0.05 * scale, 0.2 * scale, 8);
+  const xArrow = new THREE.Mesh(xArrowGeometry, xMaterial);
+  xArrow.rotation.z = -Math.PI / 2;
+  xArrow.position.x = 1 * scale;
+  group.add(xArrow);
+
+  // Y axis (green)
+  const yGeometry = new THREE.CylinderGeometry(
+    0.02 * scale,
+    0.02 * scale,
+    1 * scale
+  );
+  const yMaterial = new THREE.MeshLambertMaterial({ color: 0x00ff00 });
+  const yAxis = new THREE.Mesh(yGeometry, yMaterial);
+  yAxis.position.y = 0.5 * scale;
+  group.add(yAxis);
+
+  // Y arrow
+  const yArrowGeometry = new THREE.ConeGeometry(0.05 * scale, 0.2 * scale, 8);
+  const yArrow = new THREE.Mesh(yArrowGeometry, yMaterial);
+  yArrow.position.y = 1 * scale;
+  group.add(yArrow);
+
+  // Z axis (blue)
+  const zGeometry = new THREE.CylinderGeometry(
+    0.02 * scale,
+    0.02 * scale,
+    1 * scale
+  );
+  const zMaterial = new THREE.MeshLambertMaterial({ color: 0x0000ff });
+  const zAxis = new THREE.Mesh(zGeometry, zMaterial);
+  zAxis.rotation.x = Math.PI / 2;
+  zAxis.position.z = 0.5 * scale;
+  group.add(zAxis);
+
+  // Z arrow
+  const zArrowGeometry = new THREE.ConeGeometry(0.05 * scale, 0.2 * scale, 8);
+  const zArrow = new THREE.Mesh(zArrowGeometry, zMaterial);
+  zArrow.rotation.x = Math.PI / 2;
+  zArrow.position.z = 1 * scale;
+  group.add(zArrow);
+
+  // Position the frame
+  group.position.set(position.x, position.y, position.z);
+
+  // Apply rotation from quaternion
+  const euler = new THREE.Euler().setFromQuaternion(
+    new THREE.Quaternion(quaternion.x, quaternion.y, quaternion.z, quaternion.w)
+  );
+  group.rotation.copy(euler);
+
+  coordinateFrames[name] = group;
+  scene.add(group);
+
+  return group;
+}
+
+function createFrame(name, position, quaternion, color, scale = 0.5) {
+  const group = new THREE.Group();
+
+  // Frame marker (small sphere)
+  const geometry = new THREE.SphereGeometry(0.1 * scale, 8, 8);
+  const material = new THREE.MeshLambertMaterial({ color: color });
+  const marker = new THREE.Mesh(geometry, material);
+  marker.castShadow = true;
+  group.add(marker);
+
+  // Add coordinate axes
+  const frameAxes = createCoordinateFrame(
+    name + '_axes',
+    { x: 0, y: 0, z: 0 },
+    quaternion,
+    scale
+  );
+  group.add(frameAxes);
+
+  // Position the frame
+  group.position.set(position.x, position.y, position.z);
+
+  frames[name] = group;
+  scene.add(group);
+
+  return group;
+}
+
+function updateTurtlePose(name, pose) {
+  // Store the pose for following logic
+  turtlePoses[name] = pose;
+
+  if (!turtles[name]) {
+    // Create turtle if it doesn't exist
+    const color = name === 'turtle1' ? 0x00ff00 : 0x0088ff;
+    createTurtle(name, { x: pose.x, y: 0, z: pose.y }, pose.theta, color);
+  } else {
+    // Update existing turtle
+    turtles[name].position.set(pose.x, 0.2, pose.y);
+    turtles[name].rotation.y = pose.theta;
+  }
+
+  // Update coordinate frame
+  if (coordinateFrames[name]) {
+    coordinateFrames[name].position.set(pose.x, 0, pose.y);
+    coordinateFrames[name].rotation.y = pose.theta;
+  }
+}
+
+function updateFrame(name, transform) {
+  const position = transform.transform.translation;
+  const rotation = transform.transform.rotation;
+
+  if (!frames[name]) {
+    // Determine color based on frame name
+    let color = 0xffffff;
+    let scale = 0.5; // Default scale
+
+    if (name.includes('static')) {
+      color = 0xff4444;
+      scale = 1.0; // Bigger for static frame
+    } else if (name.includes('dynamic')) {
+      color = 0xff6600; // Bright orange color
+      scale = 3.0; // MUCH bigger for dynamic frame - very easy to see!
+      console.log('🟠 Creating DYNAMIC FRAME at:', position);
+    } else if (name.includes('fixed')) {
+      color = 0xaa44ff;
+      scale = 1.2; // Bigger for fixed frame
+    }
+
+    createFrame(name, position, rotation, color, scale);
+  } else {
+    // Update existing frame
+    frames[name].position.set(position.x, position.y, position.z);
+
+    // Log dynamic frame updates
+    if (name.includes('dynamic')) {
+      console.log(
+        '🟠 Dynamic frame updated at:',
+        position.x.toFixed(2),
+        position.y.toFixed(2),
+        position.z.toFixed(2)
+      );
+    }
+
+    const euler = new THREE.Euler().setFromQuaternion(
+      new THREE.Quaternion(rotation.x, rotation.y, rotation.z, rotation.w)
+    );
+    frames[name].rotation.copy(euler);
+  }
+}
+
+function setupEventListeners() {
+  // Control buttons
+  document.getElementById('spawn-turtle1').addEventListener('click', () => {
+    ipcRenderer.send('spawn-turtle-request', {
+      name: 'turtle1',
+      x: 5.5,
+      y: 5.5,
+      theta: 0,
+    });
+  });
+
+  document.getElementById('spawn-turtle2').addEventListener('click', () => {
+    ipcRenderer.send('spawn-turtle-request', {
+      name: 'turtle2',
+      x: 4.0,
+      y: 2.0,
+      theta: 0,
+    });
+  });
+
+  document.getElementById('stop-all').addEventListener('click', () => {
+    ipcRenderer.send('turtle-velocity-command', {
+      turtle: 'turtle1',
+      velocity: { linear: { x: 0, y: 0, z: 0 }, angular: { x: 0, y: 0, z: 0 } },
+    });
+    ipcRenderer.send('turtle-velocity-command', {
+      turtle: 'turtle2',
+      velocity: { linear: { x: 0, y: 0, z: 0 }, angular: { x: 0, y: 0, z: 0 } },
+    });
+  });
+
+  document.getElementById('start-demo').addEventListener('click', () => {
+    startDemo();
+  });
+
+  document.getElementById('reset-demo').addEventListener('click', () => {
+    resetDemo();
+  });
+
+  // Frame toggles
+  document.getElementById('toggle-static').addEventListener('click', () => {
+    toggleFrameVisibility('carrot1_static');
+  });
+
+  document.getElementById('toggle-dynamic').addEventListener('click', () => {
+    console.log('🔄 Dynamic Frame button clicked!');
+    console.log(
+      '🔍 Current dynamic frame visible:',
+      frames['carrot1_dynamic']
+        ? frames['carrot1_dynamic'].visible
+        : 'not created yet'
+    );
+    toggleFrameVisibility('carrot1_dynamic');
+  });
+
+  document.getElementById('toggle-fixed').addEventListener('click', () => {
+    toggleFrameVisibility('carrot1_fixed');
+  });
+}
+
+// Setup keyboard controls for turtle movement
+function setupKeyboardControls() {
+  // Track key state for WASD keys only
+  document.addEventListener('keydown', (event) => {
+    // Only handle WASD keys (case-insensitive)
+    const key = event.key.toLowerCase();
+    if (key in keyState) {
+      keyState[key] = true;
+      event.preventDefault();
+    }
+  });
+
+  document.addEventListener('keyup', (event) => {
+    // Only handle WASD keys (case-insensitive)
+    const key = event.key.toLowerCase();
+    if (key in keyState) {
+      keyState[key] = false;
+      event.preventDefault();
+    }
+  });
+
+  // Send movement commands based on key state
+  setInterval(() => {
+    if (demoState.rosConnected) {
+      sendTurtleCommand();
+    }
+  }, 100); // Send commands at 10Hz
+}
+
+// Send turtle movement command based on keyboard input
+function sendTurtleCommand() {
+  let linear_x = 0;
+  let angular_z = 0;
+  const speed = 0.8; // Linear speed - reduced from 2.0 for better control
+  const turn_speed = 0.6; // Angular speed - further reduced from 1.2 for precise rotation control
+
+  // Check for forward/backward movement (W/S keys only)
+  if (keyState.w) {
+    linear_x = speed;
+  } else if (keyState.s) {
+    linear_x = -speed;
+  }
+
+  // Check for rotation (A/D keys only)
+  if (keyState.a) {
+    angular_z = turn_speed;
+  } else if (keyState.d) {
+    angular_z = -turn_speed;
+  }
+
+  // Send command if any movement is detected
+  if (linear_x !== 0 || angular_z !== 0) {
+    ipcRenderer.send('turtle-cmd-vel', {
+      linear: { x: linear_x, y: 0.0, z: 0.0 },
+      angular: { x: 0.0, y: 0.0, z: angular_z },
+    });
+  }
+}
+
+function setupROSListeners() {
+  // Listen for ROS2 initialization status
+  ipcRenderer.on('ros-initialization-status', (event, data) => {
+    const loadingScreen = document.getElementById('loading-screen');
+    const loadingText = loadingScreen.querySelector('div:last-child');
+
+    switch (data.status) {
+      case 'initializing':
+        demoState.rosConnected = false;
+        loadingText.textContent = data.message;
+        break;
+      case 'progress':
+        demoState.rosConnected = false;
+        loadingText.textContent = data.message;
+        break;
+      case 'ready':
+        demoState.rosConnected = true;
+        demoState.activeNodes = 5;
+        loadingText.textContent = data.message;
+        // Hide loading screen after successful initialization
+        setTimeout(() => {
+          loadingScreen.classList.add('hidden');
+        }, 1000);
+        break;
+      case 'error':
+        demoState.rosConnected = false;
+        loadingText.textContent = data.message;
+        loadingText.style.color = '#ff4444';
+        break;
+    }
+    updateStatus();
+  });
+
+  // Listen for turtle pose updates
+  ipcRenderer.on('turtle-pose-update', (event, data) => {
+    updateTurtlePose(data.name, data.pose);
+    updateTransformList(data.transform);
+    demoState.turtlesimRunning = true;
+    updateStatus();
+  });
+
+  // Listen for TF transform updates
+  ipcRenderer.on('tf-transform-update', (event, transform) => {
+    updateTransformList(transform);
+  });
+
+  // Listen for static transform updates
+  ipcRenderer.on('static-transform-update', (event, transform) => {
+    updateFrame(transform.child_frame_id, transform);
+    updateTransformList(transform);
+  });
+
+  // Listen for dynamic transform updates
+  ipcRenderer.on('dynamic-transform-update', (event, transform) => {
+    updateFrame(transform.child_frame_id, transform);
+    updateTransformList(transform);
+  });
+
+  // Listen for fixed transform updates
+  ipcRenderer.on('fixed-transform-update', (event, transform) => {
+    updateFrame(transform.child_frame_id, transform);
+    updateTransformList(transform);
+  });
+
+  // Listen for turtle spawned events
+  ipcRenderer.on('turtle-spawned', (event, data) => {
+    console.log('Turtle spawned:', data);
+    updateStatus();
+  });
+
+  // Listen for follow requests
+  ipcRenderer.on('request-turtle-follow', (event) => {
+    // Implement turtle2 following turtle1 logic
+    if (turtlePoses['turtle1'] && turtlePoses['turtle2']) {
+      const turtle1Pose = turtlePoses['turtle1'];
+      const turtle2Pose = turtlePoses['turtle2'];
+
+      // Calculate distance and angle to turtle1
+      const dx = turtle1Pose.x - turtle2Pose.x;
+      const dy = turtle1Pose.y - turtle2Pose.y;
+      const distance = Math.sqrt(dx * dx + dy * dy);
+
+      // Calculate angle to target
+      const targetAngle = Math.atan2(dy, dx);
+      const currentAngle = turtle2Pose.theta;
+
+      // Calculate angular difference (handling wrap-around)
+      let angleDiff = targetAngle - currentAngle;
+      while (angleDiff > Math.PI) angleDiff -= 2 * Math.PI;
+      while (angleDiff < -Math.PI) angleDiff += 2 * Math.PI;
+
+      // Calculate velocities
+      const linearVel = Math.min(2.0 * distance, 2.0); // Max linear velocity of 2.0
+      const angularVel = 4.0 * angleDiff; // Proportional angular velocity
+
+      // Only move if there's significant distance
+      if (distance > 0.5) {
+        // Send velocity command to turtle2
+        ipcRenderer.send('turtle2-cmd-vel', {
+          linear: { x: linearVel, y: 0.0, z: 0.0 },
+          angular: { x: 0.0, y: 0.0, z: angularVel },
+        });
+
+        console.log(
+          `Turtle2 following: distance=${distance.toFixed(2)}, linear=${linearVel.toFixed(2)}, angular=${angularVel.toFixed(2)}`
+        );
+      } else {
+        // Stop turtle2 when close enough
+        ipcRenderer.send('turtle2-cmd-vel', {
+          linear: { x: 0.0, y: 0.0, z: 0.0 },
+          angular: { x: 0.0, y: 0.0, z: 0.0 },
+        });
+      }
+    }
+  });
+}
+function updateTransformList(transform) {
+  activeTransforms.set(transform.child_frame_id, {
+    ...transform,
+    lastUpdate: Date.now(),
+  });
+
+  const transformList = document.getElementById('transform-list');
+  transformList.innerHTML = '';
+
+  activeTransforms.forEach((tf, frameName) => {
+    const item = document.createElement('div');
+    item.className = 'transform-item';
+
+    const pos = tf.transform.translation;
+    const rot = tf.transform.rotation;
+
+    item.innerHTML = `
+      <div class="frame-name">${frameName}</div>
+      <div class="coordinates">
+        Pos: (${pos.x.toFixed(2)}, ${pos.y.toFixed(2)}, ${pos.z.toFixed(2)})<br>
+        Rot: (${rot.x.toFixed(3)}, ${rot.y.toFixed(3)}, ${rot.z.toFixed(3)}, ${rot.w.toFixed(3)})
+      </div>
+    `;
+
+    transformList.appendChild(item);
+  });
+
+  // Update active transforms count
+  document.getElementById('active-transforms').textContent =
+    activeTransforms.size;
+}
+
+function updateStatus() {
+  document.getElementById('ros-status').textContent = demoState.rosConnected
+    ? 'Connected'
+    : 'Connecting...';
+  document.getElementById('ros-status').className = demoState.rosConnected
+    ? 'status-value active'
+    : 'status-value';
+
+  document.getElementById('turtlesim-status').textContent =
+    demoState.turtlesimRunning ? 'Running' : 'Waiting...';
+  document.getElementById('turtlesim-status').className =
+    demoState.turtlesimRunning ? 'status-value active' : 'status-value';
+
+  document.getElementById('tf2-nodes-status').textContent =
+    `${demoState.activeNodes}/${demoState.totalNodes}`;
+}
+
+function startDemo() {
+  console.log('Starting turtle TF2 demo...');
+  demoState.rosConnected = true;
+  demoState.activeNodes = 5;
+  updateStatus();
+
+  // Create initial turtles
+  if (!turtles['turtle1']) {
+    createTurtle('turtle1', { x: 5.5, y: 0, z: 5.5 }, 0, 0x00ff00);
+  }
+}
+
+function resetDemo() {
+  console.log('Resetting demo...');
+
+  // Clear all turtles
+  Object.values(turtles).forEach((turtle) => {
+    scene.remove(turtle);
+  });
+  turtles = {};
+
+  // Clear all frames
+  Object.values(frames).forEach((frame) => {
+    scene.remove(frame);
+  });
+  frames = {};
+
+  // Clear coordinate frames (except world)
+  Object.entries(coordinateFrames).forEach(([name, frame]) => {
+    if (name !== 'world') {
+      scene.remove(frame);
+      delete coordinateFrames[name];
+    }
+  });
+
+  // Clear transforms
+  activeTransforms.clear();
+  document.getElementById('transform-list').innerHTML =
+    '<div class="transform-item"><div class="frame-name">No transforms detected</div><div class="coordinates">Waiting for TF2 data...</div></div>';
+
+  // Reset demo state
+  demoState.turtlesimRunning = false;
+  demoState.activeNodes = 0;
+  updateStatus();
+}
+
+function toggleFrameVisibility(frameName) {
+  console.log('🎯 Toggling frame:', frameName);
+  if (frames[frameName]) {
+    frames[frameName].visible = !frames[frameName].visible;
+    console.log(
+      '✅ Frame',
+      frameName,
+      'is now',
+      frames[frameName].visible ? 'VISIBLE' : 'HIDDEN'
+    );
+    console.log('📍 Frame position:', frames[frameName].position);
+  } else {
+    console.log('❌ Frame', frameName, 'does not exist yet!');
+    console.log('📋 Available frames:', Object.keys(frames));
+  }
+}
+
+function animate() {
+  requestAnimationFrame(animate);
+
+  // Update controls
+  controls.update();
+
+  // Render scene
+  renderer.render(scene, camera);
+}
+
+function onWindowResize() {
+  const container = document.getElementById('visualization-container');
+  camera.aspect = container.clientWidth / container.clientHeight;
+  camera.updateProjectionMatrix();
+  renderer.setSize(container.clientWidth, container.clientHeight);
+}
diff --git a/electron_demo/turtle_tf2/turtle-tf2-demo.gif b/electron_demo/turtle_tf2/turtle-tf2-demo.gif
new file mode 100644
index 00000000..5029b3c1
Binary files /dev/null and b/electron_demo/turtle_tf2/turtle-tf2-demo.gif differ
diff --git a/electron_demo/turtle_tf2/turtle-tf2-demo.png b/electron_demo/turtle_tf2/turtle-tf2-demo.png
new file mode 100644
index 00000000..e5565c51
Binary files /dev/null and b/electron_demo/turtle_tf2/turtle-tf2-demo.png differ