Card play that feels real

Brush your finger across a card on a table. It slides, maybe turns a little, and ends up somewhere new. You barely think about it.

Recreating that small moment on a screen takes a surprising amount of thought.

For the Lebenswege project, we wanted visitors to explore a collection of digital cards with a mouse or a finger. The cards would respond to a passing gesture, as though you were gently brushing them across a tabletop.

We wanted people to feel curious enough to play. This is roughly what we ended up with:

Starting with something familiar

We already have a good feel for how everyday objects move. Push a card through its center and you expect it to slide. Brush a corner sideways and you expect it to turn.

Those expectations became our starting point. Where you touch the card, and which way you move, should shape its response.

To translate these assumptions into a concrete model, we look for a relationship between the contact point $c$ where the finger touches the card, the movement vector $u$ describing the direction in which the finger moves, and the resulting movement of the card.

It is useful to place the origin at the center of the card, so $c=0$ corresponds to a touch at the center. Since the contact point itself should always move with the finger, it is sufficient to calculate the angular velocity $\omega$, which describes how fast the card rotates around $c$.

As noted above, touching the card at its center should not cause any rotation. Dragging directly toward or away from the center should not cause rotation either; this covers every case in which $c$ and $u$ are parallel.

If we split the movement vector $u$ into a component $u_\parallel$ parallel to $c$ and the remaining component $u_\perp$, which is perpendicular to $c$, we can say that the angular speed $\omega$ should increase with the length of $c$ and the length of $u_\perp$.

These dependencies are captured by the so-called cross product

which describes the signed area of the parallelogram spanned by the two vectors and is very easy to compute. In many applications, including this one, the parallelogram itself never appears directly. Its area simply has exactly the dependence on vector lengths and angle that we need.

First, we need to normalize the cross product appropriately. Our angular velocity should depend only on the lengths relative to the dimensions $w\times h$ of the card, so we must divide by a value proportional to $w^2+h^2$.

We could, for example, choose the remaining constant factor so that touching a card at the corner and moving it along a circle causes it to rotate around its center. For this, the denominator must equal the squared distance between the corner and the center, which is $\lVert c\rVert^2=(w^2+h^2)/4$. We then get the following formula for the angular velocity:

This approach translated the idea into a simple movement rule, which is also used in our demo above. It was efficient and felt convincing. We could have stopped there.

But we were curious. How close had we come to the way a real card behaves?

A detour into physics

From a physics perspective, when we force the card to move, it generally follows the path of least resistance. This typically translates into an optimum in which the individual points on the card minimize the distance they travel, but exactly how this works depends on the physical model.

We explored two simple ways of describing the resistance: one resembles a heavy object gliding with very little friction, while the other is closer to a lightweight object sliding across a not completely smooth surface, like a card on a table.

For the heavy object with little friction, inertia dominates, so we minimize kinetic energy, which grows quadratically with velocity. In the other case, dry friction dominates, and its effect scales only linearly with velocity.

Both models can be described at once. Let $S$ be the area occupied by the card, and let $J(x,y)=(-y,x)$ denote a rotation through $90^\circ$. If $\omega$ is the angular speed around $c$ like before, then the following formula describes the velocity of any individual point $x$ on the card:

The two optimization problems can therefore be written as the minimization of the following integral, where $p=1$ represents friction and $p=2$ represents the kinetic model:

You might expect the more realistic model, $p=1$, to be the obvious choice. In practice, it is harder to calculate. The kinetic model offers a surprisingly convincing response with a much simpler calculation.

First, we expand the integrand for $p=2$:

The integrals of these three terms all have closed-form expressions. The problem therefore reduces to minimizing a quadratic polynomial in $\omega$, whose minimum also has a closed form. For a rectangle of width $w$ and height $h$, the result is

In the friction model, with $p=1$, there is no closed-form expression for the minimum, so it can only be approximated numerically. We did this and compared with the other two models:

Surprisingly, the two physical models behave quite similarly, even though they represent different scenarios. Since the kinetic model is much easier to compute, it is a promising practical choice.

For another perspective, we can plot the resistance of the two models as a function of the angle and compare their minima with the naive cross-product approximation from our first version.

Here we get a hint as to why the two physical models behave so similarly: they differ mainly in how quickly the resistance increases as we move away from the optimal angle, rather than in the location of the optimum itself.

This is part of the digital craft we enjoy: exploring a problem far enough to understand which details matter, then finding an economical way to bring them to life.

The table had something to teach us, too

Along the work on the problem, we discovered that one of our own assumptions was slightly wrong.

We had imagined that guiding a card by its corner could make it turn neatly around its center. But our physical models suggested that the center would wander a little, too.

Try it with a sheet of paper. If you place one finger on a corner and guide it around, it is impossible to keep the center perfectly still.

Giving visitors something to discover

These details give a digital experience its character. A familiar movement can make an unfamiliar interface easier to approach. A playful response can give someone a reason to explore a little further.

When we design for a brand, we think about these moments alongside the words and visuals. How should the content respond to an interaction? Where could it invite a little curiosity?

Sometimes, that invitation starts with a card that turns just as your finger expects.