This guide will walk you through all the features, from setting up formations to creating and recording complex animated plays.

1. The Interface

• The Pitch: Your main workspace for setting up players and designing plays.
• The Control Panel: On the left (or in a slide-out menu on mobile), this is where you'll find all your tools.
• The Timeline Bar: This control bar at the top of the pitch allows you to manage animation frames and playback.

2. Player & Ball Controls

• Add Player: Click "Add Player". A pop-up will ask for the player's number and team.
• Add Opponent Team: Instantly places a full starting lineup for the opposition.
• Move a Player: Click and drag any player to a new position.
• Rotate a Player: Hold down the `Ctrl` key (or `Cmd` on Mac) and use the **mouse scroll wheel** while hovering over a player to change the direction they are facing.
• Give a Player the Ball:
  • Desktop: Right-click on a player to attach the ball. It will follow their position and rotation. Right-click again to detach.
  • Mobile/Touch: Tap a player, then tap the 🧲 (magnet) icon that appears above them to attach/detach the ball.
• Delete an Object: Click the red "Delete" button. Your cursor will change. Click any object to remove it. Click "Delete" again to turn off this mode.

3. Drawing Tools

• Add an Object: Use the icon buttons in the "Edit" panel to add Text, Arrows, Squares, or Cones to the pitch.
• Select: Click on an object to select it.
• Move: Click and drag the main body of the object to move it.
• Resize/Rotate: For arrows and squares, drag the **white square handle** to resize or the **green circle handle** to rotate.

4. Creating an Animation

• The Timeline Slider: Drag the slider to switch between animation frames.
• Adding a Frame: Position your players, then click the `+` button on the timeline. This creates a new frame that is a copy of the current one.
• Creating Movement: Move a player or object on the new frame. The animator will automatically create the movement *between* the previous frame and the new one.
• Updating Positions (Propagation): If you move a player on an *earlier* frame (e.g., Frame 1), a pop-up will ask if you want to apply this position change to all future frames. This is useful for correcting a mistake without redoing the entire animation.

5. Playback & Recording

• Play/Pause: Click the ► (Play) button to watch your animation.
• Playback Speed: Click the "1x" button to cycle through different playback speeds.
• Record a Video: Click the red ● (Record) button. The animation will play, and a video file (`.webm`) will be automatically downloaded. All objects, including cones and arrows, will appear in the final recording.

6. Saving & Loading Your Work

• Save a Template: Saves the positions of all objects on your *current frame*. Use this for formations or set-piece defenses.
• Save a Play: Saves the *entire animation* across all frames. Use this for penalty corner routines or pressing drills.
• Load: Use the dropdown menus to load your saved work back onto the pitch.