v1.0.1
MENU ANIMATIONS
ADVANCED EFFECTS
CORE BACKGROUND
UI SURECART
BUTTONS
<!DOCTYPE html>
<html lang="en">
<head>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Transition 003 Configurator - BricksFusion</title>
<style>
:root {
--background: #000;
--card-bg: #1e1e1e;
--card-bg-hover: #252525;
--text-primary: #f2f2f7;
--text-secondary: #8e8e93;
--accent: #b4ff99;
--accent-hover: #a1e588;
--border: #2c2c2e;
--shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
--track: #2c2c2e;
--thumb: #b4ff99;
--card-radius: 16px;
--input-radius: 8px;
--button-radius: 12px;
--transition: all 0.25s ease;
--font: 'Inter', BlinkMacSystemFont, "San Francisco", "Helvetica Neue", Helvetica, Arial, sans-serif;
--action-bar-height: 70px;
--success: #28a745;
--warning: #ffc107;
--danger: #dc3545;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: var(--font);
background-color: var(--background);
color: var(--text-primary);
line-height: 1.5;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
padding-bottom: var(--action-bar-height);
}
.action-bar {
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: var(--action-bar-height);
background: linear-gradient(145deg, #1a1a1a, #0f0f0f);
border-top: 1px solid var(--border);
z-index: 1000;
display: flex;
align-items: center;
padding: 0 1.5rem;
gap: 1rem;
box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.3);
backdrop-filter: blur(10px);
}
.breadcrumb {
display: flex;
align-items: center;
gap: 0.5rem;
flex: 1;
}
.breadcrumb-item {
color: var(--text-secondary);
font-size: var(--text-xs);
font-weight: 500;
text-decoration: none;
transition: var(--transition);
padding: 0.5rem 0.75rem;
border-radius: 6px;
}
.breadcrumb-item:hover {
color: var(--text-primary);
background-color: rgba(255, 255, 255, 0.05);
}
.breadcrumb-item.active {
color: var(--accent);
background-color: rgba(180, 255, 153, 0.1);
}
.breadcrumb-separator {
color: var(--text-secondary);
font-size: var(--text-xs);
opacity: 0.5;
}
.action-buttons {
display: flex;
align-items: center;
gap: 0.75rem;
}
.action-btn {
padding: 0.6rem 1rem;
background-color: var(--card-bg);
color: var(--text-primary);
font-family: var(--font);
font-size: var(--text-xs);
font-weight: 500;
border: 1px solid var(--border);
border-radius: var(--button-radius);
cursor: pointer;
transition: var(--transition);
display: flex;
align-items: center;
gap: 0.5rem;
text-decoration: none;
white-space: nowrap;
}
.action-btn:hover {
background-color: var(--card-bg-hover);
border-color: var(--accent);
transform: translateY(-1px);
}
.action-btn.primary {
background: linear-gradient(90deg, var(--accent), #a1e588);
border-color: var(--accent);
color: #000;
font-weight: 600;
}
.action-btn.primary:hover {
background: linear-gradient(90deg, var(--accent-hover), #90d477);
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(180, 255, 153, 0.3);
}
.container {
max-width: 100%;
margin: 0 auto;
padding: 2rem 1.5rem;
}
.page-header {
text-align: center;
margin-bottom: 2rem;
}
.page-title {
font-size: 2.5rem;
font-weight: 700;
color: var(--text-primary);
margin-bottom: 0.5rem;
background: linear-gradient(90deg, var(--accent), #a1e588);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.page-subtitle {
font-size: var(--text-s);
color: var(--text-secondary);
font-weight: 500;
}
.instructions-toggle {
margin-bottom: 2rem;
}
.instructions-card {
background-color: var(--card-bg);
border: 1px solid var(--border);
border-radius: var(--card-radius);
box-shadow: var(--shadow);
overflow: hidden;
transition: var(--transition);
}
.instructions-header {
padding: 1rem 1.5rem;
cursor: pointer;
transition: var(--transition);
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid transparent;
}
.instructions-header:hover {
background-color: var(--card-bg-hover);
}
.instructions-card.expanded .instructions-header {
border-bottom-color: var(--border);
}
.instructions-title {
font-size: var(--text-s);
font-weight: 600;
}
.toggle-icon {
font-size: 1.2em;
transition: transform 0.3s ease;
}
.toggle-icon.expanded {
transform: rotate(180deg);
}
.instructions-content {
padding: 0 1.5rem;
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease, padding 0.3s ease;
}
.instructions-content.show {
max-height: 500px;
padding: 1.5rem;
}
.instructions-grid {
display: grid;
grid-template-columns: 1fr;
gap: 1.5rem;
}
.how-to-use ol {
padding-left: 1.5rem;
}
.how-to-use li {
margin-bottom: 0.75rem;
font-size: var(--text-xs);
color: var(--text-secondary);
line-height: 1.6;
}
.how-to-use strong {
color: var(--text-primary);
font-weight: 600;
}
.how-to-use code {
background-color: rgba(50, 50, 50, 0.5);
padding: 0.2rem 0.5rem;
border-radius: 4px;
font-family: 'Menlo', 'Monaco', 'Courier New', monospace;
font-size: var(--text-xs);
color: #b4ff99;
}
.content {
display: grid;
grid-template-columns: 1fr 500px;
gap: 2rem;
align-items: start;
}
.preview-section {
position: sticky;
top: 2rem;
}
.controls-section {
max-width: 500px;
}
.card {
background-color: var(--card-bg);
border-radius: var(--card-radius);
box-shadow: var(--shadow);
overflow: hidden;
margin-bottom: 1.5rem;
border: 1px solid var(--border);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.card:hover {
transform: translateY(-2px);
box-shadow: 0 6px 24px rgba(0, 0, 0, 0.4);
}
.preview-container {
height: 400px;
width: 100%;
position: relative;
overflow: hidden;
border-radius: var(--card-radius);
background-color: #000000;
border: 1px solid var(--border);
box-shadow: var(--shadow);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
}
.preview-content {
color: white;
text-align: center;
font-weight: bold;
font-size: var(--text-s);
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 2;
}
.preview-controls {
position: absolute;
top: 1rem;
right: 1rem;
display: flex;
gap: 0.5rem;
z-index: 10;
}
.preview-btn {
padding: 0.5rem;
background-color: rgba(0, 0, 0, 0.7);
color: white;
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 6px;
cursor: pointer;
transition: var(--transition);
font-size: var(--text-xs);
backdrop-filter: blur(5px);
}
.preview-btn:hover {
background-color: var(--accent);
border-color: var(--accent);
color: #000;
}
.preview-btn svg {
width: 18px;
height: 18px;
stroke: currentColor;
}
.background-selector-wrapper {
position: relative;
display: inline-block;
}
.background-selector-btn {
position: relative;
}
.background-selector-btn:hover {
background-color: rgba(180, 255, 153, 0.2);
border-color: var(--accent);
box-shadow: 0 0 8px rgba(180, 255, 153, 0.3);
}
.hidden-color-input {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
cursor: pointer;
z-index: 1;
}
.card-heading {
padding: 1rem 1.5rem;
font-size: var(--text-s);
font-weight: 600;
border-bottom: 1px solid var(--border);
letter-spacing: 0.3px;
display: flex;
justify-content: space-between;
align-items: center;
}
.card-actions {
display: flex;
gap: 0.5rem;
}
.card-action-btn {
padding: 0.4rem 0.8rem;
background-color: transparent;
color: var(--text-secondary);
border: 1px solid var(--border);
border-radius: 6px;
cursor: pointer;
font-size: var(--text-xs);
transition: var(--transition);
}
.card-action-btn:hover {
color: var(--text-primary);
border-color: var(--accent);
background-color: rgba(180, 255, 153, 0.1);
}
.card-content {
padding: 1.5rem;
}
.control-group {
margin-bottom: 1.5rem;
position: relative;
}
.control-group:last-child {
margin-bottom: 0;
}
.control-label {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 0.75rem;
}
.label-text {
font-size: var(--text-xs);
font-weight: 500;
letter-spacing: 0.2px;
display: flex;
align-items: center;
gap: 0.5rem;
}
.help-tooltip {
cursor: help;
opacity: 0.7;
transition: var(--transition);
}
.help-tooltip:hover {
opacity: 1;
color: var(--accent);
}
.value-display {
display: flex;
align-items: center;
gap: 0.5rem;
}
.value-text {
font-size: var(--text-xs);
color: var(--text-secondary);
background-color: rgba(50, 50, 50, 0.5);
padding: 2px 8px;
border-radius: 4px;
min-width: 45px;
text-align: center;
}
.reset-btn {
padding: 0.2rem 0.4rem;
background-color: transparent;
color: var(--text-secondary);
border: 1px solid var(--border);
border-radius: 4px;
cursor: pointer;
font-size: 10px;
transition: var(--transition);
}
.reset-btn:hover {
color: var(--danger);
border-color: var(--danger);
background-color: rgba(220, 53, 69, 0.1);
}
input[type="range"] {
-webkit-appearance: none;
width: 100%;
height: 6px;
background: var(--track);
border-radius: 3px;
outline: none;
margin: 0.8rem 0;
position: relative;
}
input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
width: 20px;
height: 20px;
background: var(--thumb);
border-radius: 50%;
cursor: pointer;
transition: var(--transition);
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}
input[type="range"]::-webkit-slider-thumb:hover {
transform: scale(1.2);
box-shadow: 0 0 10px rgba(180, 255, 153, 0.5);
}
input[type="url"],
input[type="text"] {
width: 100%;
padding: 0.75rem;
border: 1px solid var(--border);
border-radius: var(--input-radius);
font-family: var(--font);
font-size: var(--text-xs);
color: var(--text-primary);
background-color: var(--card-bg);
margin-bottom: 0.75rem;
outline: none;
transition: var(--transition);
}
input[type="url"]:focus,
input[type="text"]:focus {
border-color: var(--accent);
box-shadow: 0 0 0 2px rgba(180, 255, 153, 0.2);
}
.color-list {
display: flex;
flex-direction: column;
gap: 1rem;
margin-bottom: 1.5rem;
}
.color-row {
display: flex;
align-items: center;
gap: 1.25rem;
padding: 1rem 1.25rem;
background-color: rgba(30, 30, 30, 0.7);
border: 1px solid var(--border);
border-radius: var(--input-radius);
transition: var(--transition);
}
.color-row:hover {
border-color: var(--accent);
box-shadow: 0 0 0 1px rgba(180, 255, 153, 0.1);
}
.color-picker-container {
position: relative;
width: 40px;
height: 40px;
border-radius: 8px;
overflow: hidden;
border: 2px solid var(--border);
cursor: pointer;
transition: var(--transition);
flex-shrink: 0;
background: var(--card-bg);
display: flex;
align-items: center;
justify-content: center;
--selected-color: #ffffff;
}
.color-picker-container:hover {
border-color: var(--accent);
transform: scale(1.05);
box-shadow: 0 0 12px rgba(180, 255, 153, 0.3);
}
.color-picker-container::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: var(--selected-color, #ffffff);
border-radius: 6px;
transition: var(--transition);
}
input[type="color"] {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: none;
cursor: pointer;
background: transparent;
opacity: 0;
z-index: 2;
}
.color-input-group {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.color-label {
font-size: 10px;
font-weight: 500;
color: var(--text-secondary);
text-transform: uppercase;
letter-spacing: 0.5px;
margin-left: 0.25rem;
}
.color-input {
padding: 0.5rem 0.75rem;
background-color: rgba(0, 0, 0, 0.3);
border: 1px solid var(--border);
border-radius: 6px;
color: var(--text-primary);
font-family: 'Menlo', 'Monaco', 'Courier New', monospace;
font-size: 12px;
transition: var(--transition);
min-width: 0;
}
.color-input:focus {
border-color: var(--accent);
box-shadow: 0 0 0 1px rgba(180, 255, 153, 0.2);
outline: none;
}
.color-input.invalid {
border-color: var(--danger);
box-shadow: 0 0 0 1px rgba(220, 53, 69, 0.2);
}
.hex-input,
.hsl-input {
width: 100%;
}
.color-input-group:nth-child(2) {
flex: 0.3;
}
.color-input-group:nth-child(3) {
flex: 0.7;
}
.notification {
position: fixed;
bottom: calc(var(--action-bar-height) + 1rem);
left: 50%;
background-color: var(--success);
color: white;
padding: 0.75rem 1rem;
border-radius: var(--input-radius);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
z-index: 1001;
transform: translate(-50%, 200px);
opacity: 0;
transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s ease;
font-size: var(--text-xs);
font-weight: 500;
max-width: 320px;
word-wrap: break-word;
line-height: 1.4;
text-align: center;
}
.notification.show {
transform: translate(-50%, 0);
opacity: 1;
}
.PageTransition003-container {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.9);
display: flex;
justify-content: center;
align-items: center;
z-index: 10;
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease, visibility 0.3s ease;
contain: strict;
isolation: isolate;
}
.PageTransition003-container.PageTransition003-active {
opacity: 1;
visibility: visible;
}
.PageTransition003-logo-container {
position: relative;
width: 200px;
height: 200px;
}
.PageTransition003-logo {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
max-width: 80%;
max-height: 80%;
border-radius: 8px;
}
.PageTransition003-circular-animation {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
animation: PageTransition003Rotate 2s linear infinite;
}
.PageTransition003-circle {
stroke-dasharray: 283;
stroke-dashoffset: 283;
animation: PageTransition003Draw 2s ease-in-out infinite;
}
@keyframes PageTransition003Rotate {
100% { transform: rotate(360deg); }
}
@keyframes PageTransition003Draw {
0% { stroke-dashoffset: 283; }
50% { stroke-dashoffset: 0; }
100% { stroke-dashoffset: -283; }
}
.logo-placeholder {
width: 80px;
height: 80px;
background: linear-gradient(45deg, #b4ff99, #a1e588);
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
color: #000;
font-weight: bold;
font-size: var(--text-xs);
text-align: center;
line-height: 1.2;
}
@media (max-width: 1200px) {
.content {
grid-template-columns: 1fr;
gap: 1.5rem;
}
.preview-section {
position: static;
}
.controls-section {
max-width: 100%;
}
}
@media (max-width: 768px) {
.action-bar {
flex-direction: column;
height: auto;
min-height: var(--action-bar-height);
padding: 0.75rem;
}
.breadcrumb {
order: 1;
width: 100%;
}
.action-buttons {
order: 2;
width: 100%;
justify-content: center;
flex-wrap: wrap;
}
body {
padding-bottom: calc(var(--action-bar-height) + 20px);
}
.notification {
bottom: calc(var(--action-bar-height) + 2rem);
max-width: 280px;
transform: translate(-50%, 250px);
}
.notification.show {
transform: translate(-50%, 0);
opacity: 1;
}
.color-row {
flex-direction: column;
align-items: stretch;
gap: 1rem;
padding: 1rem;
}
.color-picker-container {
align-self: center;
margin-bottom: 0.5rem;
}
.color-input-group {
align-items: stretch;
}
.hex-input,
.hsl-input {
width: 100%;
}
.preview-container {
height: 300px;
}
.action-btn {
font-size: 11px;
padding: 0.5rem 0.8rem;
}
.page-title {
font-size: 2rem;
}
}
@media (prefers-reduced-motion: reduce) {
* {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
button:focus-visible,
input:focus-visible,
.action-btn:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-track {
background: var(--background);
}
::-webkit-scrollbar-thumb {
background: var(--border);
border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
background: var(--accent);
}
.loading {
opacity: 0.6;
pointer-events: none;
position: relative;
}
.loading::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 20px;
height: 20px;
margin: -10px 0 0 -10px;
border: 2px solid var(--border);
border-top-color: var(--accent);
border-radius: 50%;
animation: spin 1s linear infinite;
}
@keyframes spin {
to { transform: rotate(360deg); }
}
</style>
</head>
<body>
<div class="action-bar">
<nav class="breadcrumb">
<a href="https://bricksfusion.com" class="breadcrumb-item">Home</a>
<span class="breadcrumb-separator">›</span>
<a href="https://bricksfusion.com/transition-pages/" class="breadcrumb-item">Transition Pages</a>
<span class="breadcrumb-separator">›</span>
<span class="breadcrumb-item active">Transition 003</span>
</nav>
<div class="action-buttons">
<button class="action-btn primary" id="download-config" title="Copy JavaScript code (Ctrl+D)" data-protection-animation="true">
<span>⬇</span>
Copy JS
</button>
</div>
</div>
<div class="container">
<div class="page-header">
<h1 class="page-title">Transition 003</h1>
<p class="page-subtitle">Interactive page transitions for Bricks Builder</p>
</div>
<div class="instructions-toggle">
<div class="instructions-card" id="instructions-card">
<div class="instructions-header" id="instructions-toggle">
<div class="instructions-title">
How to Use & Code Information
</div>
<span class="toggle-icon">â–¼</span>
</div>
<div class="instructions-content" id="instructions-content">
<div class="instructions-grid">
<div class="how-to-use">
<ol>
<li>Customize your page transition effect using the controls below</li>
<li>Click <strong>Copy JS</strong> to copy the JavaScript code to clipboard</li>
<li>Go to your <strong>Template</strong> (Header/Footer) that appears on all pages</li>
<li>Click <strong>Manage</strong> → <strong>Page Settings</strong> → <strong>Custom Code</strong></li>
<li>Paste the code in <strong>Body (Footer) Scripts</strong> section</li>
<li>The smooth transition effect will now appear automatically when visitors navigate between pages on your website</li>
</ol>
</div>
</div>
</div>
</div>
</div>
<div class="content">
<section class="preview-section">
<div class="preview-container" id="transition-preview">
<div class="preview-content">Click here to test the transition effect</div>
<div class="preview-controls">
<button class="preview-btn" id="randomize-transition" title="Randomize (R)">🎲</button>
<div class="background-selector-wrapper">
<button class="preview-btn background-selector-btn" id="background-selector">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<polygon points="12,2 2,7 12,12 22,7"/>
<polyline points="2,17 12,22 22,17"/>
<polyline points="2,12 12,17 22,12"/>
</svg>
</button>
<input type="color" id="preview-background-picker" class="hidden-color-input" value="#000000" title="Change Preview Background (B)">
</div>
</div>
<div class="PageTransition003-container" id="previewTransitionContainer">
<div class="PageTransition003-logo-container" id="previewLogoContainer">
<svg class="PageTransition003-circular-animation" id="previewCircularAnimation" viewBox="0 0 100 100">
<circle class="PageTransition003-circle" id="previewCircle" cx="50" cy="50" r="45" fill="none" stroke="#ffffff"/>
</svg>
<div class="logo-placeholder" id="previewLogoPlaceholder">LOGO</div>
<img id="previewLogo" class="PageTransition003-logo" src="" alt="Logo" style="display: none;">
</div>
</div>
</div>
</section>
<section class="controls-section">
<div class="card">
<div class="card-heading">
Logo Settings
<div class="card-actions">
<button class="card-action-btn" id="reset-logo" title="Reset Logo Settings">↺</button>
</div>
</div>
<div class="card-content">
<div class="control-group">
<div class="control-label">
<span class="label-text">
Logo URL
<span class="help-tooltip" title="URL of your logo image">ℹ</span>
</span>
</div>
<input type="url" id="logo-url" placeholder="https://example.com/logo.png" value="https://bricksfusion.com/wp-content/uploads/2025/05/Bricksfusionv3-1.png">
</div>
<div class="control-group">
<div class="control-label">
<span class="label-text">
Container Size
<span class="help-tooltip" title="Size of the logo container">ℹ</span>
</span>
<div class="value-display">
<span class="value-text"><span id="container-size-value">200</span>px</span>
<button class="reset-btn" onclick="resetParameter('container-size', 200)">↺</button>
</div>
</div>
<input type="range" id="container-size" min="120" max="300" step="10" value="200">
</div>
<div class="control-group">
<div class="control-label">
<span class="label-text">
Logo Scale
<span class="help-tooltip" title="Scale of the logo within container">ℹ</span>
</span>
<div class="value-display">
<span class="value-text"><span id="logo-scale-value">80</span>%</span>
<button class="reset-btn" onclick="resetParameter('logo-scale', 80)">↺</button>
</div>
</div>
<input type="range" id="logo-scale" min="40" max="90" step="5" value="80">
</div>
</div>
</div>
<div class="card">
<div class="card-heading">
Animation Settings
<div class="card-actions">
<button class="card-action-btn" id="reset-animation" title="Reset Animation Settings">↺</button>
</div>
</div>
<div class="card-content">
<div class="control-group">
<div class="control-label">
<span class="label-text">
Animation Duration
<span class="help-tooltip" title="Duration of the circular animation">ℹ</span>
</span>
<div class="value-display">
<span class="value-text"><span id="animation-duration-value">2</span>s</span>
<button class="reset-btn" onclick="resetParameter('animation-duration', 2)">↺</button>
</div>
</div>
<input type="range" id="animation-duration" min="1" max="5" step="0.5" value="2">
</div>
<div class="control-group">
<div class="control-label">
<span class="label-text">
Display Duration
<span class="help-tooltip" title="How long the transition is visible">ℹ</span>
</span>
<div class="value-display">
<span class="value-text"><span id="display-duration-value">2000</span>ms</span>
<button class="reset-btn" onclick="resetParameter('display-duration', 2000)">↺</button>
</div>
</div>
<input type="range" id="display-duration" min="1000" max="4000" step="200" value="2000">
</div>
<div class="control-group">
<div class="control-label">
<span class="label-text">
Transition Speed
<span class="help-tooltip" title="Speed of fade in/out transitions">ℹ</span>
</span>
<div class="value-display">
<span class="value-text"><span id="transition-speed-value">0.3</span>s</span>
<button class="reset-btn" onclick="resetParameter('transition-speed', 0.3)">↺</button>
</div>
</div>
<input type="range" id="transition-speed" min="0.1" max="0.8" step="0.1" value="0.3">
</div>
</div>
</div>
<div class="card">
<div class="card-heading">
Circle Animation
<div class="card-actions">
<button class="card-action-btn" id="reset-circle" title="Reset Circle Settings">↺</button>
</div>
</div>
<div class="card-content">
<div class="control-group">
<div class="control-label">
<span class="label-text">
Circle Radius
<span class="help-tooltip" title="Radius of the animated circle">ℹ</span>
</span>
<div class="value-display">
<span class="value-text"><span id="circle-radius-value">45</span>px</span>
<button class="reset-btn" onclick="resetParameter('circle-radius', 45)">↺</button>
</div>
</div>
<input type="range" id="circle-radius" min="30" max="48" step="2" value="45">
</div>
<div class="control-group">
<div class="control-label">
<span class="label-text">
Stroke Width
<span class="help-tooltip" title="Width of the circle stroke">ℹ</span>
</span>
<div class="value-display">
<span class="value-text"><span id="stroke-width-value">2</span>px</span>
<button class="reset-btn" onclick="resetParameter('stroke-width', 2)">↺</button>
</div>
</div>
<input type="range" id="stroke-width" min="1" max="5" step="0.5" value="2">
</div>
<div class="control-group">
<div class="control-label">
<span class="label-text">Circle Color</span>
</div>
<div class="color-list">
<div class="color-row">
<div class="color-picker-container" style="--selected-color: #ffffff;">
<input type="color" id="circle-color" value="#ffffff">
</div>
<div class="color-input-group">
<span class="color-label">HEX</span>
<input type="text" class="color-input hex-input" id="circle-color-hex" value="#ffffff" placeholder="#ffffff">
</div>
<div class="color-input-group">
<span class="color-label">HSL</span>
<input type="text" class="color-input hsl-input" id="circle-color-hsl" placeholder="hsl(0, 0%, 100%)">
</div>
</div>
</div>
</div>
</div>
</div>
<div class="card">
<div class="card-heading">
Background Settings
<div class="card-actions">
<button class="card-action-btn" id="reset-background" title="Reset Background Settings">↺</button>
</div>
</div>
<div class="card-content">
<div class="control-group">
<div class="control-label">
<span class="label-text">
Background Opacity
<span class="help-tooltip" title="Transparency of the overlay background">ℹ</span>
</span>
<div class="value-display">
<span class="value-text"><span id="bg-opacity-value">0.9</span></span>
<button class="reset-btn" onclick="resetParameter('bg-opacity', 0.9)">↺</button>
</div>
</div>
<input type="range" id="bg-opacity" min="0.3" max="1" step="0.05" value="0.9">
</div>
<div class="control-group">
<div class="control-label">
<span class="label-text">Background Color</span>
</div>
<div class="color-list">
<div class="color-row">
<div class="color-picker-container" style="--selected-color: #000000;">
<input type="color" id="bg-color" value="#000000">
</div>
<div class="color-input-group">
<span class="color-label">HEX</span>
<input type="text" class="color-input hex-input" id="bg-color-hex" value="#000000" placeholder="#000000">
</div>
<div class="color-input-group">
<span class="color-label">HSL</span>
<input type="text" class="color-input hsl-input" id="bg-color-hsl" placeholder="hsl(0, 0%, 0%)">
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
</div>
<div class="notification" id="notification"></div>
<script>
document.addEventListener('DOMContentLoaded', function() {
let transitionConfig = {
logoUrl: "https://bricksfusion.com/wp-content/uploads/2025/05/Bricksfusionv3-1.png",
containerSize: 200,
logoScale: 80,
animationDuration: 2,
displayDuration: 2000,
transitionSpeed: 0.3,
circleRadius: 45,
strokeWidth: 2,
circleColor: "#ffffff",
bgOpacity: 0.9,
bgColor: "#000000"
};
const defaultConfig = { ...transitionConfig };
function updateConfig() {
updatePreviewStyles();
saveConfiguration();
}
function initializePreview() {
updateConfig();
}
function updatePreviewStyles() {
const rgbColor = hexToRgb(transitionConfig.bgColor);
const container = document.getElementById('previewTransitionContainer');
const logoContainer = document.getElementById('previewLogoContainer');
const circle = document.getElementById('previewCircle');
const circularAnimation = document.getElementById('previewCircularAnimation');
const logoPlaceholder = document.getElementById('previewLogoPlaceholder');
const logoImg = document.getElementById('previewLogo');
if (container) {
container.style.backgroundColor = `rgba(${rgbColor.r}, ${rgbColor.g}, ${rgbColor.b}, ${transitionConfig.bgOpacity})`;
container.style.transition = `opacity ${transitionConfig.transitionSpeed}s ease, visibility ${transitionConfig.transitionSpeed}s ease`;
}
if (logoContainer) {
logoContainer.style.width = transitionConfig.containerSize + 'px';
logoContainer.style.height = transitionConfig.containerSize + 'px';
}
if (circle) {
circle.setAttribute('stroke', transitionConfig.circleColor);
circle.setAttribute('stroke-width', transitionConfig.strokeWidth);
circle.setAttribute('r', transitionConfig.circleRadius);
const circumference = 2 * Math.PI * transitionConfig.circleRadius;
circle.style.strokeDasharray = circumference;
circle.style.strokeDashoffset = circumference;
}
if (circularAnimation && circle) {
circularAnimation.style.animationDuration = transitionConfig.animationDuration + 's';
circle.style.animationDuration = transitionConfig.animationDuration + 's';
}
if (transitionConfig.logoUrl) {
logoImg.src = transitionConfig.logoUrl;
logoImg.style.display = 'block';
logoImg.style.maxWidth = transitionConfig.logoScale + '%';
logoImg.style.maxHeight = transitionConfig.logoScale + '%';
logoPlaceholder.style.display = 'none';
} else {
logoImg.style.display = 'none';
logoPlaceholder.style.display = 'flex';
logoPlaceholder.style.width = (transitionConfig.logoScale * 0.8) + 'px';
logoPlaceholder.style.height = (transitionConfig.logoScale * 0.8) + 'px';
}
}
function testTransition() {
const container = document.getElementById('previewTransitionContainer');
if (!container) return;
container.classList.remove('PageTransition003-active');
setTimeout(() => {
container.classList.add('PageTransition003-active');
setTimeout(() => {
container.classList.remove('PageTransition003-active');
}, transitionConfig.displayDuration);
}, 100);
}
function generateJavaScriptCode() {
const rgbColor = hexToRgb(transitionConfig.bgColor);
const circumference = 2 * Math.PI * transitionConfig.circleRadius;
return `<div class="PageTransition003-container" id="PageTransition003Container">
<div class="PageTransition003-logo-container">
<svg class="PageTransition003-circular-animation" viewBox="0 0 100 100">
<circle class="PageTransition003-circle" cx="50" cy="50" r="${transitionConfig.circleRadius}" fill="none" stroke="${transitionConfig.circleColor}" stroke-width="${transitionConfig.strokeWidth}"/>
</svg>
<img id="PageTransition003Logo" class="PageTransition003-logo" src="" alt="Logo">
</div>
</div>
<style>
.PageTransition003-container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(${rgbColor.r}, ${rgbColor.g}, ${rgbColor.b}, ${transitionConfig.bgOpacity});
display: flex;
justify-content: center;
align-items: center;
z-index: 2147483647;
opacity: 0;
visibility: hidden;
transition: opacity ${transitionConfig.transitionSpeed}s ease, visibility ${transitionConfig.transitionSpeed}s ease;
}
.PageTransition003-container.PageTransition003-active {
opacity: 1;
visibility: visible;
}
.PageTransition003-logo-container {
position: relative;
width: ${transitionConfig.containerSize}px;
height: ${transitionConfig.containerSize}px;
}
.PageTransition003-logo {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
max-width: ${transitionConfig.logoScale}%;
max-height: ${transitionConfig.logoScale}%;
}
.PageTransition003-circular-animation {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
animation: PageTransition003Rotate ${transitionConfig.animationDuration}s linear infinite;
}
.PageTransition003-circle {
stroke-dasharray: ${circumference};
stroke-dashoffset: ${circumference};
animation: PageTransition003Draw ${transitionConfig.animationDuration}s ease-in-out infinite;
}
@keyframes PageTransition003Rotate {
100% { transform: rotate(360deg); }
}
@keyframes PageTransition003Draw {
0% { stroke-dashoffset: ${circumference}; }
50% { stroke-dashoffset: 0; }
100% { stroke-dashoffset: -${circumference}; }
}
</style>
<script>
(function() {
'use strict';
const logoUrl = '${transitionConfig.logoUrl || 'https://bricksfusion.com/wp-content/uploads/2025/05/Bricksfusionv3-1.png'}';
const transitionContainer = document.getElementById('PageTransition003Container');
const logoImg = document.getElementById('PageTransition003Logo');
let isTransitioning = false;
function resetTransition() {
transitionContainer.classList.remove('PageTransition003-active');
transitionContainer.style.display = 'none';
isTransitioning = false;
}
window.addEventListener('load', resetTransition);
window.addEventListener('pageshow', resetTransition);
function isInternalLink(url) {
try {
const link = new URL(url, window.location.origin);
return link.origin === window.location.origin;
} catch {
return false;
}
}
async function startTransition(url) {
if (isTransitioning) return;
isTransitioning = true;
logoImg.src = logoUrl;
transitionContainer.style.display = 'flex';
transitionContainer.classList.add('PageTransition003-active');
setTimeout(() => {
window.location.href = url;
}, ${Math.round(transitionConfig.displayDuration * 0.75)});
}
function handleLinkClick(e) {
const link = e.currentTarget;
if (link.origin === window.location.origin && !link.hasAttribute('target')) {
e.preventDefault();
startTransition(link.href);
}
}
function attachLinkListeners() {
document.querySelectorAll('a').forEach(link => {
link.removeEventListener('click', handleLinkClick);
link.addEventListener('click', handleLinkClick);
});
}
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', attachLinkListeners);
} else {
attachLinkListeners();
}
})();
<\/script>`;
}
function generateFullSectionJSON() {
return "";
}
function copyJsToClipboard() {
const jsCode = generateJavaScriptCode();
navigator.clipboard.writeText(jsCode)
.then(() => {
showNotification('JavaScript code copied to clipboard!');
})
.catch(err => {
try {
const textArea = document.createElement('textarea');
textArea.value = jsCode;
textArea.style.position = 'fixed';
textArea.style.opacity = '0';
document.body.appendChild(textArea);
textArea.select();
document.execCommand('copy');
document.body.removeChild(textArea);
showNotification('JavaScript code copied to clipboard!');
} catch (fallbackErr) {
showNotification('Failed to copy to clipboard. Please try again.', 'error');
}
});
}
function showNotification(message, type = 'success') {
const notification = document.getElementById('notification');
notification.textContent = message;
notification.className = `notification ${type}`;
notification.offsetHeight;
notification.style.visibility = 'visible';
notification.classList.add('show');
setTimeout(() => {
notification.classList.remove('show');
setTimeout(() => {
if (!notification.classList.contains('show')) {
notification.style.visibility = 'hidden';
}
}, 400);
}, 3000);
}
function generateRandomTransition() {
transitionConfig.containerSize = Math.floor(Math.random() * 180) + 120;
transitionConfig.logoScale = Math.floor(Math.random() * 50) + 40;
transitionConfig.animationDuration = Math.round((Math.random() * 4 + 1) * 2) / 2;
transitionConfig.displayDuration = Math.floor(Math.random() * 3000) + 1000;
transitionConfig.transitionSpeed = Math.round((Math.random() * 0.7 + 0.1) * 10) / 10;
transitionConfig.circleRadius = Math.floor(Math.random() * 18) + 30;
transitionConfig.strokeWidth = Math.round((Math.random() * 4 + 1) * 2) / 2;
transitionConfig.circleColor = generateRandomColor();
transitionConfig.bgOpacity = Math.round((Math.random() * 0.7 + 0.3) * 100) / 100;
transitionConfig.bgColor = generateRandomColor();
updateAllInputs();
updateConfig();
showNotification('Random transition generated!');
}
function generateRandomColor() {
return '#' + Math.floor(Math.random() * 16777215).toString(16).padStart(6, '0');
}
function updateAllInputs() {
document.getElementById('container-size').value = transitionConfig.containerSize;
document.getElementById('logo-scale').value = transitionConfig.logoScale;
document.getElementById('animation-duration').value = transitionConfig.animationDuration;
document.getElementById('display-duration').value = transitionConfig.displayDuration;
document.getElementById('transition-speed').value = transitionConfig.transitionSpeed;
document.getElementById('circle-radius').value = transitionConfig.circleRadius;
document.getElementById('stroke-width').value = transitionConfig.strokeWidth;
document.getElementById('bg-opacity').value = transitionConfig.bgOpacity;
document.getElementById('container-size-value').textContent = transitionConfig.containerSize;
document.getElementById('logo-scale-value').textContent = transitionConfig.logoScale;
document.getElementById('animation-duration-value').textContent = transitionConfig.animationDuration;
document.getElementById('display-duration-value').textContent = transitionConfig.displayDuration;
document.getElementById('transition-speed-value').textContent = transitionConfig.transitionSpeed;
document.getElementById('circle-radius-value').textContent = transitionConfig.circleRadius;
document.getElementById('stroke-width-value').textContent = transitionConfig.strokeWidth;
document.getElementById('bg-opacity-value').textContent = transitionConfig.bgOpacity;
updateColorInputs('circle-color', transitionConfig.circleColor);
updateColorInputs('bg-color', transitionConfig.bgColor);
}
function updateColorInputs(colorId, color) {
const colorInput = document.getElementById(colorId);
const hexInput = document.getElementById(`${colorId}-hex`);
const hslInput = document.getElementById(`${colorId}-hsl`);
if (colorInput && hexInput && hslInput) {
colorInput.value = color;
hexInput.value = color;
hslInput.value = `hsl(${hexToHsl(color).h}, ${hexToHsl(color).s}%, ${hexToHsl(color).l}%)`;
hexInput.classList.remove('invalid');
hslInput.classList.remove('invalid');
const colorPickerContainer = colorInput.closest('.color-row').querySelector('.color-picker-container');
if (colorPickerContainer) {
colorPickerContainer.style.setProperty('--selected-color', color);
}
}
}
function hexToRgb(hex) {
const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
return result ? {
r: parseInt(result[1], 16),
g: parseInt(result[2], 16),
b: parseInt(result[3], 16)
} : null;
}
function hexToHsl(hex) {
const r = parseInt(hex.slice(1, 3), 16) / 255;
const g = parseInt(hex.slice(3, 5), 16) / 255;
const b = parseInt(hex.slice(5, 7), 16) / 255;
const max = Math.max(r, g, b);
const min = Math.min(r, g, b);
let h, s, l = (max + min) / 2;
if (max === min) {
h = s = 0;
} else {
const d = max - min;
s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
switch (max) {
case r: h = (g - b) / d + (g < b ? 6 : 0); break;
case g: h = (b - r) / d + 2; break;
case b: h = (r - g) / d + 4; break;
}
h /= 6;
}
return {
h: Math.round(h * 360),
s: Math.round(s * 100),
l: Math.round(l * 100)
};
}
function hslToHex(hsl) {
const match = hsl.match(/hsl\(\s*(\d+)\s*,\s*(\d+)%\s*,\s*(\d+)%\s*\)/);
if (!match) return null;
let h = parseInt(match[1]) / 360;
let s = parseInt(match[2]) / 100;
let l = parseInt(match[3]) / 100;
const hue2rgb = (p, q, t) => {
if (t < 0) t += 1;
if (t > 1) t -= 1;
if (t < 1/6) return p + (q - p) * 6 * t;
if (t < 1/2) return q;
if (t < 2/3) return p + (q - p) * (2/3 - t) * 6;
return p;
};
let r, g, b;
if (s === 0) {
r = g = b = l;
} else {
const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
const p = 2 * l - q;
r = hue2rgb(p, q, h + 1/3);
g = hue2rgb(p, q, h);
b = hue2rgb(p, q, h - 1/3);
}
const toHex = (c) => {
const hex = Math.round(c * 255).toString(16);
return hex.length === 1 ? '0' + hex : hex;
};
return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
}
function isValidHex(hex) {
return /^#[0-9A-F]{6}$/i.test(hex);
}
function isValidHsl(hsl) {
return /^hsl\(\s*(\d{1,3})\s*,\s*(\d{1,3})%\s*,\s*(\d{1,3})%\s*\)$/i.test(hsl);
}
function formatHex(value) {
let hex = value.replace(/[^0-9A-Fa-f#]/g, '');
if (!hex.startsWith('#')) {
hex = '#' + hex;
}
if (hex.length > 7) {
hex = hex.substring(0, 7);
}
return hex.toUpperCase();
}
function formatHsl(value) {
const cleanValue = value.replace(/[^\d,\s]/g, '');
const numbers = cleanValue.match(/\d+/g);
if (!numbers || numbers.length < 3) {
const partialMatch = value.match(/(\d+)/g);
if (partialMatch && partialMatch.length >= 1) {
const h = Math.min(360, Math.max(0, parseInt(partialMatch[0]) || 0));
const s = Math.min(100, Math.max(0, parseInt(partialMatch[1]) || 50));
const l = Math.min(100, Math.max(0, parseInt(partialMatch[2]) || 50));
return `hsl(${h}, ${s}%, ${l}%)`;
}
return value;
}
let h = Math.min(360, Math.max(0, parseInt(numbers[0])));
let s = Math.min(100, Math.max(0, parseInt(numbers[1])));
let l = Math.min(100, Math.max(0, parseInt(numbers[2])));
return `hsl(${h}, ${s}%, ${l}%)`;
}
window.resetParameter = function(parameterId, defaultValue) {
const element = document.getElementById(parameterId);
if (element) {
element.value = defaultValue;
const valueElement = document.getElementById(`${parameterId}-value`);
if (valueElement) {
valueElement.textContent = defaultValue;
}
switch (parameterId) {
case 'container-size':
transitionConfig.containerSize = defaultValue;
break;
case 'logo-scale':
transitionConfig.logoScale = defaultValue;
break;
case 'animation-duration':
transitionConfig.animationDuration = defaultValue;
break;
case 'display-duration':
transitionConfig.displayDuration = defaultValue;
break;
case 'transition-speed':
transitionConfig.transitionSpeed = defaultValue;
break;
case 'circle-radius':
transitionConfig.circleRadius = defaultValue;
break;
case 'stroke-width':
transitionConfig.strokeWidth = defaultValue;
break;
case 'bg-opacity':
transitionConfig.bgOpacity = defaultValue;
break;
}
updateConfig();
showNotification(`${parameterId.replace(/-/g, ' ')} reset to default`);
}
};
function setupColorInputHandlers(colorId, configProperty) {
const colorInput = document.getElementById(colorId);
const hexInput = document.getElementById(`${colorId}-hex`);
const hslInput = document.getElementById(`${colorId}-hsl`);
if (!colorInput || !hexInput || !hslInput) return;
hslInput.value = `hsl(${hexToHsl(colorInput.value).h}, ${hexToHsl(colorInput.value).s}%, ${hexToHsl(colorInput.value).l}%)`;
colorInput.addEventListener('input', () => {
const color = colorInput.value;
hexInput.value = color;
hslInput.value = `hsl(${hexToHsl(color).h}, ${hexToHsl(color).s}%, ${hexToHsl(color).l}%)`;
hexInput.classList.remove('invalid');
hslInput.classList.remove('invalid');
transitionConfig[configProperty] = color;
const colorPickerContainer = colorInput.closest('.color-row').querySelector('.color-picker-container');
colorPickerContainer.style.setProperty('--selected-color', color);
updateConfig();
});
hexInput.addEventListener('input', (e) => {
let hex = e.target.value;
hex = formatHex(hex);
e.target.value = hex;
if (isValidHex(hex)) {
colorInput.value = hex;
hslInput.value = `hsl(${hexToHsl(hex).h}, ${hexToHsl(hex).s}%, ${hexToHsl(hex).l}%)`;
transitionConfig[configProperty] = hex;
e.target.classList.remove('invalid');
hslInput.classList.remove('invalid');
const colorPickerContainer = colorInput.closest('.color-row').querySelector('.color-picker-container');
colorPickerContainer.style.setProperty('--selected-color', hex);
updateConfig();
} else {
e.target.classList.add('invalid');
}
});
hexInput.addEventListener('blur', (e) => {
if (!isValidHex(e.target.value)) {
e.target.value = colorInput.value;
e.target.classList.remove('invalid');
}
});
hslInput.addEventListener('input', (e) => {
let hsl = e.target.value;
if (isValidHsl(hsl)) {
const hex = hslToHex(hsl);
if (hex) {
colorInput.value = hex;
hexInput.value = hex;
transitionConfig[configProperty] = hex;
e.target.classList.remove('invalid');
hexInput.classList.remove('invalid');
const colorPickerContainer = colorInput.closest('.color-row').querySelector('.color-picker-container');
colorPickerContainer.style.setProperty('--selected-color', hex);
updateConfig();
return;
}
}
e.target.classList.add('invalid');
});
hslInput.addEventListener('blur', (e) => {
let hsl = e.target.value;
if (!isValidHsl(hsl) && hsl.trim()) {
const formatted = formatHsl(hsl);
if (isValidHsl(formatted)) {
e.target.value = formatted;
const hex = hslToHex(formatted);
if (hex) {
colorInput.value = hex;
hexInput.value = hex;
transitionConfig[configProperty] = hex;
e.target.classList.remove('invalid');
hexInput.classList.remove('invalid');
updateConfig();
return;
}
}
}
if (!isValidHsl(e.target.value)) {
e.target.value = `hsl(${hexToHsl(colorInput.value).h}, ${hexToHsl(colorInput.value).s}%, ${hexToHsl(colorInput.value).l}%)`;
e.target.classList.remove('invalid');
}
});
}
function saveConfiguration() {
try {
localStorage.setItem('bricksfusion-transition003-config', JSON.stringify(transitionConfig));
} catch (e) {
}
}
function loadConfiguration() {
try {
const saved = localStorage.getItem('bricksfusion-transition003-config');
if (saved) {
const savedConfig = JSON.parse(saved);
Object.assign(transitionConfig, savedConfig);
updateAllInputs();
updateConfig();
}
} catch (e) {
}
}
function initializeUI() {
const instructionsToggle = document.getElementById('instructions-toggle');
const instructionsContent = document.getElementById('instructions-content');
const instructionsCard = document.getElementById('instructions-card');
const toggleIcon = instructionsToggle.querySelector('.toggle-icon');
instructionsToggle.addEventListener('click', () => {
const isVisible = instructionsContent.classList.contains('show');
if (isVisible) {
instructionsContent.classList.remove('show');
instructionsCard.classList.remove('expanded');
toggleIcon.classList.remove('expanded');
} else {
instructionsContent.classList.add('show');
instructionsCard.classList.add('expanded');
toggleIcon.classList.add('expanded');
}
});
document.getElementById('download-config').addEventListener('click', () => {
copyJsToClipboard();
});
document.getElementById('randomize-transition').addEventListener('click', () => {
generateRandomTransition();
});
const backgroundPicker = document.getElementById('preview-background-picker');
const previewContainer = document.getElementById('transition-preview');
backgroundPicker.addEventListener('input', (e) => {
const selectedColor = e.target.value;
previewContainer.style.backgroundColor = selectedColor;
showNotification(`Preview background changed to ${selectedColor}`);
});
previewContainer.style.backgroundColor = '#000000';
previewContainer.addEventListener('click', testTransition);
document.getElementById('reset-logo').addEventListener('click', () => {
transitionConfig.containerSize = defaultConfig.containerSize;
transitionConfig.logoScale = defaultConfig.logoScale;
document.getElementById('logo-url').value = defaultConfig.logoUrl;
document.getElementById('container-size').value = defaultConfig.containerSize;
document.getElementById('logo-scale').value = defaultConfig.logoScale;
document.getElementById('container-size-value').textContent = defaultConfig.containerSize;
document.getElementById('logo-scale-value').textContent = defaultConfig.logoScale;
transitionConfig.logoUrl = defaultConfig.logoUrl;
updateConfig();
showNotification('Logo settings reset');
});
document.getElementById('reset-animation').addEventListener('click', () => {
transitionConfig.animationDuration = defaultConfig.animationDuration;
transitionConfig.displayDuration = defaultConfig.displayDuration;
transitionConfig.transitionSpeed = defaultConfig.transitionSpeed;
document.getElementById('animation-duration').value = defaultConfig.animationDuration;
document.getElementById('display-duration').value = defaultConfig.displayDuration;
document.getElementById('transition-speed').value = defaultConfig.transitionSpeed;
document.getElementById('animation-duration-value').textContent = defaultConfig.animationDuration;
document.getElementById('display-duration-value').textContent = defaultConfig.displayDuration;
document.getElementById('transition-speed-value').textContent = defaultConfig.transitionSpeed;
updateConfig();
showNotification('Animation settings reset');
});
document.getElementById('reset-circle').addEventListener('click', () => {
transitionConfig.circleRadius = defaultConfig.circleRadius;
transitionConfig.strokeWidth = defaultConfig.strokeWidth;
transitionConfig.circleColor = defaultConfig.circleColor;
document.getElementById('circle-radius').value = defaultConfig.circleRadius;
document.getElementById('stroke-width').value = defaultConfig.strokeWidth;
document.getElementById('circle-radius-value').textContent = defaultConfig.circleRadius;
document.getElementById('stroke-width-value').textContent = defaultConfig.strokeWidth;
updateColorInputs('circle-color', defaultConfig.circleColor);
updateConfig();
showNotification('Circle settings reset');
});
document.getElementById('reset-background').addEventListener('click', () => {
transitionConfig.bgOpacity = defaultConfig.bgOpacity;
transitionConfig.bgColor = defaultConfig.bgColor;
document.getElementById('bg-opacity').value = defaultConfig.bgOpacity;
document.getElementById('bg-opacity-value').textContent = defaultConfig.bgOpacity;
updateColorInputs('bg-color', defaultConfig.bgColor);
updateConfig();
showNotification('Background settings reset');
});
const rangeInputs = document.querySelectorAll('input[type="range"]');
rangeInputs.forEach(input => {
const valueElement = document.getElementById(`${input.id}-value`);
if (valueElement) {
valueElement.textContent = input.value;
}
input.addEventListener('input', () => {
if (valueElement) {
valueElement.textContent = input.value;
}
switch (input.id) {
case 'container-size':
transitionConfig.containerSize = parseInt(input.value);
break;
case 'logo-scale':
transitionConfig.logoScale = parseInt(input.value);
break;
case 'animation-duration':
transitionConfig.animationDuration = parseFloat(input.value);
break;
case 'display-duration':
transitionConfig.displayDuration = parseInt(input.value);
break;
case 'transition-speed':
transitionConfig.transitionSpeed = parseFloat(input.value);
break;
case 'circle-radius':
transitionConfig.circleRadius = parseInt(input.value);
break;
case 'stroke-width':
transitionConfig.strokeWidth = parseFloat(input.value);
break;
case 'bg-opacity':
transitionConfig.bgOpacity = parseFloat(input.value);
break;
}
updateConfig();
});
});
document.getElementById('logo-url').addEventListener('input', function() {
transitionConfig.logoUrl = this.value;
updateConfig();
});
setupColorInputHandlers('circle-color', 'circleColor');
setupColorInputHandlers('bg-color', 'bgColor');
document.addEventListener('keydown', (e) => {
if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA') {
return;
}
if (e.ctrlKey || e.metaKey) {
switch (e.key.toLowerCase()) {
case 'd':
e.preventDefault();
const downloadBtn = document.getElementById('download-config');
if (downloadBtn && downloadBtn.hasAttribute('data-protection-animation')) {
downloadBtn.click();
} else {
copyJsToClipboard();
}
break;
}
} else {
switch (e.key.toLowerCase()) {
case 'r':
generateRandomTransition();
break;
case 'b':
document.getElementById('preview-background-picker').click();
break;
}
}
});
loadConfiguration();
initializePreview();
setTimeout(() => {
showNotification('BricksFusion Transition 003 Configurator loaded!');
}, 500);
}
initializeUI();
});
</script>
</body>
</html>LIGHT
Transition 003
Elegant loading transition featuring your brand logo with circular animation. Creates professional waiting experience during page navigation with rotating progress indicator around logo. Configure logo source, animation timing, circle style, and background appearance directly in Bricks Builder. Perfect for maintaining brand presence during transitions while indicating loading progress.
Logo Loading
Click anywhere to preview the circular animation effect.
Logo
Logo URL
URL input
Direct URL path to your logo image file. Accepts standard web image formats including PNG, JPG, SVG, and WebP. Use absolute URLs starting with https:// for reliability. Logo displays centered within container during transition. Transparent backgrounds recommended for professional appearance. Falls back to placeholder if URL invalid or image fails to load.
Default: Bricksfusion logo URL
Container Size
Pixels
Dimensions of square container holding logo and circular animation. Smaller creates compact, subtle loaders. Larger produces prominent, attention-grabbing displays. Container maintains square aspect ratio automatically. Circle animation scales proportionally with container. Consider viewport size and mobile visibility when choosing dimensions.
Default: 200px (Range: 120-300px)
Logo Scale
Percentage
Size of logo relative to container dimensions. Lower values create smaller logos with more spacing. Higher values produce larger, more prominent logos filling container. Maintains aspect ratio of original image. Provides padding between logo and animated circle. Balance with circle radius for optimal visual hierarchy and breathing room.
Default: 80% (Range: 40-90%)
Animation
Animation Duration
Seconds
Time for complete rotation and drawing cycle of circular animation. Shorter creates faster, more energetic movement. Longer produces calmer, more relaxed motion. Animation loops continuously until transition completes. Coordinate with display duration for smooth experience. Consider user perception of loading time when choosing speed.
Default: 2s (Range: 1-5s)
Display Duration
Milliseconds
Total time transition remains visible before navigating to new page. Includes animation display and any loading time. Shorter creates snappy transitions. Longer ensures users see complete animation cycle. Should accommodate typical page load times. Too short may feel abrupt. Too long frustrates users. Balance user experience with perceived performance.
Default: 2000ms (Range: 1000-4000ms)
Transition Speed
Seconds
Duration of fade in and fade out effects for overlay appearance. Controls opacity transition timing when showing and hiding loader. Shorter creates instant, sharp appearances. Longer produces smooth, gradual fades. Affects perceived polish and professional feel. Apply to both entry and exit for consistency. Very fast speeds may feel jarring.
Default: 0.3s (Range: 0.1-0.8s)
Circle
Circle Radius
Pixels
Radius of animated circle surrounding logo measured from center point. Smaller creates tight circles close to logo. Larger produces wide circles with more spacing. Circle always centered within container regardless of radius. Must fit within container boundaries for proper display. Coordinate with logo scale to avoid overlap or excessive gaps between elements.
Default: 45px (Range: 30-48px)
Stroke Width
Pixels
Thickness of circle line stroke. Thinner creates delicate, minimal indicators. Thicker produces bold, prominent progress rings. Affects visual weight and prominence of animation. Very thin strokes may have visibility issues on some displays. Very thick strokes can appear heavy or overwhelming. Balance with overall design aesthetic and logo prominence.
Default: 2px (Range: 1-5px)
Circle Color
Color picker
Color of animated circular progress indicator. Choose colors matching brand identity or providing contrast with background. Light colors work well on dark backgrounds. Ensure sufficient contrast for visibility during animation. Consider color psychology and brand guidelines. White or accent colors common choices for professional appearance and clear visibility.
Default: White (#ffffff)
Background
Background Opacity
Decimal (0-1)
Transparency level of full-screen overlay background. Lower values allow more previous page visibility underneath. Higher values create more solid, opaque overlays that fully block previous content. Balance between continuity and focus. Lower opacity maintains context. Higher opacity directs attention to loading animation. Consider contrast needs for logo and circle visibility.
Default: 0.9 (Range: 0.3-1, where 0 is transparent and 1 is opaque)
Background Color
Color picker
Base color of full-screen overlay during transition. Combined with opacity to create final background appearance. Choose colors matching site theme or brand identity. Dark colors create professional, modern feel. Light colors provide airy, clean aesthetic. Ensure sufficient contrast with logo and circle for visibility. Consider how color appears at various opacity levels.
Default: Black (#000000)
Performance & Usage
This transition uses CSS animations and SVG for smooth, hardware-accelerated performance. Circular animation uses stroke-dasharray technique for efficient drawing effect. Automatically intercepts internal link clicks for consistent navigation experience. Logo preloads during transition for instant display. Lightweight SVG implementation with minimal DOM manipulation. Add to header or footer template for site-wide availability. Only one transition element needed per site. Animation loops continuously during loading for perceived progress feedback.
LOGO