Alyssa Foote
Art Director & Illustrator
Meme Advent Calendar Built with Rive and JS
According to the staff at ChristmasCentral.com, “all advent calendars provide an attractive method for counting down the days until Christmas.”
...all advent calendars?
I decided then and there to prove them wrong and build something truly unhinged.
The Ghost of Christmas Memes visited me in the dead of night and told me to create an interactive, web-based advent calendar using Rive, HTML, CSS, and Vanilla JavaScript filled with cursed memes and animations for the 25 days of Christmas. It also told me to buy a Christmas goose for Tiny Tim and his family.
Check out the live site here
Role: Illustrator, animator, Rive developer, coder, meme curator
Tools: Figma, Rive, Javascript, HTML, CSS, GitHub
Goals
-
Build something that genuinely makes me laugh
-
Deisgn, illustrate, and animate each asset, hook it up to Rive and then code it into existence
- Crate and code an unlock system that reveals a new animation and meme each day
- Get on Santa’s good side
Challenges
- Finding cursed memes
- Ensuring the Javascript timing logic accounted for local time, reset behavior, and could reveal each animation/meme without spoilers
- Illustrating, animating, and toggling between 25 different presents to reveal 25 different memes using Figma/Rive/Code
- Staying on Santa’s good side
How the Christmas magic was made
Preliminary Explorations in Figma
I explored a variety of layouts to find the right balance between playfulness and clarity for the daily calendar reveal. While I considered formats that displayed previously unlocked memes, those designs quickly became too cluttered and visually overwhelming. In the end, I chose a cleaner, more focused layout that centers on the calendar itself, revealing one animation or meme per day.
I originally planned to use a custom typeface (Eckhart Sans, baby), but for accessibility and performance reasons, I ended up going with a Google Font called Agdasima, which still brings personality while keeping things simple. RIP Eckhart Sans, you would have loved being used for something as ridiculous as this website.
I originally planned to use a custom typeface (Eckhart Sans, baby), but for accessibility and performance reasons, I ended up going with a Google Font called Agdasima, which still brings personality while keeping things simple. RIP Eckhart Sans, you would have loved being used for something as ridiculous as this website.
Mining for memes
The ancient art of meme mining is not for the faint of heart. You need to learn how to get in and out or else you’ll end up in a meme wormhole that may take hours of your life. It was worth the risk. I recommend are.na.
Present Explorations
I knew from the start that each cursed meme needed its own dramatic unwrapping moment. I began by experimenting with ribbon shapes and present elements, which ended up influencing the entire animation direction. These explorations helped shape how the “unwrap” interaction would feel. I wanted part holiday cheer, part chaotic reveal.
Creating 25 different presents to unwrap
To simplify the task of animating 25 different unwrap experiences, I created four core animation loops and used different state machines in Rive to change the color depending on the day of the week.
![]()
Implementing the calendar at runtime
The site was built with vanilla JavaScript, HTML, and CSS. No frameworks, just vibes and cursed memes.
🗓️ Calendar Logic
I first created a dynamic calendar grid that populated dynamically using JavaScript. It automatically aligns with December 2025’s dates, adds blank cells where needed, highlights the current day, and styles past days with different colors to give that “advent countdown” vibe.
🎁 Unlock Mechanic
Only the current day is interactive. When the user taps the animated present, the meme for that day is revealed with a slight delay, because Christmas suspense is everything.
🧩 Rive Integration
I used a single .riv file containing multiple artboards and state machines. The script checks the current date and selects the appropriate artboard (e.g., "Week One", "Day 24"). It then sends a dynamic input (day) into the Rive state machine to trigger the correct animation.
🪄 Layer Separation
The Rive animation sits on top of the DOM canvas, and the meme content is revealed behind it. A pointerdown event disables further interaction post-click, ensuring the moment lands cleanly and doesn’t get triggered repeatedly.
🗓️ Calendar Logic
I first created a dynamic calendar grid that populated dynamically using JavaScript. It automatically aligns with December 2025’s dates, adds blank cells where needed, highlights the current day, and styles past days with different colors to give that “advent countdown” vibe.
🎁 Unlock Mechanic
Only the current day is interactive. When the user taps the animated present, the meme for that day is revealed with a slight delay, because Christmas suspense is everything.
🧩 Rive Integration
I used a single .riv file containing multiple artboards and state machines. The script checks the current date and selects the appropriate artboard (e.g., "Week One", "Day 24"). It then sends a dynamic input (day) into the Rive state machine to trigger the correct animation.
🪄 Layer Separation
The Rive animation sits on top of the DOM canvas, and the meme content is revealed behind it. A pointerdown event disables further interaction post-click, ensuring the moment lands cleanly and doesn’t get triggered repeatedly.
Results/Impact
- Designed, illustrated, animated, and coded a fully functional interactive advent calendar from scratch using Rive + JavaScript
-
Learned how to create runtime-reactive state machines in Rive and dynamically control animation logic in a live web app
- Turned 25 cursed memes into joyful noise
- Lindsay Lohan has reportedly agreed to star in the Hallmark Cinematic Universe’s dramatic adaptation of this website: A Cursed Christmas