HTML ad tag preview - Powered by Ad Reform

Live Preview

Tag didn’t load? Click here and let us know!
1920x1080
105 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.0">
    <title>3D Product Advertisement</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Arial', sans-serif;
            overflow: hidden;
            background: radial-gradient(ellipse at center, #1a1a2e 0%, #16213e 50%, #0f0f23 100%);
        }

        #container {
            position: relative;
            width: 100vw;
            height: 100vh;
        }

        #three-canvas {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }

        .cta-button {
            position: absolute;
            bottom: 50px;
            left: 50%;
            transform: translateX(-50%);
            padding: 20px 40px;
            font-size: 24px;
            font-weight: bold;
            color: white;
            background: linear-gradient(45deg, #ff6b6b, #feca57);
            border: none;
            border-radius: 50px;
            cursor: pointer;
            box-shadow: 0 10px 30px rgba(255, 107, 107, 0.4);
            transition: all 0.3s ease;
            z-index: 100;
        }

        .cta-button:hover {
            transform: translateX(-50%) translateY(-5px);
            box-shadow: 0 15px 40px rgba(255, 107, 107, 0.6);
        }

        .product-title {
            position: absolute;
            top: 50px;
            left: 50%;
            transform: translateX(-50%);
            color: white;
            font-size: 48px;
            font-weight: bold;
            text-align: center;
            text-shadow: 0 0 20px rgba(255, 255, 255, 0.5);
            z-index: 100;
            animation: glow 2s ease-in-out infinite alternate;
        }

        @keyframes glow {
            from { text-shadow: 0 0 20px rgba(255, 255, 255, 0.5); }
            to { text-shadow: 0 0 30px rgba(255, 107, 107, 0.8), 0 0 40px rgba(254, 202, 87, 0.6); }
        }

        .features {
            position: absolute;
            right: 50px;
            top: 150px;
            color: white;
            font-size: 18px;
            z-index: 100;
        }

        .feature {
            margin: 15px 0;
            opacity: 0;
            animation: slideIn 1s ease forwards;
        }

        .feature:nth-child(1) { animation-delay: 1s; }
        .feature:nth-child(2) { animation-delay: 1.5s; }
        .feature:nth-child(3) { animation-delay: 2s; }

        @keyframes slideIn {
            from { opacity: 0; transform: translateX(50px); }
            to { opacity: 1; transform: translateX(0); }
        }
    </style>
</head>
<body>
    <div id="container">
        <canvas id="three-canvas"></canvas>
        
        <h1 class="product-title">NEXTGEN PRO</h1>
        
        <div class="features">
            <div class="feature">⚡ Lightning Fast Performance</div>
            <div class="feature">🎨 Stunning Visuals</div>
            <div class="feature">🚀 Future-Proof Tech</div>
        </div>
        
        <button class="cta-button" onclick="buyNow()">
            BUY NOW - $299
        </button>
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
    <script>
        // 3D Scene Setup
        const scene = new THREE.Scene();
        const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
        const renderer = new THREE.WebGLRenderer({ canvas: document.getElementById('three-canvas'), antialias: true });
        renderer.setSize(window.innerWidth, window.innerHeight);
        renderer.setClearColor(0x000000, 0);

        // Main Product (Floating Cube with Glow)
        const productGeometry = new THREE.BoxGeometry(3, 3, 3);
        const productMaterial = new THREE.MeshPhongMaterial({ 
            color: 0x00ffff,
            shininess: 100,
            transparent: true,
            opacity: 0.9
        });
        const product = new THREE.Mesh(productGeometry, productMaterial);
        scene.add(product);

        // Add glowing edges
        const edges = new THREE.EdgesGeometry(productGeometry);
        const lineMaterial = new THREE.LineBasicMaterial({ color: 0xffffff, linewidth: 3 });
        const wireframe = new THREE.LineSegments(edges, lineMaterial);
        product.add(wireframe);

        // Particles for background
        const particlesGeometry = new THREE.BufferGeometry();
        const particlesCount = 1000;
        const posArray = new Float32Array(particlesCount * 3);

        for(let i = 0; i < particlesCount * 3; i++) {
            posArray[i] = (Math.random() - 0.5) * 20;
        }

        particlesGeometry.setAttribute('position', new THREE.BufferAttribute(posArray, 3));
        const particlesMaterial = new THREE.PointsMaterial({
            size: 0.005,
            color: 0xffffff,
            transparent: true,
            opacity: 0.6
        });
        const particlesMesh = new THREE.Points(particlesGeometry, particlesMaterial);
        scene.add(particlesMesh);

        // Lighting
        const ambientLight = new THREE.AmbientLight(0x404040, 0.4);
        scene.add(ambientLight);

        const pointLight1 = new THREE.PointLight(0xff6b6b, 1, 100);
        pointLight1.position.set(5, 5, 5);
        scene.add(pointLight1);

        const pointLight2 = new THREE.PointLight(0xfeca57, 1, 100);
        pointLight2.position.set(-5, -5, 5);
        scene.add(pointLight2);

        camera.position.z = 8;

        // Animation loop
        function animate() {
            requestAnimationFrame(animate);

            // Rotate product
            product.rotation.x += 0.01;
            product.rotation.y += 0.015;
            product.rotation.z += 0.005;

            // Floating animation
            product.position.y = Math.sin(Date.now() * 0.001) * 0.3;

            // Rotate particles
            particlesMesh.rotation.y += 0.001;

            // Pulse lights
            pointLight1.intensity = 1 + Math.sin(Date.now() * 0.002) * 0.3;
            pointLight2.intensity = 1 + Math.cos(Date.now() * 0.002) * 0.3;

            // Glow effect on product
            productMaterial.emissive.setHex(0x004444 * Math.sin(Date.now() * 0.003));

            renderer.render(scene, camera);
        }

        // Handle window resize
        window.addEventListener('resize', () => {
            camera.aspect = window.innerWidth / window.innerHeight;
            camera.updateProjectionMatrix();
            renderer.setSize(window.innerWidth, window.innerHeight);
        });

        // Mouse interaction
        let mouseX = 0, mouseY = 0;
        document.addEventListener('mousemove', (event) => {
            mouseX = (event.clientX - window.innerWidth / 2) * 0.0005;
            mouseY = (event.clientY - window.innerHeight / 2) * 0.0005;
        });

        // CTA Button
        function buyNow() {
            alert('🎉 Thank you for your interest! Redirecting to purchase page...');
            // Replace with actual purchase link
        }

        // Start animation
        animate();
    </script>
</body>
</html>
Landing Page

This ad does not have a landing page available
Network Timeline

Performance Summary

Requests
Domains
126KB
Transfer Size
597KB
Content Size
838.0ms
Dom Content Loaded
232.0ms
First Paint
838.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