62. 제스처 힌트 오버레이 Design gesture education overlays: **Overlay Container**: - Full screen semi-transparent - Dark: rgba(0,0,0,0.8) - Spotlights on relevant UI areas **Spotlight Effect**: - Cut-out circle/rect on overlay - Exposes actual UI beneath - Border or glow around cut-out **Gesture Indicator**: - Animated hand/finger icon - Shows the gesture motion - Swipe: finger moves across - Tap: finger presses with ripple - Long press: finger holds with rings **Text Instruction**: - Brief: "Swipe left to delete" - Position: near gesture area - Background: contrast pill - Font: 16px, readable **Multi-step Tutorial**: - Sequential gestures - Next button or auto-advance - Progress dots - Skip all option **Animation Details**: - Hand appears, performs gesture - Loops 2-3 times - Subtle fade between loops - Interactive elements pulse **Dismissal**: - "Got it" button - Tap anywhere to dismiss - Complete the gesture to dismiss **Trigger Conditions**: - First-time feature use - After update with new features - Manual "Help" menu access **Remember Dismissal**: - Don't show again toggle - Store in user preferences - Reset in settings **Gesture Types to Show**: - Swipe actions (delete, archive) - Pull to refresh - Pinch to zoom - Double-tap to like - Long-press for options Tech: React Native + Reanimated + react-native-svg (for spotlight)