Skip to main content

Overview

Hand animations are the visual representation of the learner’s hands as they appear in the 3D scene. This is separate from instruction animations (the animated cues that show how to perform actions). Use Set Hand Animation Color to customize how the learner’s hands appear — useful for safety themes, branding, or visual distinction. Use Reset Hand Animation Color to restore the default color.

Understanding Hand Animations

Learner hand animations appear:
  • When the learner moves their hand/pointer to interact with objects
  • During object manipulation (grabbing, moving, rotating)
  • As visual feedback on where the learner is pointing or reaching
  • In AR/mixed reality scenarios where hand presence is important
Hand color customization helps align the learner’s virtual hands with your training context (e.g., making hands appear to wear gloves for safety trainings).

Set Hand Animation Color

When to Use

  • Safety training — Make hands appear gloved or protected for hazmat/safety procedures
  • Branding — Match learner hands to your training’s color scheme
  • Visual distinction — Use different hand colors for different learner personas or training scenarios
  • Accessibility — Improve visibility or contrast for learners with visual needs

Parameters

ParameterTypeRequiredDescription
ColorString (Hex)YesHexadecimal color code (e.g., "#FFA500" for orange, "#8B4513" for brown)

Example 1: Orange Gloved Hands

Action: Set Hand Animation Color
Color: "#FFA500"
Learner hands appear orange, suggesting protective gloves or orange safety wear.

Example 2: Blue Hands (Lab Coat Theme)

Action: Set Hand Animation Color
Color: "#0099FF"
Learner hands appear blue, aligning with a tech or lab coat theme.

Example 3: Brown Hands (Work Gloves)

Action: Set Hand Animation Color
Color: "#8B4513"
Learner hands appear brown, suggesting heavy-duty work gloves.

Reset Hand Animation Color

When to Use

  • Return to the default learner hand color after a custom phase
  • Reset between training modules or sections
  • Restore system defaults when custom coloring is no longer needed

Parameters

ParameterTypeRequiredDescription
NoneNo parameters. Resets to the default hand animation color

Example

Action: Reset Hand Animation Color
Learner hands return to their default system color.

Best Practices

1

Establish context early

Set the learner hand color early in the training to establish visual context.
2

Use colors that suggest safety

For safety trainings, use colors that imply protective equipment (orange, blue, yellow, brown).
3

Distinguish from instruction hands

Use different colors for learner hands vs. instruction animations to avoid confusion.
4

Keep consistent throughout

Maintain the same hand color throughout a training section unless you have a good reason to change.
5

Test visibility

Verify the hand color is visible against the 3D scene background on multiple devices.
6

Document the meaning

If using custom hand colors, explain what they represent (e.g., “Orange hands = safety gloves”).

Common Patterns

Safety Equipment Visualization

State: HazmatProcedure
  onEntry:
    → Set Hand Animation Color (Color: "#FFD700")
    → Show Panel
        Title: "Hazmat Handling"
        Display Text: "Your hands appear gloved (gold color) to indicate protective equipment required for this procedure."
        Billboard: true
    → Show Text "Always wear protective gloves when handling hazardous materials."

  onExit:
    → Hide Panel
    → Hide Text
    → Reset Hand Animation Color
Learner hands turn gold to represent required protective gloves. The color resets after the hazmat phase.

Lab Work Theme

State: LabExperiment
  onEntry:
    → Set Hand Animation Color (Color: "#0099FF")
    → Show Panel
        Title: "Lab Procedure"
        Display Text: "Your hands appear in blue, representing lab coat sleeves. Maintain sterile technique throughout."
        Billboard: true

  onExit:
    → Hide Panel
    → Reset Hand Animation Color
Blue hands suggest lab coat attire, reinforcing the laboratory context.

Heavy Equipment Operation

State: MachineryOperation
  onEntry:
    → Set Hand Animation Color (Color: "#8B4513")
    → Show Panel
        Title: "Heavy Machinery"
        Display Text: "Your hands appear in brown, representing heavy-duty work gloves. Grip firmly and stay alert."
        Billboard: true

  onExit:
    → Hide Panel
    → Reset Hand Animation Color
Brown hands suggest rugged work gloves suitable for machinery operation.

Multi-Step Procedure with Context Changes

State: UnprotectedInspection
  onEntry:
    → Reset Hand Animation Color
    → Show Text "Step 1: Visual inspection (hands unprotected for better precision)"

State: GlovedAssembly
  onEntry:
    → Set Hand Animation Color (Color: "#FFA500")
    → Show Text "Step 2: Assembly (hands gloved for safety)"

State: FinalVerification
  onEntry:
    → Reset Hand Animation Color
    → Show Text "Step 3: Verification (inspect for proper assembly)"
Hand color changes to reflect different safety requirements at each step.

Color Reference for Safety Themes

ColorHex CodeRepresentsUse Case
Orange#FFA500Safety gloves, PPEGeneral safety procedures
Blue#0099FFLab coat, medicalLab and medical work
Yellow#FFFF00High-visibilityHazard awareness, caution
Brown#8B4513Work glovesHeavy machinery, outdoor
Red#CC0000Protective wearHazmat, critical procedures
Green#00BB00Standard PPENormal safe operations
Purple#9933FFSpecialty glovesUnique/specialized work
White#F5F5F5Sterile/cleanMedical, clean room
  • Set Instruction Animation Color — Customize instruction animation color (separate from learner hands)
  • Set Tether Line Color — Customize the interaction line color
  • Set Hand Representation — Change the 3D model used for learner hands (beyond just color)
  • Show Text — Explain the hand color meaning to learners