Niagara’s Full-Service Ad Agency Since 1994

Spritz Creative Background

.spritz-hero{ position: relative; width: 100%; height: 140px; /* desktop height */ overflow: hidden; background: #000; z-index: 1; } @media (max-width:820px){ .spritz-hero{ height: 200px; } /* mobile */ } .spritz-svg{ width:100%; height:100%; display:block; } function initSpritzBackground(){ const hero = document.querySelector('.spritz-hero.content-bg'); const svg = hero.querySelector('.spritz-svg'); if(!svg) return; const palette = ['#6EC804','#64C8CF','#E91F5D','#F6931D']; let isMobile = window.matchMedia('(pointer: coarse)').matches || window.innerWidth { isMobile = window.matchMedia('(pointer: coarse)').matches || window.innerWidth hero.clientWidth; const getHeight = () => hero.clientHeight; const layersConfig = [ {count:isMobile?10:15, r:[20,60], opacity:0.05, speed:0.1, blur:10, mouseStrength:0.05, shimmer:false}, {count:isMobile?12:20, r:[12,40], opacity:0.12, speed:0.15, blur:6, mouseStrength:0.12, shimmer:false}, {count:isMobile?15:30, r:[6,20], opacity:0.25, speed:0.25, blur:3, mouseStrength:0.20, shimmer:false}, {count:isMobile?20:40, r:[3,12], opacity:0.45, speed:0.35, blur:0, mouseStrength:0.35, shimmer:true} // front layer shimmer ]; // Blur filters const defs = document.createElementNS('http://www.w3.org/2000/svg','defs'); [3,6,10].forEach(b=>{ const f = document.createElementNS('http://www.w3.org/2000/svg','filter'); f.setAttribute('id',`blur-${b}`); const fe = document.createElementNS('http://www.w3.org/2000/svg','feGaussianBlur'); fe.setAttribute('stdDeviation',b); f.appendChild(fe); defs.appendChild(f); }); svg.appendChild(defs); // Build layers & circles layersConfig.forEach(l=>{ const g = document.createElementNS('http://www.w3.org/2000/svg','g'); svg.appendChild(g); l.group = g; l.circles = []; for(let i=0;i0){ circle.setAttribute('filter',`url(#blur-${l.blur})`); } g.appendChild(circle); l.circles.push({ el: circle, x:x, y:y, vx:(Math.random()-0.5)*l.speed, vy:(Math.random()-0.5)*l.speed, r:r, speed:l.speed, phaseX: Math.random()*Math.PI*2, phaseY: Math.random()*Math.PI*2, shimmer:l.shimmer, color:color, baseOpacity:l.opacity }); } }); // Global mouse tracking let mouse = {x:-9999, y:-9999}; let mouseInside = false; document.addEventListener('mousemove', e=>{ mouse.x = e.clientX; mouse.y = e.clientY; const rect = hero.getBoundingClientRect(); mouseInside = e.clientX >= rect.left && e.clientX = rect.top && e.clientY { const parallaxFactor = 0.2 + layersConfig.indexOf(l)*0.15; l.circles.forEach(c=>{ // sinusoidal floating motion c.x += Math.sin(t + c.phaseX) * 0.2; c.y += Math.cos(t + c.phaseY) * 0.2; // continuous velocity c.x += c.vx * parallaxFactor; c.y += c.vy * parallaxFactor; // Magnetic repulsion if(!isMobile && mouseInside){ const dx = c.x - (mouse.x - rect.left); const dy = c.y - (mouse.y - rect.top); const dist = Math.sqrt(dx*dx + dy*dy) || 0.1; const radius = 200; const force = l.mouseStrength * (1 - Math.min(dist/radius,1)) + 0.02; c.vx += dx/dist * force; c.vy += dy/dist * force; } // Optional simple collision with other circles (light) l.circles.forEach(other=>{ if(c===other) return; const dx = c.x - other.x; const dy = c.y - other.y; const dist = Math.sqrt(dx*dx + dy*dy); if(dist>0 && dist < c.r + other.r){ const push = 0.02; c.vx += (dx/dist)*push; c.vy += (dy/dist)*push; } }); // Color shimmer for front layer if(c.shimmer){ const flicker = 0.03 * Math.sin(t*3 + c.phaseX); c.el.setAttribute('fill-opacity', Math.min(1, Math.max(0.1, c.baseOpacity + flicker))); } // Wrap edges if(c.xwidth+c.r) c.x = -c.r; if(c.yheight+c.r) c.y = -c.r; // Dynamic damping const damping = mouseInside ? 0.998 : 0.96; // slows down when mouse leaves c.vx *= damping; c.vy *= damping; // Update circle c.el.setAttribute('cx', c.x); c.el.setAttribute('cy', c.y); }); }); requestAnimationFrame(frame); } requestAnimationFrame(frame); } if(document.readyState === 'complete'){ initSpritzBackground(); }else{ window.addEventListener('load', initSpritzBackground); }

Portfolio2025-10-06T02:13:46-04:00