hubertanimatesAnimation 04
← Back to all projects
Case study Client work
hubert × guapa studio
Nine web animations delivered across three complexity tiers — three full-bleed centerpieces, then two waves of supporting motion, with desktop and mobile cuts for the largest pieces.
"
"We had the pleasure of working together with Hubert on a very exciting project, and he not only met our expectations but greatly surpassed them. True attention to details, hands-on thinking and a large portion of creativity — would (and will!) work together in a heartbeat, absolute no brainer!"
The work
Three centerpieces that defined the page
Centerpiece 01
Scroll-based animation for the technology page
A scroll-driven animation visualizing how a three-stage AI product works, built in two separate variants for desktop and mobile. As the user scrolls, it reveals itself and each stage plays its own looping micro-animation on entry. Hovering any of the three layers triggers its animations on loop while dimming the other two. I built two custom Framer code components: one to embed the animation with scroll-driven playback, and a second to expose scroll progress to trigger Framer elements on the page.
Centerpiece 03
Hero section animation for the technology page
Four separate looping animations composited into a single hero scene, built in desktop and mobile variants, surrounding the page headline — "AriesOne — Forward deploy your entire organization." Intentionally non-interactive: the goal was an ambient motion that signals a complex, modern product without competing with the copy or slowing the user down. First impressions are made in seconds, and every loop was designed to reinforce the product's aesthetic before the user reads a single word.
Centerpiece 02
3-layer visualisation of the product's architecture
An isometric visualisation of the product's three-layer architecture, and the first animation built for the project. It defined the visual language carried through everything that followed. Hovering any of the three layers expands it to reveal its internal structure while dimming the other two, letting each layer speak on its own terms. I was involved in the concept and design direction from the start, not just the animation.
Regular animations
Detailed animations for every architecture layer
Each of the product's three layers is complex enough to stand as a product on its own — so each got its own dedicated animation and section. All three play on scroll into view with a camera zoom-out on entry: data particles in motion, inputs merging into connected nodes, and a human and AI agent working together. Treating them separately was a deliberate choice to give each layer the weight it deserved.
Animation 05
Composition & Orchestration
Animation 06
Human Teaming
Mini animations
Supporting animations for the rest of the page
Three smaller animations added to fill out the bottom of the page, each looping independently and responding to hover. The first reveals a grid of pixel icons through a scanning effect that follows the cursor; the second and third are simpler hover interactions. Together they carry the visual language through to the end without demanding the same attention as the centerpieces above.
Animation 07
Selective by design
Animation 08
Harnessing AriesOne
Animation 09
Becoming AI-native
The process
How I collaborated with guapa studio
Guapa came with a brief and a goal. Before a single frame was animated, we spent days in shared Figma files and on calls, exchanging references, challenging each other's ideas, and narrowing down what would actually work for a product this complex. That first piece defined the visual language for everything that followed. From there the collaboration stayed close: daily progress updates, live calls every few days, and changes applied immediately. By handoff, every file was tested, implemented, and ready to ship.
01
Direction
Before anything is animated, we figure out what should be. I bring references, technical constraints, and an honest opinion on what will and won't work — so the design phase starts with a clear target.
02
Animation & Interactivity
Each piece was animated and wired in Rive from guapa's designs. For the complex ones, Rive's built-in plugin wasn't enough, so I built custom Framer code components from scratch for scroll-driven playback and triggering Framer elements directly via the animation.
03
Communication
Daily progress updates kept the studio informed at every stage. For anything that needed a real conversation, a 15-minute call did what a hundred Slack messages couldn't.
04
Handoff & walkthrough
Every animation was implemented inside a copy of their Framer file first, so they could replicate it step by step. Depending on complexity, handoff came with either a written walkthrough or a Loom video.