Elements & Extensions

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.

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 CSS-based implementation of a nav bar similar to a MacOS Dock with tons of customization and a directional magnification effect.

Stack Reveal is an interactive composite element that turns a group of content items into a polished, animated and interactive component. Ideal for showcasing features, services, steps, team members, or portfolio items in a compact and engaging way.

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.

Add an eye-catching animated border beam that travels around the edges of your elements. With different visual styles to choose from, you can effortlessly create a sleek futuristic border effect to highlights important content.

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.

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

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.

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

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.

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

An immersive WebGL Carousel that showcases images in a breathtaking 3D spiral that comes alive as visitors scroll. Fine-tune the layout, add interactive hover effects, click-to-zoom, synchronized content animations, and more, all fully responsive and silky smooth. A scroll-stopping gallery experience your visitors won’t forget.

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.

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.

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!

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.

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.

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.

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

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.

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.

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.

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.

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.

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

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

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.

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

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.

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.

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.

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.

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.

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

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.

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.

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.

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.

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

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.

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.

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.