How it works

Interactive Divider is a divider with a bouncing animation when the pointer enters it.

Style

Width: the width of the divider. Default 100%.

Height: the stroke height of the divider. Default 1px.

Color: the color of the divider line.

Animation

Drag distance: the proximity distance required to drag the divider. Default 40px.

Drop distance: once dragged, the vertical distance required to drop the divider. Default 500px.

Bend intensity: how much elasticity to apply to the divider. Default 100.

How it works

Toolteam is made up of Team Members. To create a profile, use the Team Members repeater. Each Team Member can have its own Profile image, Name and Role.

Width, overlapping gaps, avatar, tooltip and name/role look live in the Toolteam style.

Team Members

A repeater of team members. Add, remove and duplicate items as you need. Each item:

Profile image

Name

Role

Tooltip animation

Fade duration: how long the tooltip takes to fade in and out. Default 0.2s.

Fade CSS easing: the CSS easing of the fade. Learn more about CSS easing functions here.

Scale from: the starting scale of the tooltip. Default 0.7.

Scale duration: how long the tooltip scale takes. Default 0.1s.

Scale CSS easing: the CSS easing of the scale. Learn more about CSS easing functions here.

How it works

Chart is not nestable. It is made up of Data Points. The animation follows these points to draw the path. Add, remove and duplicate items as you need.

Width lives in the Chart style.

Data Points

A repeater of values that shape the line. Each item:

Value: a number from 0 to 100. Higher values sit higher on the chart.

Style

Line Width: the stroke width of the chart line. Default 2.28.

Line Color: the color of the chart line.

Fill Color: the color of the area under the line.

Animation

Duration (s): how long the draw animation takes. Default 8.

Loop: if enabled, the animation restarts when it finishes. Default off.

How it works

Inverted Corner is a nestable div component based on the inverted-corners look. Nested elements or components for the main area should be placed inside Content. Nested elements or components for each inverted corner should be placed inside Corner 1, Corner 2, Corner 3 or Corner 4. While a slot is empty, a hint is shown.

Width, height, block border radius, block content background and mask background live in the Inverted Corner style. Block border radius is applied to the main area except the inverted corners. Mask background is the space occupied by each inverted corner.

Corner 1

Enable: if disabled, this inverted corner is not rendered. Default on.

Position: where to place the inverted corner: top-left, top-right, bottom-left or bottom-right. Default top-left.

Width: the width occupied by the corner slot. Default 60px.

Height: the height occupied by the corner slot. Default 60px.

Border Radius: the radius of the inverted corner. Default 50%.

Distance: the margin offset of the corner. 0 applies no offset, so Width and Height determine everything. Default 6px.

Corner 2

Same controls as Corner 1. Default Position: top-right.

Corner 3

Same controls as Corner 1. Default Position: bottom-left.

Corner 4

Same controls as Corner 1. Default Position: bottom-right.

How it works

Pixels Shimmer Card is a nestable div component. Nested elements or components should be placed inside Content, like you would do at an Etch div or container. While Content is empty, a hint is shown.

Width, height, background and border live in the Pixels Shimmer Card style.

Pixels Colors

A repeater of colors for the pixel sequence on hover. Add, remove and duplicate items as you need. Each item:

Color

Animation

Speed: how fast the pixels animate on hover. Default 20.

Pixels Gap: the gap between pixels. Default 3.

Border animation

Active border Color: the color of the border animation on hover.

Duration: how long the border animation takes. Default 0.8s.

CSS Easing: the CSS easing of the border animation. Learn more about CSS easing functions here.

How it works

Decode Card is a nestable div component. Nested elements or components should be placed inside Content. They sit in a blur mask that is not affected by the Decode animation. While Content is empty, a hint is shown.

Width, height, decode letters, gradient colors, backdrop filter and content mask live in the Decode Card style.

Animation

Include Characters: if disabled, the Decode spotlight is just the gradient. Default on.

Characters: the alphabet used for the Decode letters. Shown when Include Characters is enabled.

Text Length: how much text to generate under the spotlight. Use a larger value on a larger card. Shown when Include Characters is enabled. Default 2500.

Gradient Size: the size of the Decode spotlight. Default 250.

Fade Duration: how long the spotlight takes to fade. Default 0.5s.

Fade CSS Easing: the CSS easing of the fade. Learn more about CSS easing functions here.

How it works

Looping Tabs is a nestable div component. There is no tabs repeater. Create tabs by dropping Looping Tab components into Tab items. Nested elements or components should be placed inside each Looping Tab's Content, like you would do at an Etch div or container. The nav is generated from those tabs. Set the nav label on the Looping Tab. While Tab items is empty, a hint is shown.

Nav, nav items, progress and tab look live in the Looping Tabs style. The nav label lives on the Looping Tab component.

HTML tag

HTML tag: div, section, article, aside, header, footer, main, nav or custom. Default div.

Custom tag: shown when HTML tag is custom. Default div.

Progress Style

Mode: horizontal or vertical. Default horizontal.

Tab

Active Tab: the 1-based index of the tab that starts active. Default 1.

Progress Animation

Duration: how long each tab stays active before the next one. Default 3s.

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

Custom easing: shown when GSAP Easing is set to custom. Default back.out(1.7).

Nav Item Background Animation

Background Duration: how long the nav item background takes to change. Default 0.2s.

Background CSS Easing: the CSS easing of the nav item background change. Learn more about CSS easing functions here.

How it works

Audio Player is not nestable. Set a source, thumbnail, title and artist. Play shows when the audio is paused; Pause shows while it is playing. Timer and Duration numbers are read from the audio source automatically.

Wrapper, thumbnail, texts, play/pause, progress, timer and duration live in the Audio Player style.

Built on Howler.

Audio

Source: your audio source.

Image: the thumbnail shown on the left.

Audio Title: the track title. Default On & On.

Artist Name: the artist name. Default NCS.

Progress animation

Duration: how long the progress bar takes to catch up, not the length of the track. Default 0.4s.

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

How it works

Workflow is not nestable. It is made up of Workflow items. Add, remove and duplicate items as you need. Each item is a step label. The animation walks the steps with a progress ring, a checkmark and a connecting line.

Badge, progress and line live in the Workflow style.

Workflow items

A repeater of steps. Add, remove and duplicate items as you need. Each item:

Text

Animation

Progress Duration (s): how long the active step ring takes to fill. Default 1.

Line Duration (s): how long the connector line takes to fill between steps. Default 2.75.

Loop: if enabled, the animation restarts from the first step when it finishes. Default off.

How it works

Sync is not nestable. Set a custom logo and a custom text. The logo sits in an icon box with ripples, a trail line connects it to a badge with a spinner.

Gap, logo size, icon box, ripple, line, badge and spinner live in the Sync style.

Logo

Logo: the image shown in the icon box.

Text

Text: the label shown in the badge. Default Syncing.

Animation

Ripple Duration (s): how long each ripple expansion takes. Default 4.25.

Trail Duration (s): how long the trail takes to travel the line. Default 4.

Spinner Duration (s): how long one full spinner rotation takes. Default 2.

How it works

Orbit is not nestable. It is made up of Orbit items that rotate around a center Logo. Add, remove and duplicate items as you need. Each item is a logo image.

Item background, border and gradient opacity live in the Orbit style.

Logo

Logo: the image shown at the center of the orbit.

Orbit items

A repeater of orbiting logos. Add, remove and duplicate items as you need. Each item:

Logo

Rings

Ring Number: how many concentric rings are drawn. Default 8.

Style

Size: the width and height of the orbit. Default 328px.

Orbit Diameter: the diameter of the path the items follow. Default 240px.

Items Size: the size of each orbiting item. Default 48px.

First Ring Size: the diameter of the innermost ring. Default 104px.

Gap: the space between consecutive rings. Default 32px.

Path Color: the color of the static ring paths.

Gradient Color 1: the first color of the rotating ring gradient.

Gradient Color 2: the second color of the rotating ring gradient.

Gradient Color 3: the third color of the rotating ring gradient.

Animation

Gradient Speed (s): how long one full rotation of the ring gradient takes. Default 10.

Orbit Speed (s): how long one full rotation of the orbiting items takes. Default 80.

How it works

QR Code lets you create a customizable QR code. Width, height and background live in the QR Code style.

Content

QR Content: the content to display when the QR Code is read. Once QR Content is set and the QR Code is generated, it will not change until a new value is given.

Enable Icon: if enabled, an icon is placed inside the QR Code. Default on.

Icon: shown when Enable Icon is enabled.

QR Style

QR Color: the color of the modules that make up the QR.

Squares Color: the color of the squares at the corners.

Squares Border Color: the color of the borders around those squares.

How it works

Next Tabs is a nestable div component. There is no tabs repeater. Create tabs by dropping Next Tab components into Tab items. Nested elements or components should be placed inside each Next Tab's Content, like you would do at an Etch div or container. The nav is generated from those tabs. Set the nav label on the Next Tab. The first Next Tab triggers the first tab panel, the second triggers the second, and so on. While Tab items is empty, a hint is shown.

Nav, nav items and tab look live in the Next Tabs style. The nav label lives on the Next Tab component. The entrance fade from opacity lives in the Next Tabs style.

Settings

Show tab at builder: the 1-based index of the tab to preview in the canvas. Leave empty to follow Active Tab.

Active Tab: the 1-based index of the tab that starts active. Default 1.

Animation

The tab entrance uses From X and From Y together. They share Duration and CSS Easing.

From X: the starting horizontal offset of the tab entrance. Default 0px.

From Y: the starting vertical offset of the tab entrance. Default 0px.

Duration: how long the entrance takes. Default 0.4s.

CSS Easing: the CSS easing of the entrance. Learn more about CSS easing functions here.

How it works

Glitchy applies a glitch effect to any element or component by targeting its CSS class. Add as many targets as you need in Glitchy elements. If the target has auto dimensions, the glitch may get clipped, so wrap it in a parent with some padding and apply the glitch to that parent.

Built on PowerGlitch.

Glitchy elements

A repeater of glitch targets. Add, remove and duplicate items as you need. Each item:

Element: the CSS class of the target, including the dot.

Play mode: hover, click or always. Default hover.

Animation duration: the duration of the glitch effect, in milliseconds. Default 1000.

Repeat number: how many times the glitch repeats. Default 15.

CSS Easing: the CSS easing of the glitch. Learn more about CSS easing functions here.

Glitch time start: the delay before the glitch starts, as a fraction of the duration. Default 0.4.

Glitch time end: the end of the glitch, as a fraction of the duration. Default 0.7.

Shake velocity: the speed of the glitch shake. Default 10.

X amplitude: shake amplitude on the X axis. Default 0.4.

Y amplitude: shake amplitude on the Y axis. Default 0.4.

Layers number: how many layers the animation generates. Default 4.

Steps number: layers group in steps. This is the number of those groups. Default 10.

minHeight per slice: the minimum random height a layer can take. Default 0.02.

maxHeight per slice: the maximum random height a layer can take. Default 0.40.

Final pulse: true or false. If true, a pulse clone appears after the glitch ends. Default true.

How it works

Horizontal Marquee is a nestable div component. Nested elements or components should be placed inside Content, like you would do at an Etch div or container. Nested items keep their own hover and focus states. While Content is empty, a hint is shown.

Nested items must have predefined dimensions, nowrap whitespace for text, or eager loading for images, so the marquee can calculate correctly.

Gap, rotate, blur width and blur color live in the Horizontal Marquee style.

Built on Reeller.

Style

Blur edges: if enabled, the marquee edges fade. Width and color of the fade live in the Horizontal Marquee style. Default off.

Animation

Speed: how fast the marquee runs. The higher this number is, the slower it runs. Default 3.

Loop: if enabled, the marquee loops. Default on.

Reverse: if enabled, the marquee goes from right to left instead of left to right. Default off.

Pause on Hover: if enabled, the marquee pauses on hover and continues from where it stopped. Default on.

Change speed on Hover: if enabled, the marquee speed on hover changes to Hover Speed. Default off.

Hover Speed: shown when Change speed on Hover is enabled.

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

Custom easing: shown when GSAP easing is set to custom. Default back.out(1.7).

Scroller

If Enable scroller is on, the marquee also reacts to scroll. Shown when Enable scroller is enabled:

Enable scroller: if enabled, the marquee has scroll inertia. Default on.

Both directions: if enabled, every scroll hit alternates the marquee direction. Default off.

Speed: the inertia speed of the scroller. The higher this number is, the less inertia. Default 1.

Multiplier: how far the marquee travels on scroll. The higher this number is, the more distance. Default 0.5.

Treshold: the marquee speed applied after the first scroll. The higher this number is, the faster it runs. Default 1.

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

Custom easing: shown when GSAP easing is set to custom. Default back.out(1.7).

How it works

Vertical Marquee is a nestable div component. Nested elements or components should be placed inside Content, like you would do at an Etch div or container. Nested items keep their own hover and focus states. While Content is empty, a hint is shown.

Images inside Vertical Marquee should use eager loading. Height should be equal to or lower than the combined height of the nested items.

Gap and blur height live in the Vertical Marquee style.

Style

Blur edges: if enabled, the marquee edges fade. Blur height lives in the Vertical Marquee style. Default on.

Animation

Reverse: if enabled, the marquee goes from top to bottom instead of bottom to top. Default off.

Speed: how long one loop takes. Default 3s.

Pause on Hover: if enabled, the marquee pauses on hover and continues from where it stopped. Default on.

Change speed on Hover: if enabled, the marquee speed on hover changes to Hover Speed. Default off.

Hover Speed: shown when Change speed on Hover is enabled.

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

How it works

Tippy attaches a tooltip to any element or component by targeting its CSS class. Add as many targets as you need in Tippy elements.

Built on Tippy.

Tippy elements

A repeater of tooltip targets. Add, remove and duplicate items as you need. Each item:

Element: the CSS class of the target, including the dot.

Text: the content to display in the tooltip.

Background

Color

Font size

Font family

Font weight

Letter spacing

Padding: top, right, bottom, left, comma-separated. Default 0,4,0,4.

Border color

Border radius

Border width

Show duration: the entrance duration of the tooltip, in milliseconds. Default 250.

Hide duration: the exit duration of the tooltip, in milliseconds. Default 200.

Arrow: true or false. If true, an arrow points to the target. Default true.

Arrow color: the color of the arrow, independent from the tooltip background.

Show Delay: the entrance delay, in milliseconds. Default 50.

Hide Delay: the exit delay, in milliseconds. Default 50.

Trigger animation: mouseenter or click. Default mouseenter.

Animation: fade, scale, shift-toward, shift-away or perspective. Default scale.

Inertia: true or false. Default true.

Follow cursor: false, true (X and Y), horizontal (X), vertical (Y) or initial. Default false.

Hide on click: if true, clicking the target hides the tooltip once it is shown. Default true.

Interactive: if true, the tooltip content can be selected. Default true.

Max width: the maximum width of the tooltip. Default none.

Placement: top, left, right or bottom. Default bottom.

zIndex: the z-index of the tooltip. Default 9999.

Touch: if true, the tooltip can be triggered by touch. Default false.

How it works

Flipbox is a nestable div component. Nested elements or components for the visible face should be placed inside Front Content. Nested elements or components for the flipped face should be placed inside Back Content. While a slot is empty, a hint is shown.

Width, height and Front/Back look live in the Flipbox style.

Animation

Perspective: the intensity of the 3D flip. Default 800px.

Type: horizontal, horizontal-reverse, vertical or vertical-reverse. Default horizontal.

Trigger: hover or click. Default hover.

Duration: how long the flip takes. Default 1.3s.

CSS Easing: the CSS easing of the flip. Learn more about CSS easing functions here.

Misc

Reset: if enabled, the Flipbox returns from Back to Front after Reset After. Default off.

Reset After: how long to wait before flipping back. Shown when Reset is enabled. Default 5s.

Keep open: if enabled, this Flipbox stays open when another Flipbox is clicked. Shown when Trigger is click. Default off.

How it works

Motion Divider is not nestable. It is a line that reveals on scroll. Height, color and border style live in the Motion Divider style.

Line

Type: from where the animation starts: fromLeft, fromRight or fromCenter. Default fromLeft.

Width: the width of the divider. Default 100%.

Animation

Duration: how long the reveal takes. Default 0.6.

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.

ScrollTrigger

Motion Divider animation uses ScrollTrigger Library to fire on scroll. Learn more about ScrollTrigger here.

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.

End: the end position of the Trigger. Default unset.

Delay: the delay before the animation starts. Default 0.2.

Scrub: links the animation progress to the scrollbar. false disables scrub. Default false.

toggleActions: 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.

Additional Triggers

In case you need to fire the animation on additional events.

Trigger on: None, Click or Hover. Default none.

Element: the CSS class of the target that will fire the animation on the additional event selected, including the dot. Shown when Trigger on is Click or Hover.

How it works

Lamp is not nestable. It is made of a wrapper and several inner parts that together make the lamp, which is absolutely positioned. The wrapper has its own dimensions; the lamp beam has its own Width, Height and Top, which should use fixed units (px, em, rem or vw/vh).

Match the Lamp background to your site background so the fade looks right: the light may overflow the wrapper. z-index should stay at -1 so that overflow does not overlay your content. Width, height, background and z-index live in the Lamp style.

Lamp

Angle: the opening degree of the light. Default 70deg.

Width: the width of the lamp beam. Default 300px.

Height: the height of the lamp beam. Default 200px.

Top: the offset of the lamp from the top of the wrapper. Default 50px.

Color: the color of the light.

Blur intensity: how much blur to apply to the light. Default 0.5.

Light intensity: how strong the light is. Default 1.

Line

Height: the height of the lamp line. Default 1.25px.

Color: the color of the lamp line.

Animation

Lamp animation uses ScrollTrigger Library to fire on scroll. Learn more about ScrollTrigger here.

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: how long the animation takes. Default 0.75.

Delay: the delay before the animation starts. Default 0.

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

Expanders is a nestable div component. There is no expander repeater. Create expanders by dropping Expander components into Expander items. Set the label on the Expander. Nested elements or components should be placed inside each Expander's Content, like you would do at an Etch div or container. While Expander items is empty, a hint is shown.

Expander, label and content look live in the Expanders style. The label text and icon live on the Expander component.

Settings

Include FAQ Schema: if enabled, FAQPage schema is added to the expanders. Default off.

Open all in builder: if enabled, all expanders are open in the canvas. Default on.

Mode: click or hover. Default click.

Open one at a time: if enabled, opening one expander closes the others. Default on.

Open all by default: if enabled, all expanders open on page load. Default off.

Open this by default: the 1-based index of the expander to open on page load. Requires Open all by default to be off. Default 1.

Content animation

Duration: how long the content open/close takes. Default 0.3s.

CSS easing: the CSS easing of the content animation. Learn more about CSS easing functions here.

Icon animation

Rotation: how far the icon rotates when open. Default 180deg.

Duration: how long the icon rotation takes. Default 0.2s.

CSS easing: the CSS easing of the icon rotation. Learn more about CSS easing functions here.

How it works

Codepen is not nestable. Paste a CodePen URL to embed it. Width lives in the Codepen style.

Settings

Codepen URL: the URL of the pen you want to display.

Default tab: HTML and Result, CSS and Result, JS and Result, HTML and CSS, HTML and JS, CSS and JS, only Result, only HTML, only CSS or only JS. Default HTML and Result.

Editable: if enabled, users can edit the pen’s code. Default off.

Preview: if enabled, a Run Pen button displays instead of running the pen on page load. Default off.

Theme ID: default, light, dark, or a theme number. e.g. 31205. Default default.

Default zoom: the default zoom of the preview: 0.25, 0.5 or 1. Default 0.5.

Height: the height of the embed. Default 300.

How it works

Observer is a nestable div component. Nested elements or components should be placed inside Content, like you would do at an Etch div or container. Observer tilts that content based on the pointer position over the Observe target, including pointer movement and scroll. While Content is empty, a hint is shown.

Display, size and background live in the Observer style.

Tilt

Observe: the CSS class of the element that triggers the tilt when the pointer moves over it, including the dot. Leave as .classname to use the body.

Constrain: how strong the tilt is. Lower values tilt more. Default 200.

Perspective: the 3D perspective of the tilt, in pixels. Default 100.

How it works

Click and Copy is a nestable div component. Nested elements or components should be placed inside Content, like you would do at an Etch div or container. It comes with an icon that switches when the copy is produced. Set Copy icon to disable if you only want your nested content. While Content is empty, a hint is shown.

Look, icon size and tooltip look live in the Click & Copy style.

Built on Tippy.

Copy

Copy type: element or text. element copies the text of a nested target. text copies Custom text. Default element.

Content element class: the CSS class of the nested target to copy from, including the dot. Leave as .classname to copy this component’s own text. Shown when Copy type is element.

Apply select on copy: if enabled, the copied text is selected when Copy type is element. Default on.

Custom text: the text to copy. Shown when Copy type is text.

Copy icon: enable or disable. If disable, the built-in icon is hidden so you can use only nested content. Default enable.

Tooltip

Enable tooltip: if enabled, a tooltip shows on hover and updates when the copy is produced. Default on.

Arrow: if enabled, the tooltip shows an arrow. Default on.

Inertia: if enabled, the tooltip animation uses inertia. Default on.

Animation type: scale, shift-away, shift-toward, perspective or fade. Default scale.

Placement: auto, top, left, bottom or right. Default auto.

Touch: if enabled, the tooltip can be triggered by touch. Default on.

Copy state text: the tooltip content before copying. Default Copy.

Copied state text: the tooltip content after copying. Default Copied!.

How it works

Lottie is not nestable. Paste a Lottie JSON URL in Source. Width and height live in the Lottie style.

You can pick from a wide variety of Lotties at LottieFiles here.

Built on Lottie.

Source

Source: the URL of the Lottie JSON to play.

Playback

Autoplay: if enabled, the Lottie plays on page load. Default on. Disable Autoplay to use Custom trigger.

Loop: if enabled, the Lottie repeats. Default on.

Speed: the playback speed. Default 1.

Custom trigger

Custom trigger only applies when Autoplay is off.

Mode: cursor or scroll. Default cursor.

Cursor type: hover or click. Shown when Mode is cursor. Default hover.

Force flag: if enabled, the Lottie restarts on each hover or click. Shown when Mode is cursor. Default on.

Scroll type: seek (frames follow the scrollbar) or play (plays when it enters the viewport). Shown when Mode is scroll. Default seek.

Start visibility: the start of the viewport range for the scroll animation. Shown when Mode is scroll. Default 0.

End visibility: the end of the viewport range for the scroll animation. Shown when Mode is scroll. Default 1.

Start frame: the first frame of the Lottie. Shown when Mode is scroll. Default 0. Open the Lottie URL and search for ip.

End frame: the last frame of the Lottie. Shown when Mode is scroll. Default 120. Open the Lottie URL and search for op.

How it works

Parallax Hover is a nestable div component. There is no wrapper repeater. Create layers by dropping Parallax Item components into Parallax items. Nested elements or components should be placed inside each Parallax Item's Content, like you would do at an Etch div or container. Offset and opacity of each layer live on the Parallax Item. While Parallax items is empty, a hint is shown.

Size and inner look live in the Parallax Hover style.

Built on Atropos.

Behavior

Always active: if enabled, the effect stays on even when the pointer is not over the component. Default off.

Offset: the translateZ of the effect when active. Default 50.

Duration: the transition duration when entering, leaving and rotating, in milliseconds. Default 300.

Rotate

Enable rotate: if enabled, the container rotates with the pointer. Default on.

Enable rotate touch: if enabled, the container also rotates on touch. Default on.

Max X: the max rotation along the X axis, in degrees. Shown when Enable rotate is on. Default 15.

Max Y: the max rotation along the Y axis, in degrees. Shown when Enable rotate is on. Default 15.

Invert X: if enabled, rotation along the X axis is inverted. Shown when Enable rotate is on. Default off.

Invert Y: if enabled, rotation along the Y axis is inverted. Shown when Enable rotate is on. Default off.

Stretch

X axis: how far to translate along the X axis, as a percentage of the width. e.g. 50 moves ±50%. Default 0.

Y axis: how far to translate along the Y axis, as a percentage of the width. Default 0.

Z axis: how far to translate along the Z axis, as a percentage of the width. Default 0.

Shadow

Enable shadow: if enabled, a shadow is generated behind the component. Default on.

Offset: the translateZ of the shadow. Shown when Enable shadow is on. Default 50.

Scale: the scale factor of the shadow. Shown when Enable shadow is on. Default 1.

Highlight: if enabled, a highlight is included in the effect. Default on.

How it works

Spinner is not nestable. There are 8 types, from Type-a to Type-h. Type-a, Type-b and Type-c are line spinners. Type-d through Type-h are fill/draw spinners. Size, stroke and fill live in the Spinner style.

Type: Type-a, Type-b, Type-c, Type-d, Type-e, Type-f, Type-g or Type-h. Default Type-a.

Spinner animation uses ScrollTrigger Library to fire on scroll. Learn more about ScrollTrigger here.

Path animation (lines)

Enable: if enabled, the line strokes draw on scroll. Applies to Type-a, Type-b and Type-c. Default off.

Duration: how long the draw takes. Default 1.

Stagger: the delay between strokes. Default 0.25.

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.

Path animation (draw)

Enable: if enabled, the path draws on scroll. Applies to Type-d, Type-e, Type-f, Type-g and Type-h. Default off.

Duration: how long the draw takes. Default 1.

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.

Rotation

Duration: how long one rotation takes. Default 6.

Delay: the delay before the rotation starts. Default 1.

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

Sharer is a nestable div component. Nested elements or components should be placed inside Content, like you would do at an Etch div or container. While Content is empty, a hint is shown.

Cursor and size live in the Sharer style.

Built on Sharer.

Share

Type: the social network to share to: twitter, facebook, whatsapp, linkedin, telegram, reddit, skype or viber. Default twitter.

Title to share: the title included in the share. Default Just a text to share.

Url to share: the URL included in the share. Default https://nextetch.io.

Twitter hashtags: comma-separated hashtags for Twitter. Shown when Type is twitter. Default awesome,nextetch.

Twitter username: the Twitter username to credit. Shown when Type is twitter. Default nextetch.

Facebook hashtag: the Facebook hashtag. Shown when Type is facebook. Default nextetch.

Popup

Open as a tab: if enabled, the share opens in a new tab instead of a popup. Default off.

Pop up width: the width of the share popup. Shown when Open as a tab is off. Default 500px.

Pop up height: the height of the share popup. Shown when Open as a tab is off. Default 500px.

How it works

Glowing Card is a nestable div component. Nested elements or components should be placed inside Content, like you would do at an Etch div or container. While Content is empty, a hint is shown.

Width, height, padding and box-shadow live in the Glowing Card style.

Disable at touch devices: if enabled on a coarse pointer, the glow is turned off. Enabling it on one card also disables every other Glowing Card on the page. Default off.

Style

Glow color is determined by HSL parameters: Base, Spread, Saturation and Lightness. Learn more about HSL here.

Base: the hue of the glow. Default 80.

Spread: how far the hue shifts with the pointer. Default 500.

Saturation: the saturation of the glow. Default 100.

Lightness: the lightness of the glow. Default 50.

Outer: 1 shows the outer glow, 0 hides it. Default 1.

Size: the size of the glow. Default 200.

Blur: the backdrop blur intensity. Default 5.

Backdrop: the background of the card. Default hsl(0 0% 60% / 0.12).

Spot Alpha: the alpha of the backdrop spotlight. Default 0.1.

Radius: the border radius of the card. Default 14.

Border Width: the border width of the card. Default 3.

Border Spot Alpha: the alpha of the glowing border spot. Default 1.

Border Light Alpha: the alpha of the glowing border light. Default 1.