Elements & Extensions

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.

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.

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.

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.

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.

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.

A Container Element that randomly positions its child elements within the constraints that you define, helping you create generative design.

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.

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

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.

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.

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.

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.

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

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.

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.

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.

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.

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

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.

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.

Create paths between elements in your sections, animate a pulse along the path. The extension can used to craft modern SaaS Integrations Sections, bespoke interactions, backgrounds and more.

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.

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.

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.

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.

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.

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.

Turn your images into an interactive circular carousel with ease. The element gives you total control over the look and feel of the carousel with responsive settings so you can size and position the carousel as needed on different breakpoints. It includes several entrance animations, animation triggers, animated image preview, first-class integrations with the Interactions extension and more

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

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.

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.

A power-house extension for all your Text Animation needs, the Text Effects extension includes Entrance, Scroll and Hover animations — with smart options that give you creative freedom minus unnecessary complexity.

The Edge Mask extension for Breakdance creates a smooth fusion between elements and their backgrounds, allowing the element to gracefully fade and merge into its surroundings.

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.

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.

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.

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

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

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.

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.

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.

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.

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.

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.

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.