Universal Music Group launched Bridge, a global SaaS royalty reporting platform serving managers, financial teams, and creators across labels like Capitol, Interscope, Republic, Island, Decca, Geffen, Polydor, and Def Jam. The platform needed to communicate financial transparency, trust, and clarity while feeling like it belonged to the world's largest music company.

Before any front-end development began, the team needed a way to visualize how the landing page would feel in motion. Not a static mockup. Not a written spec. A video someone could watch and say "yes, build that."

Isadora Digital Agency brought me in to translate static Figma designs into a scroll-based motion prototype: a 30-60 second video demonstrating every microinteraction, scroll animation, hover state, and transition on the page. The audience was internal: UMG decision-makers and the development team who would build it.

The goal was alignment. One video that answers "what does this page feel like when someone scrolls through it?" before anyone commits to implementation.

A single video file showcasing the full-page scroll experience with:

Scroll-triggered section animations and reveals

Hover state behaviors for interactive elements

Transition timing and easing between content blocks

Microinteraction details for UI components

Full narrative flow from hero to final CTA

Built from static Figma designs provided by the team. I interpreted the layouts, created the storyboard, then the animatic, then designed all motion effects, aligning with the creative direction and layout intent.

One delivery with two round of revisions.

Client: Universal Music Group

Agency: Isadora Digital Agency

Product Designer: Cyn Márquez, Product Designer, Isadora Digital Agency

Creative Director: Isadora Marlow-Morgan, President, Isadora Digital Agency

Sr. Manager, Digital Production: Carina Lora, Isadora Digital Agency

Motion Designer: Tone Segurado (Tonemaki™)

The timeline was tight by design: kickoff on Wednesday, initial delivery by Thursday EOD, client feedback by Friday, final delivery Monday. Four working days, start to finish.

I worked from the Figma layouts and interpreted where motion should live. The static designs told me what was on the page; my job was to define how it behaved. Which elements ease in on scroll? How fast? What happens on hover? How do sections hand off to each other?

Then, the motion prototype became the single source of truth for the development team. Instead of written specs or annotated screenshots trying to describe timing and easing, they had a video they could scrub frame-by-frame.

Motion prototypes like this eliminate the most expensive kind of revision: the one that happens after code is written. When developers can see exactly what "scroll-triggered fade-in with a 200ms ease-out" looks like before they build it, the implementation matches the intent on the first pass.

This prototype directly informed the Lottie animations I later built for the production site (documented in a separate case study).

The motion prototype was delivered on deadline and approved by UMG stakeholders. It became the reference document for all front-end animation development on the Bridge landing page.

This section delves into the individual scroll animations and microinteractions extracted from the complete prototype.

The complete 90-second scroll motion prototype as delivered to UMG.

Let's talk.

Freelancer: tonesegurado.com Agency: tonemaki.com

Instagram | LinkedIn | X | Dribbble | Contra

Book a Call: cal.com/tonemaki