========================================= SillyMotion v1.4 ========================================= Animation Made Silly and Simple! 🎉 This is a free browser-based stop motion animation tool created for cartoon lovers, hobbyists, and anyone who wants to make frame-by-frame animations without complicated software or expensive subscriptions. ----------------------------------------- WHAT'S NEW IN v1.4 ----------------------------------------- - 🎥 **Demo Video Added** – A new “Demo” section has been added to the interface! It embeds the official SillyMotion YouTube video directly in the app, featuring tutorials, requirements, and other niche info about how to get the most out of SillyMotion. - 🖼️ Logo Added – SillyMotion now displays a new PNG logo at the top of the interface, replacing the old text title. - 🖌️ **JS Paint Integration** – Draw your own frames using JS Paint directly from SillyMotion and add them to your timeline! - 🖱️ Draggable Frames – Reorder your frames directly in the timeline by dragging and dropping. - 👻 Onion Skinning (Multi-Layer) – Overlay previous and/or next frames on top of your live camera feed to help align movement more precisely. - 🌙 Dark Mode – A sleek dark theme to make animating easier on the eyes. - 📊 Frame Info Display – Shows total frames and the currently selected frame above the timeline. - ⏳ Export Message – When exporting a WebM video, a message appears below the timeline: "Exporting Your Animation! Please Wait!" - ⚡ General improvements and bug fixes to keep animations smooth and easy. ----------------------------------------- FEATURES ----------------------------------------- - Capture frames directly from your webcam. - Visual playback side-by-side with your live camera feed. - Timeline UI to view, duplicate, delete, or reorder frames. - Frame info display: shows total frames and current frame number. - Onion Skin toggle (previous, next, or both). - Dark Mode for reduced eye strain. - Add an audio track for animating in sync with sound. - Adjustable FPS (frames per second) with a live number indicator. - Save & load projects in .json format (keeps frames, FPS, and audio filename). - Export finished animations as silent WebM videos. - Export message below timeline during video export. - Import images to add new frames from your computer. - Draw frames in JS Paint and seamlessly add them to your timeline. - Simple, fun, and cartoon-inspired design. - NEW: PNG logo replaces the text header for a more polished look. ----------------------------------------- HOW TO USE ----------------------------------------- 1. Allow your browser to use your webcam when prompted. 2. Click "Capture Frame" to take snapshots for your animation. 3. Use "Import Image" to add custom frames from your computer. 4. Use "Draw in JS Paint" to create new frames and automatically add them to your timeline. 5. Use the Timeline to manage your frames: - Click a frame to select it. - Duplicate (⧉), Delete (✕), or Drag to reorder frames. 6. Check the frame info above the timeline to see total frames and the current frame number. 7. Turn Onion Skin on/off in the controls: - Choose to overlay the previous frame, next frame, or both. 8. Toggle Dark Mode in the UI to switch between light and dark themes. 9. Adjust FPS with the slider to control playback speed. 10. (Optional) Add an audio file to animate in sync with sound. 11. Press "Play" to preview your animation with audio. 12. Press "Stop" to reset playback. 13. Use "Save Project" to store your work as a .json file. 14. Use "Load Project" to continue working later. 15. Press "Export WebM" to download your animation — a message appears below the timeline while it’s exporting. 16. Enjoy your new SillyMotion logo greeting you each time you open the app! ----------------------------------------- REQUIREMENTS ----------------------------------------- - A modern web browser (Chrome, Firefox, or Edge recommended). - A webcam (for capturing frames). - Optional: an audio file (MP3, WAV, OGG) for syncing animation. - A PNG logo file named “logo.png” in the same folder as this HTML file. - Optional: JS Paint folder in the same repo for drawing custom frames. ----------------------------------------- LIMITATIONS ----------------------------------------- - Exported WebM videos are silent (audio does not embed). - Project saves store the filename of the audio, not the file itself. (You’ll need to keep your audio file handy and reload it when continuing a project.) - No GIF export (due to browser limitations). - Works best with short to medium-length animations — very large projects may slow down your browser. ----------------------------------------- LICENSE ----------------------------------------- This project is free to use, modify, and share. Created with love and silliness by Marz. 💫 Enjoy making your cartoons silly again! SillyMotion was created by Marz (idea, design, and direction) with coding support from ChatGPT (implementation and technical help). This project is a labor of love to keep cartoon-making fun, free, and accessible to everyone. 🎬✨ This project includes JS Paint (https://github.com/1j01/jspaint) Licensed under the MIT License. All original copyright and license information is preserved. ______________________________________________________________________________________________________________________________________________________________________________ ======================================================= 🎬 Creator’s Statement — Why I Made SillyMotion ======================================================= Ever since I was a kid, I’ve loved stop motion — especially Aardman’s classics like Wallace & Gromit and Shaun the Sheep. Their style, charm, and humor inspired me to try it myself. But when I wanted to make my own stop motion animations, I hit a wall: every decent program cost money. Aardman’s own “Animate It!” looked perfect — simple, fun, and made for beginners. But the full version cost £19.95 (and now, with inflation, that’s around £42 today — over 50 U.S. dollars). That’s crazy! You could buy an entire console game for that price! I just wanted to make silly little clay animations, not a Steven Spielberg movie! But instead of being accessible, most stop motion software was either too expensive or too complicated. And that’s a huge problem — because animation should be a fun hobby, not a luxury. So, I made my own tool: SillyMotion. It’s free. It’s simple. It’s browser-based. No installs. No paywalls. No subscriptions. Just pure animation fun for anyone — kids, hobbyists, or pros who miss the charm of DIY creativity. I built this program to prove that animation can be fun, accessible, and open-source all at once. I wanted to bring back that old spirit of tinkering — when people made art with what they had, and studios like Aardman were working out of a garage. I’m proud to say this project balances accessibility and functionality — something the animation world desperately needs again. If big companies want to treat creativity like a luxury, then fine — we’ll make our own tools. SillyMotion is for the dreamers, the hobbyists, and the silly animators who just want to make things move and laugh. Let’s make cartoons silly again. 💫 — Marz Creator, SillyMotion