Case Study: Promare Title Generator
Popular anime-inspired meme generator tool
Problem
Fans of Studio Trigger’s smash-hit anime movie Promare fell in love with their bold title card style, featuring block letters with script layered on top, but didn’t have an easy way to adapt it to their own custom text.
Goals
- Allow anyone to create Promare memes with no art or tech skills
- Match the style in the movie as closely as possible
- Allow customizing based on the different variations present in the movie
Phase 1: Prototype
Since this was a quick weekend project, I started by whipping up some JavaScript and CSS to recreate the titles as best as I could, rather than spend a lot of time on research. I had access to a review screener for my blog, so I was able to freeze-frame the movie and check my work against the titles. I picked out free fonts that matched the ones in the movie as closely as I could.
Phase 2: UI
Now I needed a way for users to actually generate the images. Since Promare is full of bold colors and exaggerated geometric graphics, I deliberately broke out of standard box-y web design concepts and placed elements inside lopsided polygonal containers, using CSS clip paths.
Phase 3: Initial Launch
The title generator immediately blew up. Fans started sharing it on social media and generating their own title cards, including Promare references, famous anime and movie lines, in-jokes amongst their friends, and even other memes like Loss. I got some feedback about improvements to the fonts and colors, which led to...
Phase 4: Additional Features
After taking a break to watch the fun unfold (and make a few title cards myself), I jumped back in to add a larger range of colors and styles, encompassing all the ways the titles appear in Promare itself. I also improved Japanese character handling to help Japanese fans who had started using the tool.
Results
More than 30,000 people used the title generator in the first weekend alone, and fans today are still making title cards and integrating it into their memes and artwork.