Add Real Depth to a 3D Card in Rive: Parallax with Eight Flat Layers

In the last post I built a 3D card in Rive from a single image, and ended with the two things I had left out. This is the first of them: the scene moving inside the card.

Here it is. Tilt it and the sky slides behind the trees, the trees behind Snowy, and a branch slides the other way in front of everything. Snow falls behind him and in front of him. And the name, the ability, the numbers, all of it is live text you can change while it turns.

It is the same card, the same node, the same shader from last time. Nothing was rebuilt. The card just stopped being a picture and became a window.

The one idea

The frame is a window. What is behind it slides against the tilt, and the deeper it sits, the more it slides. What is in front of it slides with the tilt. The frame itself never moves.

That is the whole trick, and it is exactly what your eyes do at a real window. Lean left and the far hills shift more than the fence post. A card is a very small window, so the effect is subtle, and subtle is what makes it feel real rather than like a gimmick.

Everything else in this post is that sentence applied to eight flat images.

Eight flat images

Last time the card face was one artboard, painted onto a surface standing in 3D. This time the face is eight artboards, each one holding one piece of the picture, and each one told how deep it sits.

Sky. Trees. Snow behind. Snowy. Snow in front. Frame. Text. A branch.

I split the original card in ChatGPT, the same way I generated it, and laid the pieces out in Figma to see them side by side. Then every piece became its own artboard in Rive, all the same size as the card.

Two of those artboards are not images at all. The snow layers each hold a small Node Script that draws flakes and keeps them falling. That is the part I like most about this setup: a layer is an artboard, and an artboard can be alive. Snow today, rain tomorrow, same card.

Three layers first

I did not ask for eight layers. I asked for three: the background, the character and the frame, each as an artboard I can assign in the inspector, each with its own depth control, and each keeping its own size behind the frame.

The exact wording of that prompt, and the finished file with all eight layers, are in the free download at the end of this post.

Three is enough to see whether the idea works, and few enough that when something is wrong you know where to look.

The agent came back with three artboard inputs and a depth number for each. Every depth was zero, so nothing moved. The card tilted exactly as before, one flat piece. That turned out to be the most useful moment in the build: zero depth is last week's card. The whole effect is those three numbers.

Ninety for the sky, thirty five for Snowy, zero for the frame, and there it is. Push the sky to one hundred eighty and the scene gets deeper. It is a feel thing, and you find it by dragging.

The hole at the edge

Then the first real problem, and I left it in the video on purpose.

Tilt the card hard and the sky runs out. You see the stage through the window, a red gap at the edge.

It is not a bug. It is the window doing what a window does. When the sky slides behind the frame, it reveals part of itself you could not see before, and if the picture is exactly the size of the card there is nothing there to reveal.

So the layers behind the window have to be bigger than the window. How much bigger depends on how deep they sit, because deeper slides further. A rule of thumb that held up: extra picture on each side, in percent of the card, about a third of the depth number. Sky at depth thirty gets a hundred and thirty percent. Trees at eighteen get a hundred and fifteen. Snowy stays his own size; he is transparent around the edges anyway.

I scaled the sky up, and the gap was gone. That is the size rule, and it is the only rule in this build you cannot skip.

In front of the window

Everything so far sat behind the frame. The branch is different: it sits in front, so it has to slide the other way. One more prompt: a layer in front of everything, including the frame, with a depth control that accepts a negative number.

That prompt is in the same download.

Negative numbers for the front, positive for the back, zero for the frame. Once that convention exists, the whole card is a column of numbers in the inspector, and you can push a layer forward or backward by changing its sign.

The text is not a picture anymore

The last layer is the one that changes what the card is.

The original frame had the text baked into the image. I swapped it for a frame without text, and put real Rive text on top: the title, the ability, the description, the two stats. Each one is bound to a ViewModel property. Change the value in the Data panel, or from your app at runtime, and the card updates while it turns, foil and all.

At that point it is no longer a card. It is a template. Four characters, four sets of images, one node, and the words come from outside.

What I did not know

Same honesty as last time.

I did not do the depth math. I described a box seen through a frame, and the agent worked out that a layer's position is where the view ray through the surface meets that layer's plane. I learned the phrase afterwards, by asking.

What I did know was how to build it: split the picture into pieces, ask for three of them, look, fix the one thing that was wrong, then ask for the rest. That is not a tip about AI. It is how you build anything you cannot see the end of, and it happens to be exactly what the agent needs too.

I built this one with Claude connected to Rive over MCP, which means the prompts went to a chat and the file changed under me. The same prompts work in Rive's own agent. The workflow does not care which door you use.

What is next

One thing I left out, again.

A metal frame. Gold that catches the light and moves as the card turns, with a raised edge. The card already has a light and a per-pixel view direction, so the frame is mostly a matter of telling it what metal does.

If you want to build the card itself first, that is part one, and you can watch it right here:

The template with all eight layers, the snow scripts and the bound text, plus the three prompts, is below.