Calavera Cabina: a tribute app for Día de Muertos
DEV Community

Calavera Cabina: a tribute app for Día de Muertos

The booth that didn't happen

Picture this: it's spooky season, late October, and you are building a booth for a conference. People are getting creative: on the left, someone has a tarot card activity with a crystal ball and are saging your codebases against bugs. On the right, folks are handing out Halloween candy with the phrase, "You're worth a mint to us".

I wanted to build a seasonal experience that would lean into Cloudinary's new image generation tooling: people walk up, take a selfie, and leave with a generated sticker. The catch: I only have a thermal printer on hand, but what about creating something in black and white, like a tatoo?

What about printing a stylized selfie that reflects an interesting seasonal image? What about Día de Muertos? Mexico's famous holiday full of rich symbolism and imagery such as colorful, fashionable skeletons, cut paper garlands, brilliant florals, and more.

Because of some logistic snafus, the seasonal booth experience for conference didn't materialize. The app is built, however, so I wanted to share it, taking you along with me down the rabbit hole into scary stories and legends.

Why Día de Muertos

If you're on "spookytok" - TikTok's Halloween stream, you'll soon hear a beautiful song, "La Llorona" - the weeping woman. Depending on the interpretation, she is a woman who cries for her lost children or her lost love, wandering by waterways (something like the Irish Banshee), wailing. Often the song is paired with images of the "Calavera Catrina", a stylish skeleton lady (more below).

Could we create a transformation of a selfie into La Llorona?

An authentic image of the Wailing Lady is more like a tragic figure than a saucy skeleton: Me as La Llorona, not a cheerful image.

I hesitated. Is it too sad an image? We want people to view themselves as taking part in a festive event, not a funeral! And moreover, for the men coming to the booth, how would we visualize them? Is there a wailing banshee equivalent?

This took me down quite a journey away from Mexico and into Venezuela, where we encounter El Silbón, "The Whistler", a lost soul carrying a bag on his back, whistling a warning of imminent doom to passersby. It's a really scary story, far too much for the unwary folks who would wander to our booth! My long-suffering husband as El Silbon.

It was time to return to the brighter aesthetic of Día de Muertos. The imagery that works best is the true Catrina or Catrin - the familiar fashionable skeleton celebrated with face painting and costumes.

Catrina was popularized in the early 1900s by Mexican artist Jose Guadalupe Posada: La Calavera Catrina, c. 1910, lithograph. She and her dandy skeleton counterpart, El Catrín, poke sly fun at the Europeanized gentry of the time, while also drawing on a the much older traditions of the Aztec queen of the underworld, Mictēcacihuātl, mixed with Catholic imagery around All Saint's Day.

On TikTok, we have ladies dressed in their finest Catrina garb paired with the haunting Llorona song...an interestingly mixed metaphor. It took me a little while to get the aesthetic where I wanted it: spooky, but not scary.

Now, for the prompt!

With AI, it's trivially easy to scaffold an app that will take your selfie and use Cloudinary's Image Generation tooling to generate something that would work for my little thermal printer. The trick is to get the prompt right. I experimented several times to find something that would print well, produce a recognizable portrait, and be true to the aesthetic of the Catrina:

"Restyle the person in [1] as a Día de Muertos-inspired fine-line tattoo portrait. " +
"Preserve their identity, facial features, hairstyle, proportions, and recognizable expression. " +
"Use crisp black ink on a pure white background with delicate tattoo-flash linework, " +
"clean contours, restrained stippling, strong negative space, and clear details that print well at small size. " +
"Use dignified ceremonial clothing inspired by traditional Mexican portraiture: an elegant embroidered blouse, " +
"dress, rebozo, lace-trimmed neckline, or formal charro-inspired garment. " +
"Avoid modern casual clothing, business attire, exposed cleavage, costume-like clothing, or generic fantasy garments. " +
"Keep the face human and recognizable rather than replacing it with a skull. " +
"No color, grayscale, gradients, painterly shading, beige texture, photorealism, text, or watermark.";

Then, in this very simple Astro app, send that prompt along with the image to the Image Generation API:

body: JSON.stringify({
  prompt: stylePrompts[style as keyof typeof stylePrompts],
  reference_images: [{ source_type: 'managed_asset', asset_id: upload.asset_id }],
  model: { mode: 'auto', preference: 'quality' },
  image_size: { aspect_ratio: '3:4', resolution: '1K' },
  target: {
    target_type: 'managed_asset',
    public_id: `calavera-cabina/portraits/${crypto.randomUUID()}`,
  },
}),

The use of mode: 'auto' allows the choice of a model that will work best for your prompt. Depending on your model, you might get a different result, so it's important to have a good prompt (AI can help with crafting one): One model kept building interesting frames and using spiderweb images for some reason, so I had to rework the prompt.

How Calavera Cabina works

I can't take credit for the clever pun (thanks, Lovable!) - but the Calavera Cabina (Skeleton Camera, as opposed to the Calavera Catrina), was starting to take shape. Home screen of the Cabina.

I decided to give users a choice. Let them take a selfie and choose a style, leaning on imagery of the Catrin/Catrina, or a floral motif style, or a darker, mystical night style reflecting the Llorona mood. They all turned out beautifully! The final result.

An invitation

I want to be extremely respectful of cultural norms and local holidays, and I know I'm approaching this as an outsider. From a self-education standpoint, I was really happy that my meanderings with this app concept led me into new sources of knowledge.

It's fascinating to me to find parallels between the stories of Celtic water-wanderers I grew up with and the crying lady of Mexico. But the Día de Muerto's particular aesthetic seems to stand out as a delightfully spooky, deliciously fun celebration of deep culture.

I invite you to check out the codebase and fork it to try the app yourself. You'll need an API Key and Secret alongside your Cloud Name, an upload preset for your images, and the Image Generation Add-On: https://github.com/cloudinary-devs/photo-booth.

Print yourself a tatoo-style sticker! And Happy Halloween, Día de Muertos, and All Saint's Day! The printed sticker result.

Shout-out to the folks I consulted with on this article: Diego from Colombia 🇨🇴 and Anthar from Mexico 🇲🇽 💕

Read on DEV Community ↗ ← Back to News

Comments

No comments yet. Start the discussion.