Graphic Animations

Overview

Our new Graphics shape brings the power of WebGL to Fastr Frontend. WebGL is a web API that allows a website to run special programs called "shaders" that run directly on a computer's GPU (Graphics Processing Unit). These special shader programs can be used to render powerful real-time graphics, allowing for unique interactive experiences that would otherwise be impossible in a web browser. 

We are launching Graphics with a template that you use to import directly into your account! To get started, just import the "Graphic Animations" template into your account by following the steps in this article: Libraries & Templates

Additionally, our team is actively designing more Graphics integrations and can work with your team to create custom Graphics for your specific account. To submit a request, please reach out to your account manager. 

How To Use

After importing the "Graphic Animations" template into your account, you will see a new Widget type available in your experiences. This can be seen here:

You can add this widget to your canvas, and then select a Graphic type from the Drop-down menu. Each Graphic has different parameters to customize the visual effects. Please note, in some cases it is necessary to refresh your browser after adding the Graphic to your canvas

Graphic Types

For most fields, the parameters use a value from (0 -> 1) to adjust the intensity of the effect. For cases where a different range of values is used, it has been noted below: 

Snowfall

The Snowfall effect takes an image source to create a drifting effect, similar to snow falling. The following fields can be customized: 

• Near Color
• Far Color
• Transparency
• Particle Count
• Snowflake Size
• Fall Speed
• Horizontal Speed
• Sway
• Sway Speed
• Droop
• Depth - This takes a value from (1 -> 10)
• Minimum Speed
• Maximum Speed
• Image URL
• Ignore Image Color
• Rotate Image

Sparkles

The Sparkle Graphic adds an interactive sparkle trail that follows the users mouse. The following fields can be customized: 

• Color
• Sparkle
• Particle Size 
• Particle Density
• Particle Spread
• Particle Lifetime
• Click Burst Density
• Click Burst Spread
• Mouse Momentum
• Gravity
• After Image

Fluid Sphere

The Fluid Sphere Graphic can be used to create a 3D orb with distortion. The following fields can be customized: 

• Distortion
• Base Color 
• Secondary Color

Wavy Button

The Wavy Button Graphic adds an interactive button that will change shapes as the users mouse interacts with the area.. The following fields can be customized: 

• Rounding
• Border Width - This takes a value from (0 -> .5) to set the border width
• Border Color
• Active Color - This sets the button color when a user hovers their mouse
• Inactive Color - This sets the button color without a user interacting

Particles

The Particles Graphic adds circular Particles that can move across the board. The following fields can be customized: 

• Primary Color
• Seconday Color
  
• Transparency
• Particle Count 
• Minimum Radius
• Maximum Radius
• Minimum Speed
• Maximum Speed
• Angle - This takes a value from (0 -> 360) to adjust the angle of the Particle flow 

If you run into any questions or concerns, please reach out to support@getfastr.com