Bannerbite - Template based Image and Video Generator

Select template menu
Main form editor in project page you can edit text, color, font color and render via export button
Crop selected image or uploaded image
Select image assets from gallery
Main form editor inside Jira issue any rendered file will be send as a new comment
Highlight text to show options for using GPT3 text grammar improver and rephraser

Inspiration

Adobe After Effects is a powerful video-making tool used by millions of designers and has many plugins. One of these plugins is Bodymovin, a plugin to export Adobe After Effects animations as JSON so they can be played as Lottie animation directly on the web browser.

Bannerbite utilizes Lottie to customize animations and render them as images or videos on the cloud. Designers can export their Adobe After Effects animations as JSON templates and upload to Bannerbite so that they can be used to customize and render later. With Bannerbite you can change text, color and image assets inside Lottie animation and render it as image or video.

It can help marketing and design teams work more efficiently by allowing designers to focus on design and marketing teams to focus on copy, color, CTA without needing to coordinate with designers back and forth for changing design variations.

It's great for creating: personalized invitation videos, greeting videos, ads A/B test, Instagram posts, stories/Reels and many more.

What it does

Bannerbite can be considered as parser for Lottie. Designer can define marker and layer then Bannerbite will identify the marker and save changes based on input and can later be downloaded as either image or video it also has several other feature such as:

Edit and customize: You can customize templates, change text and colors, and add/change images.
Create/Render: Render video or image directly download inside your jira issue
Render API: Render bulk via API or render personalized video from your source data like Google Spreadsheet or Airtable
Upload Template: Upload and edit your own template
Text improve and rephrase: Improve grammar or rephrase your text with the power of GPT3 AI.
Select and try from our pre built template: If you don't have a designer, that's okay. We always create templates to be used publicly. Just select one and get creative.

How we built it

Bannerbite built using:

Forge Custom-ui with Vuejs, Vite, Lottie-web
Forge Storage for storing project metadata
Forge Webtrigger for Webhook so we can send rendered file as comment
Forge IssueAction and ProjectPage module

Accomplishments that we're proud of

we are proud of our accomplishments in the following areas:

Successfully integrate high performance Lottie player inside Jira with Forge CustomUI.
Successfully add integration into GPT3 AI API
Keeping Jira user privacy stay at Jira by not storing any PII (Personally Identifiable Information)

What we learned

at first we have a bad feeling if we should develop using Vuejs or Reactjs because any available tutorial and UIkit is using Reactjs. but we start trying and config Vite and run our first hello world component inside Jira. it's feels amazing seeing our code deployed inside Jira. we learn that Vite and Vuejs build folder using "/" instead of "./" luckily it's configurable in Vite and Vuejs3. we can easily plug in our API and Websocket using forge with only need to setting the permission. we also learn so many possibility where Bannerbite can fit inside Jira and even Confluence.

What's next for Bannerbite - Template based Image and Video Generator

We are excited for what can we build next for Bannerbite

Help creating template on demand for non-design company. by connecting business to curated Adobe After Effects designer
Create auto-post scheduler, marketing people can create content using Bannerbite, then can also schedule posts to social media automatically.
Realtime collaboration, as for now Bannerbite can help collaborate asyncronously we hope later bannerbite can implement real-time collaboration
Create template directly without Adobe After Effects. We want to extend Lottie capability to not only parse but create animation directly inside Jira