Swipe Animation Controller

Build a React component that displays visual feedback during swipe gestures, with special handling for the start of each swipe gesture.

Requirements

Create a SwipeBox component that:

1. Renders a colored box (200px × 200px) that responds to touch and mouse swipe gestures
2. Displays the current swipe displacement (X and Y coordinates) as text inside the box
3. Changes the box color to indicate swipe state:
   • Default state: light gray background
   • During active swipe: light blue background
   • Returns to gray when swipe completes
4. Captures and displays the initial touch position when a swipe begins
5. Shows a "NEW SWIPE" indicator briefly (visible only during the first event of each swipe sequence)

The component should track and display:

• Current displacement from start position (deltaX, deltaY)
• Initial starting coordinates of the current/last swipe
• A visual indicator that appears only on the first event of each new swipe

Test Cases

• When a user begins swiping on the box, the "NEW SWIPE" indicator appears during the first movement event @test
• As the user continues swiping, the "NEW SWIPE" indicator disappears but displacement values continue updating @test
• When the swipe ends and a new swipe begins, the "NEW SWIPE" indicator reappears for the first event only @test
• The initial position is captured and displayed when each swipe starts @test

Implementation

@generates

API

import React from 'react';

/**
 * A component that visualizes swipe gestures with special handling for the first event.
 *
 * Displays:
 * - Current swipe displacement (deltaX, deltaY)
 * - Initial touch position
 * - Visual indicator for the first event in each swipe sequence
 * - Color changes based on swipe state
 */
export function SwipeBox(): React.JSX.Element;

Dependencies { .dependencies }

react { .dependency }

Provides the React framework for building the component.

react-swipeable { .dependency }

Provides swipe gesture detection and event handling capabilities.