FrogOnABike

Frog on a Bike

A tiny HTML/CSS/JS animation of a cartoon frog (green with black spots) riding a bicycle. The frog’s pedaling legs are IK-animated and drive the bike wheels and overall forward motion.

How to run

1. Open index.html in your browser (double-click the file or drag it into a tab).
2. Use the “Pedal speed” slider to change cadence; the frog’s legs, pedals, wheels, and forward motion are coupled to this value.
3. Click “Pause/Play” to stop/resume the animation.

Files

• index.html – Scene markup (SVG), HUD controls.
• styles.css – Styling and CSS-based motion for clouds/rig.
• script.js – Pedal cadence control, wheel/crank rotation, simple 2‑bone IK for frog legs.

Notes

• No build step. Pure front-end.
• Works offline in any modern browser.