Live Preview
Tag didn’t load? Click here and let us know!Share this result
Previews are deleted daily. Get a permanent share link sent to your inbox:
Script
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Publicité Animée Gaming 3D</title>
<!-- Chargement de Three.js pour le rendu 3D réel -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
<style>
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: 'Segoe UI', Roboto, sans-serif;
}
body {
background-color: #030508;
color: #fff;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
min-height: 100vh;
overflow: hidden;
}
/* Container Format Vertical 9:16 pour TikTok / Reels / Shorts */
.ad-viewport {
width: 360px;
height: 640px;
position: relative;
background: #000;
border-radius: 16px;
overflow: hidden;
box-shadow: 0 0 35px rgba(0, 240, 255, 0.3);
border: 1px solid rgba(0, 240, 255, 0.2);
}
/* Canvas 3D Three.js */
#three-canvas {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
}
/* Barre de progression */
.progress-bar {
position: absolute;
top: 12px;
left: 12px;
right: 12px;
height: 4px;
background: rgba(255, 255, 255, 0.15);
border-radius: 4px;
z-index: 10;
overflow: hidden;
}
.progress-fill {
height: 100%;
width: 0%;
background: linear-gradient(90deg, #00f0ff, #7000ff);
transition: width 0.1s linear;
}
/* Overlay des scènes */
.overlay-scene {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 5;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
padding: 30px;
opacity: 0;
transition: opacity 0.6s ease-in-out, transform 0.6s ease-in-out;
transform: scale(0.95);
pointer-events: none;
}
.overlay-scene.active {
opacity: 1;
transform: scale(1);
pointer-events: auto;
}
/* Typography & Effects */
.badge {
background: rgba(0, 240, 255, 0.1);
border: 1px solid #00f0ff;
color: #00f0ff;
padding: 6px 14px;
border-radius: 20px;
font-size: 11px;
letter-spacing: 2px;
text-transform: uppercase;
margin-bottom: 15px;
box-shadow: 0 0 10px rgba(0, 240, 255, 0.3);
}
.title-large {
font-size: 30px;
font-weight: 900;
text-transform: uppercase;
letter-spacing: 2px;
background: linear-gradient(180deg, #ffffff 0%, #a5b4fc 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
text-shadow: 0 0 20px rgba(112, 0, 255, 0.6);
margin-bottom: 10px;
}
.subtitle {
font-size: 14px;
color: #94a3b8;
letter-spacing: 1px;
}
.highlight-cyan {
color: #00f0ff;
text-shadow: 0 0 10px #00f0ff;
}
/* Bouton CTA */
.cta-button {
margin-top: 25px;
padding: 14px 28px;
background: linear-gradient(90deg, #00f0ff, #7000ff);
color: #000;
font-weight: 800;
font-size: 14px;
letter-spacing: 1px;
border: none;
border-radius: 30px;
cursor: pointer;
box-shadow: 0 0 25px rgba(0, 240, 255, 0.6);
animation: pulse 2s infinite;
}
@keyframes pulse {
0%, 100% { transform: scale(1); box-shadow: 0 0 25px rgba(0, 240, 255, 0.6); }
50% { transform: scale(1.05); box-shadow: 0 0 35px rgba(112, 0, 255, 0.8); }
}
/* Interface de contrôle externe (hors vidéo) */
.controls-panel {
margin-top: 20px;
display: flex;
gap: 10px;
}
.ctrl-btn {
background: #1e293b;
color: #fff;
border: 1px solid #334155;
padding: 8px 16px;
border-radius: 8px;
cursor: pointer;
font-size: 13px;
transition: background 0.2s;
}
.ctrl-btn:hover {
background: #334155;
border-color: #00f0ff;
}
</style>
</head>
<body>
<!-- Viewport Pub -->
<div class="ad-viewport">
<div class="progress-bar">
<div class="progress-fill" id="progress"></div>
</div>
<!-- Canvas 3D -->
<canvas id="three-canvas"></canvas>
<!-- Overlay Scène 1 -->
<div class="overlay-scene active" id="scene1">
<div class="badge">SÉQUENCE 01</div>
<div class="title-large">READY TO PLAY?</div>
<div class="subtitle">Puissance pure & Illimitée</div>
</div>
<!-- Overlay Scène 2 -->
<div class="overlay-scene" id="scene2">
<div class="badge">SÉQUENCE 02</div>
<div class="title-large">GRAPHISMES <span class="highlight-cyan">AAA</span></div>
<div class="subtitle">Plongez dans des univers ultra-réalistes</div>
</div>
<!-- Overlay Scène 3 -->
<div class="overlay-scene" id="scene3">
<div class="badge">SÉQUENCE 03</div>
<div class="title-large">YOUR GAME.<br><span class="highlight-cyan">YOUR WORLD.</span></div>
<div class="subtitle">Immersion totale sans concession</div>
</div>
<!-- Overlay Scène 4 -->
<div class="overlay-scene" id="scene4">
<div class="badge">SÉQUENCE FINAL</div>
<div class="title-large" style="font-size: 26px;">JOSHUA GAMING</div>
<div class="subtitle" style="margin-bottom: 10px;">PLAY. COMPETE. CONQUER.</div>
<button class="cta-button">LEVEL UP YOUR EXPERIENCE</button>
</div>
</div>
<!-- Contrôles -->
<div class="controls-panel">
<button class="ctrl-btn" onclick="prevScene()">◀ Précédent</button>
<button class="ctrl-btn" onclick="togglePlay()"><span id="play-icon">Pause ❚❚</span></button>
<button class="ctrl-btn" onclick="nextScene()">Suivant ▶</button>
</div>
<script>
// --- SCÈNE 3D (THREE.JS) ---
const canvas = document.getElementById('three-canvas');
const renderer = new THREE.WebGLRenderer({ canvas, antialias: true, alpha: true });
renderer.setSize(360, 640);
renderer.setPixelRatio(window.devicePixelRatio);
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(45, 360 / 640, 0.1, 1000);
camera.position.set(0, 0, 5);
// Lumières Néon
const lightCyan = new THREE.PointLight(0x00f0ff, 3, 10);
lightCyan.position.set(-2, 2, 2);
scene.add(lightCyan);
const lightPurple = new THREE.PointLight(0x7000ff, 4, 10);
lightPurple.position.set(2, -2, 2);
scene.add(lightPurple);
// Objet 3D principal (Tour PC Futuriste / Cube Cyberpunk)
const geometry = new THREE.BoxGeometry(1.6, 2.2, 1.2);
const material = new THREE.MeshStandardMaterial({
color: 0x0a0d14,
metalness: 0.8,
roughness: 0.2,
wireframe: false
});
const pcCube = new THREE.Mesh(geometry, material);
scene.add(pcCube);
// Bords lumineux Neon (Wireframe)
const geoEdges = new THREE.EdgesGeometry(geometry);
const matEdges = new THREE.LineBasicMaterial({ color: 0x00f0ff, linewidth: 2 });
const wireframe = new THREE.LineSegments(geoEdges, matEdges);
pcCube.add(wireframe);
// Système de particules (Poussière de néon)
const particleGeo = new THREE.BufferGeometry();
const particleCount = 150;
const posArray = new Float32Array(particleCount * 3);
for(let i = 0; i < particleCount * 3; i++) {
posArray[i] = (Math.random() - 0.5) * 8;
}
particleGeo.setAttribute('position', new THREE.BufferAttribute(posArray, 3));
const particleMat = new THREE.PointsMaterial({
size: 0.03,
color: 0x00f0ff,
transparent: true,
opacity: 0.6
});
const particles = new THREE.Points(particleGeo, particleMat);
scene.add(particles);
// --- TIMELINE DE LA PUBLICITÉ ---
let isPlaying = true;
let currentSceneIdx = 0;
const sceneDuration = 5000; // 5 secondes par scène (Total 20s)
let startTime = Date.now();
function updateScene(idx) {
document.querySelectorAll('.overlay-scene').forEach((el, i) => {
if(i === idx) {
el.classList.add('active');
} else {
el.classList.remove('active');
}
});
// Changement de couleur / mouvement selon la scène
if(idx === 0) {
matEdges.color.setHex(0x00f0ff);
lightCyan.intensity = 3;
} else if(idx === 1) {
matEdges.color.setHex(0xff0055);
lightCyan.intensity = 5;
} else if(idx === 2) {
matEdges.color.setHex(0x7000ff);
} else if(idx === 3) {
matEdges.color.setHex(0x00f0ff);
}
}
function togglePlay() {
isPlaying = !isPlaying;
document.getElementById('play-icon').innerText = isPlaying ? 'Pause ❚❚' : 'Lecture ▶';
}
function nextScene() {
currentSceneIdx = (currentSceneIdx + 1) % 4;
startTime = Date.now() - (currentSceneIdx * sceneDuration);
updateScene(currentSceneIdx);
}
function prevScene() {
currentSceneIdx = (currentSceneIdx - 1 + 4) % 4;
startTime = Date.now() - (currentSceneIdx * sceneDuration);
updateScene(currentSceneIdx);
}
// --- BOUCLE D'ANIMATION (RENDER LOOP) ---
function animate() {
requestAnimationFrame(animate);
if(isPlaying) {
const elapsed = (Date.now() - startTime) % (sceneDuration * 4);
currentSceneIdx = Math.floor(elapsed / sceneDuration);
// Mise à jour de la barre de progression
const progressPercent = (elapsed / (sceneDuration * 4)) * 100;
document.getElementById('progress').style.width = progressPercent + '%';
updateScene(currentSceneIdx);
// Rotation de l'objet 3D
pcCube.rotation.y += 0.01;
pcCube.rotation.x = Math.sin(Date.now() * 0.001) * 0.2;
// Mouvement dynamique des particules
particles.rotation.y += 0.002;
// Animation des lumières néons
lightCyan.position.x = Math.sin(Date.now() * 0.002) * 3;
lightPurple.position.y = Math.cos(Date.now() * 0.002) * 3;
}
renderer.render(scene, camera);
}
animate();
</script>
</body>
</html>
Landing Page
This ad does not have a landing page available
Network Timeline
Performance Summary
2
Requests
2
Domains
129KB
Transfer Size
600KB
Content Size
690.0ms
Dom Content Loaded
692.0ms
First Paint
690.0ms
Load Time
Domain Breakdown
Transfer Size (bytes)
Loading...
Content Size (bytes)
Loading...
Header Size (bytes)
Loading...
Requests
Loading...
Timings (ms)
Loading...
Total Time
Loading...
Content Breakdown
Transfer Size (bytes)
Loading...
Content Size (bytes)
Loading...
Header Size (bytes)
Loading...
Requests
Loading...