🏎️ Epic Hero Landing Animation - Implementation Guide

Overview

This implementation creates a jaw-dropping, F1-inspired landing page animation for Vansh Gupta’s website, featuring:

• Grid Convergence Effect: Animated grid lines that converge on the hero name
• Particle Explosion System: Dynamic particle bursts using Canvas API
• Telemetry Data Bars: F1-style data visualization bars
• Glitch Effects: Cyberpunk-inspired glitch animations
• Holographic Scanner: Sci-fi scanning overlay
• 3D Perspective Shifts: Mouse-responsive 3D transforms
• Responsive Design: Optimized for both desktop and mobile

Files Created/Modified

New Files

1. assets/js/hero-animation.js (611 lines)
   • Main animation engine
   • Particle system with Canvas API
   • Grid convergence with SVG
   • Telemetry bars animation
   • Glitch and holographic effects
   • Mobile touch interactions
   • Scroll-triggered parallax
2. _sass/_epic-hero.scss (641 lines)
   • Epic hero section styles
   • Corner bracket animations
   • Scanline overlay effects
   • Data point telemetry displays
   • Scroll indicator animations
   • Mobile-specific optimizations
   • Reduced motion support

Modified Files

1. _layouts/home.html
   • Enhanced hero section structure
   • Added corner brackets
   • Added scanlines overlay
   • Added data points section
   • Added scroll indicator
2. assets/css/main.scss
   • Imported epic-hero styles
3. _includes/scripts.html
   • Added hero-animation.js script
4. _sass/_mobile.scss
   • Critical mobile fixes for hero name visibility
   • Hero section mobile layout
   • Data points mobile optimization
   • Touch-friendly sizing

Features Breakdown

1. Grid Convergence System

• Desktop: 30 animated grid lines
• Mobile: 15 lines (performance optimized)
• Lines converge to center during intro
• Smooth fade-in/fade-out transitions
• Uses SVG for crisp rendering

2. Particle Explosion

• Desktop: 80 particles
• Mobile: 40 particles (performance optimized)
• Canvas-based rendering
• Multi-color particles (neon lime, cyan, amber)
• Radial explosion pattern
• Life-decay system

3. Telemetry Bars

• Desktop: 16 animated bars
• Mobile: 8 bars
• Random positioning on screen edges
• Synchronized animation timing
• F1-inspired color scheme

4. Hero Name Animation

• Enhanced GSAP timeline
• Character-by-character split animation
• 3D perspective on mouse move (desktop only)
• Pulsing glow effect
• Glitch burst effects
• Metallic gradient shimmer
• Touch-responsive scaling (mobile)

5. Data Points Display

• Live telemetry-style metrics
• Hover lift effects
• Floating animation
• Glass morphism design
• Responsive grid layout

6. Visual Enhancements

• Corner brackets with F1 aesthetic
• Scanline overlay (CRT effect)
• Scroll indicator with animated line
• Holographic scanner sweep
• Depth fog and atmosphere

Mobile Optimizations

Critical Fixes

1. Hero Name Visibility: Force display with multiple fallbacks
2. Touch Interactions: Custom touch handlers for scaling
3. Performance: Reduced particle counts and simplified animations
4. Layout: Flexbox-based responsive layout
5. Typography: Optimal font sizing with clamp()

Mobile-Specific Features

• Simplified grid animations
• Reduced particle counts
• Touch-to-scale interaction
• Optimized corner brackets
• Safe area insets for notched devices

Browser Support

Tested Features

• ✅ Chrome/Edge (desktop & mobile)
• ✅ Firefox (desktop & mobile)
• ✅ Safari (desktop & mobile)
• ✅ iOS Safari (iPhone/iPad)
• ✅ Android Chrome

Fallbacks

• Reduced motion preference respected
• JavaScript disabled fallback
• Gradient fallback colors
• Canvas/SVG feature detection

Performance Optimizations

1. GPU Acceleration
   • transform: translateZ(0) on animated elements
   • will-change properties (auto-removed after animation)
   • backface-visibility: hidden
2. Animation Throttling
   • RequestAnimationFrame for smooth 60fps
   • GSAP ticker for synchronized animations
   • Lenis smooth scroll optimization
3. Mobile Optimizations
   • Reduced particle counts (50% reduction)
   • Fewer grid lines
   • Simplified effects
   • Touch-optimized interactions
4. Lazy Loading
   • Effects only initialize on hero section
   • Scroll effects use IntersectionObserver
   • Cleanup on page unload

Accessibility

Motion Preferences

@media (prefers-reduced-motion: reduce) {
  /* All animations disabled */
  /* Immediate state transitions */
  /* Hero name always visible */
}

Screen Readers

• Proper ARIA labels
• Semantic HTML structure
• Keyboard navigation support
• Focus indicators

Color Contrast

• WCAG AA compliant
• High contrast text shadows
• Fallback colors for gradients

Testing Checklist

Desktop Testing

• Chrome - Grid convergence works
• Chrome - Particle explosion visible
• Chrome - Telemetry bars animate
• Chrome - Hero name animates smoothly
• Chrome - Mouse 3D effect works
• Chrome - Glitch effects trigger
• Firefox - All animations work
• Safari - Gradient text renders
• Edge - No performance issues

Mobile Testing

• iOS Safari - Hero name shows immediately
• iOS Safari - Touch scaling works
• Android Chrome - All effects visible
• Mobile - No horizontal scroll
• Mobile - Data points layout correctly
• Mobile - Scroll indicator visible
• Tablet - Responsive breakpoints work

Performance Testing

• Desktop - 60fps maintained
• Mobile - No jank on scroll
• Low-end devices - Graceful degradation
• Network - Assets load quickly

Accessibility Testing

• Reduced motion preference works
• Screen reader announces content
• Keyboard navigation functional
• Focus indicators visible
• Color contrast passes WCAG AA

Animation Timeline

0.0s - Page load
0.2s - Corner brackets fade in
0.3s - Grid convergence starts
0.5s - Telemetry bars appear
1.5s - Grid fades out
1.8s - Hero name dramatic entrance
2.0s - Holographic scanner sweep
2.5s - Glitch effects burst
3.0s - Data points fade in
3.0s - Scroll indicator appears
3.0s - Continuous pulsing effects begin

Customization

Colors

Edit _sass/_variables.scss:

$accent-color: #9bff1f; // Neon lime
$accent-color-strong: #63ff9d; // Cyan
$terminal-amber: #ffd86b; // Amber

Animation Speed

Edit assets/js/hero-animation.js:

// Grid convergence duration
duration: 1.2

// Particle life decay
decay: 0.01

// Glitch burst count
for (let i = 0; i < 3; i++)

Particle Count

const particleCount = isMobile ? 40 : 80;

Troubleshooting

Hero Name Not Showing

1. Check browser console for errors
2. Verify GSAP and Three.js loaded
3. Check motion-ready class on body
4. Verify mobile CSS overrides

Animations Not Smooth

1. Check GPU acceleration enabled
2. Reduce particle counts
3. Disable telemetry bars on mobile
4. Check for CSS conflicts

Mobile Performance Issues

1. Reduce particle counts further
2. Disable 3D effects
3. Simplify grid animations
4. Remove holographic scanner

Future Enhancements

Potential Additions

1. WebGL Shaders: Custom fragment shaders for effects
2. Sound Design: Subtle audio cues (muted by default)
3. Data Fetching: Live stats from GitHub API
4. Theme Switching: Dark/light mode toggle
5. Easter Eggs: Hidden interactions
6. Performance Monitor: FPS counter for debugging

Advanced Features

1. Track Outline: SVG circuit path animation
2. 3D Vehicle Model: GLTF car/helmet with Three.js
3. Split-Flap Display: Retro flip animation for numbers
4. Noise Texture: Animated grain overlay
5. Motion Path: GSAP MotionPath for curved animations

Credits

Design Inspiration: Lando Norris Official Website Animation Libraries: GSAP, Three.js, Lenis Implementation: Custom code for Vansh Gupta’s portfolio Testing: Cross-browser and cross-device validation

Support

For issues or questions:

1. Check browser console for errors
2. Verify all dependencies loaded
3. Test with reduced motion off
4. Review mobile CSS overrides
5. Check network for asset loading

Version: 2.0.0
Last Updated: November 2025
Status: ✅ Production Ready