Elements & Extensions

Discover our Elements and Extensions for Breakdance
Scroll Animation

Unique Scrolling Animations in an easy-to-use format. The animations include a variety of settings, and the implementation comes with some powerful features like Scroll Direction, so you can choose which direction(s) the animation gets applied, the ability to pin elements of your choosing during the animation, and more.

Scroll Animation

Extension
Pro
Content Accordion

An advanced accordion element that includes several pre-defined buttery smooth animations. Being a container element, you can add any elements you need under each Content Accordion Item giving you total freedom over the design and use cases.

Content Accordion

Element
Pro
Gooey Menu Link

A text link element that provides a micro-interaction switching between two given texts on hover using a morphing/blending effect compatible with the Breakdance Menu Builder.

Gooey Menu Link

Element
Free
Magnetic Cursor

Turn your mouse cursor into a magnet that can wrap links, buttons, or any element you choose on hover. It works automatically with all Breakdance links, you can also include additional custom elements to the mix using CSS selectors, customize the inner and outer portions separately, and ignore or hide the cursor selectively on different elements.

Magnetic Cursor

Extension
Free
Gooey Overlay

A container element that allows you to reveal hidden content via several stylish overlay transitions. It has a lot of use cases and UI patterns like Quickview, fullscreen menus, side panels on pages, and any post types.

Gooey Overlay

Element
Pro
Dividers Morph Animations

An extension to the Section Element that allows you to animate the default Breakdance dividers when a divider enters the viewport or on page scroll.

Dividers Morph Animations

Extension
Pro
WebGL Liquid Distortion

Create interactive image backgrounds that can be distorted using several different styles during mouse/touch movement. Since the distortion works with images, it can be used creatively with all kinds of images.

WebGL Liquid Distortion

Extension
Pro
Morphing Cursor

An incredibly versatile custom cursor extension that allows you to turn mouse movement into a living entity. You can configure the cursor to change styles, scale, or show any SVG ( even animated ones ) when the cursor enters any element of your choosing.

Morphing Cursor

Extension
Pro
On Scroll Color Switcher

Easily alter the background color of a page as you scroll by designating transition points in your pages. You can also optionally and selectively change the text color of elements of your choosing.

On Scroll Color Switcher

Element
Free
Link Media Reveal Menu

An Interactive UI Pattern for links that displays a hover-over preview of an Image or Video using smooth animations compatible with the Breakdance Menu Builder. It includes several animation styles, auto-positioning for the revealed element depending on the current scroll position so that it is always visible, movement effects, and more.

Link Media Reveal Menu

Element
Free
WebGL Slideshow

A slideshow element that uses WebGL to transition between images using jaw-dropping creative effects. It includes several transition effects, direction settings, and more for a variety of look and feel.

WebGL Slideshow

Element
Free
WebGL Media Hover Distortion

An Interactive WebGL Element that allows you to swap 2 images, 2 videos, or a combination of both using an image-based distortion effect on hover. It comes with several displacement effects, the ability to use custom images for the displacement effect, and more.

WebGL Media Hover Distortion

Element
Free
Gooey Link

A text link element that provides a micro-interaction switching between two given texts on hover using a morphing/blending effect.

Gooey Link

Element
Free
Glue Button

A button element that centers its position to the current mouse location on hover and glues itself to the mouse cursor for a given distance on mouse move. The glue effect is enabled by default so you don’t have to do any configuration and can just use it as you would normally use the standard button element.

 

Glue Button

Element
Free
3D Globe

A lightweight and easy-to-use WebGL-based 3D Globe element. Couple it with the Interactions extension and create stunning interactive UI Patterns.

3D Globe

Element
Pro
Snake Cursor

An engaging grid-based creative cursor featuring a variety of settings that allow you to transform it dynamically into different shapes and styles.

Snake Cursor

Extension
Pro
WebGL Metaballs

Create unique, modern, and interactive 3D Metaballs backgrounds using this WebGL extension. It comes with a number of shapes and shading modes and settings so you can create a variety of designs easily.

WebGL Metaballs

Extension
Pro
Interactions

The #1 Interactions implementation for Breakdance. It allows you to apply actions based on triggers initiated by the user, browser events, or events dispatched by elements and extensions from Breakdance and Elements Hive. A small package that provides you with endless possibilities.

Interactions

Extension
Pro
WebGL Wavy Gradients

Turn your background into a wavy piece of art with this unique WebGL extension. The extension comes with several pre-defined styles and the ability to add as many colors as you need, making sure no two implementations will be alike.

WebGL Wavy Gradients

Extension
Pro
WebGL Slideshow

A slideshow extension that uses WebGL to transition between images using jaw-dropping creative effects. It includes several transition effects, direction settings, and more for a variety of look and feel.

WebGL Slideshow

Extension
Free
Entrance Animations

Go beyond the usual entrance animations. Not only are the animations unique and easy to use, but they also allow for more variations and control than what you’ve come to expect from entrance animations in a page builder.

Entrance Animations

Extension
Pro
Smooth Scroll

A global extension that helps you make scrolling through your website feel smoother and takes away the choppy feeling that you may experience with certain scroll-based animations.

Smooth Scroll

Extension
Pro
WebGL Lone Slider

Get the power to create unique and avant-garde slider designs with the WebGL Lone Slider. With the ability to separately position all the elements and a number of creative WebGL-based transitions, it is a versatile slider container element like no other.

WebGL Lone Slider

Element
Pro
Glue Menu Button

A button element that centers its position to the current mouse location on hover and glues itself to the mouse cursor for a given distance on mouse move that’s compatible with the Breakdance Menu Builder. The glue effect is enabled by default so you don’t have to do any configuration and can just use it as you would normally use the standard button element.

Glue Menu Button

Element
Free
WebGL Image Carousel

Get the power to easily implement powerful and unique WebGL-based image carousels. The element contains several velocity-sensitive silky smooth WebGL scroll and distortion effects all while allowing you to work in a familiar HTML-based carousel workflow.

WebGL Image Carousel

Element
Pro
Ink Cursor

A background extension that allows you to change the mouse cursor into an interactive ink-like entity that can be applied to a section or the whole page. With several visual styles and effects, it’s the perfect addition to add that finishing touch to your designs.

Ink Cursor

Extension
Free
Magnifying Dock

A CSS-based implementation of a nav bar similar to a MacOS Dock with tons of customization and a directional magnification effect.

Magnifying Dock

Element
Pro
Images Trail

Part of the Mouse Effects extensions family, the Images Trail extension allows you to create an animated trail of images on your sections or your whole page that follow the current cursor position.

Images Trail

Extension
Pro
WebGL Kinetic Typography

Create our own custom kinetic 3D backgrounds using this unique WebGL extension. With different geometric shapes, the ability to use any custom image and a plethora of shader effects, it packs a whole lot of powers into a small set of settings for an unlimited amount of variations.

WebGL Kinetic Typography

Extension
Free
SVG Path Drawer

Enhance your storytelling capabilities by turning stroke-based SVG files into interactive design elements that can be dynamically drawn. Different triggers, drawing modes, and helper options make it the perfect companion for your SVGs.

SVG Path Drawer

Element
Pro
Draggable

Turn any element on your page into a draggable element with a single toggle. The extension has several advanced features that allow you to easily create different effect patterns.

Draggable

Extension
Pro
Marquee Container

A unique and ease-to-use element that lets you create captivating Marquee effects with any elements, or combinations of different elements!

Marquee Container

Element
Free
Morph Masker

A container element that applies a mask to the nested content. The mask can be animated when an element enters the viewport or on page scroll giving you an additional simple yet powerful design element to bring your designs to life.

Morph Masker

Element
Pro
Content Reveal Container

A versatile container element that allows you to switch between two panels using several transition styles. Each panel can contain any other elements giving you the freedom to craft whatever designs you imagine. It can be used to create advanced Flip Boxes, Sliding Boxes, and more.

Content Reveal Container

Element
Pro
Spotlight

Part of the Mouse Effects extensions family, the Spotlight extension for Breakdance allows you to easily enable a spotlight effect on any element. Interactive spotlight and glow effects are just toggle away.

Spotlight

Extension
Pro
WebGL Fluid

Turn section backgrounds or the whole page into an Interactive WebGL Fluid Simulation. The extension abstracts something pretty complicated into a very easy-to-use and versatile package that will make any design stand out.

WebGL Fluid

Extension
Free
Link Media Reveal

An Interactive UI Pattern for links that displays a hover-over preview of an Image or Video using smooth animations. It includes several animation styles, auto-positioning for the revealed element depending on the current scroll position so that it is always visible, movement effects, and more.

Link Media Reveal

Element
Free
Tilt 3D

Part of the Mouse Effects extensions family, the Tilt 3D extension for Breakdance allows you to add dynamic rotation on any element on your page with a single toggle. When enabled, the element will keep updating its angle to match the current direction of the mouse.

Tilt 3D

Extension
Pro
Image Comparison

A fresh take on a common design element. The Elements Hive Image Comparison element uniquely conveys the element’s functionality using fluid micro-animations instead of additional interface elements making for an elegant minimalist design.

Image Comparison

Element
Pro
Backlight

This extension lets you apply a stunning Backlight effect, also known as a Natural Shadow or Ambilight effect, to any element.

Backlight

Extension
Free
Mouse Track

Part of the Mouse Effects extensions family, the Mouse Track extension for Breakdance allows you to enable mouse follow functionality on any element on your page with a single toggle. With a few settings, you can control how the element will be affected on all its 3D axis.

Mouse Track

Extension
Pro