AI-Powered Fitness Transformation Visualization with Johnny Bravo Style
Transform your fitness journey with AI! ofit shows you what you could look like at different stages of your fitness transformation - from your current state to peak performance over 5 years.
ofit is an interactive web app that uses AI to visualize your fitness transformation potential. Upload a photo or use your webcam, and instantly see yourself at different fitness levels. Get motivated with personalized workout plans, track your progress with XP and levels, and stay on track with helpful notifications.
- 🎥 Live Webcam Transformation: See yourself transform in real-time using your webcam
- 📸 Photo Timeline: Upload a photo and explore 7 different transformation stages
- 💪 Personalized Workout Plans: Detailed gym routines for each fitness goal
- 🎮 Gamification: Earn XP, level up, and track your progress
- 🔔 Smart Notifications: Stay motivated with reminders to hydrate, train, and rest
- 🦸 Johnny Bravo Theme: Fun, motivational design inspired by the iconic cartoon
- Node.js (v16 or higher)
- npm or bun
- Modern web browser with webcam support
- Clone the repository
git clone <your-repo-url>
cd ofit- Install dependencies
npm install- Set up environment variables
Create a
.envfile with your Supabase credentials:
VITE_SUPABASE_URL=your-supabase-url
VITE_SUPABASE_ANON_KEY=your-supabase-key- Start the development server
npm run dev- Open in browser
Navigate to
http://localhost:5173
- Land on the homepage and hover over Johnny Bravo to see him flex
- Click "START YOUR TRANSFORMATION" to begin
- Enter your name and fitness goal
- Set your commitment level
- Upload a photo of yourself
- Live Stream: Real-time transformation using your webcam
- Photo Goals: See your transformation timeline with your uploaded photo
- Adjust the intensity slider from "Lean" to "TREN" mode
- See yourself transform in real-time as you move
- Watch the "breaking scale" effect in TREN mode!
- Use the vertical slider to navigate through 7 stages:
- Extra Skinny
- Skinny
- Very Fat
- Current (your starting point)
- 6 Months
- 1 Year
- 5 Years (peak physique)
- Click to flip between front and back views
- View personalized workout plans for each stage
- Check your commitment warnings and motivation
- Earn XP for completing actions
- Level up as you use the app
- Check notifications for fitness reminders
ofit/
├── src/
│ ├── components/
│ │ ├── WebcamCapture.tsx # Webcam capture component
│ │ ├── TransformationControls.tsx # Intensity slider & controls
│ │ ├── OutputDisplay.tsx # Stream display with Johnny Bravo loading
│ │ └── ui/ # shadcn/ui components
│ ├── pages/
│ │ ├── Landing.tsx # Homepage with Johnny Bravo
│ │ ├── Onboarding.tsx # Goal setting & photo upload
│ │ ├── Dashboard.tsx # Choose your path (notifications here)
│ │ ├── WebcamTransform.tsx # Live webcam transformation
│ │ └── ImageTransform.tsx # Photo timeline & workout plans
│ ├── lib/
│ │ ├── utils.ts # Utility functions
│ │ └── daydream.ts # Livepeer Daydream API integration
│ ├── integrations/
│ │ └── supabase/ # Supabase client & types
│ └── hooks/ # Custom React hooks
├── supabase/
│ ├── functions/ # Edge functions for AI processing
│ └── migrations/ # Database migrations
├── public/ # Static assets (Johnny Bravo images)
└── package.json
- React 18 - UI framework
- TypeScript - Type safety
- Vite - Fast build tool
- Tailwind CSS - Utility-first styling
- shadcn/ui - Beautiful UI components
- Supabase - Backend as a service
- Livepeer Daydream API - Real-time AI video transformation
- Image Generation API - Photo transformation
- Gamification - XP system with localStorage
- Notifications System - Smart reminders
- Workout Plans - 7 detailed training programs
- WebRTC - Real-time video streaming
- Real-time body transformation using AI
- Adjustable intensity slider (Lean → Beast → Muscular → TREN)
- TREN mode breaks the scale for extreme transformation
- 20-second Johnny Bravo loading screen
- 7-stage transformation journey
- Smooth crossfade transitions between stages
- Flip to see front/back views
- Auto-generates all transformations on upload
- Preserves background, only transforms the body
Click any training plan to see:
- Daily exercise routines (sets, reps, rest)
- Nutrition guidelines specific to your goal
- Pro tips for consistency and recovery
Plans include:
- Recovery & Rebuilding (Extra Skinny)
- Building Foundation (Skinny)
- Fat Loss Focus (Very Fat)
- Maintenance Mode (Current)
- 6-Month Transformation (4-5 days/week)
- 1-Year Elite Training (5-6 days/week)
- 5-Year Peak Performance (6-7 days/week)
- Earn XP for completing actions:
- Complete onboarding: +30 XP
- Upload photo: +25 XP
- Generate transformation: +20 XP
- Use webcam: +15 XP
- Choose feature: +10 XP
- Level up every 100 XP
- Visual progress bar in header
- Level badge with trophy icon
Smart reminders to keep you on track:
- 💧 Stay Hydrated - drink water reminders
- 🏋️ Gym Time - workout reminders
- 😴 Rest Day - sleep reminders
- 🍱 Meal Prep - nutrition reminders
- 📊 Progress Check - tracking reminders
- Background: Deep dark (#000000)
- Primary: Orange gradient
- Accent: Warm amber/yellow
- Text: Light gray to white
- Huge titles: 7xl to 9xl font sizes
- Gradient text: Animated color gradients
- Glow effects: Blur shadows behind text
- Character images for icons and buttons
- Comic book style loading screens
- Action lines and POW effects
- Rotating logo animations
A technical paper is a detailed document that explains:
- How the technology works
- Architecture and design decisions
- Implementation details
- Algorithms and methods used
- Performance analysis
For this project, a technical paper would explain:
- How the AI transformation works
- How we integrate with Livepeer Daydream
- Real-time video streaming architecture
- Image processing pipeline
- Gamification system design
A live site is the deployed, publicly accessible version of the app that anyone can visit online. Instead of running the code on your local computer, it's hosted on a server and has a public URL (like ofit.com or ofit.vercel.app).
To create a live site, you would deploy this app to:
- Vercel (recommended for React apps)
- Netlify
- AWS Amplify
- GitHub Pages
- Any other hosting platform
- Install Vercel CLI
npm i -g vercel- Deploy
vercel- Add environment variables in Vercel dashboard:
VITE_SUPABASE_URLVITE_SUPABASE_ANON_KEY
- Visit your live site!
Your app will be available at
your-app.vercel.app
Contributions are welcome! Here's how:
- Fork the repository
- Create a feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
- Check browser permissions for camera access
- Ensure you're using HTTPS or localhost
- Try a different browser
- Check Supabase connection
- Verify API keys in
.env - Check browser console for errors
- Check localStorage is enabled
- Clear browser cache and try again
MIT License - feel free to use this project for learning or building your own fitness app!
- Livepeer for the Daydream API
- Supabase for backend infrastructure
- shadcn/ui for beautiful components
- Johnny Bravo for the inspiration and motivation 💪
Questions? Found a bug? Want to contribute?
- Open an issue on GitHub
- Submit a pull request
- Star the repo if you found it helpful!
Built for Encode Club Hackathon 2025 🏆
Transform your body, visualize your goals, and become the best version of yourself with ofit! 💪
- Live Site: [Your deployed URL here]
- Technical Paper: [Your technical documentation here]
- Demo Video: [Your demo video here]
- Presentation: [Your presentation slides here]