A stunning multi-section landing page for DreamScape, a fictional AI-powered dream visualization and analysis platform. This enhanced version features sophisticated GSAP animations that create an immersive, cinematic user experience.
DreamScape is an innovative startup concept that uses artificial intelligence to transform your dreams into breathtaking visual art. The platform analyzes dream patterns, unlocks subconscious insights, and creates stunning artwork from your nightly adventures.
- Dark cosmic theme with gradient backgrounds
- Glassmorphism effects with backdrop blur
- Multi-section layout with smooth transitions
- Modern typography using Inter and Space Grotesk fonts
- Responsive design that works on all devices
- Navbar slide-in animation from the top on page load
- Button hover pulse effects with scale and bounce animations
- Scroll-triggered fade-ins for all sections
- Hero section orchestrated animations with staggered timing
- Enhanced orb animations with continuous rotation and floating elements
- Stats counter animations with number counting effects
- Smooth scrolling navigation with GSAP ScrollToPlugin
- Parallax background effects for depth
- Interactive hover effects on feature cards
- Performance optimized animations with debouncing
- Semantic HTML5 structure for accessibility
- GSAP 3.12.2 for professional animations
- ScrollTrigger plugin for scroll-based animations
- ScrollToPlugin for smooth navigation
- Pure CSS animations as fallback
- Mobile-first responsive design
- Cross-browser compatibility
- Accessibility considerations (respects reduced motion preferences)
project/
├── index.html # Main HTML file with multi-section layout
├── styles.css # CSS styles and fallback animations
├── animations.js # GSAP animations and interactions
└── README.md # Project documentation
- Trigger: Page load
- Effect: Navbar slides in from top with logo and navigation links
- Timing: Staggered animation with logo appearing first
- Easing: Power2.out for smooth motion
- Trigger: Mouse hover on any button
- Effect: Subtle scale animation (1.05x) with smooth easing
- Purpose: Provides immediate visual feedback
- Performance: Optimized with GSAP for smooth 60fps
- Features Section: Header and cards fade in with stagger
- Testimonials Section: Cards animate in sequence
- CTA Section: Content slides up with opacity
- Trigger Points: 80% from top of viewport
- Reverse: Animations reverse when scrolling back up
- Badge: Slides in first
- Title Lines: Staggered fade-in with 0.2s delays
- Description: Smooth slide-up animation
- Actions: Buttons appear with timing
- Features: Hero features animate in sequence
- Orb: Dramatic scale and rotation entrance
- Stats: Final elements with counter animations
- Orb Rotation: Continuous 360° rotation over 60 seconds
- Floating Elements: Enhanced GSAP animations with yoyo effects
- Energy Lines: Pulsing animations with staggered delays
- Stats Counters: Number counting from 0 to target values
- Feature Cards: Hover scale effects with smooth transitions
- HTML5 - Semantic markup
- CSS3 - Styling and fallback animations
- GSAP 3.12.2 - Professional animation library
- ScrollTrigger - Scroll-based animation triggers
- ScrollToPlugin - Smooth scrolling navigation
- Google Fonts - Typography (Inter, Space Grotesk)
- CSS Grid & Flexbox - Layout
- Media Queries - Responsive design
The landing page is fully responsive with optimized animations:
- Desktop: Full animation suite with complex effects
- Tablet: Simplified animations with reduced stagger timing
- Mobile: Optimized performance with essential animations
- Reduced Motion: Respects user preferences for accessibility
- Push your code to a GitHub repository
- Connect your repository to Netlify
- Deploy automatically with continuous integration
- Install Vercel CLI:
npm i -g vercel - Run
vercelin your project directory - Follow the prompts to deploy
- Create a repository on GitHub
- Upload your files
- Enable GitHub Pages in repository settings
✅ Multi-section landing page design
✅ Navbar slide-in animation on page load
✅ Button hover pulse effects with GSAP
✅ Scroll-triggered fade-ins for 3+ sections
✅ GSAP animations (not just CSS)
✅ Logical timing and sequence
✅ Visual storytelling through animations
✅ Performance optimized with debouncing
✅ Accessibility considerations
✅ Responsive animations
✅ Smooth scrolling navigation
✅ Stats counter animations
✅ Interactive hover effects
The animations serve specific purposes:
- Navbar slide-in: Establishes brand presence and navigation
- Hero animations: Guides user attention through content hierarchy
- Scroll triggers: Reveals content progressively for engagement
- Button effects: Provides immediate feedback for interactions
- Orb animations: Creates visual interest and represents AI processing
- Stats counters: Builds credibility and trust
- Debounced scroll events for smooth performance
- Reduced motion support for accessibility
- Tab visibility detection to pause animations when not visible
- Mobile-specific optimizations with reduced animation complexity
- GSAP fallback for graceful degradation
This project is created for educational purposes as part of a web development learning exercise.
This is a demonstration project, but suggestions and feedback are welcome!
DreamScape - Where dreams become reality through the power of AI ✨