mirror of
https://github.com/codeflash-ai/codeflash-agent.git
synced 2026-05-04 18:25:19 +00:00
- Hero metrics: -89% cost, -52% peak memory, flat scaling, -12.9% latency - Add lightspeed canvas animation via assets/lightspeed.js for Plotly Cloud - Add platform-libs CI/CD migration to timeline (Phase 1b) with PR links - Update next-engagement card with POC branch and PR references - Replace RSS with peak memory in user-facing copy - Add flat memory scaling to case study results table
118 lines
3.8 KiB
JavaScript
118 lines
3.8 KiB
JavaScript
(function() {
|
|
if (document.getElementById('lightspeed-canvas')) return;
|
|
|
|
var canvas = document.createElement('canvas');
|
|
canvas.id = 'lightspeed-canvas';
|
|
canvas.style.cssText = 'position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:9999;';
|
|
document.body.insertBefore(canvas, document.body.firstChild);
|
|
|
|
var ctx = canvas.getContext('2d');
|
|
var dpr = window.devicePixelRatio || 1;
|
|
var W, H;
|
|
|
|
function resize() {
|
|
W = window.innerWidth;
|
|
H = window.innerHeight;
|
|
canvas.width = W * dpr;
|
|
canvas.height = H * dpr;
|
|
canvas.style.width = W + 'px';
|
|
canvas.style.height = H + 'px';
|
|
ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
|
|
}
|
|
resize();
|
|
window.addEventListener('resize', resize);
|
|
|
|
var palette = [
|
|
{r:70, g:90, b:130, w:5},
|
|
{r:90, g:110, b:155, w:4},
|
|
{r:110, g:135, b:180, w:3},
|
|
{r:60, g:75, b:110, w:3},
|
|
{r:130, g:155, b:200, w:2},
|
|
{r:255, g:210, b:39, w:1},
|
|
];
|
|
var wc = [];
|
|
for (var p = 0; p < palette.length; p++)
|
|
for (var w = 0; w < palette[p].w; w++) wc.push(palette[p]);
|
|
|
|
var NUM = 80;
|
|
var bars = [];
|
|
|
|
function makeBar(scatter) {
|
|
var c = wc[Math.floor(Math.random() * wc.length)];
|
|
var angleDeg = 8 + Math.random() * 14;
|
|
var angle = angleDeg * Math.PI / 180;
|
|
var len = 120 + Math.random() * 500;
|
|
var thickness = 4 + Math.random() * 14;
|
|
var speed = 0.15 + Math.random() * 0.6;
|
|
var x = -len - Math.random() * 400;
|
|
var y = Math.random() * H * 1.4 - H * 0.2;
|
|
|
|
if (scatter) {
|
|
x = Math.random() * (W + len) - len * 0.5;
|
|
y = Math.random() * H;
|
|
}
|
|
|
|
return {
|
|
x: x, y: y,
|
|
angle: angle,
|
|
speed: speed,
|
|
len: len,
|
|
thickness: thickness,
|
|
color: c,
|
|
alpha: 0.12 + Math.random() * 0.22,
|
|
life: 0,
|
|
maxLife: 800 + Math.random() * 2000
|
|
};
|
|
}
|
|
|
|
for (var i = 0; i < NUM; i++) bars.push(makeBar(true));
|
|
|
|
function draw() {
|
|
ctx.clearRect(0, 0, W, H);
|
|
|
|
for (var i = 0; i < NUM; i++) {
|
|
var b = bars[i];
|
|
b.x += Math.cos(b.angle) * b.speed;
|
|
b.y += Math.sin(b.angle) * b.speed;
|
|
b.life++;
|
|
|
|
if (b.x > W + b.len * 2 || b.life > b.maxLife) {
|
|
bars[i] = makeBar(false);
|
|
b = bars[i];
|
|
}
|
|
|
|
var lp = b.life / b.maxLife;
|
|
var fade = lp < 0.15 ? lp / 0.15 :
|
|
lp > 0.7 ? (1 - lp) / 0.3 : 1;
|
|
var a = b.alpha * Math.max(0, fade);
|
|
|
|
var cos = Math.cos(b.angle);
|
|
var sin = Math.sin(b.angle);
|
|
var px = -sin * b.thickness * 0.5;
|
|
var py = cos * b.thickness * 0.5;
|
|
|
|
var x0 = b.x;
|
|
var y0 = b.y;
|
|
var x1 = b.x + cos * b.len;
|
|
var y1 = b.y + sin * b.len;
|
|
|
|
var grad = ctx.createLinearGradient(x0, y0, x1, y1);
|
|
var cr = b.color.r, cg = b.color.g, cb = b.color.b;
|
|
grad.addColorStop(0, 'rgba(' + cr + ',' + cg + ',' + cb + ',0)');
|
|
grad.addColorStop(0.2, 'rgba(' + cr + ',' + cg + ',' + cb + ',' + a + ')');
|
|
grad.addColorStop(0.8, 'rgba(' + cr + ',' + cg + ',' + cb + ',' + a + ')');
|
|
grad.addColorStop(1, 'rgba(' + cr + ',' + cg + ',' + cb + ',0)');
|
|
|
|
ctx.beginPath();
|
|
ctx.moveTo(x0 + px, y0 + py);
|
|
ctx.lineTo(x1 + px, y1 + py);
|
|
ctx.lineTo(x1 - px, y1 - py);
|
|
ctx.lineTo(x0 - px, y0 - py);
|
|
ctx.closePath();
|
|
ctx.fillStyle = grad;
|
|
ctx.fill();
|
|
}
|
|
requestAnimationFrame(draw);
|
|
}
|
|
requestAnimationFrame(draw);
|
|
})();
|