Flick Share

Create auto short animations/videos from webpage, customize animations with unique backgrounds, Personalize text, fonts & sizes to your style.

Comment

Inspiration

The inspiration behind Flick Share came from the desire to make the process of creating engaging and personalized content more accessible and effortless. In today’s fast-paced world, people are constantly sharing moments of joy, celebration, and significant events with friends and family. However, not everyone has the time or skills to create visually appealing animations or short videos. Flick Share was envisioned to bridge this gap by offering a user-friendly platform where anyone can craft stunning congratulatory messages, wishes, or even news snippets with minimal effort. The idea was to combine the simplicity of customizable templates with the power of automation to cater to both personal and professional needs.

What it does

Flick Share is a versatile app that allows users to create personalized animations for various occasions, such as birthdays, anniversaries, promotions, and more. Users can customize text, colors, fonts, and sizes to match their style and the tone of the message. Additionally, Flick Share offers an auto-mode feature that can generate GIF animations and short videos based on recent news events. By parsing content from websites, the app automatically crafts concise, visually appealing animations that users can share across social media platforms or via messaging apps. Whether you're looking to send a heartfelt message to a friend or share a quick news update, Flick Share makes it easy to create and share engaging content.

How we built it

Flick Share was built using a combination of modern web technologies, including HTML5, CSS3, JavaScript, and Node.js. The animation and text customization features were developed using the HTML5 canvas API, allowing for dynamic rendering of animations directly in the browser.

We have developed extensible architecture which will allow us to add as many templates as we want in the app. Each of the animations are derived from the custom HTML5 canvases. In order to add more animations, we just need to add more html5 based templates and the new animations will be available to users to generate their own content.

For the auto-mode feature, we implemented web scraping techniques using Node.js to parse website content and extract relevant data. This data is then processed through ChatGPT api to summarize the content. The summarized content is presented to the user to make certain modifications before generating visually appealing animations. We also integrated libraries like GIFEncoder for GIF creation and various font and color libraries to provide users with a wide range of customization options. The app’s backend is powered by a Node.js server, ensuring fast and efficient processing of user inputs and data.

Challenges we ran into

Developing Flick Share wasn’t without its challenges. One of the biggest hurdles was ensuring that the animations generated by the app were smooth and visually appealing, regardless of the user’s device or browser. Handling text wrapping and alignment dynamically, especially when dealing with multi-line text, required significant effort and fine-tuning. Another challenge was the implementation of the auto-mode feature, which involved parsing unstructured website content and converting it into structured animations. We also encountered issues with file size optimization, particularly when generating GIFs, which required careful balancing of quality and performance.

Specific issues faced in appkit -

  1. addNativeElement - when you want to add video element, and if you pass on the thumbnail url from your domain, it doesn't work. It gives CORS errors.
  2. Unable to upload the files from localhost using addNativeElement over http, may be for security reasons you might have blocked it, but in order to figure this out, it took so many hours.
  3. Canva white board doesn't allow me to add the custom html, hence I had to develop server side technology to convert the canvas animations in to corresponding gif animations
  4. Each animation requires different speed, delay, frame capturing.

Accomplishments that we're proud of

  1. Using Canva appkit to seamlessly integrating the animations in to the Canva platform.
  2. Generating customizable animations using plain html technology
  3. Implementing extensible framework which will allow us to add any number of animations in future with in the same app.
  4. With minor modification in the pipeline, we will be able to generate the short videos on automation, with voice over.

What we learned

  1. Canva app ecosystem, apis, toolkit etc.
  2. Learnt a lot about the gif animations, frames, different encoding methods, technology solutions which are missing in market.
  3. Why gif customization is so difficult. We could not find platform which allow us to generate the gif of our own, either it allows user to use images / memes to create the gif or converts the mp4 videos into gif files. But very few allows you to create your own gif and specially using html technology.

What's next for Flick Share

  1. Add more templates for different occasion such as Thanks giving, Halloween, Christmas, different other event.
  2. Allow user to add images inside gif to create animated memes
  3. Provision for background music and text to speech apis to create full fledge short video generation of 30 seconds.
  4. Auto video generation pipeline with social media integration

Built With

Share this project:

Updates