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 Page 006 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);
}
.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: #4CAF50;
}
.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, #4CAF50);
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;
}
select {
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);
}
select:focus {
border-color: var(--accent);
box-shadow: 0 0 0 2px rgba(180, 255, 153, 0.2);
}
.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;
}
.TransitionPage006-container {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 10;
visibility: hidden;
contain: strict;
isolation: isolate;
}
.TransitionPage006-clapper {
position: absolute;
left: 0;
width: 100%;
height: 50%;
background-color: #000000;
transition: transform 0.8s cubic-bezier(0.86, 0, 0.07, 1);
}
.TransitionPage006-top {
top: 0;
transform: translateY(-100%);
}
.TransitionPage006-bottom {
bottom: 0;
transform: translateY(100%);
}
.TransitionPage006-container.active .TransitionPage006-top {
transform: translateY(0);
}
.TransitionPage006-container.active .TransitionPage006-bottom {
transform: translateY(0);
}
.TransitionPage006-neon-line {
position: absolute;
top: 50%;
left: -100%;
width: 100%;
height: 2px;
background: linear-gradient(to right, transparent, #00ffff, transparent);
transform: translateY(-50%);
opacity: 0;
transition: opacity 0.3s ease;
}
.TransitionPage006-neon-line.active {
opacity: 1;
animation: neonSlide 0.8s ease-in-out forwards;
}
@keyframes neonSlide {
0% { left: -100%; }
100% { left: 100%; }
}
@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 Page 006</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 Page 006</h1>
<p class="page-subtitle">Interactive cinematic clapper 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 cinematic clapper 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 cinematic clapper 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 cinematic clapper transition</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="TransitionPage006-container" id="previewTransitionContainer">
<div class="TransitionPage006-clapper TransitionPage006-top" id="previewClapperTop"></div>
<div class="TransitionPage006-clapper TransitionPage006-bottom" id="previewClapperBottom"></div>
<div class="TransitionPage006-neon-line" id="previewNeonLine"></div>
</div>
</div>
</section>
<section class="controls-section">
<div class="card">
<div class="card-heading">
Clapper Settings
<div class="card-actions">
<button class="card-action-btn" id="reset-clapper" title="Reset Clapper Settings">↺</button>
</div>
</div>
<div class="card-content">
<div class="control-group">
<div class="control-label">
<span class="label-text">
Clapper Duration
<span class="help-tooltip" title="Speed of the clapper animation">ℹ</span>
</span>
<div class="value-display">
<span class="value-text"><span id="clapper-duration-value">0.8</span>s</span>
<button class="reset-btn" onclick="resetParameter('clapper-duration', 0.8)">↺</button>
</div>
</div>
<input type="range" id="clapper-duration" min="0.3" max="2" step="0.1" value="0.8">
</div>
<div class="control-group">
<div class="control-label">
<span class="label-text">Clapper 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="clapper-color" value="#000000">
</div>
<div class="color-input-group">
<span class="color-label">HEX</span>
<input type="text" class="color-input hex-input" id="clapper-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="clapper-color-hsl" placeholder="hsl(0, 0%, 0%)">
</div>
</div>
</div>
</div>
</div>
</div>
<div class="card">
<div class="card-heading">
Neon Line Settings
<div class="card-actions">
<button class="card-action-btn" id="reset-neon" title="Reset Neon Settings">↺</button>
</div>
</div>
<div class="card-content">
<div class="control-group">
<div class="control-label">
<span class="label-text">Neon Line Color</span>
</div>
<div class="color-list">
<div class="color-row">
<div class="color-picker-container" style="--selected-color: #00ffff;">
<input type="color" id="neon-color" value="#00ffff">
</div>
<div class="color-input-group">
<span class="color-label">HEX</span>
<input type="text" class="color-input hex-input" id="neon-color-hex" value="#00ffff" placeholder="#00ffff">
</div>
<div class="color-input-group">
<span class="color-label">HSL</span>
<input type="text" class="color-input hsl-input" id="neon-color-hsl" placeholder="hsl(180, 100%, 50%)">
</div>
</div>
</div>
</div>
<div class="control-group">
<div class="control-label">
<span class="label-text">
Neon Line Duration
<span class="help-tooltip" title="Duration of the neon line animation">ℹ</span>
</span>
<div class="value-display">
<span class="value-text"><span id="neon-duration-value">0.8</span>s</span>
<button class="reset-btn" onclick="resetParameter('neon-duration', 0.8)">↺</button>
</div>
</div>
<input type="range" id="neon-duration" min="0.3" max="2" step="0.1" value="0.8">
</div>
<div class="control-group">
<div class="control-label">
<span class="label-text">
Neon Line Thickness
<span class="help-tooltip" title="Thickness of the neon line">ℹ</span>
</span>
<div class="value-display">
<span class="value-text"><span id="neon-thickness-value">2</span>px</span>
<button class="reset-btn" onclick="resetParameter('neon-thickness', 2)">↺</button>
</div>
</div>
<input type="range" id="neon-thickness" min="1" max="8" step="1" value="2">
</div>
<div class="control-group">
<div class="control-label">
<span class="label-text">
Neon Start Delay
<span class="help-tooltip" title="Delay before neon line appears">ℹ</span>
</span>
<div class="value-display">
<span class="value-text"><span id="neon-delay-value">400</span>ms</span>
<button class="reset-btn" onclick="resetParameter('neon-delay', 400)">↺</button>
</div>
</div>
<input type="range" id="neon-delay" min="100" max="800" step="50" value="400">
</div>
</div>
</div>
<div class="card">
<div class="card-heading">
Advanced Settings
<div class="card-actions">
<button class="card-action-btn" id="reset-advanced" title="Reset Advanced Settings">↺</button>
</div>
</div>
<div class="card-content">
<div class="control-group">
<div class="control-label">
<span class="label-text">
Total Transition Time
<span class="help-tooltip" title="Total duration of the transition effect">ℹ</span>
</span>
<div class="value-display">
<span class="value-text"><span id="total-time-value">1.6</span>s</span>
<button class="reset-btn" onclick="resetParameter('total-time', 1.6)">↺</button>
</div>
</div>
<input type="range" id="total-time" min="1" max="4" step="0.1" value="1.6">
</div>
</div>
</div>
</section>
</div>
</div>
<div class="notification" id="notification"></div>
<script>
document.addEventListener('DOMContentLoaded', function() {
let transitionConfig = {
clapperDuration: 0.8,
clapperColor: "#000000",
neonColor: "#00ffff",
neonDuration: 0.8,
neonThickness: 2,
neonDelay: 400,
totalTime: 1.6
};
const defaultConfig = { ...transitionConfig };
function updateConfig() {
updatePreviewStyles();
saveConfiguration();
}
function initializePreview() {
updateConfig();
}
function updatePreviewStyles() {
const container = document.getElementById('previewTransitionContainer');
const clapperTop = document.getElementById('previewClapperTop');
const clapperBottom = document.getElementById('previewClapperBottom');
const neonLine = document.getElementById('previewNeonLine');
if (container && clapperTop && clapperBottom && neonLine) {
const cinematicEasing = "cubic-bezier(0.86, 0, 0.07, 1)";
clapperTop.style.backgroundColor = transitionConfig.clapperColor;
clapperBottom.style.backgroundColor = transitionConfig.clapperColor;
clapperTop.style.transition = `transform ${transitionConfig.clapperDuration}s ${cinematicEasing}`;
clapperBottom.style.transition = `transform ${transitionConfig.clapperDuration}s ${cinematicEasing}`;
neonLine.style.background = `linear-gradient(to right, transparent, ${transitionConfig.neonColor}, transparent)`;
neonLine.style.height = `${transitionConfig.neonThickness}px`;
const neonAnimationName = `neonSlide-${Date.now()}`;
const existingStyle = document.getElementById('dynamic-neon-animation');
if (existingStyle) {
existingStyle.remove();
}
const style = document.createElement('style');
style.id = 'dynamic-neon-animation';
style.textContent = `
@keyframes ${neonAnimationName} {
0% { left: -100%; }
100% { left: 100%; }
}
.TransitionPage006-neon-line.active {
animation: ${neonAnimationName} ${transitionConfig.neonDuration}s ease-in-out forwards !important;
}
`;
document.head.appendChild(style);
}
}
function testTransition() {
const container = document.getElementById('previewTransitionContainer');
const clapperTop = document.getElementById('previewClapperTop');
const clapperBottom = document.getElementById('previewClapperBottom');
const neonLine = document.getElementById('previewNeonLine');
if (!container || !clapperTop || !clapperBottom || !neonLine) return;
container.classList.remove('active');
neonLine.classList.remove('active');
container.style.visibility = 'hidden';
setTimeout(() => {
container.style.visibility = 'visible';
container.classList.add('active');
setTimeout(() => {
neonLine.classList.add('active');
}, transitionConfig.neonDelay);
setTimeout(() => {
container.style.visibility = 'hidden';
container.classList.remove('active');
neonLine.classList.remove('active');
}, transitionConfig.totalTime * 1000 + 1000);
}, 100);
}
function generateJavaScriptCode() {
return `<div id="TransitionPage006Container" class="TransitionPage006-container">
<div class="TransitionPage006-clapper TransitionPage006-top"></div>
<div class="TransitionPage006-clapper TransitionPage006-bottom"></div>
<div class="TransitionPage006-neon-line"></div>
<iframe id="TransitionPage006Frame" class="TransitionPage006-frame"></iframe>
</div>
<style>
.TransitionPage006-container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 2147483647;
visibility: hidden;
}
.TransitionPage006-clapper {
position: absolute;
left: 0;
width: 100%;
height: 50%;
background-color: ${transitionConfig.clapperColor};
transition: transform ${transitionConfig.clapperDuration}s cubic-bezier(0.86, 0, 0.07, 1);
}
.TransitionPage006-top {
top: 0;
transform: translateY(-100%);
}
.TransitionPage006-bottom {
bottom: 0;
transform: translateY(100%);
}
.TransitionPage006-container.active .TransitionPage006-top {
transform: translateY(0);
}
.TransitionPage006-container.active .TransitionPage006-bottom {
transform: translateY(0);
}
.TransitionPage006-neon-line {
position: absolute;
top: 50%;
left: -100%;
width: 100%;
height: ${transitionConfig.neonThickness}px;
background: linear-gradient(to right, transparent, ${transitionConfig.neonColor}, transparent);
transform: translateY(-50%);
opacity: 0;
transition: opacity 0.3s ease;
}
.TransitionPage006-neon-line.active {
opacity: 1;
animation: neonSlide ${transitionConfig.neonDuration}s ease-in-out forwards;
}
@keyframes neonSlide {
0% { left: -100%; }
100% { left: 100%; }
}
.TransitionPage006-frame {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: none;
opacity: 0;
transition: opacity 0.3s ease;
}
.TransitionPage006-frame.loaded {
opacity: 1;
}
</style>
<script>
(function() {
'use strict';
var TransitionPage006Init = function() {
var transitionObj = {
container: null,
frame: null,
neonLine: null,
topClapper: null,
bottomClapper: null,
isTransitioning: false,
init: function() {
this.container = document.getElementById('TransitionPage006Container');
this.frame = document.getElementById('TransitionPage006Frame');
if (!this.container) {
return;
}
this.neonLine = this.container.querySelector('.TransitionPage006-neon-line');
this.topClapper = this.container.querySelector('.TransitionPage006-top');
this.bottomClapper = this.container.querySelector('.TransitionPage006-bottom');
if (!this.frame || !this.neonLine) {
return;
}
document.body.addEventListener('click', this.handleClick.bind(this));
},
startTransition: function(url) {
if (this.isTransitioning) return;
this.isTransitioning = true;
var self = this;
document.body.style.overflow = 'hidden';
this.container.style.visibility = 'visible';
this.container.classList.add('active');
setTimeout(function() {
self.neonLine.classList.add('active');
}, ${transitionConfig.neonDelay});
this.frame.src = url;
var completePromise1 = new Promise(function(resolve) {
setTimeout(resolve, ${transitionConfig.totalTime * 1000});
});
var completePromise2 = new Promise(function(resolve) {
self.frame.onload = function() {
setTimeout(resolve, 100);
};
});
Promise.all([completePromise1, completePromise2]).then(function() {
self.frame.classList.add('loaded');
setTimeout(function() {
var newUrl = self.frame.src;
self.frame.style.transition = 'opacity 0.1s ease-out';
self.frame.style.opacity = '0.95';
setTimeout(function() {
window.location.replace(newUrl);
}, 50);
}, 400);
});
},
cleanup: function() {
document.body.style.overflow = '';
this.container.style.visibility = 'hidden';
this.container.classList.remove('active');
this.frame.classList.remove('loaded');
this.neonLine.classList.remove('active');
this.frame.src = 'about:blank';
this.isTransitioning = false;
},
handleClick: function(e) {
var link = e.target.closest('a');
if (link && link.origin === window.location.origin && !link.hasAttribute('target')) {
e.preventDefault();
this.startTransition(link.href);
}
}
};
var initializeTransition = function() {
transitionObj.init();
};
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', initializeTransition);
} else {
initializeTransition();
}
return transitionObj;
};
window.TransitionPage006 = TransitionPage006Init();
})();
<\/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.clapperDuration = Math.round((Math.random() * 1.7 + 0.3) * 10) / 10;
transitionConfig.clapperColor = generateRandomColor();
transitionConfig.neonColor = generateRandomColor();
transitionConfig.neonDuration = Math.round((Math.random() * 1.7 + 0.3) * 10) / 10;
transitionConfig.neonThickness = Math.floor(Math.random() * 7) + 1;
transitionConfig.neonDelay = Math.floor(Math.random() * 700) + 100;
transitionConfig.totalTime = Math.round((Math.random() * 3 + 1) * 10) / 10;
updateAllInputs();
updateConfig();
showNotification('Random transition generated!');
}
function generateRandomColor() {
return '#' + Math.floor(Math.random() * 16777215).toString(16).padStart(6, '0');
}
function updateAllInputs() {
document.getElementById('clapper-duration').value = transitionConfig.clapperDuration;
document.getElementById('neon-duration').value = transitionConfig.neonDuration;
document.getElementById('neon-thickness').value = transitionConfig.neonThickness;
document.getElementById('neon-delay').value = transitionConfig.neonDelay;
document.getElementById('total-time').value = transitionConfig.totalTime;
document.getElementById('clapper-duration-value').textContent = transitionConfig.clapperDuration;
document.getElementById('neon-duration-value').textContent = transitionConfig.neonDuration;
document.getElementById('neon-thickness-value').textContent = transitionConfig.neonThickness;
document.getElementById('neon-delay-value').textContent = transitionConfig.neonDelay;
document.getElementById('total-time-value').textContent = transitionConfig.totalTime;
updateColorInputs('clapper-color', transitionConfig.clapperColor);
updateColorInputs('neon-color', transitionConfig.neonColor);
}
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 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 'clapper-duration':
transitionConfig.clapperDuration = defaultValue;
break;
case 'neon-duration':
transitionConfig.neonDuration = defaultValue;
break;
case 'neon-thickness':
transitionConfig.neonThickness = defaultValue;
break;
case 'neon-delay':
transitionConfig.neonDelay = defaultValue;
break;
case 'total-time':
transitionConfig.totalTime = 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-transition-page-006-config', JSON.stringify(transitionConfig));
} catch (e) {
}
}
function loadConfiguration() {
try {
const saved = localStorage.getItem('bricksfusion-transition-page-006-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-clapper').addEventListener('click', () => {
transitionConfig.clapperDuration = defaultConfig.clapperDuration;
transitionConfig.clapperColor = defaultConfig.clapperColor;
document.getElementById('clapper-duration').value = defaultConfig.clapperDuration;
document.getElementById('clapper-duration-value').textContent = defaultConfig.clapperDuration;
updateColorInputs('clapper-color', defaultConfig.clapperColor);
updateConfig();
showNotification('Clapper settings reset');
});
document.getElementById('reset-neon').addEventListener('click', () => {
transitionConfig.neonColor = defaultConfig.neonColor;
transitionConfig.neonDuration = defaultConfig.neonDuration;
transitionConfig.neonThickness = defaultConfig.neonThickness;
transitionConfig.neonDelay = defaultConfig.neonDelay;
document.getElementById('neon-duration').value = defaultConfig.neonDuration;
document.getElementById('neon-thickness').value = defaultConfig.neonThickness;
document.getElementById('neon-delay').value = defaultConfig.neonDelay;
document.getElementById('neon-duration-value').textContent = defaultConfig.neonDuration;
document.getElementById('neon-thickness-value').textContent = defaultConfig.neonThickness;
document.getElementById('neon-delay-value').textContent = defaultConfig.neonDelay;
updateColorInputs('neon-color', defaultConfig.neonColor);
updateConfig();
showNotification('Neon settings reset');
});
document.getElementById('reset-advanced').addEventListener('click', () => {
transitionConfig.totalTime = defaultConfig.totalTime;
document.getElementById('total-time').value = defaultConfig.totalTime;
document.getElementById('total-time-value').textContent = defaultConfig.totalTime;
updateConfig();
showNotification('Advanced 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 'clapper-duration':
transitionConfig.clapperDuration = parseFloat(input.value);
break;
case 'neon-duration':
transitionConfig.neonDuration = parseFloat(input.value);
break;
case 'neon-thickness':
transitionConfig.neonThickness = parseInt(input.value);
break;
case 'neon-delay':
transitionConfig.neonDelay = parseInt(input.value);
break;
case 'total-time':
transitionConfig.totalTime = parseFloat(input.value);
break;
}
updateConfig();
});
});
setupColorInputHandlers('clapper-color', 'clapperColor');
setupColorInputHandlers('neon-color', 'neonColor');
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 Page 006 Configurator loaded!');
}, 500);
}
initializeUI();
});
</script>
</body>
</html>LIGHT
Transition 006
Cinematic clapper board transition creating dramatic movie-style page changes. Features synchronized top and bottom panels closing over screen like traditional film clappers, with optional neon line accent sliding through center. Configure clapper speed, colors, neon line appearance, timing, and thickness. Perfect for media, entertainment, creative agency, or portfolio websites seeking bold, theatrical navigation experience. Combines professional polish with playful creativity.
Cinematic Clapper
Click anywhere to preview the clapper effect.
Clapper
Clapper Duration
Number (seconds)
Speed at which clapper panels close from top and bottom edges. Shorter durations create quick, snappy closures feeling energetic and modern. Longer durations produce slow, dramatic reveals evoking classic cinema. Affects perceived weight and importance of transition. Fast clappers suit casual browsing. Slow clappers emphasize content importance. Coordinate with total transition time for balanced pacing.
Default: 0.8s (Range: 0.3-2s)
Clapper Background Color
Color picker
Color of clapper panels sliding from top and bottom. Black creates authentic film clapper aesthetic and dramatic contrast. White produces clean, modern interpretation. Brand colors reinforce identity during transitions. Choose colors matching overall design system. Consider contrast with page content being covered. Dark colors universally work well. Light colors suit minimalist designs. Color sets mood and brand personality.
Default: Black (#000000)
Neon Line
Neon Line Color
Color picker
Color of accent line sweeping horizontally across center during transition. Cyan creates classic neon aesthetic and retro-futuristic feel. Bright colors produce energetic, attention-grabbing effect. Brand accent colors maintain consistency. Choose colors contrasting with clapper background for visibility. Gradient effect fades to transparent at edges for smooth appearance. Color defines personality: cool tones feel technical, warm tones feel creative.
Default: Cyan (#00ffff)
Neon Line Duration
Number (seconds)
Speed of neon line traveling across screen from left to right. Faster speeds create zippy, energetic feel. Slower speeds produce deliberate, measured motion. Affects perceived excitement and urgency. Fast lines suit modern, tech-focused sites. Slow lines work for luxury or artistic content. Coordinate with clapper duration for synchronized timing. Line typically appears partway through clapper closure.
Default: 0.8s (Range: 0.3-2s)
Neon Line Thickness
Number (pixels)
Vertical height of neon line accent in pixels. Thinner lines create subtle, refined detail. Thicker lines produce bold, prominent accent impossible to miss. Affects visual hierarchy and attention. Thin lines suit minimalist designs. Thick lines work for bold, expressive aesthetics. Consider viewing distance and device sizes. Mobile users benefit from slightly thicker lines. Balance between visibility and elegance.
Default: 2px (Range: 1-8px)
Neon Start Delay
Number (milliseconds)
Time delay before neon line begins animation after clappers start closing. Shorter delays create immediate line appearance coinciding with clapper motion. Longer delays produce sequential timing where line appears after clappers partially closed. Affects choreography and rhythm of complete transition sequence. Zero delay means simultaneous start. Mid-range delays create layered, sophisticated timing. Experiment for desired dramatic effect.
Default: 400ms (Range: 100-800ms)
Advanced
Total Transition Time
Number (seconds)
Complete duration transition remains visible before revealing new page. Includes clapper closure, neon line animation, and any hold time showing final state. Shorter totals create brisk, efficient navigation. Longer totals allow appreciation of full animation sequence and mask page loading. Balance between showmanship and user patience. Should exceed sum of clapper and neon durations for smooth completion. Add buffer time for polish.
Default: 1.6s (Range: 1-4s)
Performance & Usage
This transition uses CSS transforms with cinematic cubic-bezier easing for smooth, GPU-accelerated animations. Lightweight implementation combining vertical panel translations with horizontal line animation. Automatically intercepts all internal link clicks for consistent site-wide transitions. Uses CSS gradients for neon line glow effect without additional images. Optimized for performance with hardware acceleration. Works seamlessly across all modern browsers and devices. Add to header or footer template for global availability. Only one transition element needed per site. Perfect for creative, media, and entertainment websites.