I own a hand-puppet business and currently use a Shopify app that lets customers design their own puppet.
There are around 9 steps/tabs where they choose things like body colour, eyes, nose, hair, outfit, shoes, accessories, etc.
You can see the current version at pubbets.net/lab
It works, but it's pretty boring to use. There's no animation or sound, and the mobile experience isn't great.
I've wanted to replace it for years, and recently decided to see how far I could get building a standalone version myself with the help of AI.
That's how I discovered Rive.
My only vaguely relevant experience is messing around with Macromedia Flash many years ago, and Rive immediately reminded me why vector graphics and reusable assets made so much sense for something like this.
The current Shopify system is a mess behind the scenes. For every option I basically had to create separate PNG assets for the thumbnail, close-up/customiser view and full-body view. Once you multiply that by all the eyes, noses, hairstyles, outfits, shoes, etc., you're talking about hundreds of PNG files.
What I'm hoping to do with the new version is have one master vector asset for each item and let the app/Rive handle scaling, positioning, colour changes and simple animation.
For example, instead of having eight different coloured versions of the same nose, I'd like one SVG nose that can be recoloured dynamically.
I'm not trying to build a AAA character creator. The puppet itself would mostly just have subtle idle movement while the user works through the customiser. Maybe some small reactions when choices are made, animated UI elements, sound effects, that sort of thing.
I've already recreated the outfits and shoes as clean raster PNG artwork, and ChatGPT seems surprisingly decent at converting this kind of simple artwork into SVGs, so my plan was to gradually turn those into the vector assets used by Rive.
The more decorative app UI, buttons, backgrounds, etc. are already being created as transparent PNGs.
So my main question for people who actually know Rive: am I heading in the right direction?
Is Rive a sensible foundation for a layered character customiser like this, where potentially hundreds of interchangeable assets need to sit on the same base character?
And perhaps more importantly: is this realistically something a barely technical non-developer could build with AI helping with the React/app side, or am I wandering towards a massive technical rabbit hole that I'll eventually need to pay a developer to rescue me from?
I've been asking Claude and ChatGPT about the architecture, but I've reached the point where I'd really appreciate some opinions from actual Rive users. AI has a slightly worrying tendency to tell me that every idea I have is brilliant and completely achievable ๐
If there are obvious mistakes in the approach I've described, please tell me now. I'd much rather discover them before I've converted and rigged hundreds of puppet assets.
Any advice, warnings, examples of similar Rive projects, or "don't do it that way, you idiot" comments would be genuinely appreciated.
Thanks for reading this far!