Kinetiq for Game HUDs

Kinetiq Blog

Solstice’s product animation evolution: embracing Kinetiq

Moving from frame-based exports to state machines improved performance, iteration speed, and craft.

When Solstice shipped its redesigned assistant, Sol, the team wanted every surface of the product to feel alive — typing indicators that breathe, handoffs that glide, celebrations that land with real weight. What they had instead was a pipeline of exported frame sequences that ballooned bundle sizes and turned every tweak into a re-export.

We sat down with the Solstice brand studio to understand how they rebuilt that pipeline around Kinetiq, and what changed when animation stopped being an asset and started being a system.

Why frame-based exports stopped scaling

Solstice’s original workflow will sound familiar to most product teams: motion designers composed animations in a timeline tool, exported them as JSON frame sequences, and handed the files to engineers who wired them up per platform. Each animation was a black box. If a designer wanted the assistant’s waveform to pulse a beat faster, the whole loop — edit, export, hand off, rebuild — started over.

The costs compounded quietly. The web client was shipping 2.4 MB of animation payloads, most of it duplicated states that differed only in color or tempo. Worse, nothing could respond to the user: an exported clip plays the same way whether the customer is waiting, typing, or celebrating a resolved ticket.

“We were animating screenshots of moments,” says Mara Okafor, who leads the brand studio. “What we wanted to animate was behavior.”

State machines changed the iteration loop

The team’s first Kinetiq build was the Sol launcher — the small waveform glyph that sits in the corner of every Solstice customer’s site. Instead of exporting eleven variations, they built one artboard with a state machine: inputs for listening, thinking, and responding, with transitions the runtime blends automatically.

The Sol launcher’s state machine: one file, three blended states, zero re-exports.

Engineers now bind those inputs directly to product events. When a customer starts typing, the runtime drives the listening input and the waveform leans in; when Sol streams a reply, it eases into responding. No timers, no clip-swapping, no per-platform re-implementation. The same file runs on web, iOS, and the in-game HUD builds the team is prototyping.

Iteration speed was the headline win. A tempo change that used to take a day of exports now lands in the next design sync. The payload story improved too: the launcher, chat transitions, and celebration effects together now weigh 140 KB — a 94% reduction — because states share geometry instead of duplicating frames.

Craft, performance, and what’s next

The subtler change is in the craft. Because designers can feel transitions in context — hovering, clicking, interrupting mid-animation — they polish the in-betweens that exported clips never let them touch. The team keeps a “interruption test” in every review: cut the animation off halfway and see if it still feels intentional.

Solstice is now moving its onboarding sequences and empty states onto the same system, and experimenting with data-driven inputs — letting response confidence subtly shape how assertively Sol’s waveform moves. “Once motion is stateful,” Okafor says, “you stop asking what should this clip look like and start asking how should this thing behave. That’s a better question.”