Code Monkey home page Code Monkey logo

glur's Introduction

Glur Project logo


Twitter: @joogps

A SwiftUI library that uses Metal to display efficient progressive blurs, just like the ones used by Apple. Try it today on the App Store.

A comparison of Glur and a simple masked material

Installation

This repository is a Swift package, so just include it in your Xcode project and target under File > Add package dependencies. Then, import Glur to the Swift files where you'll be using it.

Note

While Glur is supported on older platforms, it will only utilize the Metal implementation of the blur effect on iOS 17.0 and later, macOS 14.0 and later, and tvOS 17.0 and later. Otherwise, it will present a worse, compatibility effect that should be tested by the developer before being used in production.

The Metal implementation is not available on watchOS, and therefore the compatibility effect will be presented on this platform by default.

Usage

You can add a glur effect with the following modifier:

.glur()

Here are all optional parameters:

.glur(radius: 8.0, // The total radius of the blur effect when fully applied.
      offset: 0.3, // The distance from the view's edge to where the effect begins, relative to the view's size.
      interpolation: 0.4, // The distance from the offset to where the effect is fully applied, relative to the view's size.
      direction: .down // The direction in which the effect is applied.
)

Warning

When being used in the iOS simulator, SwiftUI shader effects may not be displayed if the view exceeds 545 points in either dimension. Please note that, on a physical device, the effect should work as intented.

How it's done

This project builds on a proof of concept developed in June of 2023, right after WWDC.

It makes use of Apple's new simplified Shader API for SwiftUI. First, I coded a Metal shader that produced a gaussian blur for the modified view with the correct gaussian weights distribution, efficiently. Then, I modified it slightly to vary the blur radius over the vertical or horizontal axis given the offset, interpolation and direction values.

Warning

Given that the shader is applied through Apple's own Shader API for SwiftUI, it is restricted by the limitations imposed by that API. This means that Glur can only be applied to pure SwiftUI views, excluding UIKit-backed views, such as ScrollView.

Tip

If you want to learn how to write your first Metal shader with SwiftUI, check out this tutorial that I wrote for the Cindori blog.

Demo

You can run a demo of Glur in your device or simulator through the GlurDemo project in this repository.

glur's People

Contributors

joogps avatar kevincible avatar usagimaru avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.