A high-performance, visually striking browser experiment where your cursor is transformed into the developer's struggle. Watch as [my code] desperately maneuvers to stay ahead of a trailing sequence of high-visibility BUG and ERROR entities, all set against a backdrop of raw source code.
- Custom Text-Cursor: The default OS cursor is hidden and replaced with a neon-cyan
[my code]pointer for total immersion. - Inverse Kinematics (IK) Physics: Smooth, organic "snake-like" trailing motion that reacts dynamically to your mouse speed and direction.
- Ultra-Visibility Rendering: Every "BUG" and "ERROR" features a white stroke (outline) and red neon glow, ensuring they are 100% readable even against complex code backgrounds.
- Dynamic Glitch Effects: The trailing errors pulse in size and feature a slight "jitter," giving them a lifelike, haunting presence.
- Zero-Lag Canvas: Optimized using
requestAnimationFramefor 60FPS performance.
This project is a prime example of Human-AI Symbiosis. While the creative direction and "vibe" were human-led, the heavy lifting of the implementation was powered by Gemini AI.
By leveraging AI, this project moved from a basic concept to a polished, physics-based animation in record time. The AI handled:
- Trigonometric Logic: Calculating
Math.atan2andsin/cosfor smooth segment rotation. - Canvas Optimization: Efficiently clearing and redrawing text layers without performance drops.
- Visual Polish: Implementing advanced canvas techniques like
strokeTextandshadowBlurto solve visibility issues instantly.
This project demonstrates how AI-assisted development can accelerate experimentation. The concept and creative direction were human-driven, while AI tools helped with algorithm implementation, canvas rendering techniques, and rapid iteration during development. Today, AI tools allow developers to rapidly transform ideas into working prototypes and interactive experiences.
- Clone or copy the code from
index.html. - Open the file in any modern web browser.
- Move your mouse—the bugs are faster than they look!
- HTML5 Canvas API - Core rendering engine.
- Vanilla JavaScript - Logic and physics (no external libraries needed).
- CSS3 - Custom cursor masking and background styling.
- Gemini AI - Lead technical architect and creative collaborator.
This was built as a fun side project to celebrate the "controlled chaos" of software development. It’s a literal representation of the phrase "chasing bugs." Feel free to fork this, change the text to your own tech stack, or adjust the "gravity" of the trail to make the errors even more aggressive!
MIT
