<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Digital Strategy Event - Video Stencil</title>
<style>
body, html { margin: 0; padding: 0; overflow: hidden; background: #000; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; }
/* The Video/WebGL Layer */
#canvas-container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; }
/* The Text Layer (On top of everything) */
#ui-layer {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 10;
text-align: center;
pointer-events: none; /* Allows clicking through to video if needed */
width: 100%;
}
.title {
color: white;
font-weight: 900;
font-size: clamp(2rem, 6vw, 5rem);
line-height: 1.1;
text-transform: uppercase;
letter-spacing: -0.02em;
}
/* Hidden video element used as texture */
#bg-video { display: none; }
</style>
</head>
<body>
<video id="bg-video" autoplay loop muted playsinline crossorigin="anonymous">
<source src="https://assets.mixkit.co/videos/preview/mixkit-portrait-of-a-fashion-woman-with-silver-makeup-41289-large.mp4" type="video/mp4">
</video>
<div id="canvas-container"></div>
<div id="ui-layer">
<h1 class="title">ESTRATEGISTA DIGITAL<br>E LIFE DESIGNER</h1>
</div>
<script type="importmap">
{
"imports": {
"three": "https://unpkg.com/three@0.160.0/build/three.module.js"
}
}
</script>
<script type="module">
import * as THREE from 'three';
// --- STENCIL GENERATION ---
const maskCanvas = document.createElement('canvas');
const mctx = maskCanvas.getContext('2d');
maskCanvas.width = 2048;
maskCanvas.height = 2048;
function updateStencil() {
const w = maskCanvas.width;
const h = maskCanvas.height;
mctx.clearRect(0, 0, w, h);
// 1. Yellow Background
mctx.fillStyle = "#f6e71d";
mctx.fillRect(0, 0, w, h);
// 2. The Four Half-Circles (Stencil Cutouts)
mctx.globalCompositeOperation = 'destination-out';
const radius = h * 0.35;
const offset = h * 0.12; // Gap between the two circles
// Left Side: Two Half-Circles
mctx.beginPath();
mctx.arc(0, h * 0.5 - offset, radius, -Math.PI/2, Math.PI/2);
mctx.fill();
mctx.beginPath();
mctx.arc(0, h * 0.5 + offset + radius, radius, -Math.PI/2, Math.PI/2);
mctx.fill();
// Right Side: Two Half-Circles
mctx.beginPath();
mctx.arc(w, h * 0.5 - (offset + radius), radius, Math.PI/2, -Math.PI/2);
mctx.fill();
mctx.beginPath();
mctx.arc(w, h * 0.5 + offset, radius, Math.PI/2, -Math.PI/2);
mctx.fill();
}
// --- THREE.JS SETUP ---
const scene = new THREE.Scene();
const camera = new THREE.OrthographicCamera(-1, 1, 1, -1, 0, 1);
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
document.getElementById('canvas-container').appendChild(renderer.domElement);
// Video Texture
const video = document.getElementById('bg-video');
const videoTex = new THREE.VideoTexture(video);
// Mask Texture
updateStencil();
const maskTex = new THREE.CanvasTexture(maskCanvas);
const material = new THREE.ShaderMaterial({
uniforms: {
u_video: { value: videoTex },
u_mask: { value: maskTex }
},
vertexShader: `
varying vec2 vUv;
void main() {
vUv = uv;
gl_Position = vec4(position, 1.0);
}
`,
fragmentShader: `
varying vec2 vUv;
uniform sampler2D u_video;
uniform sampler2D u_mask;
void main() {
vec4 vid = texture2D(u_video, vUv);
vec4 msk = texture2D(u_mask, vUv);
// Desaturate video for high-contrast B&W look
float gray = dot(vid.rgb, vec3(0.299, 0.587, 0.114));
gray = smoothstep(0.1, 0.8, gray); // Sharpen contrast
if (msk.a < 0.5) {
gl_FragColor = vec4(vec3(gray), 1.0);
} else {
gl_FragColor = msk;
}
}
`
});
const plane = new THREE.Mesh(new THREE.PlaneGeometry(2, 2), material);
scene.add(plane);
function animate() {
requestAnimationFrame(animate);
renderer.render(scene, camera);
}
window.addEventListener('resize', () => {
renderer.setSize(window.innerWidth, window.innerHeight);
});
animate();
</script>
</body>
</html>“Create a "Digital Strategy Event - Video Stencil" component. Implement custom GLSL shaders for visual effects. Interactivity: click interactions, continuous animation loop, responsive resize handling. Includes media playback elements.”