const puppeteer = require('puppeteer');
const html = `
Cinematic Motion Graphics
`;
const TIME_SHIM = `
window.__VTIME_INSTALLED__ = true;
var vtime = 0;
var _origRaf = window.requestAnimationFrame;
var rafCallbacks = []; var rafId = 0;
window.requestAnimationFrame = function(cb){ rafId++; rafCallbacks.push({id: rafId, cb: cb}); return rafId; };
window.__advanceVTime = function(target){
var STEP = 8;
while (vtime < target) {
vtime = Math.min(vtime + STEP, target);
var cbs = rafCallbacks; rafCallbacks = [];
for (var j = 0; j < cbs.length; j++) { try { cbs[j].cb(vtime); } catch(e){} }
}
};
window.__renderFrame = function(target) {
return new Promise(function(resolve) {
window.__advanceVTime(target);
if (typeof _origRaf === 'function') {
_origRaf(function() { _origRaf(resolve); });
} else {
setTimeout(resolve, 0);
}
});
};
`;
(async () => {
const browser = await puppeteer.launch({
headless: 'new',
args: ['--no-sandbox', '--disable-setuid-sandbox', '--disable-dev-shm-usage', '--disable-web-security', '--disable-features=IsolateOrigins,site-per-process', '--js-flags="--max-old-space-size=4096"']
});
const page = await browser.newPage();
await page.setViewport({ width: 1920, height: 1080 });
page.on('console', msg => console.log('PAGE LOG:', msg.text()));
await page.goto('about:blank');
const processedHtml = html.replace(/]*>/i, (m) => m + '');
await page.setContent(processedHtml, { waitUntil: 'networkidle0' });
// Advance time to 5000ms
for (let i = 0; i <= 300; i++) {
await page.evaluate((t) => window.__renderFrame(t), i * 16.666);
await new Promise(r => setTimeout(r, 5));
}
await new Promise(r => setTimeout(r, 100));
await page.screenshot({ path: 'test_motion.jpg', type: 'jpeg', quality: 100 });
await browser.close();
console.log("Done");
})();