This is a submission for the Hacktoberfest Open-Source AI Challenge Week 2: Side Hustle
Made with Care, Seen with Care: Building VidAds for Independent Makers
Independent makers spend hours shaping a product and far less time telling its story. A good photo might live in a camera roll while writing a caption, finding a hook, and editing a short video all compete with the next order.
We started VidAds to make that last mile smaller: turn one product photo and a few details into a short vertical ad a maker can preview, adjust, and export.
Start with one useful job
The first audience is intentionally narrow: independent makers selling small-batch goods. The prototype opens with a sample ceramics brand, then lets you replace the brand name, product, opening line, and call to action. You can choose a warm, playful, or minimal voice, adjust the spot to four, six, or eight seconds, and upload a product photo.
The preview updates as you edit. When the creative feels right, the browser records the canvas as a WebM file. The product image stays on the device; the render doesn't need an upload service or a video-editing account.
const stream = canvas.captureStream(30)
const mimeType = MediaRecorder.isTypeSupported('video/webm;codecs=vp9')
? 'video/webm;codecs=vp9'
: 'video/webm'
const recorder = new MediaRecorder(stream, { mimeType })
This is a deliberately small first cut. It tests whether the workflow itself is useful before adding accounts, a media pipeline, or a complicated editor.
Code
VidAds
VidAds is a short-form product ad maker for independent makers. The first MVP lives in app/.
cd app
npm install
npm run dev
The current prototype edits a product brief, previews a 4–8 second vertical spot, and exports a WebM locally in the browser. AI model and agent-harness integrations are not wired up yet.
Architecture
The solid arrows show the working MVP. Dashed arrows show the planned Gemma and Mastra integration; those pieces are not implemented yet.
flowchart LR
subgraph current[Current MVP]
Maker[Independent maker] --> Brief[Brand and product brief]
Maker --> Photo[Product photo]
Brief --> Preview[Live 9:16 preview]
Photo --> Preview
Preview --> Canvas[Canvas animation]
Canvas --> Recorder[Browser MediaRecorder]
Recorder --> Export[Downloadable WebM]
end
subgraph planned[Planned AI workflow]
Brief -. future .-> Mastra[Mastra orchestration]
Mastra -. future .-> Gemma[Gemma copy generation]
Gemma -. future .-> Preview
end
Run locally
See app/README.md for setup, browser support, and current…
Why open models belong here
For a one-person shop, the cost and privacy story matters as much as the output. A seller shouldn't need a full creative team or a stack of subscriptions to make a product post. We want the useful part of the workflow to stay affordable, adaptable, and easy to understand.
Our planned model layer uses Gemma to turn a short product brief into a few on-brand hooks and calls to action. Mastra is the intended agent harness for coordinating those steps: gather the brief, ask the model for structured copy options, validate the result, and pass the chosen creative to the renderer. The renderer remains a separate, predictable tool so a model suggestion never silently changes the final ad.
That separation is important. A model can help with the words; the maker should remain in control of the product facts, final wording, and export.
The test that matters
The next useful test isn't another settings panel. It's putting VidAds in front of a maker, watching them create one ad, and asking a direct question: would this save enough time to use again, and what would make it worth paying for?
If the answer is no, that's good product feedback. If the answer is yes, we'll learn which part earns that value: the copy, the short format, the local export, or simply having a repeatable way to get from product photo to post.
VidAds is our attempt to make that small creative job feel less like a production pipeline and more like a quick, useful tool for the people making the products.
Top comments (0)