Spaces:
Sleeping
Sleeping
| const puppeteer = require('puppeteer'); | |
| const html = `<!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Cinematic Motion Graphics</title> | |
| <style> | |
| html,body{ | |
| margin:0; | |
| overflow:hidden; | |
| width:100%; | |
| height:100%; | |
| background:#050816; | |
| font-family:Arial,sans-serif; | |
| } | |
| canvas{ | |
| position:fixed; | |
| inset:0; | |
| } | |
| .overlay{ | |
| position:absolute; | |
| inset:0; | |
| display:flex; | |
| align-items:center; | |
| justify-content:center; | |
| pointer-events:none; | |
| } | |
| .title{ | |
| color:white; | |
| font-size:clamp(2rem,6vw,6rem); | |
| letter-spacing:.4em; | |
| text-transform:uppercase; | |
| mix-blend-mode:screen; | |
| animation:pulse 6s ease-in-out infinite; | |
| } | |
| @keyframes pulse{ | |
| 0%,100%{opacity:.8;transform:scale(1)} | |
| 50%{opacity:1;transform:scale(1.05)} | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <canvas id="c"></canvas> | |
| <div class="overlay"> | |
| <div class="title">MOTION</div> | |
| </div> | |
| <script> | |
| const canvas=document.getElementById("c"); | |
| const ctx=canvas.getContext("2d", { willReadFrequently: true }); | |
| let w,h; | |
| function resize(){ | |
| w=canvas.width=window.innerWidth; | |
| h=canvas.height=window.innerHeight; | |
| } | |
| window.addEventListener("resize",resize); | |
| resize(); | |
| const particles=[]; | |
| for(let i=0;i<1200;i++){ | |
| particles.push({ | |
| a:Math.random()*Math.PI*2, | |
| r:50+Math.random()*700, | |
| s:0.2+Math.random()*2, | |
| o:Math.random()*Math.PI*2 | |
| }); | |
| } | |
| let t=0; | |
| function draw(){ | |
| t+=0.008; | |
| const g=ctx.createRadialGradient(w/2,h/2,0,w/2,h/2,Math.max(w,h)); | |
| g.addColorStop(0,"#101a45"); | |
| g.addColorStop(.5,"#070b1d"); | |
| g.addColorStop(1,"#020205"); | |
| ctx.fillStyle=g; | |
| ctx.fillRect(0,0,w,h); | |
| ctx.save(); | |
| ctx.translate(w/2,h/2); | |
| particles.forEach((p,i)=>{ | |
| const ang=p.a+t*p.s; | |
| const rr=p.r*(0.75+0.25*Math.sin(t+p.o)); | |
| const x=Math.cos(ang)*rr; | |
| const y=Math.sin(ang)*rr; | |
| const size=1.5+2*Math.sin(t*2+p.o); | |
| ctx.fillStyle=\`hsla(\${(ang*100+t*300)%360},100%,70%,0.8)\`; | |
| ctx.beginPath(); | |
| ctx.arc(x,y,Math.abs(size),0,Math.PI*2); | |
| ctx.fill(); | |
| }); | |
| for(let ring=0; ring<8; ring++){ | |
| ctx.beginPath(); | |
| for(let i=0;i<360;i++){ | |
| const a=i*Math.PI/180; | |
| const r=140+ring*50+Math.sin(a*6+t*3+ring)*18; | |
| const x=Math.cos(a+t*0.2*ring)*r; | |
| const y=Math.sin(a+t*0.2*ring)*r; | |
| if(i===0) ctx.moveTo(x,y); | |
| else ctx.lineTo(x,y); | |
| } | |
| ctx.closePath(); | |
| ctx.strokeStyle=\`hsla(\${(ring*45+t*120)%360},90%,65%,0.18)\`; | |
| ctx.lineWidth=2; | |
| ctx.stroke(); | |
| } | |
| for(let i=0;i<6;i++){ | |
| const k=i*Math.PI/3; | |
| ctx.save(); | |
| ctx.rotate(k+t*0.1); | |
| ctx.lineWidth=1.5; | |
| ctx.globalAlpha=0.4+0.3*Math.sin(t*2+i); | |
| ctx.scale(1+(Math.sin(t*3+i)*0.15), 1+(Math.cos(t*3+i+1)*0.15)); | |
| ctx.beginPath(); | |
| for(let j=0;j<200;j++){ | |
| const a=j/200*Math.PI*2; | |
| const r=260+Math.sin(a*12+t*4+k)*45; | |
| ctx.lineTo(Math.cos(a)*r,Math.sin(a)*r); | |
| } | |
| ctx.closePath(); | |
| ctx.strokeStyle=\`hsla(\${(k*60+t*100)%360},100%,60%,0.25)\`; | |
| ctx.stroke(); | |
| ctx.restore(); | |
| } | |
| ctx.restore(); | |
| requestAnimationFrame(draw); | |
| } | |
| draw(); | |
| </script> | |
| </body> | |
| </html>`; | |
| (async () => { | |
| const browser = await puppeteer.launch({ headless: 'new', args: ['--no-sandbox', '--disable-gpu'] }); | |
| const page = await browser.newPage(); | |
| await page.setViewport({ width: 1920, height: 1080 }); | |
| await page.setContent(html); | |
| // Wait 1 second to let it draw | |
| await new Promise(r => setTimeout(r, 1000)); | |
| const w = await page.evaluate(() => window.innerWidth); | |
| const h = await page.evaluate(() => window.innerHeight); | |
| const cw = await page.evaluate(() => document.getElementById('c').width); | |
| console.log('Viewport:', w, h, 'Canvas:', cw); | |
| await page.screenshot({ path: 'test_html.jpg' }); | |
| await browser.close(); | |
| })(); | |