The Product Idea
The idea for Squawk was inspired by Gary Vaynerchuck’s Instagram. I saw him re-post one of his Tweets as a video like this. Think what you want of Gary V., but his social media strategies have always been great. In particular, by turning a Tweet into a video he can:
- Repurpose his Twitter content. He puts out a ton of posts on Instagram and Twitter every day. This is an excellent way to reuse existing content and bring it to new faces.
- Drive people to his Twitter account. People are much (12x) more likely to follow you on Twitter if they already follow you on Instagram or Facebook. This is a not-too-subtle reminder to people to go look him up on Twitter.
A tweet-to-video tool would be a big value add for content aggregators. For example, meme pages on Facebook and Instagram often just post screenshots of Tweets, but videos outperform images by a solid margin and could be used as a replacement. I decided to give it a try.
The Product Implementation
High Level Overview
I wrote the core code of Squawk as a NodeJS script and launched it on AWS Lambda so that I didn’t have to worry about scaling up or down. I connected my Lambda API to the Floom marketplace so that I didn’t have to deal with user authentication and customer billing. The marketing site was built and hosted with Webflow.
Now to dig into the fun details.
Getting Twitter Data
The Twitter API was pretty straightforward. I just needed to make one call to fetch a Tweet (or as they call it, a “status”) by ID:
Easy enough. That API call returns the Tweet text, time of Tweet, and the user data including profile name, handle, and image URL.
Mocking Twitter UI
This part was actually fairly simple. I used node-canvas, a library which mocks the HTML5 canvas API, but runs on NodeJS. I made a 1080x1080 (HD) canvas, and drew on the different parts of the Twitter UI including the profile image, profile name, profile handle, and the time of Tweet.
The most complex part was simulating typing the text of the Tweet. To do this, I incrementally drew on the text, letter by letter. After each frame was drawn, I exported the canvas to a separate png image. Then I used FFMPEG to stitch the frames together into an mp4 file.
In order to make the typing animation seem more natural, I skipped frames that just drew spaces and I added pauses after punctuation and new line characters.
Creating an API
5:00 PM–6:30 p.m.
I deployed my NodeJS code to AWS Lambda using Serverless framework. This went pretty smoothly but I needed to add an FFMPEG layer and a node-canvas layer to get things running on Lambda. Serverless.com has a nice tutorial on adding layers to your Lambdas.
When everything was working locally, I added two HTTP endpoints on the serverless.yml file to enable API access:
- An endpoint which accepting new requests for creating Tweet videos. This is a POST endpoint which expects a tweetId in the body.
- An endpoint which checks on the status of a processing video. This endpoint also expects the
tweetIdin the request body. This endpoint handler simply checks to see if the completed video has been uploaded to AWS S3 yet. If it finds the completed mp4 file in S3, it returns the file; otherwise it informs that the video is still processing.
Instead of dealing with user sign-ups, authentication, and customer billing myself, I connected my API with Floom. I created a free watermarked version and a paid non-watermark version which I’m selling for $1/video.
7:00 PM–8:45 p.m.
I chose the name “Squawk” because: (a) you can almost tell it’s related to Twitter just by the name (b) it’s short, and (c) people know how to spell it without needing to ask. Some sort of bird was the obvious choice for a logo. I typed “bird” into thenounproject.com and looked through what came up. I settled on a small, fat, cartoonish bird. It has a similar vibe to Twitter’s logo but was distinct enough to carry its own branding. I paid $2.99 in royalty fees and got access to the SVG. I made some small tweaks including giving the bird an open beak to go along better with the “squawk” name.
The cornflower blue branding again has a similar feel to Twitter but is distinct. Using Sketch, I made blue and white versions of the logo, text and non-text versions, and some different sizes for favicons, webclips, and open graph images.
I looked for top level domains available with “squawk” and happily found squawk.dev available for $14. I linked my new domain to Webflow and used an existing Webflow template to throw together a one-page marketing pitch. In short, I created two sample videos, wrote some quick copy highlighting the use cases, and added in three calls-to-action directed at the product page on Floom.
- Emoji support (there is no emoji support built into node-canvas)
- Tweets with images (update: done!)
- Tweets with videos (figure out a way to do this with FFMPEG) (update: done!)
- Ability to change the speed of typing
The two main target audiences are:
- Heavy Twitter users who want to share their content elsewhere. The pitch to them is that they can reuse content and leverage these videos to drive followers to their Twitter.
- Content aggregators like BuzzFeed and meme pages which often screenshot Tweets and share them. The pitch to them is that video outperforms images on Facebook and IG.
We’ll see which one of these pans out better in the early days and drive focus towards it.
I hope you enjoyed this write-up! It was a great exercise for me to remember that creating a product can be done in a short timeframe with the right skills and the ability to focus only on the MVP. Check out Squawk live.
Have a product idea and think it can be developed in two days or less? Let me know — I'm happy to help people get their products off the ground.