Skip to content

Latest commit

 

History

History
332 lines (268 loc) · 8.14 KB

IRIS_Loading_Page_README.md

File metadata and controls

332 lines (268 loc) · 8.14 KB

IRIS Robotics Club - Futuristic Loading Page

A stunning, animated loading page built with Arwes UI framework, featuring a prominent iris/eye animation perfect for the IRIS Robotics Club's facial analysis platform.

🎯 Features

Visual Design

  • Animated Iris/Eye: Central eye graphic with realistic dilation and scanning effects
  • Cyberpunk Aesthetic: Arwes-powered sci-fi styling with cyan/blue color scheme
  • Glowing Effects: Dynamic glow animations synchronized with iris movements
  • Scanning Elements: Grid overlays and particle effects for tech atmosphere
  • Responsive Design: Optimized for desktop, tablet, and mobile displays

Animation System

  • 60fps Smooth Animations: Hardware-accelerated CSS and Framer Motion
  • Iris Dilation: Eye opens/closes based on loading progress
  • Scanning Lines: Rotating scan lines around the iris
  • Progress Visualization: Real-time progress bar with glowing effects
  • Text Transitions: Smooth fade-in/out for loading stage messages
  • System Status: Animated indicators for different system components

Audio Integration

  • Arwes Sound System: Built-in sci-fi sound effects
  • Loading Sounds: Startup, scanning, and completion audio
  • Interactive Feedback: Audio cues for different loading stages
  • Volume Control: Configurable audio levels

🚀 Quick Start

Installation

# Install required dependencies
npm install @arwes/core @arwes/sounds @arwes/animated @arwes/react-animator
npm install @arwes/react-bgs framer-motion howler

Basic Usage

import { IrisLoadingPage } from '@/components/loading/iris-loading-page'

function App() {
  const [isLoading, setIsLoading] = useState(true)

  return isLoading ? (
    <IrisLoadingPage
      onLoadingComplete={() => setIsLoading(false)}
      duration={5000} // 5 seconds
    />
  ) : (
    <YourMainApp />
  )
}

Custom Loading Stages

const customStages = [
  'Initializing IRIS Neural Networks...',
  'Loading Computer Vision Models...',
  'Calibrating Camera Systems...',
  'Preparing Facial Recognition...',
  'System Ready'
]

<IrisLoadingPage
  loadingStages={customStages}
  duration={8000}
  onLoadingComplete={handleComplete}
/>

🎨 Customization

Theme Configuration

// Custom Arwes theme for your club colors
const customTheme = createArwesTheme({
  colors: {
    primary: { main: '#00F8FF' },    // Cyan
    secondary: { main: '#0080FF' },   // Electric Blue
    success: { main: '#00FF41' },     // Neon Green
  }
})

Animation Timing

<IrisLoadingPage
  duration={6000}           // Total loading time
  irisAnimationSpeed={2}    // Iris dilation speed
  scanningSpeed={4}         // Scanning line speed
  glowIntensity={0.8}       // Glow effect intensity
/>

Sound Customization

const soundSettings = {
  startup: '/sounds/custom-startup.mp3',
  scanning: '/sounds/custom-scan.mp3',
  complete: '/sounds/custom-complete.mp3'
}

<IrisLoadingPage
  soundSettings={soundSettings}
  volume={0.5}
/>

🔧 Advanced Features

Real Progress Tracking

function RealProgressExample() {
  const [progress, setProgress] = useState(0)
  
  useEffect(() => {
    // Track actual loading progress
    const loadModels = async () => {
      setProgress(25)  // Models loaded
      await initCamera()
      setProgress(50)  // Camera ready
      await connectBackend()
      setProgress(75)  // Backend connected
      await finalizeSystem()
      setProgress(100) // Complete
    }
    
    loadModels()
  }, [])

  return (
    <IrisLoadingPage
      progress={progress}
      realTimeProgress={true}
    />
  )
}

Error Handling

<IrisLoadingPage
  onError={(error) => {
    console.error('Loading failed:', error)
    // Show error state
  }}
  retryOnError={true}
  maxRetries={3}
/>

Performance Optimization

<IrisLoadingPage
  reducedMotion={true}      // Respect user preferences
  lowPowerMode={false}      // Disable for better performance
  preloadAssets={true}      // Preload sounds and images
/>

📱 Responsive Behavior

Desktop (1920x1080+)

  • Full-size iris animation (256x256px)
  • Complete particle effects
  • All sound effects enabled
  • Maximum animation detail

Tablet (768x1024)

  • Medium iris size (192x192px)
  • Reduced particle density
  • Optimized animations
  • Touch-friendly interactions

Mobile (375x667)

  • Compact iris size (128x128px)
  • Essential animations only
  • Reduced sound effects
  • Portrait orientation optimized

🎵 Sound Effects

Required Audio Files

Place these files in your public/sounds/ directory:

/public/sounds/
├── startup.mp3           # System initialization
├── iris-activation.mp3   # Iris animation start
├── scanning-beep.mp3     # Scanning sound loop
├── system-online.mp3     # Completion sound
├── click.mp3             # UI interactions
├── success.mp3           # Success feedback
├── error.mp3             # Error feedback
└── sci-fi-ambience.mp3   # Background atmosphere

Audio Specifications

  • Format: MP3 or OGG
  • Quality: 128kbps minimum
  • Duration: 1-3 seconds (except ambience)
  • Volume: Normalized to -12dB

🎯 Integration Examples

With Facial Analysis System

import { IrisLoadingPage } from '@/components/loading/iris-loading-page'
import { FacialAnalysisApp } from '@/components/analysis/facial-analysis-app'

export default function MainApp() {
  const [systemReady, setSystemReady] = useState(false)
  
  const initializeFacialAnalysis = async () => {
    // Load TensorFlow models
    await loadModels()
    // Initialize camera
    await setupCamera()
    // Connect WebSocket
    await connectBackend()
    // System ready
    setSystemReady(true)
  }

  return systemReady ? (
    <FacialAnalysisApp />
  ) : (
    <IrisLoadingPage
      loadingStages={[
        'Loading TensorFlow Models...',
        'Initializing Camera Feed...',
        'Connecting to Analysis Backend...',
        'Calibrating Detection Systems...',
        'IRIS Facial Analysis Ready'
      ]}
      onLoadingComplete={initializeFacialAnalysis}
      duration={7000}
    />
  )
}

With Error Recovery

function LoadingWithRetry() {
  const [loadingState, setLoadingState] = useState('loading')
  const [retryCount, setRetryCount] = useState(0)

  const handleLoadingError = () => {
    if (retryCount < 3) {
      setRetryCount(prev => prev + 1)
      setLoadingState('loading')
    } else {
      setLoadingState('failed')
    }
  }

  if (loadingState === 'failed') {
    return <ErrorPage onRetry={() => {
      setRetryCount(0)
      setLoadingState('loading')
    }} />
  }

  return (
    <IrisLoadingPage
      onLoadingComplete={() => setLoadingState('complete')}
      onError={handleLoadingError}
      loadingStages={[
        `Attempt ${retryCount + 1}: Initializing IRIS...`,
        'Loading AI Models...',
        'System Online'
      ]}
    />
  )
}

🎨 Styling Guide

CSS Custom Properties

:root {
  --iris-primary-color: #00F8FF;
  --iris-secondary-color: #0080FF;
  --iris-glow-intensity: 0.8;
  --iris-animation-speed: 1;
  --iris-size: 256px;
}

Custom Animations

.custom-iris-effect {
  animation: custom-pulse 2s ease-in-out infinite;
}

@keyframes custom-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}

🚀 Performance Tips

  1. Preload Assets: Load sounds and images before showing the loading page
  2. Optimize Images: Use WebP format for better compression
  3. Reduce Particles: Lower particle count on mobile devices
  4. Hardware Acceleration: Ensure CSS animations use transform and opacity
  5. Memory Management: Clean up animations when component unmounts

📄 License

This loading page component is designed specifically for the IRIS Robotics Club. Feel free to adapt it for your own robotics or tech projects while maintaining the futuristic aesthetic that makes it perfect for showcasing advanced technology demonstrations.

Perfect for: Robotics clubs, tech fairs, AI demonstrations, computer vision projects, and any application that needs to convey cutting-edge technology with style! 🤖✨