First, watch the demo

Demo Page

Click here to experience

Basic Code

All the code can be viewed on the above Demo page. Since the interactive part of the code is generated by AI, I won't elaborate further.

The styles and filter parts have been modified by me, so below I will only share what I consider the most critical content.

CSS:

The principle is very simple: first, you need a "lens," then create a copy layer of the background image and include it within the lens. Based on the position of the lens, use JS to dynamically control the relative position of the background.

Then wrap an outer container around the lens to achieve rounded corners and borders.

    .background {
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            background-image: url('https://framerusercontent.com/images/hhFYtfYnlg7nQS1FB5AMza1gQ.jpg');
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
        }
        .lens-container {
            position: fixed;
            width: 200px;
            height: 200px;
            cursor: grab;
            user-select: none;
            z-index: 10;
            overflow: hidden;
            box-size:content-box;
            border: 2px solid rgba(255, 255, 255, .3);
            backdrop-filter: blur(2px);
            border-radius: 20px;
            box-shadow: 
                0 8px 32px rgba(0, 0, 0, 0.3),
                inset 0 1px 0 rgba(255, 255, 255, 0.4);
            /* 移除 transform，使用 top/left 定位 */
        }

        .lens-container:active {
            cursor: grabbing;
        }

        .lens {
            width: 200px;
            height: 200px;
            overflow: hidden;
            filter: url(#lensFilter);
            position: relative;
        }

        .lens-background {
            position: absolute;
            width: 100vw;
            height: 100vh;
            background-image: url('https://framerusercontent.com/images/hhFYtfYnlg7nQS1FB5AMza1gQ.jpg');
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            /* 移除初始的 top/left，通过 JS 动态设置 */
        }

svg-filter:

The comments have made it very clear: it involves shrinking the shape of the lens and blurring it to create a displacement map mask for deformation, then using this displacement mask to deform the background image that has already been minimally blurred.

    <svg style="position: absolute; width: 0; height: 0;">
        <defs>
            <!-- 透镜效果滤镜 -->
            <filter id="lensFilter" x="-50%" y="-50%" width="200%" height="200%">
                <!--基本模糊-->
                <feGaussianBlur in="SourceGraphic" stdDeviation="5" result="blur"/>
                <!--内缩形状并模糊形成变形遮罩-->
                <feMorphology in="SourceAlpha" operator="erode" radius="20" result="erodedAlpha"/>
                <feGaussianBlur in="erodedAlpha" stdDeviation="20" result="lensProfileAlphaRaw"/>
                <!--变形图案-->
                <feDisplacementMap in="blur" in2="displacementMapSource" scale="40"
                                   xChannelSelector="A" yChannelSelector="A" result="displacedImage"/>
            </filter>
            
            <!-- 波纹效果滤镜 -->
            <filter id="rippleFilter" x="-50%" y="-50%" width="200%" height="200%">
                <feTurbulence baseFrequency="0.02" numOctaves="3" result="turbulence"/>
                <feDisplacementMap in="SourceGraphic" in2="turbulence" scale="15" result="displaced"/>
                <feGaussianBlur in="displaced" stdDeviation="0.5"/>
            </filter>
            
            <!-- 位移贴图 -->
            <radialGradient id="displacementMap" cx="50%" cy="50%" r="50%">
                <stop offset="0%" stop-color="#808080"/>
                <stop offset="30%" stop-color="#808080"/> 
                <stop offset="100%" stop-color="#404040"/>
            </radialGradient>
        </defs>
    </svg>

More specific mechanisms can be found in the source code of the Demo page.

Thoughts

Regarding Apple's liquid glass effect this time, it can be said that there are a lot of criticisms. But from a design perspective, this is what I think—

Design is a language.

And the characteristic of language is that, no matter how unpleasant it sounds, as long as it conveys the message clearly, that's enough.

But at the same time, just like how you can understand a person’s character by listening to them speak, you can understand the quality of a product by its design.

Apple's design has always led the world, regardless of whether it's good or bad; it has consistently been able to set trends for a period of time.

As a product for many Apple users, every time the UI changes, its significance is as significant as changing the VI. Changing the VI is like a complete makeover to market to potential users, while changing the UI is akin to speaking to existing users in a whole new way.

Another characteristic of language is that it can brainwash and filter audiences.

No matter how unpleasant it sounds, as long as it conveys the message clearly, and is said loudly and continuously, users will eventually accept it.

No matter how much you criticize liquid glass today, one day you will still have to upgrade, and the applications you develop will also have to adapt to it.

Existing users are unlikely to be “grossed out” by this feature; instead, it may attract more potential users who like cool things.

So, even if you think this UI redesign is ugly, it will still be a successful design.

Of course, I'm only talking about successful design; successful design does not equate to a successful product.

From my years of experience in the design industry, when a product starts to change its UI, it often indicates that it hasn't had new ideas for the product recently.

The modifications to the Dynamic Island interaction being criticized and then accepted are understandable due to changes in hardware technology. But regarding the UI quality aspect?

This is entirely a showcase of skills and resource consumption, which will bring unnecessary troubles for software developers, designers, and marketers, so from another perspective, the criticisms are valid.

Now, let's talk about UI consistency.

Apple's redesign this time, or rather every time it changes the texture, is guiding the icons and interfaces toward a unified style, making it “look neat.” This actually stems from a desire for control, much like how principals require students to wear uniforms.

The unified and cool benefits give users a full “sense of prestige,” providing a sense of superior vanity. However, an enhanced presence for the platform means that the presence of applications will be weakened.

As an operating system, application icons should originally showcase their strengths; the more spectacular they are, the more prominent they become.

With this change from Apple, those who do not follow the trend aesthetically will become the outliers.

This seems to also reflect that Apple's app market is already saturated; it is no longer that market platform boasting billions of applications, but rather a royal factory that only produces shoes that you must trim your heels to fit into.

So from this redesign, I see a stricter filtration of application development and product design, leading to greater differentiation between users and non-users.

Of course, Apple has the confidence and qualifications to push developers hard, which is not necessarily a bad thing.

I just hope Android and Windows developers can make good use of this filtering opportunity and please, don't just follow the trend...

Why not follow the trend? Because you simply cannot replicate it, even if it's identical or even better, it still won’t feel the same. As long as you follow the trend, you’ll fall into its trap; it’s better to stick to your style.

Anyway, cross-platform developers are destined to compete, so let's not make them compete even harder.

Each platform having its own aesthetic philosophy is a more effective approach. Apple has filtered itself into a higher echelon; what remains are for everyone else. At this stage, if you can develop features and ecosystems that surpass Apple, then that is the more excellent competitive route.

That said, this effect is still worth learning from, at least it can bring a lot of inspiration, hence the above Demo.

If you feel that this article has brought you even a tiny bit of inspiration or simply wish to show a kind heart and pity me, thank you, my friend treat me to a cup of coffee.

Of course, if you don’t want to, you can casually use WeChat to send me a red envelope to death as well.

At the same time, feel free to follow X @Tresmort “Miao Dad is Toxic.”

Yes, I am toxic.