Skip to content

Conversation

@uthem150
Copy link
Contributor

Summary

This PR implements mobile touch support for the Cubes component, addressing the feature request to provide consistent cross-device interaction.

solve.mp4

Changes Made

  • Added dedicated touch event handlers (touchmove, touchstart, touchend)
  • Enhanced click handler to support both mouse and touch events
  • Implemented proper touch coordinate mapping for tilt interactions
  • Added preventDefault to avoid unwanted scroll behavior during touch
  • Applied changes consistently across all 4 component variants

Technical Implementation

  • Touch Events: Maps touch coordinates to existing tilt logic for seamless mobile interaction
  • Backward Compatibility: All existing mouse functionality remains unchanged
  • Cross-Variant Support: Applied to JS/TS + CSS/Tailwind versions
  • Memory Management: Proper event listener cleanup to prevent leaks

Files Modified

  • src/content/Animations/Cubes/Cubes.jsx (JS + CSS)
  • src/tailwind/Animations/Cubes/Cubes.jsx (JS + Tailwind)
  • src/ts-default/Animations/Cubes/Cubes.tsx (TS + CSS)
  • src/ts-tailwind/Animations/Cubes/Cubes.tsx (TS + Tailwind)

Testing

  • ✅ Desktop mouse interaction: Unchanged and working perfectly
  • ✅ Mobile touch interaction: Smooth and responsive
  • ✅ No console errors or performance issues detected

Implements #387

Type of Change

  • New feature (non-breaking change which adds functionality)
  • Improves existing functionality without breaking changes

@DavidHDev DavidHDev merged commit 0686401 into DavidHDev:main Aug 13, 2025
@uthem150 uthem150 deleted the feat/cubes-mobile-touch-support branch August 14, 2025 10:01
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants