> ## Documentation Index
> Fetch the complete documentation index at: https://docs.altoura.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Set Instruction Animation Color & Reset Instruction Animation Color

> Customize the color of instruction animations

## Overview

**Instruction animations** are visual cues that guide learners on what to do — they show animated hands performing the required action (tap here, move this, rotate that). These are separate from the learner's actual hands in the scene.

Use **Set Instruction Animation Color** to change the instruction animation color for better visibility against different scene backgrounds. Use **Reset Instruction Animation Color** to restore the default.

## Understanding Instruction Animations

Instruction animations appear when:

* Showing the learner how to tap an object
* Demonstrating how to grab and move a component
* Indicating rotation or manipulation steps
* Providing gestural guidance without blocking the learner's view

Customizing the instruction animation color ensures visibility and helps distinguish instruction phases from practice phases.

## Set Instruction Animation Color

### When to Use

* **Improve visibility** — Change color to stand out against complex 3D scene backgrounds
* **Distinguish instructions from practice** — Use one color for demos, another for learner practice
* **Match training theme** — Align instruction animation color with your course branding
* **Emphasize critical steps** — Use standout colors for important demonstration steps

### Parameters

| Parameter | Type         | Required | Description                                                                   |
| --------- | ------------ | -------- | ----------------------------------------------------------------------------- |
| Color     | String (Hex) | Yes      | Hexadecimal color code (e.g., `"#FFFFFF"` for white, `"#FF00FF"` for magenta) |

### Example 1: White Instruction Hand

```
Action: Set Instruction Animation Color
Color: "#FFFFFF"
```

Instruction animations are white — useful for high-contrast visibility against dark backgrounds.

### Example 2: Yellow Instruction Hand

```
Action: Set Instruction Animation Color
Color: "#FFFF00"
```

Yellow instruction animations stand out brightly for clear instruction visibility.

### Example 3: Magenta Instruction Hand

```
Action: Set Instruction Animation Color
Color: "#FF00FF"
```

Magenta instruction animations provide a distinct color that contrasts with most scene backgrounds.

## Reset Instruction Animation Color

### When to Use

* Return to the default instruction hand color after a special color phase
* Reset between training modules or major sections
* Restore system defaults after custom coloring

### Parameters

| Parameter | Type | Required | Description                                                      |
| --------- | ---- | -------- | ---------------------------------------------------------------- |
| None      | —    | —        | No parameters. Resets to the default instruction animation color |

### Example

```
Action: Reset Instruction Animation Color
```

Instruction animations return to their default system color.

## Best Practices

<Steps>
  <Step title="Test against scene backgrounds">
    Preview your chosen color against the actual 3D scene background to ensure visibility.
  </Step>

  <Step title="Use high-contrast colors">
    Light colors (white, yellow) work well against dark scenes. Dark colors against light scenes.
  </Step>

  <Step title="Keep color consistent">
    Use the same instruction hand color throughout your training unless you have a specific reason to change.
  </Step>

  <Step title="Distinguish from learner hands">
    Use different colors for instruction animations vs. learner hands to avoid confusion.
  </Step>

  <Step title="Test on multiple devices">
    Verify color visibility on phone, tablet, and desktop screens.
  </Step>

  <Step title="Document your color scheme">
    If using multiple colors, explain what each means (e.g., "White hands = instruction, blue hands = learner").
  </Step>
</Steps>

## Common Patterns

### High-Visibility Instruction Hand

```
State: DemonstrationPhase
  onEntry:
    → Set Instruction Animation Color (Color: "#FFFF00")
    → Show Panel
        Title: "Watch the demonstration"
        Display Text: "Yellow hands show the correct procedure. Watch carefully."
        Billboard: true
    → Disable Self Teleport (Disabled: true)
    → Play animation "valve-turning-animation"

  onExit:
    → Reset Instruction Animation Color
    → Hide Panel
    → Disable Self Teleport (Disabled: false)
```

Instruction hands turn yellow for clear visibility during the demonstration. They reset to default when practice begins.

### Contrast-Based Coloring

```
State: DarkSceneInstruction
  onEntry:
    → Set Instruction Animation Color (Color: "#FFFFFF")
    → Show Text "White hands demonstrate the procedure against the dark background."

State: LightSceneInstruction
  onEntry:
    → Set Instruction Animation Color (Color: "#000000")
    → Show Text "Black hands demonstrate the procedure against the light background."
```

Different colors are used based on the scene background for optimal contrast.

### Instruction vs. Practice Distinction

```
State: InstructionDemo
  onEntry:
    → Set Instruction Animation Color (Color: "#00FF00")
    → Show Panel
        Title: "Instruction: Assembly Steps"
        Display Text: "Green hands show the correct assembly sequence."
        Billboard: true
    → Disable Self Teleport (Disabled: true)
    → Play animation "assembly-steps"

  onExit:
    → Reset Instruction Animation Color
    → Hide Panel

State: PracticeAssembly
  onEntry:
    → Show Panel
        Title: "Your Turn"
        Display Text: "Now you practice. No instruction animations — you're on your own!"
        Billboard: true
    → Disable Self Teleport (Disabled: false)
    → Set Interactable Objects (["component-1", "component-2"], true)

  onExit:
    → Hide Panel
```

Instructions use a colored instruction animation; practice uses no instructions, making the distinction clear.

## Color Selection Guide

| Color   | Hex Code  | Best For               | Notes                            |
| ------- | --------- | ---------------------- | -------------------------------- |
| White   | `#FFFFFF` | Dark/black scenes      | High contrast, professional look |
| Yellow  | `#FFFF00` | Most backgrounds       | Bright, attention-grabbing       |
| Cyan    | `#00FFFF` | Dark scenes            | Highly visible, tech aesthetic   |
| Magenta | `#FF00FF` | Neutral/varied scenes  | Distinctive, stands out          |
| Lime    | `#00FF00` | Dark scenes            | Bright green, natural look       |
| Orange  | `#FF9900` | Blue/cool-toned scenes | Warm, attention-getting          |

## Related Actions

* **Set Tether Line Color** — Customize tether line color (separate from instruction hands)
* **Set Hand Animation Color** — Customize learner hand representation color
* **Disable Self Teleport** — Lock the learner during instruction phases
* **Show Panel** — Display explanatory text about instruction animations