CREATIF • OIL MATCH LAB
Find the Right Oil
for Your Engine.
Explore oil families, viscosity grades and vehicle categories through an interactive guide. Always confirm the final specification in your owner’s manual.
STEP 01
What do you drive?
Choose a category. The interface will build your oil profile.
YOUR OIL PROFILE
Passenger Vehicle
Select a viscosity to explore
SELECTED VISCOSITY
5W-30
A widely used passenger-car viscosity. Suitability depends on engine design and required API/ACEA/OEM specification.
Interactive profile • Verify against the vehicle manufacturer’s specification
THE ENGINE
Thousands of movements.
One critical fluid.
Scroll to see how the story changes.
Scroll ↓
VISCOSITY LAB
Move the temperature. Watch the viscosity change.
An educational visualization—not a substitute for the manufacturer’s specification.
NEXT LEVEL
Want the exact product?
Tell us your vehicle make, model, year and engine specification. Our team can help you narrow down the appropriate products.
Ask Our Team →
#creatif-oil-lab button:hover{transform:translateY(-8px);box-shadow:0 18px 35px rgba(4,25,30,.12);border-color:#ffc400}#creatif-oil-lab button.active{border-color:#ffc400;box-shadow:0 0 0 3px rgba(255,196,0,.18),0 18px 35px rgba(4,25,30,.12);transform:translateY(-6px)}@keyframes oilspin{to{transform:rotate(360deg)}}@keyframes oilspinreverse{to{transform:rotate(-360deg)}}@keyframes oilfade{from{opacity:0}to{opacity:1}}@keyframes oilup{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:none}}@keyframes oilfloat{50%{transform:translateY(-25px)}}@keyframes oilpulse{50%{box-shadow:0 0 0 9px rgba(255,196,0,.12)}}@keyframes oilflow{to{transform:translateX(18%) scaleX(.85)}}@media(max-width:760px){#vehicle-buttons{grid-template-columns:1fr!important}#oil-profile{padding:24px!important}#oil-story{min-height:650px!important}#story-copy{left:5%!important;right:5%!important}.oil-orbit{width:300px!important;height:300px!important}.oil-orbit+ .oil-orbit{width:220px!important;height:220px!important}}
@media(prefers-reduced-motion:reduce){#creatif-oil-lab *{animation-duration:.001ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.001ms!important}}
(function(){
const root=document.getElementById(‘creatif-oil-lab’);if(!root)return;
const data={car:{title:’Passenger Vehicle’,viscosities:{‘0W-20′:’Common in many newer engines where the manufacturer specifies a low-viscosity oil. Check the manual before selecting it.’,’5W-30′:’A widely used passenger-car viscosity. Suitability depends on engine design and required API/ACEA/OEM specification.’,’5W-40′:’Used by many engines requiring a higher hot viscosity. Always follow the vehicle manufacturer specification.’,’10W-40′:’Common in certain petrol and diesel applications. Do not choose by viscosity alone; verify the required standard.’}},bike:{title:’Motorcycle’,viscosities:{’10W-30′:’A common motorcycle viscosity in applications where specified by the manufacturer.’,’10W-40′:’A widely used motorcycle viscosity, including many everyday and performance applications.’,’20W-50′:’Used in some engines requiring a higher-temperature viscosity. Verify the manual.’}},commercial:{title:’Commercial / Heavy Duty’,viscosities:{’15W-40′:’A common heavy-duty diesel viscosity, but the correct choice depends on engine manufacturer requirements, operating conditions and service classification.’,’10W-40′:’Used in some commercial applications where the manufacturer specifies it. Verify the required diesel specification.’,’5W-40′:’Used in selected modern diesel applications. Confirm OEM and service classification before purchase.’}}};
const profile=document.getElementById(‘oil-profile’),tabs=document.getElementById(‘viscosity-tabs’),title=document.getElementById(‘profile-title’),selected=document.getElementById(‘selected-viscosity’),desc=document.getElementById(‘viscosity-description’),drop=document.getElementById(‘oil-drop’);
function choose(type){document.querySelectorAll(‘#vehicle-buttons button’).forEach(b=>b.classList.toggle(‘active’,b.dataset.type===type));const d=data[type];title.textContent=d.title;tabs.innerHTML=”;Object.keys(d.viscosities).forEach((v,i)=>{const b=document.createElement(‘button’);b.textContent=v;b.style.cssText=’border:1px solid #31505a;background:#0a2027;color:#fff;border-radius:30px;padding:11px 18px;cursor:pointer;font-weight:800;transition:.3s’;b.onclick=()=>setVis(v,d.viscosities[v],b);tabs.appendChild(b);if(i===0)setTimeout(()=>setVis(v,d.viscosities[v],b),50)});profile.style.display=’block’;requestAnimationFrame(()=>{profile.style.opacity=’1′;profile.style.transform=’translateY(0)’;profile.style.transition=’opacity .6s,transform .6s’;profile.scrollIntoView({behavior:’smooth’,block:’center’})})}
function setVis(v,text,b){selected.style.opacity=’0′;drop.style.transform=’rotate(45deg) scale(.4) translateY(25px)’;drop.style.opacity=’.05′;setTimeout(()=>{selected.textContent=v;desc.textContent=text;selected.style.opacity=’1′;drop.style.transform=’rotate(45deg) scale(1)’;drop.style.opacity=’.95′},180);tabs.querySelectorAll(‘button’).forEach(x=>x.style.background=’#0a2027′);b.style.background=’#9b7300′}
document.querySelectorAll(‘#vehicle-buttons button’).forEach(b=>b.addEventListener(‘click’,()=>choose(b.dataset.type)));
const slider=document.getElementById(‘temp-slider’),tv=document.getElementById(‘temp-value’),label=document.getElementById(‘flow-label’),liquid=document.getElementById(‘flow-liquid’);function temp(){const t=+slider.value;tv.textContent=t+’°C’;const hot=t>30,cold=t<0;label.textContent=cold?'COLDER • SLOWER FLOW':hot?'HOTTER • THINNER FLOW':'NORMAL FLOW';label.style.color=hot?'#b18400':cold?'#28758a':'#b18400';liquid.style.transform='scaleX('+(cold?.55:hot?1.15:.85)+')'}slider.addEventListener('input',temp);temp();
const core=document.getElementById('engine-core'),piston=document.getElementById('engine-piston'),ring=document.getElementById('engine-ring'),copyTitle=document.getElementById('story-title'),copyText=document.getElementById('story-text'),kicker=document.getElementById('story-kicker');function story(){const sec=document.getElementById('oil-story');const rect=sec.getBoundingClientRect(),vh=innerHeight;let p=Math.max(0,Math.min(1,(vh*.72-rect.top)/(sec.offsetHeight-vh*.35)));core.style.transform='scale('+(0.65+p*.55)+') rotate('+(p*55)+'deg)';core.style.opacity=.15+p*.85;piston.style.transform='translateY('+(Math.sin(p*Math.PI*5)*42)+'px)';ring.style.transform='rotate('+(20+p*360)+'deg)';if(p<.28){kicker.textContent='THE ENGINE';copyTitle.innerHTML='Thousands of movements.
One critical fluid.‘;copyText.textContent=’An engine is a choreography of heat, pressure and moving metal.’}else if(p<.58){kicker.textContent='FRICTION';copyTitle.innerHTML='Metal moves.
Protection matters.‘;copyText.textContent=’The correct lubricant helps manage friction and heat under the conditions the engine was designed for.’}else{ kicker.textContent=’THE RIGHT SPECIFICATION’;copyTitle.innerHTML=’Not just oil.
The right oil.‘;copyText.textContent=’Viscosity is only one part of the decision. Manufacturer specifications remain the final authority.’}}addEventListener(‘scroll’,story,{passive:true});story();
})();
