Bricks Builder templates & animations

Copy, customize, and launch in seconds.

Buy LTD Join Group

Vanilla

ACSS

Core Framework

Aurora

Holographic Glass

Huly Laser

RayCast

+ 2 more in library

Toggle to preview animations live

LIBRARY

Choose your starting point.

Same powerful library, two different approaches. Pick what works best for your workflow.

Wireframe Library

New

Clean structure. Neutral colors. Add your brand. Perfect for custom branding.

Neutral colors only

Full customization

300+ components

Vanilla

ACSS

Core Framework

AT Framework

Explore Wireframe

Styled Library

Copy, paste, done. Professional design ready to use. No customization needed.

Premium design included

Zero design work

192+ components

Vanilla

ACSS

Core Framework

AT Framework

Explore Library

ANIMATIONS

Built for Bricks Builder. Build to last.

80+ animations. One plugin. Zero complexity.

Live preview in canvas

Native Bricks controls

Ready out of the box

Advanced Effects

Backgrounds Vol. 1

Backgrounds Vol. 2

Showcase

Visual Effects

Animated Texts

Interactions

Menu Animations

Transition Pages

Drag, drop done

Edit in real-time

Deploy instantly

SURECART

Product pages & components for SureCart

Ready-to-use product page templates and UI blocks built for SureCart. Start selling faster with Bricks Builder.

Product Pages

UI Components

One-click copy

Built for SureCart

Why choose Bricksfusion

Templates and animations that work the way you do.

Pay once, own forever

Lifetime access to everything. New components and animations included, no subscription required.

Learn more

No learning curve

Copy, paste, done. Visual configurators mean you don't need to learn animation syntax or CSS.

Works with your framework

Available in Vanilla, ACSS, Core, and AT. Use what you already know, no need to switch workflows.

Build faster, deliver more

Finish client sites in days, not weeks. Consistent design across every project without starting from scratch.

Get Bricksfusion

Choose Your Plan

AnnualPro Annual

€119/year

Unlimited websites

Features & Templates

Styled Library

Wireframe Library

Templates

SureCart Components

Woocommerce ComponentsQ1 2026

ANIMATIONS

80+ Animations

Page Transitions

Animation Showcases

Compatible With

Bricks Vanilla

ACSS Framework

Core Framework

AT Framework

Support

Email & Community Support

Get Pro Annual

BEST VALUE

One-Time PaymentLifetime

€219/one time

Unlimited websites · Lifetime updates

Features & Templates

Styled Library

Wireframe Library

Templates

SureCart Components

Woocommerce ComponentsQ1 2026

ANIMATIONS

80+ Animations

Page Transitions

Animation Showcases

Compatible With

Bricks Vanilla

ACSS Framework

Core Framework

AT Framework

Support

Email & Community Support

Get Lifetime Access

document.addEventListener('DOMContentLoaded', function() {
    const fontLink = document.createElement('link');
    fontLink.href = 'https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap';
    fontLink.rel = 'stylesheet';
    document.head.appendChild(fontLink);

    const styles = `
        .simple-price-box {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.75rem;
            font-family: 'Inter', sans-serif;
            margin: 0.5rem 0;
            width: fit-content;
        }

        .simple-text-label {
            font-size: var(--text-xs);
            font-weight: 300;
            transition: color 0.2s ease;
            user-select: none;
            white-space: nowrap;
        }

        .simple-text-label.is-on {
            color: #fb923c;
            background: linear-gradient(135deg, #fb923c 0%, #ffa85c 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            font-weight: 500;
        }

        .simple-text-label.is-off {
            color: #9CA3AF;
        }

        .simple-switch {
            position: relative;
            width: 4rem;
            height: 2rem;
            background-color: #E5E7EB;
            border-radius: 9999px;
            cursor: pointer;
            transition: all 0.3s ease;
            flex-shrink: 0;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        }

        .simple-switch.is-on {
            background: linear-gradient(135deg, #fb923c 0%, #ffa85c 50%, #fb923c 100%);
            box-shadow: 0 4px 15px rgba(251, 146, 60, 0.4);
            transform: scale(1.02);
        }

        .simple-switch::after {
            content: '';
            position: absolute;
            top: 0.25rem;
            left: 0.25rem;
            width: 1.5rem;
            height: 1.5rem;
            background: linear-gradient(135deg, #2d3748 0%, #1a202c 100%);
            border-radius: 50%;
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .simple-switch.is-on::after {
            transform: translateX(2rem);
            box-shadow: 0 3px 8px rgba(251, 146, 60, 0.3);
        }

        .simple-price-text {
            transition: opacity 0.3s ease;
            display: inline-flex !important;
            align-items: baseline;
            gap: 0.25rem;
            justify-content: inherit;
        }

        .simple-price-text .amount-value {
            display: inline-block;
        }

        .simple-price-text .time-period {
            opacity: 0.7;
            white-space: nowrap;
            font-size: var(--text-xs);
            font-weight: 300;
        }

        @media (max-width: 768px) {
            .simple-price-box {
                gap: 0.5rem;
            }
        }

        .simple-switch:hover {
            transform: scale(1.05);
        }

        .simple-switch.is-on:hover {
            background: linear-gradient(135deg, #ea7c2b 0%, #fb923c 50%, #ffa85c 100%);
            box-shadow: 0 6px 20px rgba(251, 146, 60, 0.5);
        }
    `;

    const styleSheet = document.createElement('style');
    styleSheet.textContent = styles;
    document.head.appendChild(styleSheet);

    const toggleHTML = `
    <div class="simple-price-box">
        <div class="simple-switch" role="switch" aria-checked="false" tabindex="0"></div>
        <span class="simple-text-label is-off" data-mode="monthly">3 Monthly payments</span>
    </div>
    `;

    const URLS = {
        oneTime: 'https://bricksfusion.com/payment/?line_items%5B0%5D%5Bprice_id%5D=9277ae68-9c20-4f18-833f-071ba6d0c75a&line_items%5B0%5D%5Bquantity%5D=1',
        monthly: 'https://bricksfusion.com/payment/?line_items%5B0%5D%5Bprice_id%5D=a21251dc-96e8-47a1-af1a-b68318db75d4&line_items%5B0%5D%5Bquantity%5D=1'
    };

    function animateValue(start, end, duration, element) {
        let startTimestamp = null;
        const step = (timestamp) => {
            if (!startTimestamp) startTimestamp = timestamp;
            const progress = Math.min((timestamp - startTimestamp) / duration, 1);
            const currentValue = Math.round(progress * (end - start) + start);
            element.textContent = `€${currentValue}`;
            if (progress < 1) {
                window.requestAnimationFrame(step);
            }
        };
        window.requestAnimationFrame(step);
    }

    function updatePriceDisplay(isMonthly, animate = true) {
        if (priceElement) {
            const currentAmount = priceElement.querySelector('.amount-value');
            const startPrice = currentAmount ? parseInt(currentAmount.textContent.replace('€', '')) : (isMonthly ? 199 : 67);
            const endPrice = isMonthly ? 67 : 199;
            
            if (animate && currentAmount) {
                animateValue(startPrice, endPrice, 500, currentAmount);
                
                setTimeout(() => {
                    const periodElement = priceElement.querySelector('.time-period');
                    if (periodElement) {
                        periodElement.textContent = isMonthly ? '/mo for 3 months' : '/one-time';
                    }
                }, 250);
            } else {
                priceElement.innerHTML = `
                    <span class="amount-value">€${endPrice}</span>
                    <span class="time-period">${isMonthly ? '/mo for 3 months' : '/one-time'}</span>
                `;
            }
        }
    }

    const toggleContainer = document.querySelector('[data-toggle-container]');
    const priceElement = document.querySelector('[data-simple-price]');
    
    if (toggleContainer && priceElement) {
        toggleContainer.innerHTML = toggleHTML;
        priceElement.classList.add('simple-price-text');
        
        const toggleBox = toggleContainer.querySelector('.simple-price-box');
        const computedStyle = window.getComputedStyle(toggleContainer);
        
        if (computedStyle.textAlign) {
            toggleBox.style.marginLeft = computedStyle.textAlign === 'center' ? 'auto' : 
                                       computedStyle.textAlign === 'right' ? 'auto' : '0';
            toggleBox.style.marginRight = computedStyle.textAlign === 'center' ? 'auto' : 
                                        computedStyle.textAlign === 'right' ? '0' : 'auto';
        }
    } else if (priceElement) {
        priceElement.insertAdjacentHTML('beforebegin', toggleHTML);
        priceElement.classList.add('simple-price-text');
    }

    const toggle = document.querySelector('.simple-switch');
    const monthlyLabel = document.querySelector('[data-mode="monthly"]');
    const buyButton = document.querySelector('[data-simple-button]');

    function handleToggle() {
        const isMonthly = !toggle.classList.contains('is-on');
        toggle.classList.toggle('is-on');
        toggle.setAttribute('aria-checked', isMonthly);
        
        if (monthlyLabel) {
            monthlyLabel.classList.toggle('is-on');
            monthlyLabel.classList.toggle('is-off');
        }
        
        updatePriceDisplay(isMonthly, true);
        if (buyButton) {
            buyButton.href = isMonthly ? URLS.monthly : URLS.oneTime;
        }
    }

    if (toggle) {
        toggle.addEventListener('click', handleToggle);
        toggle.addEventListener('keydown', (e) => {
            if (e.key === 'Enter' || e.key === ' ') {
                e.preventDefault();
                handleToggle();
            }
        });
    }

    updatePriceDisplay(false, false);
});

FAQ

Have a question?

We answer questions through the community and by mail as well, feel free to ask!

What are Bricksfusion components?

Components are pre-designed elements that you can use to build websites faster and more efficiently. These components include various functionalities and styles that integrate seamlessly with Bricks Builder, allowing you to create professional websites without having to design from scratch.

What is Bricks Vanilla, and why is it important in Bricksfusion?

Bricks Vanilla refers to the pure, unaltered version of Bricks Builder, which serves as the foundation for all Bricksfusion components. This ensures that our elements integrate seamlessly with your website while fully respecting the original functionality of Bricks. In some cases, we’ve added small pieces of code to bring special and attractive features to life, but you don’t need to worry about them or make any adjustments, everything is ready to use, hassle-free. Just focus on creating!

How do I customize the animations?

All animations are native Bricks Builder elements. Drag any animation to your canvas, and customize it directly from the sidebar controls, adjust colors, speed, intensity, and more. Changes preview in real-time while you edit. No external tools, no extra steps. Everything happens inside Bricks Builder.

What frameworks does Bricksfusion support?

Bricksfusion is fully compatible with both ACSS and Core Framework. You can use the components seamlessly in projects built with either system. We’ve optimized everything so you don’t have to worry about adapting code or styles.

How do ACSS, Core Framework, and AT Framework improve my Bricks Builder workflow, and does Bricksfusion support them?

Absolutely. Bricksfusion works out of the box with ACSS, Core Framework, and AT Framework, and it also works great with Bricks Vanilla (no framework).

Here’s how these frameworks help when building with Bricks:

Faster setup: ready-made utilities so you write far less custom CSS.
Consistent design: spacing, colors, and type stay uniform across pages.
Cleaner code: fewer one-off styles, easier to maintain.
Quick changes: update a value once and the whole site follows.

Using Bricksfusion is simple: copy a component, choose your framework (or go Vanilla), and you’re good to go, no lock-in and easy to switch later.

How can I access the components?

After completing your purchase, you’ll receive two things:

1. The Plugin. Download and install the Bricksfusion plugin in your WordPress site. Activate it using the license key from your purchase confirmation email.

2. The Component Library. Log in to your user panel on the Bricksfusion website to browse 190+ pre-built components. Find what you need, click the copy button, and paste it directly into your Bricks Builder canvas.

It’s that simple. No complicated setup, no extra steps. Plugin for animations, library for components, both fully compatible and ready to enhance your workflow.

What types of components do you offer?

We offer a complete Library of components covering essential categories like pricing, megamenu, headers, and call to actions (CTA), among others. Each category includes multiple components designed to suit different styles and functions, ensuring that your website is both visually appealing and highly functional.

In addition to our essential Library components, we also provide specialized categories to meet specific needs:

SureCart: Custom components that streamline and elevate your e-commerce experience with SureCart.
Animations: Dynamic and interactive components that respond to user interactions, bringing your website to life with engaging animations.
Layouts: Pre-designed layouts that ensure consistency across your site while saving you time.
Page Transitions: Components crafted to create smooth and engaging transitions between pages, enhancing the overall user experience.

Can I customize the components?

Yes, all our components are fully customizable. You can adjust colors, fonts, sizes and other aspects to align with your website’s visual identity. This allows you to maintain brand consistency without sacrificing functionality.

Do I need advanced knowledge to use the components?

No, you don’t need any coding knowledge to use our components. They are designed to be intuitive and easy to use although it is recommended to have basic notions of Bricks Builder and CSS to get the full performance.

Do you offer refunds?

No, due to the digital nature of our products, we do not offer refunds. Once you have access to the components, it is easy to copy them, so it would not be practical or fair to allow refunds.

Do you offer any satisfaction guarantee?

Although we do not offer refunds, we guarantee support and technical assistance to make sure you are satisfied with the components. We are committed to providing you with high quality products and a positive user experience.

How much does Bricksfusion cost?

We currently offer two pricing plans:

Yearly Plan – €109/year (taxes not included)
Gain access to all components, features, and updates during your subscription period.
Lifetime Deal – €219 (one-time payment) (taxes not included)
Enjoy unlimited access to all components, future updates, and new releases forever, with no renewals.

Will there be price increases?

Yes, it is possible that the price may increase as our component library grows and is enriched with new features and designs. We recommend that you take advantage of the current price to ensure access to all of our content without future cost increases.

Can I upgrade from the Yearly Plan to the Lifetime Deal?

Yes, you can upgrade to the Lifetime Deal within 30 days of your original purchase by paying only the difference between the Yearly Plan price and the Lifetime Deal price.

After 30 days and up to 90 days, you can still upgrade by paying 50% of the Lifetime Deal price.After 90 days, the full price of the Lifetime Deal will apply.To request an upgrade, please contact us at support@bricksfusion.com.

What payment methods do you accept?

We accept all major credit cards as well as PayPal payments. These options ensure secure and convenient transactions for our customers.

Can I test the components before I buy them?

We do not offer free trials of components, but you can view detailed demos on our website. These demos allow you to explore the functionality and design of each component before making a purchase decision.

Does the lifetime payment include all future upgrades?

Yes, the one-time lifetime payment includes all future upgrades and new components we add. This ensures that you will always have access to the latest developments and enhancements at no additional cost.

Can I get an invoice for my purchase?

Yes, once the purchase is completed, an invoice is automatically generated that you can download.

How can I contact technical support?

You can contact our technical support by sending an email to support@bricksfusion.com. Our team is ready to help you with any problem or query.

What are the support hours?

There is no definite timetable but we answer as quickly as possible. We are clear about our priorities and always offer an excellent service. You can be sure of that.

How long does it take to solve a problem?

The time to resolve a problem may vary depending on its complexity. However, we strive to resolve most problems within 24 to 48 hours.

Is the support included in the price?

Yes, technical support is included in the one-time lifetime payment. There are no additional costs for receiving technical assistance or troubleshooting our components.

Do you offer tutorials or documentation?

Yes. Each animated element has its own dedicated page where you can explore all its features, controls, and customization options. This way, you can understand exactly how each animation works and how to configure it before using it in your projects, ensuring complete transparency on functionality and setup.

What kind of problems does the support cover?

Our support covers any problems related to the functionality and use of our components. This includes technical problems, integration difficulties and customization queries.

Can I use the components on multiple websites?

Yes, once you purchase our components, you can use them on as many websites as you wish without additional restrictions.

Can I integrate the components with my existing content management system?

Yes, our components are built to work seamlessly with Bricks Builder, so as long as your CMS supports it, you can integrate them effortlessly into your existing setup.

Can I combine several components on a single page?

Yes, you can combine multiple components on a single page to create complex and functional designs. Our components are designed to work together harmoniously. You will probably need to add corporate color and sizes to suit your brand.

How often do you release new updates?

We are constantly working on improving and upgrading our components. Updates may vary in frequency, but we generally release new versions every 20 days, depending on the needs and feedback from our users.

Can I request new features for future components?

Feature requests are exclusive to Total Access plan members. If you have purchased this plan, you can suggest new features or improvements through our contact form, and we will consider your ideas for future updates.

What kind of improvements do the upgrades include?

Updates may include new functionality, performance enhancements, bug fixes and compatibility adjustments to ensure that components continue to work seamlessly.