Apple Design: Fluid Web Interface Principles by Emil Kowalski

LinkEmil KowalskiResource

Emil Kowalski distils Apple's principles for fluid, physically modelled interface design and translates them to web technologies such as Pointer Events, CSS, and spring animations.

Key points

  1. Immediate response: Eliminate latency and trigger feedback on pointerdown rather than waiting for touch/click release.
  2. 1:1 direct manipulation: Stick dragged elements strictly to the grab offset and use setPointerCapture for persistent tracking.
  3. Interruptibility: Animations must be redirectable mid-flight, animating from the current live presentation value rather than target states.
  4. Springs over fixed animations: Apple uses damping ratio and response instead of mass, stiffness, and damping to configure spring physics.
  5. Velocity handoff and momentum projection: Pass release velocity directly to spring animations and project resting points using exponential decay.
  6. Spatial consistency and rubber-banding: Enter and exit along identical paths, anchor origins to triggers, and provide progressive resistance at edges.

Why it matters

Web interfaces frequently feel disconnected or rigid compared to native mobile applications. Kowalski translates Apple's design philosophy into concrete formulas and patterns that enable web developers to build truly responsive, gesture-driven experiences.

Analysis

Rooted in Apple's WWDC 2018 'Designing Fluid Interfaces' presentation, this skill synthesises foundational design rules into web-platform equivalents. Kowalski demonstrates why static CSS transitions fall short for direct manipulation and provides practical code snippets, including Apple's momentum projection and rubber-banding formulas, making fluid interaction design actionable in frameworks like Motion or Framer Motion.

Mentioned links

Found in

Summary generated by AI (Gemini 3.8 Flash, 28 September 2026). It may contain errors – the original source is authoritative.

Related entries

Similar in content, found by the AI search.

  • Link:Emil Kowalski

    Emil Kowalski's Design Engineering Philosophy

    Emil Kowalski outlines his design engineering philosophy for UI polish, component craft, and interface animations. The guide highlights trained taste, compounding micro-details, and clear rules for animation frequency, custom easings, and component states.

    Web development· Resource

  • Link:Jakub Krehel

    Make Interfaces Feel Better: Design Engineering Principles for Polished UIs

    Jakub Krehel shares 'make-interfaces-feel-better', a design engineering skill and guideline package for building and reviewing UI details. It covers rules across typography, surfaces, animations, icons, and performance, alongside a structured review methodology.

    Web development· Resource

  • Link:kinetics.colorion.co

    Kinetics: Spring-Physics Motion Library for Web Interfaces

    Kinetics is a collection of 153 web interface animations powered by spring physics instead of fixed-duration easing curves. Each effect is provided as pure CSS, React code, and a dedicated AI prompt.

    Web development· Resource

  • Link:Emil Kowalski

    Emil Kowalski's Design Engineering Skill for AI Agents

    Emil Kowalski has published an installable agent skill based on his design engineering philosophy. It aims to guide AI coding assistants in building polished, detail-oriented user interfaces.

    AI & LLMs· Resource

  • X post:Kailash

    UI Skills: Curated Guidelines and Prompts for Higher-Quality Interfaces

    Kailash highlights five specialised skills from ui-skills.com designed to help developers and AI coding agents build better frontend interfaces, fluid physics-based animations, refined shadows, and accessible components.

    7.3kbookmarks248.3kviews

    Web development· Resource

Back to the knowledge base

Let's talk about your project

Get in touch

Locations

  • Mattersburg
    Johann Nepomuk Bergerstraße 7/2/14
    7210 Mattersburg, Austria
  • Vienna
    Ungargasse 64-66/3/404
    1030 Wien, Austria

Parts of this content were created with the assistance of AI.