The Effects Library allows developers to create sophisticated and realistic particle systems such as snow, fire, rain, confetti, fireworks, and smoke with no or minimal effort.

Overview

Introducing the SwiftUI Effects Library Twitter-2400x1350px

EffectsLibrary

The Effects Library allows developers to create sophisticated and realistic particle systems such as snow, fire, rain, confetti, fireworks, and smoke with no or minimal effort.

All effects previews

It has premade effects ready to be used for your compositions. You can also build your own effects using nearly any image, shape, text view, and flexible customization options.

It is completely open-source with well-designed documentation and an interactive walkthrough tutorial to assist you to get started.

You can check the project’s sample app, contribute to its companion GitHub repository or let us know your feedback.

🚀 Getting started

Installation

The package is distributed via Swift Package Manager. We have a very thorough tutorial with clear instructions for the installation. You can also follow these steps:

  1. In Xcode go to File -> Add Packages
  2. In the top right of the opening window (where it says Search or Enter Package URL) paste the link to the repository: https://github.com/GetStream/effects-library
  3. For the Dependency Rule select Up to Next Major Version and enter 1.0.0 in the following field
  4. Hit Add Package
  5. Confirm Add Package in the upcoming window as well

Set up your first effect

When the setup is done it is very straightforward to add your first effect. They are all SwiftUI Views so you can just drop them into your layouts and get going. Here are all the Views:

  • FireworksView
  • ConfettiView
  • SnowView
  • RainView
  • SmokeView
  • FireView

An example for a View that uses one of the effects:

import SwiftUI
import EffectsLibrary

struct ContentView: View {
    var body: some View {
        FireworksView()
    }
}

Customize an effect with its config

Effects can be customized further with their config files. Here's an example of that:

struct ContentView: View {
    var body: some View {
        FireworksView(
            config: FireworksConfig(
                content: [
                    .shape(.triangle, .blue, 10.0),
                    .shape(.square, .green, 10.0),
                    .shape(.circle, .red, 10.0),
                    .emoji("🚀", 10.0),
                    .emoji("💥", 3.0),
                    .image(UIImage(named: "stream-logo")!, nil, 0.8)
                ],
                intensity: .high,
                lifetime: .long,
                initialVelocity: .fast,
                fadeOut: .slow
            )
        )
    }
}

There are way more examples that can be found in the tutorials we provide for you:

🧵 Useful resources

We have created a beautiful site with documentation to help you get started with the library. There are some basic articles out there (with more and more being added over time).

There is also a number of tutorials we have created to make getting started with the library as seamless as possible. There is an entry-level tutorial where you will learn how to add the library to your app and take your first steps by adding the first effects.

There is also an advanced tutorial that showcases how to configure an effect to your needs. This will include fine-tuning with setting different configurations. Also, it will showcase completely changing up the effect and adding custom branding, all with very few lines of code.

The fun part is, that we've fully used Apple's wonderful DocC documentation style throughout the package. That means that all functionality is heavily documented and is nicely integrated in Xcode.

You can even have a look at the way the tutorials and the entire documentation is created. Just have a look at the Documentation folder.

Also, we have created a sample app so that you can see how to leverage the library in a real-world application. This is also fully open-source and it showcases all the effects that we have in the library.

Note: we're always happy to see contribution from the community, so feel free to play around, open issues and PRs and have fun with it.

🤩 About us

This package was created by Stefan Blos and Amos Gyamfi at Stream. In case you want to contribute or just reach out to us you can do that on Github (with an issue, PR or similar) or Twitter.

We highly appreciate you considering our product. If you enjoy it, please consider giving the repo a ⭐️ as that will help us continue work on the project and realize all the wonderful things we have planned for the future.

Comments
  • Respect element color for Smoke effect

    Respect element color for Smoke effect

    Currently Smoke Effect's particle color is always .black which limits its customizability. This pull request solves this problem by taking contentElement.color into account, if there is none - .black is used as a default value

    opened by VladOrackle 1
  • Lifetime: .always

    Lifetime: .always

    Hi,

    I'm experimenting with the effects library to create an explosion of shapes but keep the particles alive at the end position. Is it possible to create a Lifetime: .always ?

    opened by rwzdoorn 0
  • Add sounds to the effects

    Add sounds to the effects

    This could add a nice touch and a new dimension to the effects.

    Could be a config option because it wouldn't always make sense. Still a lot of things to figure out here:

    • how to best incorporate it in the developer experience
    • where to get sounds that are free to use for our use-case
    • how to handle e.g. long-running audio (loops?)
    feature 
    opened by DaemonLoki 1
  • Check Motion for a new effect to add to the Library

    Check Motion for a new effect to add to the Library

    Motion has a lot of effects available and we want to incorporate one of them for the new version of the library.

    This will mean the recreation of it. Mainly first in Kite and then porting it over to the library code.

    feature 
    opened by DaemonLoki 2
  • Add support for macOS

    Add support for macOS

    Currently, the library is only running on iOS and iPadOS.

    Making it available for macOS as well would allow for more use-cases on the new platform. Due to the fact that it relies on SwiftUI for presentation and and CoreAnimation and SpriteKit for the effects, this should be possible in general.

    There are some occurrences where it makes of e.g. UIColor which needs to be adapted but overall it's a possible thing to do and allows for way more flexibility in the usage.

    feature 
    opened by DaemonLoki 0
Releases(1.0.0)
  • 1.0.0(May 31, 2022)

    This is the first release of the EffectsLibrary. It's an open-source SwiftUI library to add sophisticated, yet simple-to-integrate particle systems inside of your apps.

    All necessary information can be found in the README.

    There's a lot of documentation that you can look through and play around with. Everything is documented with DocC-style documentation and we even made a few tutorials available on how you can use the library together with a sample app.

    Effects included are the following:

    • Fireworks
    • Confetti
    • Rain
    • Snow
    • Fire
    • Smoke
    Source code(tar.gz)
    Source code(zip)
Owner
Stream
Build scalable newsfeeds, activity streams, chat and messaging in a few hours instead of weeks
Stream
A CocoaPod that simplifies creation of the particle effects.

CRParticleEffect A CocoaPod that simplifies creation of particle effects. Supplied with UIPanGestureRecognizer subclass. We know how to add some visua

Cleveroad 350 Mar 8, 2022
Fire for your iPhone

curryFire ?? curry is an Cocoa Touch framework built to enhance and compliment Foundation and UIKit. curryFire builds on top of curry with hot fire an

Devin Ross 131 Nov 1, 2022
Various view's effects for iOS, written in Swift. Allows you to animate views nicely with easy to use extensions

Various view's effects for iOS, written in Swift. Allows you to animate views nicely with easy to use extensions. Every animation is randomized. Currently supported animations:

Artur Rymarz 23 Aug 23, 2022
SwiftUI project demonstrating Custom coded confetti animation for checkout page

Confetti-Checkout SwiftUI project demonstrating Custom coded confetti animation for checkout page NOTE: CAEmitterLayer is not used but all the confett

Waseem akram 29 Sep 28, 2022
SwiftUI Package for Configurable Confetti Animation 🎉

?? ConfettiSwiftUI ?? Swift package for displaying configurable confetti animation. Find the demo project here. Installation: It requires iOS 14 and X

Simon Bachmann 737 Jan 8, 2023
An iOS library to natively render After Effects vector animations

Lottie for iOS, macOS (and Android and React Native) View documentation, FAQ, help, examples, and more at airbnb.io/lottie Lottie is a mobile library

Airbnb 23.6k Dec 31, 2022
Simple calculation to render cheap water effects.

Water Simple calculation to render cheap water effects. This simple project demonstrates : how to use Metal draw compute shader, or known as 'kernal f

Xue Yu 381 Sep 20, 2022
Awesome IOS Styling with SwiftUI, Animation, Effects, Gesture ⭐️

Awesome SwiftUI Styling with SwiftUI ⭐️ This repository is dedicated to IOS styling using SwiftUI. (often using Other Libraries.) I started collecting

SeungYeub Baek 1 Apr 5, 2022
Tools for SwiftUI that helps perform Path and Shape animations, such us morphing circle or shape transformations

SwiftUI+PathAnimations ?? Introduction This packages contains SimilarShape and InterpolatedShape, both can be used to achieve shapes animations with S

Alfredo Delli Bovi 180 Dec 29, 2022
BWMCoverView is a very easy to use advertising the carousel view, supports circular scrolling functions such as switching, asynchronous loading of images, animation, custom is very high.

BWMCoverView BWMCoverView is a very easy to use advertising the carousel view, supports circular scrolling functions such as switching, asynchronous l

Bi Weiming 31 Mar 10, 2021
Remember there's no such thing as a small act of kindness. Every act creates a ripple with no logical end.

Ripple is a small convenience to create ripples in your app. With just a line of code, you can do beautiful things. Code There are two types of ripple

Ramon Gilabert 87 May 15, 2022
Animated Minimal Podcast App UI using SwiftUi 3.0 🤓

Minimal Podcast App UI Animated Minimal Podcast App UI using SwiftUi 3.0 ?? Video Preview Screenshots Features SwiftUI 3D Card Animation SwiftUI Delay

Shameem Reza 7 Jan 3, 2023
RAProgressRing is the simplest approach to bringing circular progress in your application with minimal code.

RAProgressRing RAProgressRing is the simplest approach to bringing circular progress in your application with minimal code. Features It's customisable

Rohit Arora 5 Nov 4, 2022
MGFlipView allows to create flipping view in easy way without worrying about flipping animation and flipping logic.

MGFlipView About If you are looking for an easy way of implement 3D flipping view, you are in the right place. MGFlipView allows to create flipping vi

Maciej Gomółka 47 Sep 28, 2022
Inspired by Fabric - Answers animation. Allows to "build" given view with pieces. Allows to "destroy" given view into pieces

ADPuzzleAnimation Whats inside Custom animation for UIView inspired by Fabric - Answers animation. Easy to use To create your first animation you need

Anton 126 Dec 25, 2022
An Objective-C animation library used to create floating image views.

JRMFloatingAnimation [![CI Status](http://img.shields.io/travis/Caroline Harrison/JRMFloatingAnimation.svg?style=flat)](https://travis-ci.org/Caroline

Caroline Harrison 233 Dec 28, 2022
Letters animation allows you to click on different letters and accordingly it will animate letters in a cool way. It has a very attractive UI and is very easy to use.

Letters Animation Cool Letters Animation in iOS written in Swift. Preview Table of content :- Description How to add in your project Requirement Licen

MindInventory 31 Oct 4, 2022
Numbers animation allows you to click on different numbers and accordingly it will animate numbers in a cool way. It has a very attractive UI and is very easy to use.

Numbers Animation Cool Numbers Animation in iOS written in Swift. Preview Table of content :- Description How to add in your project Requirement Licen

MindInventory 31 Oct 4, 2022