Jempol is an interactive web application that creates a mesmerizing particle-based creature that follows your touch/cursor. Built with Next.js 15, P5.js, and TypeScript, it demonstrates creative coding and fluid animation techniques.
- Responsive Particle System: A dynamic particle system that creates a fluid, organic movement
- Touch & Mouse Support: Fully responsive design that works on both mobile and desktop
- Interactive Feeding: Feed the creature to trigger special behaviors and animations
- Organic Movement: Natural-looking motion using steering behaviors and Perlin noise
- Dynamic Colors: Beautiful color transitions during interactions
- Clone the repository:
git clone https://github.com/yourusername/jempol.git
cd jempol- Install dependencies:
bun install- Run the development server:
bun dev- Open http://localhost:3000 with your browser to see the result.
- Next.js 15 - React Framework
- P5.js - Creative Coding Library
- TypeScript - Type Safety
- Tailwind CSS - Styling
- shadcn/ui - UI Components
- Bun - JavaScript Runtime & Package Manager
- Basic Interaction: Move your cursor or touch the screen to guide the particle creature
- Feeding: Click the food button in the bottom right to trigger special behaviors
- Mobile: Best experienced on mobile devices with touch interaction
The particle system can be customized by modifying parameters in src/components/P5Canvas.tsx:
- Particle count
- Particle size
- Movement speed
- Colors
- Physics behavior
- Animation durations
Jempol is designed with mobile-first principles, ensuring a smooth and engaging experience on touch devices while maintaining full functionality on desktop browsers.
This project is licensed under the MIT License - see the LICENSE file for details.
Contributions are welcome! Feel free to submit a Pull Request.
- Inspired by particle systems and fluid dynamics
- Built with modern web technologies
- Created for interactive art exploration
Made with ❤️ by [Your Name]