A modern, cinematic web application for detecting AI-generated text, images, and videos. Built with Next.js 14, React 18, TypeScript, and featuring stunning animations powered by Framer Motion, GSAP, and Lenis.
- Glassmorphism UI with backdrop blur effects
- Dark/Light theme support with next-themes
- Color-coded detection modes (Text, Image, Video)
- Smooth scroll animations with Lenis
- Apple-inspired aesthetics
- Page load animations with logo wipe effect
- Scroll-triggered transitions (split, wipe, slide)
- 3D tilt effects on interactive elements
- Vertical slot machine navigation hover effects
- Pulsing halos and gradient animations
- GSAP-powered timeline animations
- JSON-based datasets and research papers
- Tiling card animations on load
- Staggered reveal effects
- Real-time data loading with loading states
- Vertical flowing timeline layout
- Color-coded steps with pulsing icons
- Detailed feature breakdown
- Interactive hover states
- Mobile-first design
- Adaptive layouts for all screen sizes
- Touch-friendly interactions
- Optimized animations for mobile
- Node.js 18.x or higher
- npm 9.x or higher
# Clone the repository
git clone https://github.com/YOUR_USERNAME/detectx.git
cd detectx
# Install dependencies
npm install
# Run development server
npm run dev
# Open http://localhost:3000# Create optimized production build
npm run build
# Start production server
npm startdetectx/
├── app/ # Next.js 14 app directory
│ ├── layout.tsx # Root layout with providers
│ ├── page.tsx # Homepage with scroll sections
│ ├── about/ # About page
│ ├── awareness/ # Timeline page
│ ├── datasets/ # Dynamic datasets page
│ ├── research/ # Research papers page
│ ├── how-it-works/ # Detection pipeline page
│ ├── resources/ # Resources page
│ └── contact/ # Contact page
├── components/
│ ├── animations/ # Reusable animations
│ │ ├── PageLoader.tsx # Page loading animation
│ │ └── TiltText.tsx # 3D tilt effect
│ ├── data/ # Data display components
│ │ ├── DatasetCard.tsx # Dataset card with animations
│ │ └── PaperCard.tsx # Research paper card
│ ├── effects/ # Global effects
│ │ ├── BackgroundAnimation.tsx # Particle effects
│ │ ├── SmoothScroll.tsx # Lenis smooth scroll
│ │ └── ScrollToTop.tsx # Navigation scroll fix
│ ├── home/ # Homepage sections
│ │ ├── Hero.tsx # Hero section
│ │ ├── HowItWorks.tsx # Detection cards
│ │ ├── ModeTiles.tsx # Mode selection tiles
│ │ └── StatsSection.tsx # Statistics display
│ ├── layout/ # Layout components
│ │ ├── Navbar.tsx # Navigation bar
│ │ └── Footer.tsx # Footer
│ ├── providers/ # Context providers
│ │ └── ThemeProvider.tsx # Theme & mode management
│ ├── scroll/ # Scroll components
│ │ └── ScrollSection.tsx # Scroll transitions
│ └── ui/ # Reusable UI components
│ ├── Button.tsx
│ └── Card.tsx
├── lib/ # Utilities and helpers
│ ├── animationVariants.ts # Framer Motion variants
│ └── utils.ts # Utility functions
├── public/
│ ├── data/ # JSON data files
│ │ ├── datasets/
│ │ │ └── datasets.json
│ │ └── papers/
│ │ └── papers.json
│ ├── logo.png # Light mode logo
│ └── logo-dark.png # Dark mode logo
├── docs/ # 📚 Documentation
│ ├── README.md # Docs index
│ ├── QUICK_DEPLOY.md # Quick deployment
│ ├── VERCEL_DEPLOYMENT.md # Full deployment guide
│ └── ... # More guides
└── README.md # ← You are here
- Next.js 14 - React framework with App Router
- React 18 - UI library
- TypeScript - Type safety
- TailwindCSS - Utility-first CSS
- Framer Motion - React animation library
- GSAP - Professional animations
- Lenis - Smooth scroll
- React Spring - Physics-based animations
- shadcn/ui - Reusable components
- Lucide React - Icon system
- next-themes - Theme management
All documentation is in the /docs folder:
- Quick Deploy Guide - Deploy in 3 steps
- Vercel Deployment - Complete deployment guide
- Data Instructions - Add datasets/papers
- Logo Setup - Upload custom logos
- Scroll Fix - Navigation scroll solution
- Pipeline Redesign - Design documentation
- Split Transition: Screen splits from center
- Wipe Left/Right: Horizontal reveal effects
- Slide Up: Vertical entrance animations
Three color-coded modes with unique themes:
- Text Detection - Blue theme (#38BDF8)
- Image Detection - Pink theme (#F472B6)
- Video Detection - Orange theme (#FB923C)
- Datasets loaded from
/public/data/datasets/datasets.json - Research papers from
/public/data/papers/papers.json - Automatic loading states and error handling
- Push code to GitHub
- Import project in Vercel
- Deploy automatically
No environment variables required for basic deployment.
- Add
logo.pngto/public/(512x512px recommended) - Optionally add
logo-dark.pngfor dark mode
Edit /public/data/datasets/datasets.json:
{
"id": "unique-id",
"title": "Dataset Name",
"description": "Description",
"url": "https://link.com",
"category": "Image",
"size": "2 GB",
"year": "2024",
"downloads": "1K+"
}Edit tailwind.config.ts:
colors: {
text: { DEFAULT: '#38BDF8' }, // Text mode color
image: { DEFAULT: '#F472B6' }, // Image mode color
video: { DEFAULT: '#FB923C' }, // Video mode color
}- Lighthouse Score: 90+ across all metrics
- Build Size: ~87 KB shared chunks
- Static Pages: All 11 pages pre-rendered
- First Load: < 200 KB per page
- Animations: 60 FPS hardware-accelerated
npm run dev # Start development server
npm run build # Build for production
npm run start # Start production server
npm run lint # Run ESLint- All pages are in
/appusing Next.js App Router - Components are in
/componentsorganized by function - Animations use Framer Motion and GSAP
- Styling with TailwindCSS and CSS custom properties
See SCROLL_FIX.md
ISC License - feel free to use this project for your own purposes.
- Design inspired by Apple's aesthetic
- Animation techniques from Awwwards winners
- Built with amazing open-source tools
- Documentation: /docs
- Issues: GitHub Issues
- Deployment: Vercel Docs
- Add actual AI detection functionality
- Implement user authentication
- Add API endpoints for detection
- Create admin dashboard
- Add more datasets and papers
Made with ❤️ and lots of animations