<!-- Banner minimalista -->
<div id="notification-banner" class="notification-banner" style="display: none;">
    <div class="banner-progress">
        <div class="progress-bar"></div>
    </div>
    
    <button class="close-btn" onclick="closeBanner()">
        <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <line x1="18" y1="6" x2="6" y2="18"></line>
            <line x1="6" y1="6" x2="18" y2="18"></line>
        </svg>
    </button>

    <div class="banner-content">
        <div class="status-indicator">
            <div class="pulse-dot"></div>
            <span class="status-text">LIVE</span>
        </div>
        
        <div class="main-content">
            <h3 class="banner-title">Visual Configurator</h3>
            <p class="banner-subtitle">Now active with 50+ animations</p>
        </div>
        
        <a href="https://bricksfusion.com/pricing#brxe-zvvpyf" class="cta-button" target="_blank">
            <span>Get Started</span>
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <line x1="5" y1="12" x2="19" y2="12"></line>
                <polyline points="12 5 19 12 12 19"></polyline>
            </svg>
        </a>
    </div>
</div>

<!-- Badge de novedades -->
<div id="news-badge" class="news-badge" onclick="showBanner()">
    <div class="badge-glow"></div>
    <span class="badge-text">NEW</span>
</div>

<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

.notification-banner {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 320px;
    background: rgba(20, 20, 20, 0.85);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;
    padding: 16px;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    z-index: 1000;
    transform: translateX(100%) scale(0.8);
    opacity: 0;
    animation: slideIn 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    box-shadow: 
        0 16px 48px rgba(0, 0, 0, 0.4),
        0 6px 24px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    box-sizing: border-box;
}

.notification-banner *,
.notification-banner *::before,
.notification-banner *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

@keyframes slideIn {
    0% {
        transform: translateX(100%) scale(0.8);
        opacity: 0;
    }
    100% {
        transform: translateX(0) scale(1);
        opacity: 1;
    }
}

.banner-progress {
    position: absolute;
    top: 0;
    left: 0;
    width: calc(100% - 0px);
    height: 2px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 14px 14px 0 0;
    overflow: hidden;
    z-index: 1;
    margin: 0;
}

.progress-bar {
    height: 100%;
    width: 100%;
    background: linear-gradient(90deg, #007AFF, #5856D6);
    transform-origin: left;
    animation: progressShrink 8s linear forwards;
}

@keyframes progressShrink {
    from {
        transform: scaleX(1);
    }
    to {
        transform: scaleX(0);
    }
}

.close-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    border-radius: 6px;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    transition: all 0.2s ease;
    backdrop-filter: blur(12px);
}

.close-btn:hover {
    background: rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.9);
    transform: scale(1.1);
}

.banner-content {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 6px;
}

.status-indicator {
    display: flex;
    align-items: center;
    gap: 8px;
}

.pulse-dot {
    width: 8px;
    height: 8px;
    background: #30D158;
    border-radius: 50%;
    animation: pulse 2s infinite;
    box-shadow: 0 0 0 0 rgba(48, 209, 88, 0.7);
}

@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(48, 209, 88, 0.7);
    }
    70% {
        box-shadow: 0 0 0 8px rgba(48, 209, 88, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(48, 209, 88, 0);
    }
}

.status-text {
    font-size: 11px;
    font-weight: 600;
    color: #30D158;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.main-content {
    flex: 1;
}

.banner-title {
    font-size: 16px;
    font-weight: 600;
    color: #FFFFFF;
    margin: 0;
    line-height: 1.3;
}

.banner-subtitle {
    font-size: 13px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.7);
    margin: 2px 0 0 0;
    line-height: 1.4;
}

.cta-button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #ef6013;
    color: white;
    text-decoration: none;
    padding: 8px 16px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 500;
    transition: all 0.2s ease;
    align-self: flex-start;
    box-shadow: 0 3px 12px rgba(239, 96, 19, 0.3);
}

.cta-button:hover {
    background: #d54f0a;
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(239, 96, 19, 0.4);
}

.cta-button svg {
    transition: transform 0.2s ease;
}

.cta-button:hover svg {
    transform: translateX(2px);
}

/* Badge de novedades */
.news-badge {
    position: fixed !important;
    bottom: 20px !important;
    right: 20px !important;
    top: auto !important;
    left: auto !important;
    background: rgba(16, 50, 30, 0.9);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(34, 197, 94, 0.2);
    border-radius: 16px;
    padding: 4px 12px;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    cursor: pointer;
    z-index: 999;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.4),
        0 4px 16px rgba(16, 50, 30, 0.3),
        inset 0 1px 0 rgba(34, 197, 94, 0.1);
    transform: scale(0);
    animation: badgePopIn 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
    animation-delay: 0.3s;
    overflow: hidden;
}

@keyframes badgePopIn {
    0% {
        transform: scale(0) rotate(-8deg);
        opacity: 0;
    }
    100% {
        transform: scale(1) rotate(0deg);
        opacity: 1;
    }
}

.news-badge:hover {
    transform: scale(1.05) translateY(-1px);
    background: rgba(20, 60, 35, 0.95);
    border-color: rgba(34, 197, 94, 0.3);
    box-shadow: 
        0 12px 40px rgba(0, 0, 0, 0.5),
        0 6px 20px rgba(16, 50, 30, 0.4),
        inset 0 1px 0 rgba(34, 197, 94, 0.15);
}

.badge-glow {
    position: absolute;
    inset: -1px;
    border-radius: 17px;
    background: linear-gradient(45deg, transparent, rgba(34, 197, 94, 0.4), transparent);
    opacity: 0.6;
    animation: badgeGlow 4s ease-in-out infinite;
    z-index: -1;
}

@keyframes badgeGlow {
    0%, 100% {
        opacity: 0.4;
        transform: rotate(0deg);
    }
    50% {
        opacity: 0.8;
        transform: rotate(180deg);
    }
}

.badge-text {
    font-size: 11px;
    font-weight: 600;
    color: #ffffff;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    position: relative;
    z-index: 2;
    line-height: 1;
}

/* Responsive */
@media (max-width: 768px) {
    .notification-banner {
        right: 14px;
        bottom: 14px;
        width: calc(100vw - 28px);
        max-width: 300px;
        padding: 14px;
        transform: translateY(100%) scale(0.9);
        animation: slideInMobile 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    }
    
    @keyframes slideInMobile {
        0% {
            transform: translateY(100%) scale(0.9);
            opacity: 0;
        }
        100% {
            transform: translateY(0) scale(1);
            opacity: 1;
        }
    }
    
    .banner-closing {
        animation: slideOutMobile 0.4s cubic-bezier(0.4, 0, 1, 1) forwards;
    }
    
    @keyframes slideOutMobile {
        to {
            transform: translateY(100%) scale(0.9);
            opacity: 0;
        }
    }
    
    .news-badge {
        right: 14px;
        bottom: 14px;
        padding: 5px 12px;
    }
    
    .badge-text {
        font-size: 11px;
    }
}

@media (max-width: 480px) {
    .notification-banner {
        width: calc(100vw - 20px);
        right: 10px;
        bottom: 10px;
        padding: 12px;
        border-radius: 12px;
    }
    
    .banner-title {
        font-size: 15px;
    }
    
    .banner-subtitle {
        font-size: 12px;
    }
    
    .cta-button {
        padding: 7px 14px;
        font-size: 12px;
    }
    
    .banner-content {
        gap: 10px;
    }
    
    .news-badge {
        right: 10px;
        bottom: 10px;
        padding: 4px 10px;
    }
    
    .badge-text {
        font-size: 10px;
    }
}

@keyframes slideOut {
    to {
        transform: translateX(100%) scale(0.9);
        opacity: 0;
    }
}

@media (min-width: 769px) {
    .banner-closing {
        animation: slideOut 0.4s cubic-bezier(0.4, 0, 1, 1) forwards;
    }
}
</style>

<script>
(function() {
    let autoCloseTimer;
    let isClosing = false;

    window.closeBanner = function() {
        if (isClosing) return;
        
        isClosing = true;
        const banner = document.getElementById('notification-banner');
        banner.classList.add('banner-closing');
        
        clearTimeout(autoCloseTimer);
        
        setTimeout(() => {
            if (banner) {
                banner.style.display = 'none';
                showNewsBadge();
            }
        }, 400);
    };

    window.showBanner = function() {
        const banner = document.getElementById('notification-banner');
        const newsBadge = document.getElementById('news-badge');
        
        if (newsBadge) {
            newsBadge.style.display = 'none';
        }
        
        if (banner) {
            banner.style.display = 'block';
            banner.classList.remove('banner-closing');
            isClosing = false;
            
            banner.style.animation = 'none';
            banner.offsetHeight;
            banner.style.animation = 'slideIn 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards';
            
            autoCloseTimer = setTimeout(() => {
                window.closeBanner();
            }, 8000);
            
            const progressBar = document.querySelector('.progress-bar');
            if (progressBar) {
                progressBar.style.animation = 'none';
                progressBar.offsetHeight;
                progressBar.style.animation = 'progressShrink 8s linear forwards';
            }
        }
    };

    function showNewsBadge() {
        const newsBadge = document.getElementById('news-badge');
        if (newsBadge) {
            newsBadge.style.display = 'block';
        }
    }

    const banner = document.getElementById('notification-banner');
    if (banner) {
        banner.addEventListener('mouseenter', () => {
            if (!isClosing) {
                const progressBar = document.querySelector('.progress-bar');
                if (progressBar) {
                    progressBar.style.animationPlayState = 'paused';
                }
                clearTimeout(autoCloseTimer);
            }
        });

        banner.addEventListener('mouseleave', () => {
            if (!isClosing) {
                const progressBar = document.querySelector('.progress-bar');
                if (progressBar) {
                    progressBar.style.animationPlayState = 'running';
                }
                
                autoCloseTimer = setTimeout(() => {
                    window.closeBanner();
                }, 8000);
            }
        });
    }
})();
</script>

NO CODING REQUIRED · ONE CLICK IMPORT

Bricks Builder templates & animated components

Copy, customize, and launch in minutes.

Compatible with
Bricks Vanilla
ACSS
Core Framework
LIBRARY

Ready-to-use Bricks Builder templates for every section

Just copy, paste, and you're done. No setup, no code, and no headaches.

One-click copy

183 components

Vanilla & ACSS & Core Framework

VISUAL CONFIGURATOR

Customize animations without coding

Our intuitive configurator makes it easy to personalize animations to match your brand. Just slide, click, and apply.

Adjust colors, speed, and intensity in seconds

Preview changes in real-time

One-click to copy your customized animation

INSTANT MOTION

Effects Made Simple

Add stunning interactive animations to your website in seconds. Our collection of ready-to-use effects brings your elements to life with just one attribute.

One-click copy

6 Instant motion

Visual Configurator

SURECART

Effortless eCommerce for Bricks Builder

Customizable components to enhance your store’s design and functionality.

One-click copy

6 components

Documentation ready

Why choose Bricksfusion

Get the best components for your website with full support.

LIFETIME

Get unlimited access forever with our lifetime plan, or choose yearly with our flexible subscription.

Learn more
LIBRARY

Access our extensive collection with new additions monthly.

165+ native Bricks Builder components

And growings.

SureCart components

Product pages and other features.

ACSS Framework ready

Available in many components.

Core Framework ready

Available in many components.

Regular Updates

Fresh designs monthly.

INSTANT COPY

Quickly copy any component and paste it directly into your Bricks Builder.

VISUAL CONFIGURATOR

Transform how you create animations with our revolutionary visual interface. No more documentation or HTML attributes - just intuitive, real-time customization.

No-code Required

Easy visual customization

One-click setup

Instant implementation

RESPONSIVE DESIGNS

Perfectly adapts to any device, providing seamless user experiences.

DEDICATED SUPPORT

Quick, effective assistance to resolve any issues or questions.

Unlock instant access to Bricksfusion

Choose Your Plan

Subscription Pro Annual
€99/year
Unlimited websites
Features & Templates
Library Components
Animated Elements
Instant Motion

Soon

Transition Pages

New

Templates
SureCart Templates
Visual configurator

New

Integrations
Bricks Vanilla
ACSS Framework
Core Framework
Customer Care
Standard support (48h response)
Get Pro Annual
Best ValueLifetime
€199
Unlimited websites
Features & Templates
Library Components
Animated Elements
Instant Motion

Soon

Transition Pages

New

Templates
SureCart Templates
Visual configurator

New

Integrations
Bricks Vanilla
ACSS Framework
Core Framework
Customer Care
Premium support (24h response)
Get Lifetime Access

From Purchase to implementation — Fast & Easy

Stop building websites. Start building experiences.
FAQ

Have a question?

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

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.

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!

The Visual Configurator is a powerful feature in Bricksfusion that lets you customize pre-built animations in real time, without touching a single line of code. Designed to work seamlessly with Bricks Builder, it allows you to visually tweak parameters like speed, color, delay, intensity, and more. Once you’re happy with the result, the Configurator instantly generates the optimized code ready to use on your site. It’s the easiest way to add professional, high-performance animations to your pages with just a few clicks.

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.

Both ACSS and Core offer predefined classes and utilities that speed up your workflow, reduce the need for custom CSS, and help keep your design consistent. With Bricksfusion, you get components that work out of the box with either framework, so you can build faster and smarter.

After completing your purchase, log in to your user panel on the Bricksfusion website. From there, you can browse the entire library of components. Find the component you need, click the copy button, and simply paste it into your Bricks Builder canvas. It’s that simple, no need for additional setup or connection steps. Every component is fully compatible and ready to enhance your workflow.

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.
  • Premium Elements: 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.
  • Instant Motion: A collection of pre-built animations with stunning effects, designed to add smooth, high-quality motion to your website effortlessly.

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.

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.

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.

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.

We currently offer two pricing plans:

  • Yearly Plan – €99/year (taxes not included)
    Gain access to all components, features, and updates during your subscription period.

  • Lifetime Deal – €199 (one-time payment) (taxes not included)
    Enjoy unlimited access to all components, future updates, and new releases forever, with no renewals.

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.

Absolutely! We offer a 3-month interest-free payment plan for the LTD plan while it’s available. No hidden fees, no surprises, just an easy way to get full access to Bricksfusion while spreading the cost over time.

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 [email protected].

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

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.

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.

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

You can contact our technical support by sending an email to [email protected]. Our team is ready to help you with any problem or query.

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.

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

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

Yes, our components are designed to be easy to use, but we also provide detailed online documentation for each one. This way, you can explore how each component works and how it’s configured before you buy—ensuring complete transparency on functionality and setup.

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

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

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.

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.

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.

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.

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