Live preview
Typing effects
Add the WOW factor in a few clicks
Move your mouse over this box! The particles, typing headline, 3D tilt and parallax are all Divi Toolbox effects you can add to any section.
.dl-fx{position:relative;overflow:hidden;isolation:isolate;padding:clamp(48px,8vw,110px) clamp(16px,4vw,48px);background:var(--dl-panel,#eef2f2);border-radius:var(--gvid-dci5av68vs,clamp(35px,calc(0.035959 * (100vw - 360px) + 35px),70px));corner-shape:squircle;text-align:center}
.dl-fx__canvas{position:absolute;inset:0;width:100%;height:100%;z-index:-1;display:block}
.dl-fx__parallax{will-change:transform}
.dl-fx__card{max-width:720px;margin:0 auto;padding:clamp(28px,5vw,56px);background:color-mix(in srgb,var(--dl-canvas,#fff) 82%,transparent);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border:2px solid var(--dl-border,#d3d6df);border-radius:var(--gvid-psr8wu69km,clamp(20px,calc(0.010274 * (100vw - 360px) + 20px),30px));corner-shape:squircle;transform-style:preserve-3d;transition:transform .6s cubic-bezier(.03,.98,.52,.99);will-change:transform}
.dl-fx__card.is-tilting{transition:transform .1s linear}
.dl-fx__eyebrow{margin:0 0 .6em;padding:0;font-family:var(--et_global_body_font);font-size:.8em;font-weight:var(--dl-font-extra,800);letter-spacing:.12em;text-transform:uppercase;color:var(--gcid-primary-color,#ff6699)}
.dl-fx__title{margin:0;padding:0;min-height:1.25em;font-family:var(--et_global_heading_font);font-weight:var(--dl-font-extra,800);font-size:clamp(30px,5vw,56px);line-height:1.15;color:var(--dl-text-main,#19191a)}
.dl-fx__cursor{display:inline-block;width:.08em;height:.95em;margin-left:.06em;vertical-align:-.08em;background:var(--gcid-primary-color,#ff6699);animation:dl-fx-blink 1s steps(1) infinite}
@keyframes dl-fx-blink{50%{opacity:0}}
.dl-fx__subtitle{margin:.7em 0 .4em;padding:0;font-family:var(--et_global_heading_font);font-weight:var(--dl-font-bold,700);font-size:clamp(18px,2.2vw,24px);color:var(--dl-text-main,#19191a)}
.dl-fx__text{max-width:34em;margin:0 auto;padding:0;font-family:var(--et_global_body_font);font-size:var(--gvid-r9pokwackb,clamp(15px,calc(0.003082 * (100vw - 360px) + 15px),18px));line-height:1.7;color:var(--dl-text-main,#19191a)}
@media (prefers-reduced-motion:reduce){.dl-fx__cursor{animation:none}.dl-fx__card{transition:none}}
(function(){
var root=document.getElementById('dl-fx');
if(!root){return;}
var reduce=window.matchMedia('(prefers-reduced-motion: reduce)').matches;
var fine=window.matchMedia('(hover: hover) and (pointer: fine)').matches;
function cssVar(n,f){var v=getComputedStyle(root).getPropertyValue(n).trim();return v?v:f;}
/* Typing effect */
var typed=root.querySelector('.dl-fx__typed');
var words=typed.getAttribute('data-words').split('|');
var w=0,c=words[0].length,del=true;
function tick(){
var word=words[w];
if(del){c--;}else{c++;}
typed.textContent=word.slice(0,c);
var wait=del?50:110;
if(!del){if(c===word.length){del=true;wait=2000;}}
if(del){if(c===0){del=false;w=(w+1)%words.length;wait=400;}}
setTimeout(tick,wait);
}
if(!reduce){setTimeout(tick,2000);}
/* Particles */
var cv=root.querySelector('.dl-fx__canvas');
var ctx=cv.getContext('2d');
var dpr=Math.min(window.devicePixelRatio||1,2);
var W=0,H=0,pts=[],mouse={x:-9999,y:-9999},running=false,raf=0;
function size(){
var r=root.getBoundingClientRect();W=r.width;H=r.height;
cv.width=W*dpr;cv.height=H*dpr;ctx.setTransform(dpr,0,0,dpr,0,0);
var n=Math.round(W*H/8000);n=Math.max(35,Math.min(fine?140:70,n));
pts=[];
for(var i=0;i!==n;i++){pts.push({x:Math.random()*W,y:Math.random()*H,vx:(Math.random()-.5)*.8,vy:(Math.random()-.5)*.8});}
draw();
}
function draw(){
ctx.clearRect(0,0,W,H);
var i,j,p,q,dx,dy,d;
var col=cssVar('--dl-text-mid','#6a6e7b');
ctx.strokeStyle=col;ctx.lineWidth=1;
for(i=0;i!==pts.length;i++){
p=pts[i];
for(j=i+1;j!==pts.length;j++){
q=pts[j];dx=p.x-q.x;dy=p.y-q.y;d=Math.sqrt(dx*dx+dy*dy);
if(d<=150){ctx.globalAlpha=(1-d/150)*.45;ctx.beginPath();ctx.moveTo(p.x,p.y);ctx.lineTo(q.x,q.y);ctx.stroke();}
}
}
ctx.globalAlpha=.8;ctx.fillStyle=col;
for(i=0;i!==pts.length;i++){p=pts[i];ctx.beginPath();ctx.arc(p.x,p.y,2.6,0,6.2832);ctx.fill();}
ctx.globalAlpha=1;
}
function step(){
var i,p,dx,dy,d,f;
for(i=0;i!==pts.length;i++){
p=pts[i];
dx=p.x-mouse.x;dy=p.y-mouse.y;d=Math.sqrt(dx*dx+dy*dy);
if(d<=110){f=(110-d)/110*3;p.x+=dx/(d+.01)*f;p.y+=dy/(d+.01)*f;}
p.x+=p.vx;p.y+=p.vy;
if(p.x=W){p.vx=-Math.abs(p.vx);}
if(p.y=H){p.vy=-Math.abs(p.vy);}
}
draw();
if(running){raf=requestAnimationFrame(step);}
}
size();
var rt;window.addEventListener('resize',function(){clearTimeout(rt);rt=setTimeout(size,200);});
root.addEventListener('mousemove',function(e){var r=root.getBoundingClientRect();mouse.x=e.clientX-r.left;mouse.y=e.clientY-r.top;});
root.addEventListener('mouseleave',function(){mouse.x=-9999;mouse.y=-9999;});
if(!reduce){
if('IntersectionObserver' in window){
new IntersectionObserver(function(en){
if(en[0].isIntersecting){if(!running){running=true;raf=requestAnimationFrame(step);}}
else{running=false;cancelAnimationFrame(raf);}
}).observe(root);
}else{running=true;step();}
}
/* 3D tilt */
var card=root.querySelector('.dl-fx__card');
if(fine){if(!reduce){
card.addEventListener('mousemove',function(e){
var r=card.getBoundingClientRect();
var x=(e.clientX-r.left)/r.width-.5,y=(e.clientY-r.top)/r.height-.5;
card.classList.add('is-tilting');
card.style.transform='perspective(1000px) rotateX('+(-y*16).toFixed(2)+'deg) rotateY('+(x*16).toFixed(2)+'deg)';
});
card.addEventListener('mouseleave',function(){card.classList.remove('is-tilting');card.style.transform='perspective(1000px) rotateX(0deg) rotateY(0deg)';});
}}
/* Parallax */
var par=root.querySelector('.dl-fx__parallax');
var ticking=false;
function parallax(){
ticking=false;
var r=root.getBoundingClientRect();
var mid=r.top+r.height/2-window.innerHeight/2;
par.style.transform='translate3d(0,'+(mid*-.12).toFixed(1)+'px,0)';
}
if(!reduce){
window.addEventListener('scroll',function(){if(!ticking){ticking=true;requestAnimationFrame(parallax);}},{passive:true});
parallax();
}
})();
