The social media team at Genius posts on Instagram up to 20 times per day. Many posts are text-heavy, and use a template: artist quotes, Genius articles, tweets, and lyric cards. These templates are easy-to-edit Photoshop files, which the social media team will open, edit, and export. This process works for everything except lyrics, which we display with a text highlight — the highlight effect is easy to render in a browser, but tedious in Photoshop.
I built a web-based design tool that the social media team uses every day to create lyric cards quickly.
The Lyric Card Generator is a React app. Cards are rendered with HTML and CSS, and turned into downloadable images in the background with html2canvas.
Everything the user sees is interactive, but in more limited ways than in Photoshop. Images can be positioned by dragging or scaling, but not moved off-screen, or zoomed to the point of pixelation; text can be edited, but only resized with a toggle at the bottom of the screen. Small warnings will nudge the user to correct easy-to-miss mistakes. It’s like Photoshop with lane bumpers.
Two different color libraries are used to set the attribution bar’s color: Color Thief and Tiny Color. When an image is dropped onto the page, its dominant color is extracted by Color Thief and set as the bar’s background color. Then, Tiny Color determines whether white or black text is more readable on that color.
The user can change the pre-selected color with Chrome’s built-in color picker, or even use an eye-dropper tool to pick a different color from the image.
The code for this project isn’t publicly available, but you can use the tool on sgnarly.me.