How it works

Interactive Lines v4 is a nestable block element. You can put any elements in it, like you would do at an Etch block or container. There are many controls to customize the lines and their wave animation loop and on hover at pleasure.

Lines

Line color

Wave

Wave speed X: the speed of the wave along the X axis.

Wave speed Y: the speed of the wave along the Y axis.

Wave amplitude X: the wave intensity along the X axis.

Wave amplitude Y: the wave intensity along the Y axis.

X gap: the horizontal spacing between lines.

Y gap: the vertical spacing between lines.

Friction: how quickly the lines settle after the cursor moves.

Tension: how strongly the lines pull back to rest.

Max cursor move: the maximum displacement applied to the lines by the cursor.

How it works

Physics is a nestable div component. Overlay elements or components should be placed inside Content. Display settings live in the Physics style.

Physics is built on top of the popular matter.js library. You can learn more here.

There is no Physics objects repeater. Create objects by dropping Physics Item components into Physics Items. Collision size comes from each Physics Item's dimensions in its style. Nested elements or components inside a Physics Item should be placed inside that item's Content, and they move with the object.

Object physics (Static, Restitution, Friction, Air friction, Density, Link URL and Open in new tab) live on the Physics Item component. It is essential to understand that each Physics component has its own collision walls.

Physics

Gravity horizontal: the gravity on the X axis.

Gravity vertical: the gravity on the Y axis.

Time scale: the speed of movements and collisions in the Physics world.

Mouse stiffness: the friction of the pointer when interacting with objects.

Wireframes: if enabled, only the collision borders will be visible. It is useful to check object dimensions, specially if they have content inside.

Top wall: if enabled, a collision wall is added at the top.

Bottom wall: if enabled, a collision wall is added at the bottom.

Left wall: if enabled, a collision wall is added at the left.

Right wall: if enabled, a collision wall is added at the right.

Wall visible: if enabled, walls are drawn. Walls are also objects so they have styling limitations.

Wall width: the thickness of the walls.

Wall fill: the color of the walls.

Physics uses ScrollTrigger to init on scroll. Learn more about ScrollTrigger here.

Trigger: the element that will init Physics on scroll. Use the keyword "this" to use the component itself as the trigger.

Start: determines the position of the Trigger to init Physics. "top bottom" means when the top of the element hits the bottom of the viewport.

How it works

Gradiently is a nestable div component. You can put any elements or components in it, like you would do at an Etch div or container.

Gradiently comes already with a gradient already set but you can generate your own gradient combinations using the Colors repeater. Gradiently animation is divided by waves. There are a lot of controls at the Animation group to customize waves with ease: speed, frequency, shadows, pressure, highlights and much more.

Colors

A repeater of color items. Each item:

Color

Animation

Speed

Horizontal pressure

Vertical pressure

Wave frequency X

Wave frequency Y

Wave amplitude

Shadows

Highlights

Saturation

Color blending

Grain scale

Grain intensity

Grain sparsity

Grain speed

How it works

Bubbles v1 is a nestable div component. Nested elements or components should be placed inside Content. Dimensions, background and border have to be set at the Bubbles v1 root.

Use the Bubbles repeater to add, delete and customize bubbles. Each bubble has its own styling and animation controls.

Bubbles blur

Blur: determines the general blur applied to bubbles (including cursor). This is the only shared setting by all bubbles. The rest of Bubble settings can be set at each Bubble.

Cursor bubble

Enable cursor bubble: if enabled, a Bubble will be attached to the user’s cursor, colliding as well with the rest of the bubbles on mousemove. Cursor bubble is available at Chrome, Edge, Brave and Opera browsers. Firefox and Safari don’t support the cursor animation so it won’t be included at them.

Attachment: a value of 1 will attach the Bubble to the cursor without delay. The bigger this value is the bigger the delay. Shown when Enable cursor bubble is enabled.

Dimensions: determines the width and height of the Cursor Bubble. Shown when Enable cursor bubble is enabled.

Background: the background of the Cursor Bubble. Shown when Enable cursor bubble is enabled.

Mix blend mode: determines the mix blend mode of the collisions. Shown when Enable cursor bubble is enabled. Learn more about CSS mix blend mode property here.

Opacity: determines the opacity of the Cursor Bubble. Shown when Enable cursor bubble is enabled.

Bubbles

A repeater of bubble items. Each item:

Top: the Bubble positioning regarding the Bubbles v1 root.

Left: the Bubble positioning regarding the Bubbles v1 root.

Size

Background

Mix blend mode: determines the mix blend mode of the collisions. Learn more about CSS mix blend mode property here.

Type: determines the path followed by the bubble at its position. Vertical, Horizontal, Rotating–1, Rotating–2 or Rotating–3.

Speed: determines how fast the Bubble should move through the Bubbles v1 root. The bigger the slower.

How it works

Grainy is a nestable div component. You can put any elements or components in it, like you would do at an Etch div or container.

Grain

Opacity: determines the opacity of the grains. The demo uses 0.1.

Grain dimensions: determines the size of the grains. The higher this value is the smaller the grains. The demo uses 1000.

Speed: determines the grain speed movement. The demo uses 25.

How it works

Fluids is a nestable div component. You can put any elements or components in it, like you would do at an Etch div or container. Display settings live in the Fluids style.

Fluids is an integration at Etch of the popular “WebGL Fluid Simulation”. You can design a fast Fluids set up here.

Builder

Disable at touch devices: if enabled, Fluids will not run on touch devices.

Trigger

Trigger on: click or hover.

Entrance animation: if enabled, Fluids plays an entrance animation.

Disable entrance at touch devices: if enabled, the entrance animation will not play on touch devices.

Simulation

Density diffusion

Velocity diffusion

Pressure

Pressure iterations

Vorticity

Splat radius

Splat force

Enable shading

Enable colorful: if enabled, Fluids uses a colorful palette. If disabled, Custom color is used instead.

Custom color: the color of the fluid. Shown when Enable colorful is disabled.

Bloom

Enable bloom: if enabled, a bloom effect is applied to the fluid.

Iterations: the bloom iterations. Shown when Enable bloom is enabled.

Intensity: the bloom intensity. Shown when Enable bloom is enabled.

Threshold: the bloom threshold. Shown when Enable bloom is enabled.

Sunrays

Enable sunrays: if enabled, a sunrays effect is applied to the fluid.

Weight: the sunrays weight. Shown when Enable sunrays is enabled.

How it works

Particles is a nestable div component. You can put any elements or components in it, like you would do at an Etch div or container. Nested elements or components should be placed inside Content. Display settings live in the Particles style.

Particles is built on top of the popular particles.js library. You can try it here.

Hover and click animations can be customized in their own groups. Customizations are shared for hover and click, so customizing Repulse animation will modify it for both.

Number

Number: the amount of particles to generate. The demo uses 80.

Enable density: if enabled, the number of particles adapts to the canvas size, keeping a consistent density regardless of the canvas dimensions.

Density value area: the area in which the density is calculated, in pixels. The larger this value, the more spread out the particles will be. Shown when Enable density is enabled.

Particle Style

Color

Stroke width

Stroke color

Shape

Shapes can be combined. Enable Circles, Edges, Triangles, Stars and Polygons as needed. An Image can also be used as the particle shape.

Circles

Edges

Triangles

Stars

Polygons

Polygon sides: the number of sides when Polygons is enabled.

Image: an image used as the particle shape.

Image width: shown when Image is set.

Image height: shown when Image is set.

Opacity

Value: the opacity of the particles. The demo uses 0.5.

Random: if enabled, opacity is assigned randomly from 0 to the Value set, for each particle.

Enable animation: if enabled, opacity animates constantly from 0 to the Value set.

Speed: the opacity animation speed. Shown when Enable animation is enabled.

Minimum opacity: the lowest opacity during the animation. Shown when Enable animation is enabled.

Sync: if enabled, all particles animate opacity together. Shown when Enable animation is enabled.

Size

Size: the size of the particles.

Random: if enabled, size is assigned randomly to each particle, up to the Size set.

Enable animation: if enabled, size animates constantly from the Minimum size to the Size set.

Speed: the size animation speed. Shown when Enable animation is enabled.

Minimum size: the lowest size during the animation. Shown when Enable animation is enabled.

Sync: if enabled, all particles animate size together. Shown when Enable animation is enabled.

Line linked

Enable: if enabled, a line is drawn linking particles when they collide.

Distance

Color

Opacity

Width

Move

Enable: if enabled, particles move constantly on the canvas.

Speed: the movement speed.

Move direction: None, Top, Top right, Right, Bottom right, Bottom, Bottom left, Left or Top left. None moves randomly.

Random

Straight

Move out: Out or Bounce. If Bounce, particles collide with the walls instead of going out.

Bounce: if enabled, particles bounce against each other.

Enable attract: if enabled, particles attract each other when moving, modifying their directions.

Rotate X: shown when Enable attract is enabled.

Rotate Y: shown when Enable attract is enabled.

Interactivity

Detect on: Canvas or Window.

Resize: if enabled, particles adapt when the canvas is resized.

Enable hover: if enabled, Hover animation runs when a particle is hovered. Animations available: Repulse, Grab and Bubble.

Hover animation: Repulse, Grab or Bubble.

Enable click: if enabled, Click animation runs when the canvas is clicked. Animations available: Push, Remove, Bubble and Repulse.

Click animation: Push, Remove, Bubble or Repulse.

Grab animation

Distance

Line linked

Bubble animation

Distance

Size

Duration

Opacity

Speed

Repulse animation

Distance

Duration

Push animation

Number: how many particles are added on click.

Remove animation

Number: how many particles are removed on click.

How it works

Pixels is a nestable div component. You can put any elements or components in it, like you would do at an Etch div or container. Nested elements or components should be placed inside Content. Display settings live in the Pixels style.

There are many controls to customize the pixels as needed: shape (diamond, triangle…), color, size, and much more.

Enable ripples customizes the effect of the pixels when a click is made on them.

Pixels

Pixel color

Shape: square, circle, triangle or diamond.

Pixel size

Pattern scale

Pattern density

Pixel jitter

Edge fade (vertical)

Edge fade (horizontal)

Speed

Noise

Enable ripples: if enabled, a click on the pixels creates a ripple.

Ripple speed: the speed of the ripple. Shown when Enable ripples is enabled.

Ripple thickness: the thickness of the ripple. Shown when Enable ripples is enabled.

Ripple intensity: the intensity of the ripple. Shown when Enable ripples is enabled.

How it works

Figures is a nestable div component. Nested elements or components should be placed inside Content.

There are 4 types of Figures to choose from. Each one will display its own controls to customize the type selected as needed. Figures is a WebGL component that uses Three.js, so you can find controls like metalness, roughness and more.

Figures

Type: Type 1, Type 2, Type 3 or Type 4.

Figure size

Metalness

Roughness

Clearcoat

Clearcoat roughness

First color

First color intensity

Second color

Second color intensity

Light color

Light position Z

Speed

Height: the height of the figures, not the height of the component.

Figure shape: triangle, square, pentagon, hexagon or circle. Shown when Type is Type 1 or Type 2.

Mouse over tilt: the tilt amount on mouse over. Shown when Type is Type 1.

Mouse over radius: the radius affected on mouse over. Shown when Type is Type 2.

Density: the density of the figures. Shown when Type is Type 2.

Padding: the padding between figures. Shown when Type is Type 2.

Background color: the background color behind the figures. Shown when Type is Type 2.

Count: the number of figures. Shown when Type is Type 3 or Type 4.

Light intensity: the intensity of the light. Shown when Type is Type 3 or Type 4.

Min size: the minimum sphere size. Shown when Type is Type 3 or Type 4.

Max size: the maximum sphere size. Shown when Type is Type 3 or Type 4.

Sphere size 0: the size of the first sphere. Shown when Type is Type 3 or Type 4.

Friction: the friction applied to the spheres. Shown when Type is Type 3 or Type 4.

Max velocity: the maximum velocity of the spheres. Shown when Type is Type 3 or Type 4.

Attraction: the attraction between spheres. Shown when Type is Type 3.

Gravity: the gravity applied to the spheres. Shown when Type is Type 4.

Wall bounce: how much the spheres bounce on the walls. Shown when Type is Type 4.

Max X: the maximum X spawn range. Shown when Type is Type 4.

Max Y: the maximum Y spawn range. Shown when Type is Type 4.

Max Z: the maximum Z spawn range. Shown when Type is Type 4.

How it works

Iridescence is a nestable div component. You can put any elements or components in it, like you would do at an Etch div or container. Display settings live in the Iridescence style.

Iridescence

R: the red channel of the iridescence color, from 0 to 1. The demo uses 1.

G: the green channel of the iridescence color, from 0 to 1. The demo uses 0.9.

B: the blue channel of the iridescence color, from 0 to 1. The demo uses 1.

Speed: the speed of the iridescence animation. The demo uses 1.

Amplitude: how much pointer movement distorts the iridescence. The demo uses 0.1.

Interactivity: if enabled, pointer movement affects the iridescence.

How it works

Spotlight v1 is a nestable div component. You can put any elements or components in it, like you would do at an Etch div or container.

Spotlight

Type: light or dark. Light should be used at lighter backgrounds and the dark at darker backgrounds. The demo is the light one.

Palette: the palette used at Spotlight is “rainbow” by default but you can set your own colors by selecting a “custom” palette.

Opacity: determines the rays opacity. The demo uses 0.5.

Spotlight height: determines the height of the rays, not the height of the component. The demo uses 100% (the height of the component).

Speed: determines the speed of the animation. The demo uses 60s.

CSS easing: determines the easing of the animation. You can set any custom CSS easing of your own. Learn more about CSS easings here.

Colors

A repeater of color items. Used when Palette is Custom. Each item:

Color

How it works

Spotlight v2 is a nestable div component. You can put any elements or components in it, like you would do at an Etch div or container. The spotlight beam is built into the component.

The beam has an absolute position, so Spotlight v2 already uses a relative position and overflow hidden. Size the component in the Spotlight v2 style so the beam has a surface to sit in.

Beam positioning is set in the Spotlight group. Left is auto by default but it can be changed to a fixed value like 100px. It is a common approach to center the spotlight while trying to control an exact position to make the light focus a specific element. To do so, you can introduce this formula at Left: calc(50% – myDimensions / 2). This formula will center the beam at its relative parent while resizing it. Then, myDimensions can be changed to any specific value like 350px, 450px, 200px… so it will give you a great control on its positioning at any breakpoint.

Spotlight

zIndex: the stacking order of the beam.

Width: the width of the spotlight beam, not the width of the component. The demo uses 750px.

Height: the height of the spotlight beam, not the height of the component. The demo uses 750px.

Top: the vertical position of the beam. The demo uses -50px.

Left: the horizontal position of the beam. It is auto by default.

Color: the fill color of the beam. The demo uses #ffffff.

Opacity: the fill opacity of the beam. The demo uses 0.21.

Animation

Spotlight v2 uses ScrollTrigger Library to reveal on scroll. Learn more about ScrollTrigger here.

From scale: determines the initial scale the spotlight will transform from. The demo is 0.5.

Trigger: the element that will fire the animation on scroll. Use the keyword “this” to use the element itself as the trigger.

Start: determines the position of the Trigger to fire the animation. “top bottom” means when the top of the element hits the bottom of the viewport.

Duration

Delay

GSAP easing: you can choose from a wide variety of easings. Learn more about GSAP easings here.

Custom easing: used when GSAP easing is set to custom.

Toggle actions: Determines how the linked animation is controlled at the 4 distinct toggle places – onEnter, onLeave, onEnterBack, onLeaveBack, in that order. “play pause resume reset” will play the animation when entering, pause it when leaving, resume it when entering again backwards, and reset (rewind back to the beginning) when scrolling all the way back past the beginning.

How it works

Gradiently v2 is a nestable div component. You can put any elements or components in it, like you would do at an Etch div or container. Gradiently v2 comes already with a combination of colors already set but you can generate your own combinations using the Colors repeater.

Colors

Base color: the background color behind the gradient.

A repeater of color items. Each item:

Color

Settings

Speed

Intensity

Gradient size

Gradient count

Primary strength

Secondary strength

Grain

Interaction

Touch distortion: if enabled, pointer movement distorts the gradient.

Distortion: the strength of the pointer distortion. Shown when Touch distortion is enabled.

Ripple: the strength of the ripple. Shown when Touch distortion is enabled.

Touch size: the size of the touch area. Shown when Touch distortion is enabled.

Touch trail: the length of the touch trail. Shown when Touch distortion is enabled.

How it works

Overlay Shadows is a nestable div component. Nested elements or components should be placed inside Content. Display settings and the background behind the shadows live in the Overlay Shadows style.

Shadows

Type: there are 32 shadows to choose from.

Mask color: the shadows' color.

Noise: if enabled, a noise layer will be added. In addition a Noise opacity control will appear to customize the noise's opacity.

Noise opacity: the opacity of the noise layer. Shown when Noise is enabled.

How it works

Interactive Lines v1 is a nestable block element. Elements to be put inside Interactive Lines v1 should be placed inside Content.

Lines

Active color: the color of the lines when being active.

Inactive color: the color of the lines when being inactive.

Spotlight: if enabled, a Spotlight will be included following the Cursor, creating a fade at the lines.

Cell size: the size of the cell occupied by each of the lines.

Alpha: the opacity of the lines when being active.

Line length: the lines’ size.

Line width: the thickness of the lines.

Animation speed: the speed of the lines when moving around.

Active area size: the size of the circle that illuminates the lines.

Rotation threshold: the intensity of the rotation applied to the lines when moving around.

Spotlight intensity: the intensity of the fade created by the Spotlight. Requires Spotlight to be enabled.

How it works

Interactive Lines v2 is a nestable block element. You can put any elements in it, like you would do at an Etch block or container. There are many controls to customize the element at pleasure, including the lines, the ball and the interactive animation.

Lines

Spacing: the gap between lines.

Stroke width

Stroke length

Lines color

Ball

Size

Color

Animation

Duration

GSAP easing: you can choose from a wide variety of easings. Learn more about GSAP easings here.

Custom easing: used when GSAP easing is set to custom.

How it works

Interactive Lines v3 is a nestable block element. You can put any elements in it, like you would do at an Etch block or container. There are many controls to customize the element at pleasure, including the lines and the grid the lines will be placed on.

Lines

Stroke width

Stroke length

Color

Grid

Rows: how many rows the grid has.

Columns: how many columns the grid has.

How it works

Materials is a nestable div component. You can put any elements or components in it, like you would do at an Etch div or container. Nested elements or components should be placed inside Content. Display settings live in the Materials style.

There are 12 types of materials you can choose from: Threads, Cells, Clouds, Waves, Dot Waves, Halo, Rings, Trunk, Net, Globe, Birds, Fog. Each type displays its own group of controls. The default type is Threads.

Materials

Type: Threads, Cells, Clouds, Waves, Dot Waves, Halo, Rings, Trunk, Net, Globe, Birds or Fog.

Mouse controls: if enabled, the material reacts to mouse movement.

Touch controls: if enabled, the material reacts to touch.

Threads

Shown when Type is Threads.

Color

Background

Cells

Shown when Type is Cells.

Color 1

Color 2

Background

Size

Speed

Clouds

Shown when Type is Clouds.

Background

Sky

Cloud

Shadow

Sun

Glare

Sunlight

Speed

Waves

Shown when Type is Waves.

Color

Shininess

Wave height

Speed

Zoom

Dot Waves

Shown when Type is Dot Waves.

Color

Color 2

Background

Size

Spacing

Show lines

Halo

Shown when Type is Halo.

Base color

Color 2

Background

Size

Speed

X offset

Y offset

Amplitude

Rings

Shown when Type is Rings.

Color

Background

Trunk

Shown when Type is Trunk.

Color

Background

Spacing

Chaos

Net

Shown when Type is Net.

Color

Background

Points

Max distance

Spacing

Show dots

Globe

Shown when Type is Globe.

Color

Color 2

Background

Size

Points

Max distance

Spacing

Show dots

Birds

Shown when Type is Birds.

Background

Color 1

Color 2

Bird size

Wing span

Speed limit

Separation

Alignment

Cohesion

Quantity

Fog

Shown when Type is Fog.

Highlight

Midtone

Lowlight

Base color

Blur

Speed

Zoom

How it works

Border Beam is a nestable div component. You can put any elements or components in it, like you would do at an Etch div or container.

The component comes with a Beam already set and styled, as well as the component itself.

You can change the Border Beam style and the Beam controls at pleasure, as well as the CSS animation properties, including the duration to complete a round and easing.

Beam

Size: the size of the beam.

Anchor: the starting position of the beam along the border.

Border width: the width of the beam border, not the border of the component.

Color from

Color to

Duration: the time to complete a round. The demo uses 10s.

Easing: the easing of the animation. You can set any custom CSS easing of your own. Learn more about CSS easings here.

How it works

Bubbles v2 is a nestable div component. You can put any elements or components in it, like you would do at an Etch div or container. You can use the Bubbles repeater to create bubbles and customize each of them at pleasure.

Bubbles

A repeater of bubble items. Each item:

Color

Size

Hue rotate: the hue-rotate filter applied to the bubble, in degrees.

Brightness: the brightness filter applied to the bubble.

Width ratio: the width of the bubble relative to Size.

Style

Blur: the blur applied to all bubbles.

Background: the background of the Bubbles v2 root.

Animation

Speed: how fast the bubbles move. The bigger the faster.

Range X: the horizontal movement range of the bubbles.

Range Y: the vertical movement range of the bubbles.

Rotation: the rotation range of the bubbles.

How it works

Blinds is a nestable div component. You can put any elements or components in it, like you would do at an Etch div or container.

Blinds comes with a combination of gradient colors already set but you can generate your own combinations using the Colors repeater.

There are a lot of controls to customize the animation with ease: angle, shine direction, count, noise and much more.

Colors

A repeater of color items. Each item:

Color

Settings

Mix blend mode: the mix blend mode of the blinds canvas. Learn more about CSS mix blend mode property here.

Angle

Mirror gradient: if enabled, the gradient is mirrored.

Shine direction: left or right.

Distort

Blind count

Blind min width

Noise

Spotlight

Radius

Softness

Opacity

Mouse dampening

How it works

Scrolling Background is a nestable div component designed to act as your content container. You can put any elements or components in it, like you would do at an Etch div or container. Nested elements or components should be placed inside Content. Display settings live in the Scrolling Background style.

The component has a 100% width and a 400dvh height by default. You can change it in the Scrolling Background style, like a height auto to adapt to the children's height.

Scrolling Background height is divided by the number of colors, resulting in X pixels. A color switch will happen every those X pixels.

Colors

A repeater of color items. The first color in this repeater is the default background color of the component when the page loads. Each item:

Color

Scrolling

Transition: Fade or Progressive. Fade will animate from one color to another when a new color switch is detected. Progressive will switch from one color to another progressively on scroll (the color switch is attached to the scroll).

Duration

GSAP easing: you can choose from a wide variety of easings. Learn more about GSAP easings here.

Custom easing: used when GSAP easing is set to custom.