1920x1080 HTML ad preview

Live Preview

Tag didn’t load? Click here and let us know!
1920x1080
61.8 KB
Share this result

Previews are deleted daily. Get a permanent share link sent to your inbox:
Script

Open in browser
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1">
<meta name="theme-color" content="#001000">
<title>ULTIMATE CYBER STUDIO</title>

<script src="https://cdn.jsdelivr.net/npm/@mediapipe/face_mesh/face_mesh.js"></script>

<style>
:root{--n:#00ff66;--bg:#020604}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--n);font:12px monospace}
#app{height:100dvh;position:relative;overflow:hidden;background:#000}
#video,#fx{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
#video{transform:scaleX(-1);filter:brightness(.65) contrast(1.2)}
#fx{pointer-events:none}
#hud{position:absolute;z-index:4;top:8px;left:8px;right:8px;padding:10px;background:#001008df;border:1px solid var(--n);box-shadow:0 0 15px #00ff6640}
#title{font-size:19px;font-weight:bold;text-shadow:0 0 10px var(--n)}
#status,#stats{font-size:10px;margin-top:5px;overflow-wrap:anywhere}
#terminal{position:absolute;z-index:4;left:8px;right:8px;bottom:145px;height:85px;overflow:hidden;background:#001008dc;border-left:2px solid var(--n);padding:8px;line-height:1.5;font-size:10px}
#controls{position:absolute;z-index:6;bottom:5px;left:4px;right:4px;max-height:132px;overflow:auto;display:flex;flex-wrap:wrap;justify-content:center;gap:5px;background:#000b;padding:5px}
button,select{background:#001508;color:var(--n);border:1px solid var(--n);border-radius:4px;padding:9px 10px;font: bold 10px monospace}
button:active{background:var(--n);color:#000}
#alert{display:none;position:absolute;inset:0;z-index:3;border:5px solid red;box-shadow:inset 0 0 55px red;pointer-events:none;animation:blink .5s infinite alternate}
#scanline{position:absolute;top:0;left:0;width:100%;height:2px;background:var(--n);box-shadow:0 0 15px var(--n);z-index:2;pointer-events:none;animation:scan 3s linear infinite}
#toast{position:absolute;z-index:7;top:115px;left:10px;right:10px;text-align:center;pointer-events:none;text-shadow:0 0 8px var(--n)}
@keyframes scan{to{top:100%}}
@keyframes blink{to{opacity:.25}}
.glitch{animation:glitch .15s infinite}
@keyframes glitch{25%{filter:hue-rotate(90deg);transform:translateX(2px)}50%{transform:translateX(-2px)}}
@media(max-height:600px){#terminal{bottom:110px;height:55px}#controls{max-height:100px}button,select{padding:6px}}
</style>
</head>
<body>
<div id="app">
<video id="video" autoplay playsinline muted></video>
<canvas id="fx"></canvas>
<div id="scanline"></div>
<div id="alert"></div>

<header id="hud">
<div id="title">◈ ULTIMATE CYBER STUDIO</div>
<div id="status">SYSTEM STANDBY // CAMERA OFF</div>
<div id="stats">MATRIX ON | SCANNER ON | SIMULATION</div>
</header>

<div id="toast"></div>
<div id="terminal">
&gt; CYBER INTERFACE INITIALIZED<br>
&gt; Waiting for user command...
</div>

<div id="controls">
<button id="start">▶ CAMERA</button>
<button id="matrix">MATRIX ON</button>
<button id="scanner">SCANNER ON</button>
<button id="ghost">GHOST OFF</button>
<button id="target">TARGET ON</button>
<button id="glitch">GLITCH OFF</button>
<button id="danger">DANGER MODE</button>
<button id="radar">RADAR ON</button>
<button id="dna">DNA ON</button>
<button id="sound">SOUND OFF</button>
<button id="photo">📸 PHOTO</button>
<button id="record">🔴 RECORD</button>
<button id="flip">FLIP CAMERA</button>
<button id="full">FULLSCREEN</button>
<button id="reset">RESET FX</button>
<select id="theme">
<option value="#00ff66">NEON GREEN</option>
<option value="#00ccff">CYBER BLUE</option>
<option value="#d45bff">PURPLE</option>
<option value="#ff3344">RED</option>
<option value="#ffff00">YELLOW</option>
</select>
</div>
</div>

<script>
"use strict";
const $=id=>document.getElementById(id);
const video=$("video"),canvas=$("fx"),ctx=canvas.getContext("2d");

let stream=null,mesh=null,face=null,running=false,processing=false;
let matrixOn=true,scannerOn=true,ghostOn=false,targetOn=true;
let glitchOn=false,dangerOn=false,radarOn=true,dnaOn=true,soundOn=false;
let front=true,recorder=null,chunks=[],recording=false;
let drops=[],radarAngle=0,dnaAngle=0,animId=null,audioCtx=null;
let neon="#00ff66",lastLog=0;

function resize(){
 const dpr=Math.min(devicePixelRatio||1,2);
 canvas.width=Math.round(innerWidth*dpr);
 canvas.height=Math.round(innerHeight*dpr);
 canvas.style.width=innerWidth+"px";
 canvas.style.height=innerHeight+"px";
 ctx.setTransform(dpr,0,0,dpr,0,0);
 drops=Array.from({length:Math.ceil(innerWidth/15)},()=>Math.random()*innerHeight/15);
 draw();
}
addEventListener("resize",resize);

function toast(t){
 $("toast").textContent=t;
 setTimeout(()=>{$("toast").textContent=""},2200);
}
function log(t){
 let d=document.createElement("div");
 d.textContent="> "+new Date().toLocaleTimeString()+" "+t;
 $("terminal").appendChild(d);
 while($("terminal").children.length>5)$("terminal").firstChild.remove();
}
function stats(){
 $("stats").textContent=
 `MATRIX ${matrixOn?"ON":"OFF"} | SCANNER ${scannerOn?"ON":"OFF"} | `+
 `FACE ${face?"FOUND":"SEARCHING"} | SIMULATION`;
}
function toggle(id,label,get,set){
 $(id).onclick=()=>{
  set(!get());
  $(id).textContent=label+" "+(get()?"ON":"OFF");
  log(label+" "+(get()?"enabled":"disabled"));
  stats();draw();
 };
}
function drawMatrix(){
 if(!matrixOn)return;
 ctx.save();ctx.font="14px monospace";ctx.fillStyle=neon;
 for(let i=0;i<drops.length;i++){
  ctx.globalAlpha=.3+Math.random()*.6;
  ctx.fillText(String.fromCharCode(0x30A0+Math.random()*96),i*15,drops[i]*15);
  if(drops[i]*15>innerHeight&&Math.random()>.97)drops[i]=0;
  drops[i]+=.5+Math.random()*1.1;
 }
 ctx.restore();
}
function drawScanner(){
 if(!face||!scannerOn)return;
 const w=innerWidth,h=innerHeight;
 const p=face.map(a=>({x:(1-a.x)*w,y:a.y*h}));
 const xs=p.map(a=>a.x),ys=p.map(a=>a.y);
 const l=Math.max(0,Math.min(...xs)),r=Math.min(w,Math.max(...xs));
 const t=Math.max(0,Math.min(...ys)),b=Math.min(h,Math.max(...ys));
 const fw=r-l,fh=b-t,cx=(l+r)/2,cy=(t+b)/2;
 if(fw<5||fh<5)return;

 ctx.save();ctx.strokeStyle=neon;ctx.fillStyle=neon;
 ctx.lineWidth=1.5;ctx.shadowColor=neon;ctx.shadowBlur=12;

 if(ghostOn){
  ctx.beginPath();ctx.ellipse(cx,cy,fw*.53,fh*.57,0,0,Math.PI*2);
  ctx.fillStyle="#000";ctx.fill();ctx.strokeStyle=neon;ctx.stroke();
 }
 if(targetOn){
  const s=18;
  [[l,t,1,1],[r,t,-1,1],[l,b,1,-1],[r,b,-1,-1]].forEach(([x,y,dx,dy])=>{
   ctx.beginPath();ctx.moveTo(x,y+dy*s);ctx.lineTo(x,y);ctx.lineTo(x+dx*s,y);ctx.stroke();
  });
  ctx.beginPath();ctx.ellipse(cx,cy,fw*.55,fh*.58,0,0,Math.PI*2);ctx.stroke();
 }
 const sy=(performance.now()/5)%Math.max(1,fh);
 ctx.beginPath();ctx.moveTo(l,t+sy);ctx.lineTo(r,t+sy);ctx.stroke();
 for(let i=0;i<p.length;i+=5){
  ctx.beginPath();ctx.arc(p[i].x,p[i].y,1.3,0,Math.PI*2);ctx.fill();
 }
 ctx.font="10px monospace";ctx.fillText("FACE TRACKED",l,Math.max(12,t-6));
 ctx.restore();
}
function drawRadar(){
 if(!radarOn)return;
 const x=innerWidth-58,y=innerHeight*.48,r=35;
 ctx.save();ctx.strokeStyle=neon;ctx.fillStyle=neon;ctx.globalAlpha=.8;
 ctx.beginPath();ctx.arc(x,y,r,0,Math.PI*2);ctx.stroke();
 ctx.beginPath();ctx.moveTo(x-r,y);ctx.lineTo(x+r,y);ctx.moveTo(x,y-r);ctx.lineTo(x,y+r);ctx.stroke();
 radarAngle+=.035;
 ctx.beginPath();ctx.moveTo(x,y);ctx.arc(x,y,r,radarAngle,radarAngle+.6);ctx.closePath();ctx.fill();
 ctx.restore();
}
function drawDNA(){
 if(!dnaOn)return;
 const x=innerWidth-25,top=innerHeight*.30,height=100;
 ctx.save();ctx.strokeStyle=neon;ctx.fillStyle=neon;ctx.lineWidth=1;
 for(let i=0;i<20;i++){
  const y=top+i*height/20;
  const phase=i*.48+dnaAngle;
  const x1=x+Math.sin(phase)*12,x2=x+Math.sin(phase+Math.PI)*12;
  ctx.beginPath();ctx.moveTo(x1,y);ctx.lineTo(x2,y);ctx.stroke();
  ctx.beginPath();ctx.arc(x1,y,1.8,0,Math.PI*2);ctx.fill();
  ctx.beginPath();ctx.arc(x2,y,1.8,0,Math.PI*2);ctx.fill();
 }
 dnaAngle+=.035;ctx.restore();
}
function draw(){
 ctx.clearRect(0,0,innerWidth,innerHeight);
 drawMatrix();drawScanner();drawRadar();drawDNA();
 if(running)animId=requestAnimationFrame(draw);
}
function startRender(){
 if(animId)cancelAnimationFrame(animId);
 animId=requestAnimationFrame(draw);
}
async function processFrames(){
 if(!running||!mesh)return;
 if(video.readyState>=2&&!processing){
  processing=true;
  try{await mesh.send({image:video})}catch(e){console.error(e)}
  processing=false;
 }
 if(running)requestAnimationFrame(processFrames);
}
async function startCamera(){
 if(running)return;
 if(!navigator.mediaDevices?.getUserMedia){
  $("status").textContent="CAMERA REQUIRES HTTPS";
  toast("Open this page on HTTPS");return;
 }
 $("start").disabled=true;
 try{
  stream=await navigator.mediaDevices.getUserMedia({
   audio:false,
   video:{facingMode:front?"user":"environment",width:{ideal:640},height:{ideal:480}}
  });
  video.srcObject=stream;await video.play();
  if(typeof FaceMesh==="undefined")throw Error("Face tracking library did not load");
  mesh=new FaceMesh({locateFile:f=>"https://cdn.jsdelivr.net/npm/@mediapipe/face_mesh/"+f});
  mesh.setOptions({maxNumFaces:1,refineLandmarks:false,minDetectionConfidence:.5,minTrackingConfidence:.5});
  mesh.onResults(res=>{
   face=res.multiFaceLandmarks?.[0]||null;
   $("status").textContent=face?"SYSTEM ONLINE // FACE TRACKED":"SYSTEM ONLINE // SEARCHING";
   stats();
  });
  running=true;$("start").textContent="CAMERA ACTIVE";
  $("status").textContent="CYBER SYSTEM ONLINE";
  log("Camera enabled by user");
  log("Face tracking simulation started");
  toast("CYBER MODE ACTIVATED");
  startRender();processFrames();
 }catch(e){
  if(stream)stream.getTracks().forEach(t=>t.stop());
  stream=null;video.srcObject=null;
  $("status").textContent="ERROR: "+e.message;
  $("start").disabled=false;$("start").textContent="RETRY CAMERA";
 }
}
async function flipCamera(){
 front=!front;
 if(running){
  stopCamera();
  await startCamera();
 }else toast(front?"FRONT CAMERA SELECTED":"BACK CAMERA SELECTED");
}
function stopCamera(){
 running=false;processing=false;face=null;
 if(stream)stream.getTracks().forEach(t=>t.stop());
 stream=null;video.srcObject=null;
 if(animId)cancelAnimationFrame(animId);
 animId=null;
 if(mesh){mesh.close();mesh=null}
 $("start").disabled=false;$("start").textContent="▶ CAMERA";
 $("status").textContent="CAMERA OFF";
 draw();
}
toggle("matrix","MATRIX",()=>matrixOn,v=>matrixOn=v);
toggle("scanner","SCANNER",()=>scannerOn,v=>scannerOn=v);
toggle("ghost","GHOST",()=>ghostOn,v=>ghostOn=v);
toggle("target","TARGET",()=>targetOn,v=>targetOn=v);
toggle("radar","RADAR",()=>radarOn,v=>radarOn=v);
toggle("dna","DNA",()=>dnaOn,v=>dnaOn=v);
toggle("glitch","GLITCH",()=>glitchOn,v=>{
 glitchOn=v;$("app").classList.toggle("glitch",v);
});
$("danger").onclick=()=>{
 dangerOn=!dangerOn;$("alert").style.display=dangerOn?"block":"none";
 $("danger").textContent=dangerOn?"STOP ALERT":"DANGER MODE";
 log(dangerOn?"Visual warning activated":"Visual warning stopped");
};
$("theme").onchange=e=>{
 neon=e.target.value;
 document.documentElement.style.setProperty("--n",neon);
 log("Theme changed");draw();
};
$("sound").onclick=async()=>{
 soundOn=!soundOn;$("sound").textContent="SOUND "+(soundOn?"ON":"OFF");
 if(soundOn){
  try{
   audioCtx ||=new(window.AudioContext||window.webkitAudioContext)();
   await audioCtx.resume();
   const o=audioCtx.createOscillator(),g=audioCtx.createGain();
   o.frequency.value=440;g.gain.value=.04;
   o.connect(g);g.connect(audioCtx.destination);
   o.start();o.stop(audioCtx.currentTime+.15);
  }catch(e){}
 }
};
$("start").onclick=startCamera;
$("flip").onclick=flipCamera;
$("reset").onclick=()=>{
 matrixOn=true;scannerOn=true;ghostOn=false;targetOn=true;
 glitchOn=false;dangerOn=false;radarOn=true;dnaOn=true;
 $("app").classList.remove("glitch");$("alert").style.display="none";
 $("matrix").textContent="MATRIX ON";$("scanner").textContent="SCANNER ON";
 $("ghost").textContent="GHOST OFF";$("target").textContent="TARGET ON";
 $("glitch").textContent="GLITCH OFF";$("radar").textContent="RADAR ON";
 $("dna").textContent="DNA ON";
 log("Effects reset");stats();draw();
};
$("full").onclick=async()=>{
 try{
  if(!document.fullscreenElement)await $("app").requestFullscreen();
  else await document.exitFullscreen();
 }catch(e){toast("Fullscreen unavailable")}
};
$("photo").onclick=()=>{
 if(!video.videoWidth){toast("Start camera first");return}
 const out=document.createElement("canvas");
 out.width=video.videoWidth;out.height=video.videoHeight;
 const c=out.getContext("2d");
 c.save();c.translate(out.width,0);c.scale(-1,1);
 c.drawImage(video,0,0,out.width,out.height);c.restore();
 c.drawImage(canvas,0,0,out.width,out.height);
 const a=document.createElement("a");
 a.download="cyber-studio.png";a.href=out.toDataURL("image/png");a.click();
 log("Photo exported");toast("PHOTO SAVED");
};
$("record").onclick=()=>{
 if(!recording){
  if(!video.videoWidth){toast("Start camera first");return}
  if(!canvas.captureStream||typeof MediaRecorder==="undefined"){
   toast("Recording not supported by this browser");return
  }
  const out=document.createElement("canvas");
  out.width=video.videoWidth;out.height=video.videoHeight;
  const c=out.getContext("2d");
  const render=()=>{
   if(!recording)return;
   c.save();c.translate(out.width,0);c.scale(-1,1);
   c.drawImage(video,0,0,out.width,out.height);c.restore();
   c.drawImage(canvas,0,0,out.width,out.height);
   requestAnimationFrame(render);
  };
  recording=true;render();
  const recStream=out.captureStream(24);
  try{
   const type=MediaRecorder.isTypeSupported("video/webm;codecs=vp9")
    ?"video/webm;codecs=vp9":"video/webm";
   recorder=new MediaRecorder(recStream,{mimeType:type});
   chunks=[];
   recorder.ondataavailable=e=>{if(e.data.size)chunks.push(e.data)};
   recorder.onstop=()=>{
    const blob=new Blob(chunks,{type:"video/webm"});
    const url=URL.createObjectURL(blob);
    const a=document.createElement("a");
    a.href=url;a.download="cyber-studio.webm";a.click();
    setTimeout(()=>URL.revokeObjectURL(url),5000);
    recStream.getTracks().forEach(t=>t.stop());
    toast("VIDEO DOWNLOADED");
  };
  recorder.start();
  $("record").textContent="■ STOP RECORDING";
  log("Recording started");
  }catch(e){
   recording=false;recStream.getTracks().forEach(t=>t.stop());
   toast("Recording could not start");
  }
 }else{
  recording=false;
  if(recorder&&recorder.state!=="inactive")recorder.stop();
  $("record").textContent="🔴 RECORD";
  log("Recording stopped");
 }
};
const msgs=[
 "Visual engine online","Matrix simulation running",
 "Face tracking status updated","Neon interface active",
 "Cyber dashboard refreshed","Rendering local visual effects"
];
setInterval(()=>{
 if(running&&Date.now()-lastLog>3500){
  lastLog=Date.now();log(msgs[Math.floor(Math.random()*msgs.length)]);
 }
},4000);
resize();
log("Ready. Tap CAMERA to start.");
</script>
</body>
</html>
Landing Page

This ad does not have a landing page available
Network Timeline

Performance Summary

Requests
Domains
35KB
Transfer Size
78KB
Content Size
314.0ms
Dom Content Loaded
340.0ms
First Paint
319.0ms
Load Time
Domain Breakdown

Transfer Size (bytes)
Content Size (bytes)
Header Size (bytes)
Requests
Timings (ms)
Total Time
Content Breakdown

Transfer Size (bytes)
Content Size (bytes)
Header Size (bytes)
Requests