I added three images in folder hero section images. i want the attached image representing my hero section, the image in it to be adjusted with a hero section containing the three images. The layout of the hero section should fit the horizontal distance of the webpage and minimize the the rounded border frame coners to  be more square like to avoid the design looking like ai generated. I want to enhance my existing images with a continuous animation and a curtain-style folding transition.

Core Goal:
Create a visually rich, multi-fold curtain animation with a domino effect that transitions between my existing images, while keeping the website fast and lightweight.

1. Use Existing Elements Only
Target my images using a class (e.g., .hero-image).
Do not generate new layouts or placeholder images.
Code must integrate into an existing site without breaking layout or performance.
2. Lightweight Continuous Animation (Idle State)
Add a subtle, continuous motion (e.g., slight scale or gentle shifting).
Keep it minimal and GPU-friendly (use transform and opacity only).
Avoid heavy repaint or layout-triggering properties.
3. Curtain Fold + Domino Effect (Hover Interaction)
On hover:
The current image splits into multiple vertical strips (folds).
Each strip animates sequentially (domino effect with stagger).
Use 3D transforms (rotateY, skew, translateZ) with perspective for depth.
The folds reveal the next image underneath.
4. Continuous Motion (Not Static)
The animation should keep running even after hover.
It should cycle smoothly between images over time.
Mouse movement can influence direction, but animation should not depend entirely on it.
5. Performance Optimization (Critical)
Use GSAP for efficient animations (with stagger and timelines).
Animate only:
transform
opacity
Avoid:
top, left, width, height animations
large DOM reflows
Limit number of folds (e.g., 6–10 max) to reduce DOM load.
Use will-change: transform only where necessary.
Lazy initialize the animation (only when hero is in viewport).
Pause or reduce animation on inactive tabs (use visibilitychange).
Optimize images (compressed, modern formats like WebP).
6. Mobile Optimization
Disable heavy fold animation on low-powered devices.
Use a simpler fade/slide transition for mobile.
Enable touch interaction (tap to trigger).
7. Clean Integration
Provide modular JavaScript that can be dropped into my site.
Clearly show:
where to add classes
how to initialize the animation
how to tweak speed, folds, and performance settings
Output Requirements
Clean, well-commented code
No unnecessary libraries beyond GSAP
Performance-first approach (fast load, smooth animation)