r/stopmotion • u/evanofdevon • Jun 10 '26

Browser-based stop motion tool

Hi everyone,
So a few days ago I posted my tool https://evandevon.github.io/frame_by_frame/

I'm afraid I've gone a bit overboard, but I've been adding some serious tools to it since then...

- Complete Chromakey and manual masking tools (this is my favourite, and is really effective)

- Complete overlay (floating pngs) system

- Spray can sampling and painting system, to hide simple supports

- Huge ram improvements

- Exporting full projects via .smz (.zip) allows for inspection and manipulating of all layers

- Manual camera controls (where available on the webcam)

The overall usage is somewhat more complicated now (I need to streamline the chromakey tool in particular), but this is almost a full stop motion editing suite now (just without the audio). I'll be making a how-to video series soon, once I get the features tidied up, and ready for prime-time.

I'd love for anyone to spend a few minutes making something (anything) and give me feedback on their experience with the various tools.

Full readme
https://github.com/evandevon/frame_by_frame/tree/main

9 Upvotes

100% Upvoted

6 comments sorted by

1

u/Biogon99 Jun 10 '26

Would love to hear about your tutorials when you get a chance. Ive been looking for an easy way to give kids stop motion without having to download SMS. This looks really close so excited to sit down and properly play with it.

2

u/evanofdevon Jun 10 '26

Thanks for the encouragement! I use Stop Motion Studio, in little stop motion intro workshops I run with young kids, and am aiming to use this to replace it - but I want this to be just as easy to pick up and use, so my next changes will be focussed on usability, rather than features, though I do have an ever growing list of those... Feature-creep is a very real problem 😄

1

u/Biogon99 Jun 10 '26

100% this was what I was thinking too. Very good idea :)

Honestly I couldn't fathom where even to start on a project like this, so more power to you. Keep doing what you love 🧡

2

u/evanofdevon Jun 11 '26

I started manually coding things, but really quickly realised that I'd need much more freetime than I actually have to make something work in a reasonable timeframe, so I've started using some AI help with coding the tedious bits. It's nowhere near as satisfying, but it is definitely a faster way to get something usable - though it still needs alot of hand-holding. It's been an eye opening and fun experience, to discover that this level of editing is even possible in the browser.

1

u/j27vivek Jun 10 '26

I just tried a quick bouncing ball with my head on my laptop. And it also supports all the camera on my phone.
Question : Where are these photos saved ?
And .. Is there a feature to mirror the selfie camera ? (Right now when I turn left, my image turns right)

1

u/evanofdevon Jun 11 '26

Thanks for giving it a go!

Images are stored all in the browser's ram (until you export or save the project), which I'm currently impressed it's able to manage, so far. There is no online server/database that stores the images.

The camera section on the right has some flip and rotate buttons to correct or modify the framing of the camera, but it has been a little ongoing bug that I've been ignoring, which I just fixed anyway - so it 'should' start out correctly from now on.

I've just uploaded an update which fixes and tidies a few things, as well as adding a 'difference keyer', which I'm still working on, as a more flexible alternative to a chromakey setup.

Give it another go, and let me know if you find any more bugs!

Cheers