Animating Redacto: One Cat, Three Pipelines

Every product I have worked on gets a soul sooner or later. At Redact, the soul is a cat, and this is the story of how that cat learned to move three different ways.

It started as a meme

Redact did not begin life with a brand strategy deck. It began with a meme, and the meme came with a dare: what if we filled a privacy tool, a product whose whole job is deleting your embarrassing history off the internet, with cats?

It was highly unprofessional. It was extremely quirky. We did it anyway.

Out of that early chaos came a mascot: Redacto, the Redact cat. The original sketch is lost to time (ironic, for a company that deletes things), but I remember exactly what I was channeling: Kimba the White Lion, the 1960s anime that a certain Disney lion movie famously, allegedly, definitely-just-a-coincidence resembles. A white cat with big honest eyes felt right for a product asking you to trust it with your entire post history. He got a pair of blue overalls, and he got a job: reacting to everything the app does.

Idle

Hover, happy

Hover, sad

Error

Confirm

Bonked

Era one: animating a cat in 2021, with 2021's AI

Here is the part of this story I love telling now, because in hindsight it was a preview of how I would end up working for the next five years.

I was one designer, and Redacto needed a full cast of animations: idle loops, hover states, error reactions, a confirm wiggle. Hand-drawing every in-between frame the traditional way was off the table at startup speed. So I reached for something that, in 2021, felt like a lab experiment: DAIN, Depth-Aware video frame INterpolation.

DAIN was one of the first AI tools animators got their hands on, years before "AI" meant chatbots. It is a research algorithm that looks at two frames of motion, estimates a depth map of the scene to understand what is in front of what, and then synthesizes the frames in between: machine-generated tweening. The anime community was using it to smooth old shows up to 60fps. I pointed it at a chunky white cat.

My workflow became a strange, wonderful loop:

1. Draw the key poses by hand, the fewest frames that sell the motion.
2. Feed them through DAIN, which hallucinated the in-between frames. Sometimes beautifully. Sometimes Redacto's face would smear like a ghost mid-blink.
3. Trace over DAIN's output frame by frame in Photoshop, cleaning up the artifacts and redrawing anything the algorithm mangled.

The AI never shipped a single finished frame. What it gave me was a pseudo-tweening guide, an underdrawing for motion. It did the boring spatial math of where the ear should be on frame 7, and I did the part that made it feel like a cat. I even documented the technique on YouTube at the time.

Don't ask whether the AI's output is good enough to ship. Ask which part of the job it can carry, so you spend your hours on the part that needs a human.

In 2021 that meant tracing over a frame interpolator. It would not be the last time.

Era two: the cat learns Rive

Eventually the DAIN-and-Photoshop assembly line met its successor. We started building animations in Rive, both for the website and inside the product, and I will describe it the way I would describe it to another motion designer over coffee: it is After Effects without the baggage.

The baggage, to be clear, is being slow and crashing constantly. After Effects is a wonderful tool wearing a backpack full of bricks. Rive opens fast, stays fast, and does not treat a timeline scrub like a rendering emergency. But the real relief was structural. After Effects makes you bury complexity in pre-comps: compositions nested inside compositions, like Russian dolls you have to keep opening to change one eye blink. Rive instead gives you one huge artboard where reusable pieces live as components. If that sounds like Figma, it is because it is basically Figma's mental model applied to motion, and for a product designer that meant zero relearning. My design brain and my animation brain finally used the same muscle.

I had a genuinely great time making these. This is the era of Bongo Redacto (the meme lineage, honored), plus a ghost and a whole chill session. The cat had range now.

Bongo

Ghost · 21KB

Chill session

The part I got wrong about Rive

The other thing that sold us on Rive: the animations play in essentially every browser. For a long time I assumed it pulled that off the boring way, rendering the animation out to image frames and streaming them like a fancy GIF, with quality scaling to your bandwidth.

Turns out it is smarter than that, and the truth explains everything I liked about it. A Rive export is a tiny binary file of vector shapes plus a state machine. There are no frames in it at all. A small runtime in the browser redraws those vectors live, every frame, at whatever framerate your device can hold. Nothing is baked. That is why a full character animation ships smaller than a single screenshot, why it never pixelates, and why it does not hiccup on a bad connection: you download the instructions for the motion once, not the motion itself.

For comparison: the GIF preview of Redacto's coffee break sitting in my archive is six megabytes. The Rive version of an animation like that is measured in kilobytes.

And the state machine part quietly changed my job description. A Rive animation is not a video that plays, it is a little brain that reacts. Hover states, click reactions, idle-to-alert transitions: I could wire those up inside the animation file and hand engineering one asset that already knew how to behave. No keyframe tickets, no "can you re-export it 20% slower."

There is a tidy irony in the timeline, too. In 2021 I was tracing over an AI's hallucinated in-between frames by hand, playing the tweening machine myself. By the Rive era, the in-betweens were not drawn by anyone. The runtime interpolates them live. The tweening finally became someone else's job. Something's, anyway.

Era three: the shortcut hiding inside Figma

Here is a confession that every motion designer makes eventually: not every animation deserves the full treatment.

Character work like Redacto belongs in Rive. But a lot of what a product actually needs animated is not a cat performing. It is screens: the hero loop on the landing page, a demo of bulk deletion running, a "how to use" walkthrough. Building those in a dedicated animation tool means redrawing UI that already exists somewhere else, pixel for pixel, and keeping it in sync every time the product changes.

Then it clicked. The screens already live in Figma. So does a prototyping mode with Smart Animate, which is tweening in all but name: give it two frames and it interpolates position, size, and opacity between them on its own.

The new pipeline was almost embarrassingly short. Take the real product screens, wire them into a prototype, let Smart Animate handle the transitions, hit play, screen-record it, and export as webm. Done. No redrawing, no render queue, and when the UI changed I updated the frames and re-recorded instead of reanimating.

I will be honest about the origin of this one: it was not an artistic epiphany, it was the product team deciding we needed to move faster. And they were right. This is the workflow behind the hero videos and every feature demo on the site, and nobody watching can tell it is a screen capture of a design file playing itself.

There is a pattern worth naming here. Every era of this story, the animation pipeline collapsed further into tools we were already using. First a standalone render pipeline, then an animation tool that thinks like Figma, then Figma itself. The distance between "designed" and "animated" kept shrinking until, for product screens, it hit zero.

The design file became the animation source.

What five years of animating one cat taught me

1. Match the fidelity to the message. The cat gets hand-crafted character animation because charm is the whole point. A feature demo gets a Smart Animate capture because clarity is the whole point. Spending Rive-level effort on a screen transition is not craftsmanship, it is a scheduling problem wearing a beret.
2. Ship instructions, not frames. The single biggest jump in this story was realizing an animation does not have to be a stack of baked images. A 6MB GIF and a few kilobytes of Rive vectors can describe the same motion. Whenever you can send the recipe instead of the meal, do it.
3. Let the machine do the in-betweens, always inspect its work. In 2021 that meant tracing over DAIN's hallucinated frames in Photoshop. Later it meant Rive's runtime interpolating live, then Smart Animate tweening screens. The tool doing the tweening changed three times. The rule never did: automation handles the math of where things are, the designer handles whether it feels alive.
4. The best pipeline is the one your team already knows. Rive won partly because it thinks in components like Figma. The Figma workflow won because there was nothing new to learn at all. Every tool you remove from the chain is one less bottleneck with your name on it, and you have read that story from me before.
5. Speed pressure is a design input, not an insult. The fastest workflow in this story came from the product team asking for velocity, not from me protecting my craft. Listening to that made the work better, and the cat did not mind. He was busy playing the bongos.