---
contentHash: sha256:2b8149474e0864e0dcc8749ba155d5de7f2f04c1a482db2ee24ab9ecdde4c60c
documentId: guide:for-agents-example-annotations
kind: guide
schemaVersion: 1
skenraVersion: 0.1.0-alpha.1
---
# Annotations

<a id="overview"></a>

## Overview

A live annotation is real DOM tracked at a world-space position (styled freely with CSS), paired with a stroked SVG-path spline as the elbow connector — the standard callout pattern.

Placement rules the scene demonstrates: a label that refers to a scene object is a live annotation positioned ABOVE it with anchor="bottom" (an annotation near y = 0 gets occluded by the ground). Reserve overlay annotations with a viewport-position-constraint for persistent HUD elements only.

Demonstrates: live annotation, world-space anchor, spline callout connector.

<a id="scene"></a>

## Scene

```sk
<sk-scene style="width: 100%; height: 420px;">
    <sk-camera-orbit-control fit-targets="auto" fit-margin="0.2"
        azimuth="25deg" elevation="20deg" orient-toward-pivot></sk-camera-orbit-control>
    <sk-perspective-camera focal-length="26"></sk-perspective-camera>
    <sk-directional-light intensity="1" p="70deg" h="30deg"></sk-directional-light>

    <sk-plain-material id="ground-mat" base-color="#3a3a3a"></sk-plain-material>
    <sk-plain-material id="subject-mat" base-color="#d8a24a"></sk-plain-material>
    <sk-plain-material id="callout-mat" base-color="#e8e8e8"></sk-plain-material>

    <sk-plane y="-1.2" width="12" height="12" orientation="+y" cull-mode="none">
        <sk-surface-paint material="#ground-mat"></sk-surface-paint>
    </sk-plane>

    <sk-sphere radius="1.1">
        <sk-surface-paint material="#subject-mat"></sk-surface-paint>
    </sk-sphere>

    <!-- A live annotation is real DOM tracked in world space; the elbow
         connector is a stroked spline from an SVG path. -->
    <sk-spline z="1.4">
        <sk-svg-spline-source coordinate-space="xy"
            path="M -3.2,2.4 L -3.2,1.2 Q -3.2,0.6 -2.6,0.6 L -1.8,0.6 Q -1.2,0.6 -1.2,0 L -1.2,-0.4"></sk-svg-spline-source>
        <sk-stroke-paint material="#callout-mat" width="1"></sk-stroke-paint>
    </sk-spline>

    <sk-live-annotation x="-3.2" y="2.4" z="1.4" anchor="bottom">
        <div style="background: rgba(30,30,30,0.85); color: white; padding: 4px 10px;
                    border-radius: 8px; font: 13px sans-serif; white-space: nowrap;">The hero sphere</div>
    </sk-live-annotation>
</sk-scene>
```

---

Related records: [`element:sk-camera-orbit-control`](elements/sk-camera-orbit-control.md), [`element:sk-directional-light`](elements/sk-directional-light.md), [`element:sk-live-annotation`](elements/sk-live-annotation.md), [`element:sk-perspective-camera`](elements/sk-perspective-camera.md), [`element:sk-plain-material`](elements/sk-plain-material.md), [`element:sk-plane`](elements/sk-plane.md), [`element:sk-scene`](elements/sk-scene.md), [`element:sk-sphere`](elements/sk-sphere.md), [`element:sk-spline`](elements/sk-spline.md), [`element:sk-stroke-paint`](elements/sk-stroke-paint.md), [`element:sk-surface-paint`](elements/sk-surface-paint.md), [`element:sk-svg-spline-source`](elements/sk-svg-spline-source.md), [`guide:for-agents`](guides/for-agents.md)