WishOnAFish.dev

A unique collectible web experience that combines procedural generation with gamification to create an engaging digital aquarium. Visitors can collect one-of-a-kind fish by visiting the site at exactly 11:11, creating a special moment of serendipity in their digital experience.

Key Features

• Procedural Generation: Each fish is uniquely generated, ensuring no two fish are ever the same
• Time-Based Collection: Fish can only be collected at exactly 11:11, creating anticipation and encouraging return visits
• Personal Aquarium: Collected fish are stored in a personal aquarium that users can view and interact with
• Responsive Design: Optimized for all devices with touch-friendly interactions

Technical Implementation

The project uses React for the frontend framework with SVG (Scalable Vector Graphics) as the primary rendering technology for all fish components. The fish rendering system combines several web technologies:

SVG Rendering: All fish parts (body, tail, fins, eyes, mouth, patterns) are rendered as SVG elements using primitives like <ellipse>, <circle>, <path> with cubic Bézier curves, and <polygon> for different body shapes.

CSS Animations: The system uses CSS keyframe animations for eye blinking, pupil movement, fish turning, and various swimming patterns (horizontal, circular, zigzag). 3D transforms with transform3d() provide hardware-accelerated animations.

Mathematical Generation: The procedural generation system uses mathematical calculations for boundary sizing, coordinate positioning, and curve mathematics to create unique patterns, colors, and shapes for each fish, ensuring infinite variety while maintaining visual coherence.

Performance Optimizations: The system employs hardware acceleration through CSS properties like will-change and backface-visibility, along with efficient 20 FPS animation loops for smooth movement.

The time-based collection system uses precise timing mechanisms to create the special 11:11 moment, while the aquarium interface provides an intuitive way to view and interact with collected fish.

Design Philosophy

WishOnAFish.dev explores the intersection of digital art, gamification, and serendipity. By limiting collection to a specific time, the project creates a sense of rarity and specialness that's often missing from digital experiences. The procedural generation ensures that each fish is truly unique, making every collection moment special.