Bricks Builder templates & animations
Copy, customize, and launch in seconds.
Bricks Builder templates & animations
Copy, customize, and launch in seconds.
Choose your starting point.
Same powerful library, two different approaches. Pick what works best for your workflow.
Copy, paste, done. Professional design ready to use. No customization needed.
Premium design included
Zero design work
192+ components
Clean structure. Neutral colors. Add your brand. Perfect for custom branding.
Neutral colors only
Full customization
192+ components
Built for Bricks Builder. Build to last.
70+ animations. One plugin. Zero complexity.
Live preview in canvas
Native Bricks controls
Ready out of the box
Raycast, Huly & more effects
Animated backgrounds, gradients, particles
Carousels, galleries, scroll effects
Border effects, reveals, distortions
Text reveals, motion, typewriter effects
Hover effects, parallax, notifications
Navigation effects, mobile menus
Page transitions and loading effects
Drag, drop, done
Edit in real-time
Deploy instantly
Product pages & components for SureCart
Ready-to-use product page templates and UI blocks built for SureCart. Start selling faster with Bricks Builder.
Complete product page layouts with pricing displays, buy buttons, and checkout integration. Ready to sell.
Reusable blocks for product displays and cart interactions. Configure with visual controls, no code needed.
One-click copy
Built for SureCart
Why choose Bricksfusion
Templates and animations that work the way you do.
Lifetime access to everything. New components and animations included—no subscription required.
Learn moreCopy, paste, done. Visual configurators mean you don't need to learn animation syntax or CSS.
Available in Vanilla, ACSS, Core, and AT. Use what you already know, no need to switch workflows.
Finish client sites in days, not weeks. Consistent design across every project without starting from scratch.
Get Bricksfusion
Choose Your Plan
Price changes Oct 28
-20%
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);
});Have a question?
We answer questions through the community and by mail as well, feel free to ask!
What are Bricksfusion components?
What is Bricks Vanilla, and why is it important in Bricksfusion?
How do I customize the animations?
What frameworks does Bricksfusion support?
How do ACSS, Core Framework, and AT Framework improve my Bricks Builder workflow, and does Bricksfusion support them?
How can I access the components?
What types of components do you offer?
Can I customize the components?
Do I need advanced knowledge to use the components?
Do you offer refunds?
Do you offer any satisfaction guarantee?
How much does Bricksfusion cost?
Will there be price increases?
Can I upgrade from the Yearly Plan to the Lifetime Deal?
What payment methods do you accept?
Can I test the components before I buy them?
Does the lifetime payment include all future upgrades?
Can I get an invoice for my purchase?
How can I contact technical support?
What are the support hours?
How long does it take to solve a problem?
Is the support included in the price?
Do you offer tutorials or documentation?
What kind of problems does the support cover?
Can I use the components on multiple websites?
Can I integrate the components with my existing content management system?
Can I combine several components on a single page?
How often do you release new updates?
Can I request new features for future components?
What kind of improvements do the upgrades include?
.bf-hero {
position: relative !important;
}
.bf-hero canvas {
position: absolute !important;
top: 0 !important;
left: 0 !important;
z-index: 1 !important;
}
.bf-hero .brxe-container {
position: relative !important;
z-index: 2 !important;
}
.bf-hero .brxe-text {
position: relative !important;
z-index: 2 !important;
}
.bf-hero .brxe-code {
position: relative !important;
z-index: 2 !important;
}!function(){if(!window.UnicornStudio){window.UnicornStudio={isInitialized:!1};var i=document.createElement("script");i.src="https://cdn.jsdelivr.net/gh/hiunicornstudio/unicornstudio.js@v1.4.25/dist/unicornStudio.umd.js",i.onload=function(){window.UnicornStudio.isInitialized||(UnicornStudio.init(),window.UnicornStudio.isInitialized=!0)},(document.head || document.body).appendChild(i)}}();