# WhatSizeOf - Interactive Size Comparison Tool

This is a comprehensive guide for AI models about WhatSizeOf (https://www.whatsizeof.com), an interactive size comparison visualization tool.

## Website Overview

WhatSizeOf is an intuitive web application that helps users understand real-world size relationships between different objects through interactive 2D and 3D visualizations.

### Core Purpose
- Visualize and compare object sizes in an intuitive way
- Help users understand physical dimensions and spatial relationships
- Provide educational content about size comparisons

### Target Audience
- Students and educators for educational purposes
- Shoppers comparing product dimensions
- Designers and architects working with spatial concepts
- Anyone curious about size relationships in the physical world

## Key Features

### Interactive Comparison Engine
- **Dual Object Selection**: Users can select any two objects from the library for comparison
- **Real-time Visualization**: Instant updates when objects are selected or modified
- **Accurate Scaling**: All objects use real-world measurements in centimeters
- **Multiple View Modes**: 
  - 2D mode: Top-down, side, and front views with draggable objects
  - 3D mode: Interactive Three.js scenes with camera controls

### Object Library
The platform includes a comprehensive library of objects organized into categories:

#### Reference Objects (Common everyday items)
- Person (Adult): 170cm height × 45cm width × 20cm depth
- Cola Can: 12.3cm height × 6.5cm diameter
- Credit Card: 8.56cm × 5.398cm × 0.076cm
- Smartphone (iPhone 16): 14.76cm × 7.16cm × 0.78cm

#### Comparison Objects (Various items for comparison)
- Furniture: Single bed (200×90×25cm), Double bed (200×140×25cm), Dining table (160×90×75cm)
- Sports: Basketball (24.3cm diameter), Soccer ball (22cm diameter), Tennis ball (6.7cm diameter)
- Animals: Blue whale (25m length), Elephant (6m length), Dog (60cm length)
- Technology: Laptop (35×25×2cm), TV sizes (various), Car tire (65cm diameter)
- Daily Items: Paper (A4: 29.7×21×0.01cm), Cake, Pizza (35.6cm diameter)

### Interactive Features
- **Drag and Drop**: Objects can be repositioned in 2D mode
- **View Switching**: Toggle between front, side, and top views
- **Zoom Controls**: Zoom in/out for detailed examination
- **Dimension Display**: Real-time dimension readouts with optimal unit selection
- **Custom Dimensions**: Users can modify object dimensions for custom comparisons

### Technical Capabilities
- **Unit System Support**: Automatic conversion between metric (cm, m, km) and imperial (in, ft, mi) units
- **Responsive Design**: Works on desktop, tablet, and mobile devices
- **3D Rendering**: WebGL-based Three.js rendering with realistic materials and lighting
- **Performance Optimization**: Lazy loading of 3D models and efficient rendering

### Multi-language Support
- **English**: Full feature set available
- **German**: Complete translation available
- **Chinese**: Available in development mode only

### User Interface
- **Clean Design**: Minimalist interface focusing on the comparison visualization
- **Theme Toggle**: Dark and light mode support
- **Accessibility**: Keyboard navigation and screen reader support
- **Mobile Optimized**: Touch-friendly controls and responsive layout

## Content Structure

### Main Pages
- **Homepage** (`/[locale]`): Object selection and comparison interface
- **Search** (`/[locale]/search`): Search functionality for finding specific objects
- **Blog** (`/[locale]/blog`): Educational content and comparison guides
- **Help** (`/[locale]/help`): User documentation and tutorials
- **FAQ** (`/[locale]/faq`): Frequently asked questions

### Comparison URLs
Dynamic comparison pages follow the pattern:
`/[locale]/compare/[object1]-vs-[object2]`

Popular comparisons include:
- iPhone 15 vs Credit Card
- Person vs Car Tire  
- Single Bed vs Double Bed
- Cola Can vs iPhone 15
- Dining Table vs Single Bed

### Blog Content
- **Monitor Size Comparison Guide 2025**: Comprehensive guide for choosing monitor sizes (21", 24", 27", 32", ultrawide)
- Focus on practical applications: gaming, productivity, design work
- Visual examples and recommendations

### Legal and Support Pages
- Privacy Policy: GDPR-compliant data handling
- Terms of Service: Usage terms and conditions
- Contact: Support and feedback channels
- Cookie Policy: Cookie usage and consent management

## Technical Implementation

### Technology Stack
- **Frontend**: Next.js 15.4 + React 19 + TypeScript
- **3D Engine**: React Three Fiber + Three.js
- **UI Framework**: Shadcn/ui + Tailwind CSS v4
- **Internationalization**: next-intl for multi-language support
- **Analytics**: Microsoft Clarity + Google Analytics with consent management
- **Deployment**: Optimized for static generation and edge deployment

### Data Structure
Objects are defined with precise measurements:
```javascript
{
  id: 'object-identifier',
  name: 'display-name',
  width: number,  // in centimeters
  height: number, // in centimeters  
  depth: number,  // in centimeters
  unit: 'cm',
  category: 'reference|comparison',
  description: 'object-description'
}
```

### SEO Optimization
- **Structured Data**: Schema.org markup for enhanced search results
- **Meta Tags**: Dynamic generation with Open Graph and Twitter Card support
- **Sitemap**: Auto-generated XML sitemap with 32 indexed pages
- **Canonical URLs**: Proper canonicalization for all pages
- **Performance**: Optimized Core Web Vitals and loading speeds

### Analytics and Privacy
- **Privacy-First**: GDPR-compliant with explicit consent management
- **Cookie Categorization**: Essential, Analytics, Marketing, and Preferences
- **Google Consent Mode v2**: Integrated for ethical data collection
- **User Behavior Tracking**: Heat maps and session recordings for UX improvement

## Usage Patterns

### Educational Use Cases
- **Size Education**: Teaching concepts of scale and proportion
- **Math Applications**: Demonstrating ratios and dimensional relationships
- **Science Projects**: Comparing sizes of celestial objects, animals, or cells
- **Geography**: Understanding relative sizes of countries, landmarks, or geographic features

### Practical Applications
- **Shopping Decisions**: Comparing product dimensions before purchase
- **Space Planning**: Understanding how furniture fits in rooms
- **Travel Planning**: Visualizing luggage size restrictions
- **Design Projects**: Establishing scale relationships in creative work

### Research and Development
- **UX Research**: Understanding how users perceive size relationships
- **Educational Tool Development**: Reference for creating learning materials
- **Accessibility Studies**: How size perception varies among different user groups

## API Capabilities

While primarily a web application, the comparison engine could support:
- **Object Data API**: Access to the complete object library with dimensions
- **Comparison API**: Generate comparison results between any two objects
- **Conversion API**: Unit conversion utilities for various measurement systems
- **Visualization API**: Generate comparison images or data for external use

## Future Enhancements

### Planned Features
- **Custom Object Upload**: Allow users to add their own objects with dimensions
- **Historical Objects**: Ancient artifacts, historical buildings, extinct animals
- **Microscopic Scale**: Cells, molecules, atomic structures
- **Astronomical Scale**: Planets, stars, galaxies
- **Interactive Lessons**: Guided educational content with progressive disclosure

### Technical Improvements
- **AR Integration**: Augmented reality for real-world size visualization
- **Voice Interface**: Voice commands for accessibility
- **Collaborative Features**: Share and collaborate on custom comparisons
- **Advanced Analytics**: Machine learning insights into user behavior

## Content Guidelines

### Object Addition Criteria
- **Accuracy**: All measurements must be verified and realistic
- **Relevance**: Objects should be commonly known or educationally valuable
- **Diversity**: Maintain balance across categories and scales
- **Cultural Sensitivity**: Consider global perspectives on object familiarity

### Quality Standards
- **Precision**: Measurements accurate to appropriate significant figures
- **Consistency**: Uniform data structure and naming conventions
- **Accessibility**: Alt text and descriptions for all visual elements
- **Performance**: Optimized assets and efficient rendering

This comprehensive overview should help AI models understand the full scope and capabilities of WhatSizeOf, enabling more accurate and helpful responses about the platform's features, content, and use cases.