Inspiration The project was inspired by the desire to create a unique digital gallery showcasing lunar-themed ASCII art as collectible NFTs, combining the nostalgic charm of ASCII art with modern web technologies and interactive animation features.
What it does Moonynads Gallery is an interactive web application that displays 12 unique lunar ASCII art pieces with varying rarities. Users can explore an animation lab with 7 animation modes, 4 color palettes, speed/amplitude controls, recording capabilities (WebM), and upload features to Grove storage. It includes a seasonal advent calendar feature and a rarity-based collectible system.
How we built it Built with Next.js 14, TypeScript, Tailwind CSS, and React. Uses HTML5 Canvas for animation rendering, localStorage for persistent state management, and a custom storage abstraction layer. Implemented custom React hooks for animation state, recording, and upload functionality. The ASCII animations are pre-generated frame files that cycle based on user settings.
Challenges we ran into Integrating complex animation algorithms with real-time canvas rendering while maintaining performance, implementing the multi-provider storage system with proper fallbacks, managing persistent state across different animation settings, and creating the frame-by-frame animation system for the ASCII art pieces.
Accomplishments that we're proud of Successfully implementing 7 different animation modes with interactive controls, creating a comprehensive rarity-based collectible system, implementing WebM recording and PNG snapshot capabilities, building a seamless storage upload system with metadata preservation, and creating a responsive seasonal advent calendar feature.
What we learned Advanced React animation techniques using requestAnimationFrame, canvas manipulation for real-time rendering, complex state management for interactive systems, implementing custom hooks for specialized functionality, and integrating multiple storage providers with fallback mechanisms.
What's next for Moonynads Potential expansion of the ASCII art collection, additional animation modes, community features for sharing creations, integration with NFT marketplaces, mobile app development, expanded seasonal features, and enhanced social sharing capabilities.
Built With
- nextjs
- node.js
- react
- tailwind
- typescript
Log in or sign up for Devpost to join the conversation.