Never drop the illusion: How Frame.io builds fluid user experiences

Their users work with high-quality video content and operate on a different level of perception—they "see in milliseconds" and sweat the details. To meet the needs of their users, Frame.io commits itself to delivering web applications that feel as responsive and powerful as their desktop counterparts.

This vision led them to move away from the popular "make it work, make it right, make it fast" approach and find a solution that works for them and their users.

Link to headingSeeing in milliseconds required a new approach

Seeing in milliseconds highlights the understanding that even the slightest delay or dropped frame can disrupt the creative flow for video pros.

This realization led Frame.io to embrace a new guiding principle: "How it feels = how it works." If the application doesn't feel good to use, it’s just as bad as when a feature isn’t functioning correctly.

“How it feels is as important as how it works. For us, performance is a feature. If it doesn’t feel good, it’s not working.How it feels is as important as how it works. For us, performance is a feature. If it doesn’t feel good, it’s not working.”

Charlton Roberts Senior Manager of Product Engineering at Frame.io

Frame.io refers to their approach to building performant UIs as "Fluid UI." Influenced by Apple’s Designing Fluid Interfaces, Fluid UI rests on three core principles: instant, smooth, and coordinated.

• Instant: The UI must respond to user input within 100ms, providing immediate feedback that their action has been registered. To achieve this, they leverage React features like useState, useOptimistic, and the Next.js Router Cache, while minimizing unnecessary re-renders with useMemo and useCallback

• Smooth: All animations should run at a consistent 60 fps, mimicking the fluidity of natural motion and creating a visually pleasing experience. This involves utilizing React's useTransition Hook, opting for CSS-only solutions whenever possible, and building stable UI components that minimize DOM manipulation

• Coordinated: UI elements should move in sync, creating a cohesive and intuitive flow. Transitions and animations should feel like a natural extension of the user's actions. This requires carefully orchestrating animations and transitions for related UI elements, ensuring they occur in sync and contribute to a cohesive user experience

To ensure these principles translate into a consistently smooth user experience, Frame.io adopted Next.js App Router, and uses Vercel and their own platform to constantly monitor application performance.

Vercel's automatic Preview Deployments allow developers to evaluate the performance impact of code changes in a production-like environment, catching and addressing regressions early on. Previously, waiting for previews could take Frame.io up to 40 minutes. But Vercel significantly reduces this time by over 6x to around 6 minutes, enabling faster iteration cycles and quicker identification of potential issues.

The team at Frame.io believes in the power of dogfooding, so they use Frame.io to analyze and improve the performance of Frame.io itself. By uploading screen recordings and analyzing them frame by frame, they can pinpoint even the slightest performance bottlenecks and address them directly.

This constant feedback loop ensures that the team implements Fluid UI principles effectively and that the result is a truly seamless user experience.

Link to headingEngineering for scale and performance

Building for Fluid UI isn't just about adhering to a set of principles; it demands a fundamental shift in mindset and a dedicated framework that permeates the entire development process.

Frame.io approaches this challenge with a forward-thinking mentality, embodied in an "instant and infinity" philosophy: They design for scalability from day one, anticipating massive datasets and building their architecture to handle millions of items without breaking a sweat. This laser focus on user experience is further enabled by tools like Vercel, which handle critical performance optimizations out of the box.

“A lot of the value we get from Vercel is things we don't have to think about. Initial load performance is just as important as interaction performance, but we spend so much less time thinking about load performance because of the optimizations Vercel offers us.A lot of the value we get from Vercel is things we don't have to think about. Initial load performance is just as important as interaction performance, but we spend so much less time thinking about load performance because of the optimizations Vercel offers us.”

Charlton Roberts Senior Manager of Product Engineering at Frame.io

Features like Vercel's global Edge Network, static asset revalidation, and easy configuration of cache headers allow Frame.io's product engineers to focus on building features rather than spending weeks configuring infrastructure with the Site Reliability Engineering (SRE) team. This frees up valuable engineering resources to concentrate on delivering the best possible user experience.

But it's not just about handling scale—it's also about prioritizing the right work. Frame.io understands that every task impacts the user experience, so they prioritize ruthlessly, focusing on what matters most to their users. This often means deferring noncritical tasks, ensuring that the application remains snappy and responsive even under heavy load.

To further enhance the user experience, Frame.io embraces anticipation. They preload resources and data, ensuring a smoother, more responsive experience that feels almost instantaneous. And to keep the UI humming along smoothly, they offload tasks from the main thread whenever possible, preventing UI jank (which impacts core web vitals like Cumulative Layout Shift) and maintaining that crucial responsiveness.

Link to headingThe job's never done: continuous improvement and minimizing downtime

Frame.io also recognizes the importance of continuous improvement, so they utilize feature flags to control the release of new features, ensuring they meet performance standards before being unleashed upon the world, while regular audits with Vercel Speed Insights or Conformance help identify and address regressions to ensure the application remains performant over time.

This commitment to continuous improvement extends to deployment practices as well. With thousands of users relying on Frame.io at any given time, zero-downtime deployments are crucial.

Vercel's Skew Protection feature helps mitigate the risks associated with deploying at scale, ensuring a seamless transition for all users and minimizing the potential for disruption. This allows Frame.io to confidently ship updates knowing that their users will experience minimal, if any, interruption.

Frame.io doesn't shy away from complex performance challenges. They allocate dedicated resources and time to tackle these head-on, knowing that conquering these challenges is essential to delivering a truly exceptional user experience.

Link to headingShared expectations and dedicated resources: the keys to success

Frame.io recognizes that Fluid UI is crucial for a great user experience, especially for demanding applications. They prioritize performance by tracking metrics, identifying bottlenecks, and empowering developers to create a seamless experience.

This focus allows users to focus on what matters: their work. Other teams can learn from this approach, building web applications that feel as responsive and powerful as desktop software.