11 Hidden Easter Eggs in My Website Footer (Built With One Rive File)

I really wanted my site to feel like Halloween this year. And as always, I remembered way too late.

So the question was: what's the easiest, fastest and coolest way to give a whole website a holiday feel, without redesigning a single page?

My answer was one Rive file. A strip of a haunted village along the bottom of the page, with 11 easter eggs hidden inside it. It switches itself on every October and off again on November 1st, with no deploy.

Here is how it is built, and how you can do the same on your own site.

The 11 easter eggs

Everything in the strip reacts when you click it:

• 3 houses. Each one switches its window lights on and off, and gives a little bounce.
• 3 trees. Two small ones shake and let bats fly out. The big one bounces and releases a whole burst of them.
• 4 pumpkins. Tap them and they explode, the same trick as the pumpkin tutorial.
• Buddy, the mascot, in a witch hat. He bounces when you poke him.

Every click has its own sound, and there is a soft orange fog drifting on both sides. I'm not going to tell you where all of them are. That's the point of an easter egg.

How to hide easter eggs in your website footer with Rive

The whole thing rests on five decisions:

1. Design the strip in Figma, on top of the real page.
2. Build each element as its own small artboard in Rive, with its own interaction.
3. Assemble them into one responsive footer artboard.
4. Put it on the site as a fixed strip that never gets in the way.
5. Let the date decide when it shows up.

1. Design it on top of the real page

I designed the footer in Figma on a screenshot of my homepage, not on a blank frame. A footer like this lives or dies on how it sits next to your real content: the stats row, the buttons, the white space. Two clusters at the edges (the village on the left, Buddy and the pumpkins on the right) and low hills in between, so the middle of the page stays calm.

2. One small artboard per element

In Rive, every element is its own artboard: a house, a tree, a bat, a pumpkin, Buddy. Each one has its own state machine with its own click.

This is the part that makes it manageable. The house knows how to turn its lights on. The tree knows how to shake and release bats. Neither of them knows anything about the footer. When something breaks, you open one small artboard and fix it there, instead of digging through one giant timeline.

The houses are a good example of how simple each piece is. One click toggles the lights. When they go off, the flicker stops too, so a dark window really looks dark.

The pumpkins reuse the trick from the pumpkin tutorial: a Solo that swaps the pumpkin's states, a squash and stretch that hides each swap, and a quick flash on the explosion.

3. One footer artboard that stretches

Then all those pieces go into one Footer artboard, using Rive's layouts:

• The left cluster is pinned to the left edge.
• The right cluster is pinned to the right edge.
• The hills stretch to whatever width is left.

So on a laptop the village and Buddy sit close together, and on a wide monitor they move apart while the hills fill the gap. Nothing scales or squashes. It's the same idea as a responsive web layout, just inside the animation.

The fog is a small shader script, one on the left and one on the right, in two layers (a faint one behind the hills and one in front). It drifts slowly and only at the edges, so it never covers the page.

Who did what

Claude, connected to Rive through MCP, did a lot of the heavy lifting here: rebuilding my Figma design in Rive, wiring every click to its state machine and its sound, exporting the file and shipping it to the site. That's the dirty work, and it's a lot of it.

But it only worked because I knew exactly what to ask for. An agent doesn't know how a Rive file should be structured. I had to tell it: one artboard per element, each with its own state machine, everything assembled into one footer with layouts, pinned left and right. If I hadn't known Rive, I wouldn't have known that was the right way to build it, or how to fix it when it wasn't.

And the parts that make it feel alive are still mine. I did the rigging on the trees, made the loops seamless so nothing jumps when an animation repeats, picked which animation plays on each click, and tuned the timing of every bounce until it felt right. The agent does the wiring. The feel still comes from knowing what you're doing.

If you want to try it, this is the kind of prompt that gets the layout right:

I have a footer illustration designed in Figma: a group of houses and
trees on the left, a character with pumpkins on the right, and rolling
hills across the whole width.

Rebuild it in Rive as one wide Footer artboard for a website.
Right now it is a single flat picture, so it would just stretch on a
wide screen and squash on a small one.

1. The left group stays pinned to the left edge.
2. The right group stays pinned to the right edge.
3. The hills stretch to fill the width between them.
4. Each house, tree, pumpkin and the character is its own component
   with its own state machine, so I can animate each one separately.

Keep the artwork exactly as it is in Figma.

4. On the site: fixed, click-through, closable

On the site, the strip is fixed to the bottom of the screen. A few rules keep it fun instead of annoying:

• Clicks go through it. The strip only catches clicks right over the drawings at the far edges. Everywhere else, your click lands on the page underneath, so it never blocks a button, and definitely not the buy button.
• Desktop only. On a phone a strip like this would eat a big chunk of a small screen, so it only shows on wide screens with a mouse.
• An X to close it. Some people just want to read. One click and it's gone.

5. Let the date turn it on

This is my favourite part. The footer checks the visitor's local date. From October 10th to October 31st it shows up, and on November 1st it simply isn't there anymore. Next October it comes back by itself.

No deploy to turn it on, no deploy to take it down, and nothing to remember next year.

What's next

The same structure works for any holiday. A Christmas version only needs new artwork and a new date window. The Rive setup, the click-through strip and the date check stay exactly the same.

If you want to build interactive pieces like this yourself, from the state machines to the layouts, that's exactly what my Rive Masterclass teaches, step by step. And if you'd rather just play with it first, go to the homepage before October 31st and start clicking.