A modern, interactive clone of gentlerain.ai featuring parallax scrolling, smooth animations, and responsive design.
This project replicates the key visual and interactive features of Gentlerain.ai, a platform for immersive skill-building through AI-powered role-play scenarios.
Duration: 3 Days | Marks: 100/100
- Multi-layer Parallax Scrolling - Smooth depth effect with layered images
- Watery Header Animation - Frosted glass effect navbar with smooth transitions
- Horizontal Scroll Section - GSAP-powered horizontal panel scrolling
- Flip Cards - Interactive cards with hover flip animations
- Rotating Text Animation - Dynamic text cycling (Practice, Upskill, Play, Improve)
- Sticky Navigation - Always-accessible navigation bar
- Responsive Design - Optimized for mobile, tablet, and desktop
- Scroll-Triggered Animations - Elements animate as they enter viewport
- Hero Section - Parallax background with animated content
- Features Section - Flip card showcase
- Product Section - Product cards with hover effects
- Horizontal Scroll Section - Interactive scrolling experience
- Business Section - Services showcase
- Footer - Copyright information
- GSAP 3.12.2 - Animation library for smooth, performant animations
- ScrollTrigger - GSAP plugin for scroll-triggered animations
- AOS (Animate On Scroll) - Library for scroll animations
- Rellax.js - Lightweight parallax engine
- HTML5 & CSS3 - Semantic markup and modern styling
- CSS3 Features: Backdrop filters, transforms, transitions, CSS Grid
- JavaScript ES6+: Arrow functions, template literals, event listeners
- Responsive Design: Mobile-first approach with media queries
gentle-rain-clone/
├── index.html # Main HTML file with semantic structure
├── styles/
│ └── style.css # All styling and responsive design
├── scripts/
│ └── main.js # Animation logic and interactivity
├── assets/
│ └── images/ # Parallax layers and visual assets
├── README.md # This file
└── .gitignore # Git ignore rules
- Modern web browser (Chrome, Firefox, Safari, Edge)
- Basic web server (for local testing)
- Git (optional, for version control)
-
Clone or download the repository
git clone <repository-url> cd gentle-rain-clone
-
Start a local server
# Using Python 3 python -m http.server 8000 # Using Python 2 python -m SimpleHTTPServer 8000 # Using Node.js (with http-server) npx http-server # Using VS Code Live Server extension # Right-click index.html > Open with Live Server
-
Open in browser
- Navigate to
http://localhost:8000 - Or use your preferred local server port
- Navigate to
- Semantic HTML5 structure
- External CDN links for GSAP, ScrollTrigger, AOS, and Rellax
- Organized sections with proper accessibility attributes
- Data attributes for animation configuration
- 1000+ lines of organized, production-ready CSS
- Mobile-first responsive design
- Smooth transitions and animations
- Backdrop filter effects for modern browser support
- CSS Grid and Flexbox layouts
- Media queries for screen sizes: 768px and below
- 80+ lines of optimized JavaScript
- AOS initialization with custom settings
- Rellax parallax engine setup
- GSAP ScrollTrigger horizontal scroll implementation
- Rotating text animation with smooth easing
- Smooth scroll behavior for navigation links
- Proper event cleanup and memory management
- Uses Rellax.js for smooth, GPU-accelerated parallax
- Three layers with different speed values (-3, -2, -1)
- Creates depth illusion as user scrolls
- AOS (Animate On Scroll) triggers animations when elements enter viewport
- Fade-up, fade-down animations with staggered delays
- Smooth easing for natural motion
- GSAP animates container horizontally as page scrolls vertically
- Pinned section keeps scroll area fixed during animation
- Smooth scrubbing synced with scroll position
- Cycles through 4 words every 2.5 seconds
- Smooth fade and translate animations
- GSAP's power easing for natural feel
- Desktop: 768px and above - Full features enabled
- Mobile: Below 768px - Optimized layout and touch-friendly
- Tablet: Intermediate scaling for mid-range devices
- Reduced font sizes for better readability
- Adjusted padding and margins for smaller screens
- Optimized parallax opacity for mobile performance
- Horizontal scroll section height reduced on mobile
- Touch-friendly interactive elements with sufficient spacing
| Browser | Support | Notes |
|---|---|---|
| Chrome | ✅ Full | Best performance |
| Firefox | ✅ Full | Excellent support |
| Safari | ✅ Full | Minor backdrop filter differences |
| Edge | ✅ Full | Chromium-based, full support |
| Mobile Safari | ✅ Good | Limited parallax on older devices |
- GPU Acceleration - Using
transformandopacityfor animations - Lazy Loading - AOS delays animations until elements are visible
- Passive Event Listeners - Smooth scrolling without blocking
- Minified External Libraries - CDN-hosted production builds
- Efficient CSS Selectors - Class-based targeting for fast DOM queries
- GSAP ScrollTrigger - Optimized scroll-based calculations
GitHub Copilot (Claude Haiku 4.5) - Used for:
- Code structure optimization and best practices
- CSS animation refinement and responsive design patterns
- JavaScript error handling and performance enhancements
- README documentation and project structure guidance
- HTML semantic improvements and accessibility features
- Code Review & Optimization - Refined GSAP animation timing and easing
- Bug Fixes - Fixed duplicate navbar headers and HTML structure issues
- CSS Enhancements - Added backdrop filter effects and modern animations
- Documentation - Generated comprehensive README and code comments
- Mobile Optimization - Responsive breakpoints and touch-friendly adjustments
- GSAP 3.12.2 - GreenSock Animation Platform (commercial license)
- ScrollTrigger - GSAP plugin included in animation library
- AOS Library - Animate On Scroll library
- Rellax.js - Lightweight parallax library
- CDN Resources - All libraries loaded from trusted CDNs
- HTML validates with no errors
- CSS is responsive across breakpoints
- JavaScript animations work smoothly
- Parallax scrolling functions correctly
- Flip cards hover effects responsive
- Rotating text animates properly
- Horizontal scroll section functions
- Navigation links smooth scroll
- Mobile layout optimized
- Cross-browser compatibility verified
- Parallax images must be provided in
assets/images/folder - Requires JavaScript enabled for all animations
- Some animations may perform differently on very old browsers
- Dark mode support
- Advanced analytics tracking
- Performance monitoring
- Additional animation effects
- Accessibility ARIA labels expansion
- Service worker for offline support
🌐 Live Website: View Live Demo
📹 Screen Recording: Watch Demo Video
The screen recording showcases:
- Parallax scrolling animation
- Flip card hover effects
- Horizontal scroll section
- Sticky navigation
- Responsive mobile design
git add .
git commit -m "Deploy Gentlerain clone"
git push origin mainThen enable GitHub Pages in repository settings (main branch, / root).
# Using Netlify CLI
netlify deploy --prod
# Or drag and drop folder to Netlify# Using Vercel CLI
vercel deploy --prod- Original Concept - Gentlerain.ai
- 360Learning - Original platform provider
- GreenSock - GSAP animation library creators
- AOS Library - Animate On Scroll library
- Rellax - Parallax library creators
This project is created for educational and assignment purposes. All external libraries retain their original licenses.
For issues, questions, or suggestions:
- Check the code comments for implementation details
- Review library documentation:
✅ HTML Structure - 5+ sections with semantic markup ✅ CSS Styling - 1000+ lines of organized, responsive CSS ✅ JavaScript - Modern ES6+ with GSAP, AOS, and Rellax ✅ Animations - 2+ parallax effects, scroll triggers, flip cards ✅ Responsiveness - Mobile-first design with optimized layouts ✅ Documentation - Comprehensive README with AI disclosure ✅ Code Quality - Clean, commented, production-ready code
Last Updated: January 18, 2026 Status: Complete & Production Ready ✅