Color-Changing Animated Hub | Cloudflare Pages Ready

<!DOCTYPE html>

<head>

<title>NEÓN TIGRE // RECLAIM THE WILD</title>

tailwind.config = {

theme: {

extend: {

fontFamily: {

sans: ['Inter', 'sans-serif'],

mono: ['JetBrains Mono', 'monospace'],

}

</script>

<style>

/* 1. Continuous Linear Hue Cycle */

@keyframes hue-linear {

0% { filter: hue-rotate(0deg); }

100% { filter: hue-rotate(360deg); }

}

/* 2. Pulsing Saturation & Hue Shift */

@keyframes hue-pulse {

0%, 100% { filter: hue-rotate(0deg) saturate(100%); }

50% { filter: hue-rotate(180deg) saturate(220%); }

}

/* 3. High Vibrancy Rainbow Shift */

@keyframes hue-rainbow {

0% { filter: hue-rotate(0deg) saturate(160%) brightness(100%); }

33% { filter: hue-rotate(120deg) saturate(220%) brightness(110%); }

66% { filter: hue-rotate(240deg) saturate(250%) brightness(115%); }

100% { filter: hue-rotate(360deg) saturate(160%) brightness(100%); }

}

/* 4. Oscillating Sweep */

@keyframes hue-sweep {

0% { filter: hue-rotate(-90deg); }

100% { filter: hue-rotate(90deg); }

}

/* Utility Animation Classes using CSS Custom Properties */

.animate-hue-linear {

animation: hue-linear var(--anim-speed, 4s) infinite linear;

}

.animate-hue-pulse {

animation: hue-pulse var(--anim-speed, 4s) infinite ease-in-out;

}

.animate-hue-rainbow {

animation: hue-rainbow var(--anim-speed, 4s) infinite linear;

}

.animate-hue-sweep {

animation: hue-sweep var(--anim-speed, 4s) infinite alternate ease-in-out;

}

/* Subtle Glassmorphism Card Style */

.glass-card {

background: rgba(15, 23, 42, 0.75);

backdrop-filter: blur(12px);

-webkit-backdrop-filter: blur(12px);

border: 1px solid rgba(255, 255, 255, 0.08);

}

/* Custom Scrollbar */

::-webkit-scrollbar {

width: 8px;

height: 8px;

}

::-webkit-scrollbar-track {

background: #090d16;

}

::-webkit-scrollbar-thumb {

background: #1e293b;

border-radius: 4px;

}

::-webkit-scrollbar-thumb:hover {

background: #334155;

}

</style>

</head>

</svg>

</div>

<div>

NEÓN TIGRE <span class="text-[10px] uppercase font-mono px-2 py-0.5 rounded-full bg-orange-500/10 text-orange-400 border border-orange-500/20">Cloudflare Pages</span>

</span>

</div>

</svg>

ABOUT US

</a>

</div>

</header>

Zero-GIF Pure CSS Animation Target

</div>

Live Rendering

</div>

<defs>

</linearGradient>

</defs>

</svg>

</div>

Effect: Hue Cycle (360°) | Duration: 4.0s

</p>

</div>

Dynamic Color-Shifting Brand Hub

</h1>

Hosted on Cloudflare Pages using zero JavaScript animation overhead. Test custom graphics, adjust the animation settings, or grab the HTML snippet below.

</p>

Animation Parameters

</h3>

<div>

<label for="effect-style" class="block text-xs font-medium text-slate-300 mb-1.5">Transition Effect Style</label>

<option value="hue-linear">Continuous Hue Loop (0° → 360°)</option>

<option value="hue-pulse">Pulsing Saturation & Hue Shift</option>

<option value="hue-rainbow">High-Vibrancy Rainbow Burst</option>

<option value="hue-sweep">Oscillating Sweep (-90° ↔ +90°)</option>

</select>

</div>

<div>

<label for="speed-slider" class="font-medium text-slate-300">Animation Speed</label>

</div>

<span>Default (4s)</span>

</div>

Test Custom Image / Logo

</h3>

<div>

<label for="image-url-input" class="block text-xs font-medium text-slate-300 mb-1.5">Paste External Image or SVG URL</label>

Apply

</button>

</div>

<div>

<label class="block text-xs font-medium text-slate-300 mb-1.5">Or Upload Local Image / Logo File</label>

Reset

</button>

</div>

</section>

<div>

</svg>

ABOUT NEÓN TIGRE

</h2>

<p class="text-xs text-slate-400 mt-1">Deploy this exact single-page file and attach your Cloudflare domain in under 3 minutes.</p>

</div>

<span class="text-xs font-mono bg-orange-500/10 text-orange-400 border border-orange-500/20 px-2.5 py-1 rounded-full">100% Free Unlimited Hosting</span>

</div>

<div>

Save the code of this page as <code class="text-indigo-300 font-mono">index.html</code> on your computer inside an empty folder (e.g. <code class="text-indigo-300 font-mono">mysite/</code>).

</p>

</div>

<div>

<h3 class="font-semibold text-sm text-white mb-2">Upload to Cloudflare</h3>

<li>Log in to your <strong>Cloudflare Dashboard</strong>.</li>

<li>Navigate to <strong>Workers & Pages</strong> → <strong>Create Application</strong> → <strong>Pages</strong>.</li>

<li>Choose <strong>Upload Assets</strong>, drag your folder, and click <strong>Deploy</strong>.</li>

</ol>

</div>

<div>

<h3 class="font-semibold text-sm text-white mb-2">Attach Your Domain</h3>

<li>In your new Pages project, click <strong>Custom Domains</strong>.</li>

<li>Click <strong>Set up a custom domain</strong> and enter your Cloudflare domain name.</li>

<li>Cloudflare will configure DNS automatically!</li>

</ol>

</div>

</section>

</main>

</footer>

function applyAnimationSettings() {

const speed = document.getElementById('speed-slider').value;

const effect = document.getElementById('effect-style').value;

document.getElementById('speed-display').textContent = `${speed}s`;

const vectorLogo = document.getElementById('default-vector');

const customImg = document.getElementById('custom-img');

// Helper function to update active animation classes

const updateTarget = (el) => {

el.className = el.className.replace(/animate-hue-\w+/g, '').trim();

el.classList.add(`animate-${effect}`);

el.style.setProperty('--anim-speed', `${speed}s`);

};

updateTarget(vectorLogo);

updateTarget(customImg);

// Status text label update

const labelMap = {

'hue-linear': `Effect: Hue Cycle (0° → 360°) | Speed: ${speed}s`,

'hue-pulse': `Effect: Saturation & Hue Pulse | Speed: ${speed}s`,

'hue-rainbow': `Effect: Multi-Step Rainbow Burst | Speed: ${speed}s`,

'hue-sweep': `Effect: Oscillating Sweep (-90° ↔ +90°) | Speed: ${speed}s`

};

document.getElementById('status-label').textContent = labelMap[effect] || `Speed: ${speed}s`;

}

function loadCustomUrl() {

const url = document.getElementById('image-url-input').value.trim();

if (!url) return;

const vectorLogo = document.getElementById('default-vector');

const customImg = document.getElementById('custom-img');

customImg.src = url;

customImg.onerror = function() {

alert("Failed to load image from URL. Please ensure it is a direct image/SVG link.");

resetToDefaultLogo();

};

customImg.onload = function() {

vectorLogo.classList.add('hidden');

customImg.classList.remove('hidden');

applyAnimationSettings();

};

}

function handleFileUpload(event) {

const file = event.target.files[0];

if (!file) return;

const reader = new FileReader();

reader.onload = function(e) {

const vectorLogo = document.getElementById('default-vector');

const customImg = document.getElementById('custom-img');

customImg.src = e.target.result;

vectorLogo.classList.add('hidden');

customImg.classList.remove('hidden');

applyAnimationSettings();

};

reader.readAsDataURL(file);

}

function resetToDefaultLogo() {

const vectorLogo = document.getElementById('default-vector');

const customImg = document.getElementById('custom-img');

document.getElementById('image-url-input').value = '';

document.getElementById('file-uploader').value = '';

customImg.classList.add('hidden');

customImg.src = '';

vectorLogo.classList.remove('hidden');

applyAnimationSettings();

}

// Initialize animation properties on load

window.onload = function() {

applyAnimationSettings();

};

</script>

</body>

</html>