# Pointcloud Animation

> **Warning**: This example is still under construction.

This example demonstrates how to animate point clouds using Vuer's `TimelineControls`
and the global `app.update` method. It loads a 3D mesh and pre-computed trajectory data,
then updates point cloud positions frame-by-frame based on timeline events.

Key concepts:
- Using `app.update` to broadcast updates to all connected clients
- Pre-populating the scene with initial components via `Set`
- Handling `TIMELINE_STEP` events to synchronize animations
- Displaying multiple point clouds with different colors

## Code Example

```python
import asyncio

import numpy as np
import open3d as o3d

from vuer import Vuer
from vuer.events import ClientEvent, Set
from vuer.schemas import DefaultScene, PointCloud, TimelineControls, TriMesh

mesh = o3d.io.read_triangle_mesh("assets/suzanne.ply")
vertices = np.asarray(mesh.vertices)
faces = np.asarray(mesh.triangles)

app = Vuer()

infill = np.load("assets/suzanne_infill_good_traj.npy")
surface_infill = np.load("assets/suzanne_surface_fill_only.npy")

@app.spawn
async def main(proxy):
    proxy @ Set(
        DefaultScene(
            TriMesh(vertices=vertices, faces=faces, position=[0, 0, 0], wireframe=True),
            PointCloud(key="surface", vertices=vertices, size=0.001),
            PointCloud(key="infill", vertices=vertices, size=0.001),
        ),
    )

    while True:
        await asyncio.sleep(1.0)

async def frame_handle(e: ClientEvent, _):
    print("frame handle")

    step = e.value["step"]
    step = step % len(infill)

    app.update @ [
        TimelineControls(end=len(infill), step=step, speed=1.0, paused=False, key="timeline"),
        PointCloud(key="infill", vertices=infill[step], position=[0, 0, 0], color="red"),
        PointCloud(
            key="surface",
            vertices=surface_infill[step],
            position=[0.8, 0, 0],
            color="green",
        ),
    ]
    print("updated the scene")


app.add_handler("TIMELINE_STEP", frame_handle)
app.start()
```