We are thrilled to introduce Vapor, a new design system for Frame.io Version 4. Vapor blends design and engineering craftsmanship, making every V4 element shine in looks and performance. We guarantee that using Vapor makes Frame.io feel delightful both on the web and on mobile.
Our new Panel system
The most exciting new enhancement introduced in V4 is Frame.io’s flexible panel system. We know that Frame.io users are master multitaskers. They are constantly viewing media, managing uploads, responding to comments, and trying to get work done. Our new panel system gives users the power to decide how to orient their apps to be the most efficient.
In the top right-hand corner of the Frame.io V4 app, you can choose which panels you want to make visible at any given time.
The left panel helps you to navigate to your Assets, Collections, and Shares. The center panel is a handy way to see the media player while you’re doing other tasks. And you can keep all your communication top of mind by turning on the right panel, which allows you access comments and properties. You can choose to expand every panel for the ultimate multitasking experience or collapse them all for distraction-free focus. Frame.io Version 4 gives you the flexibility to work the way you want.
Customization is key to what makes Version 4 so special. You can change nearly everything about the way your media appears, from adjusting aspect ratios, editing Card Size, and even changing which metadata fields are displayed front and center.
Pushing the browser boundaries
We took great care making sure transitions in Frame.io V4 feel delightful. We also designed our colors to make your media look vivid and luminous, with beautifully toned surfaces that respond to depth and text. This harmonious color range was created within the LCH color space to ensure perceptual uniformity, which is not possible with traditional RGB methods.
We crafted our Version 4 tools for precise adjustments, enhancing contrast and color vision deficiency friendliness without sacrificing elegance. Enjoy both light and dark modes, along with customizable themes for a visually appealing and accessible experience.
Silky smooth navigation
From the beginning, Frame.io has always pushed the boundaries of what’s possible in a browser. Version 4 takes that focus to a whole new level by re-imagining our entire design architecture. Our goal was to build a web app that feels as fast and fluid as the best high-performance desktop apps. But we decided it was not enough for Frame.io to simply do what it was supposed to. Version 4 also needed to feel great while doing it. So we made every click, animation, and response buttery smooth and almost instantaneous.
Accomplishing this was no easy feat. Behind the scenes, our engineers and designers analyzed thousands of screen recordings frame-by-frame to fine-tune Frame.io V4’s behavior, especially at times when the app was doing heavy lifting in the background. We focused on experiences like the speed at which a new notification sheet opens, or how quickly users can navigate between Assets and Collections. These effects give you a tactile feeling more akin to a beautifully crafted iOS app than a website.
Instant and infinity
Another principle we focused on in Version 4 is called “instant and infinity”. We wanted to make sure your data is accessible when you need it, no matter how many assets you store in Frame.io. So we completely rebuilt our asset grid to handle millions of files, folders, and version stacks.
In Version 4, you can scroll endlessly without waiting for the app to load. You can whip your scroll bar exactly to where you need it and still use Hover Scrub to see a preview. This is possible because of a special two-tiered data loading architecture that took us months to hone. The result is unlike anything else you’ll find on the web.
Pitch-perfect optimization
Our third principle for Frame.io V4 is optimizing for the right work at the right time. When you are in the Frame.io V4 web app, your browser is constantly loading data and responding to your actions. Sometimes, you will want to upload files to Frame.io while also watching a video in the player or creating a new Collection. That’s a lot of work for your browser to do!
At Frame.io, we never want your performance to take a hit while you’re being productive, so we moved our uploads to a Web Worker thread. That way, the Frame.io web app never slows down or gets interrupted. We looked for every way to make sure your browser is doing the right task at the right time so you never actually feel it working.
Never drop the illusion
When you’re working in a flow state, it feels like magic. But the moment you hit even the smallest speed bump, the magic is gone. That bump usually happens in the form of a delay.
Let’s say you’re trying to respond to a long queue of comments, and you notice a delay between when you send a comment and when it appears on your screen. That delay does more than just slow you down. It may make you wonder if your data is being saved at all.
That’s why our fourth principle is to never drop the illusion. Frame.io Version 4 uses a loading technique called Optimistic Updates which removes delays from all around the app. Even if it takes a few seconds for your comments to appear to others, you will get a visual confirmation of the action you’ve just taken. That confirmation frees you up so you can confidently move on to your next task.
Whether you’re replying to comments, adding custom Metadata, or tweaking the filters on a Collection, you’ll be amazed how much faster Frame.io Version 4 feels. We hope you’ll love this new blazing-fast experience as much as we do.
UNLOCK V4 BETA TODAY
The future of Frame.io, for free. See if you’re eligible to upgrade your workflow.
