CoolFace
Apppublic

smart-models/Placebo_AI

sourceHugging Faceupdated 3mo agoView on Hugging Face
0likes
spider-loader.js172 linesDownload Raw Back to static
1function initSpiderLoader() {2    const canvas = document.createElement('canvas');3    const container = document.getElementById('loader-container');4    if (!container) return;5    6    // Ensure canvas is behind the text but visible7    canvas.style.position = 'absolute';8    canvas.style.top = '0';9    canvas.style.left = '0';10    canvas.style.zIndex = '1';11    container.appendChild(canvas);12    13    let w, h;14    const ctx = canvas.getContext("2d");15    const { sin, cos, PI, hypot, min, max } = Math;16 17    function spawn() {18        const pts = many(333, () => {19            return {20                x: rnd(window.innerWidth),21                y: rnd(window.innerHeight),22                len: 0,23                r: 0,24            }25        });26 27        const pts2 = many(9, (i) => {28            return {29                x: cos((i / 9) * PI * 2),30                y: sin((i / 9) * PI * 2),31            }32        });33 34        const seed = rnd(100);35        let tx = rnd(window.innerWidth);36        let ty = rnd(window.innerHeight);37        let x = rnd(window.innerWidth);38        let y = rnd(window.innerHeight);39        const kx = rnd(0.5, 0.5);40        const ky = rnd(0.5, 0.5);41        const walkRadius = pt(rnd(50, 50), rnd(50, 50));42        const r = window.innerWidth / rnd(100, 150);43 44        function paintPt(pt) {45            pts2.forEach((pt2) => {46                if (!pt.len) return;47                drawLine(48                    lerp(x + pt2.x * r, pt.x, pt.len * pt.len),49                    lerp(y + pt2.y * r, pt.y, pt.len * pt.len),50                    x + pt2.x * r,51                    y + pt2.y * r,52                );53            });54            drawCircle(pt.x, pt.y, pt.r);55        }56 57        return {58            follow(x_coord, y_coord) {59                tx = x_coord;60                ty = y_coord;61            },62 63            tick(t) {64                const selfMoveX = cos(t * kx + seed) * walkRadius.x;65                const selfMoveY = sin(t * ky + seed) * walkRadius.y;66                const fx = tx + selfMoveX;67                const fy = ty + selfMoveY;68 69                x += min(window.innerWidth / 100, (fx - x) / 10);70                y += min(window.innerWidth / 100, (fy - y) / 10);71 72                let i = 0;73                pts.forEach((pt) => {74                    const dx = pt.x - x, dy = pt.y - y;75                    const len = hypot(dx, dy);76                    let r_size = min(2, window.innerWidth / len / 5);77                    const increasing = len < window.innerWidth / 10 && i++ < 8;78                    const dir = increasing ? 0.1 : -0.1;79                    if (increasing) {80                        r_size *= 1.5;81                    }82                    pt.r = r_size;83                    pt.len = max(0, min(pt.len + dir, 1));84                    paintPt(pt);85                });86            },87        }88    }89 90    const spiders = many(2, spawn);91 92    const handlePointerMove = (e) => {93        spiders.forEach((spider) => {94            spider.follow(e.clientX, e.clientY);95        });96    };97 98    function anim(t) {99        if (w !== window.innerWidth) w = canvas.width = window.innerWidth;100        if (h !== window.innerHeight) h = canvas.height = window.innerHeight;101        ctx.fillStyle = "#0a0a0a"; 102        drawCircle(0, 0, w * 10);103        ctx.fillStyle = ctx.strokeStyle = "#10b981"; // Bright Emerald104        t /= 1000;105        spiders.forEach((spider) => spider.tick(t));106        requestAnimationFrame(anim);107    }108 109    function rnd(x_val = 1, dx = 0) {110        return Math.random() * x_val + dx;111    }112 113    function drawCircle(x_pos, y_pos, r_rad) {114        ctx.beginPath();115        ctx.ellipse(x_pos, y_pos, r_rad, r_rad, 0, 0, PI * 2);116        ctx.fill();117    }118 119    function drawLine(x0, y0, x1, y1) {120        ctx.beginPath();121        ctx.moveTo(x0, y0);122        many(100, (i) => {123            i = (i + 1) / 100;124            const x_lerp = lerp(x0, x1, i);125            const y_lerp = lerp(y0, y1, i);126            const k = noise(x_lerp / 5 + x0, y_lerp / 5 + y0) * 2;127            ctx.lineTo(x_lerp + k, y_lerp + k);128        });129        ctx.stroke();130    }131 132    function many(n, f) {133        return [...Array(n)].map((_, i) => f(i));134    }135 136    function lerp(a, b, t) {137        return a + (b - a) * t;138    }139 140    function noise(x_val, y_val, t = 101) {141        const w0 = sin(0.3 * x_val + 1.4 * t + 2.0 + 2.5 * sin(0.4 * y_val + -1.3 * t + 1.0));142        const w1 = sin(0.2 * y_val + 1.5 * t + 2.8 + 2.3 * sin(0.5 * x_val + -1.2 * t + 0.5));143        return w0 + w1;144    }145 146    function pt(x_val, y_val) {147        return { x: x_val, y: y_val };148    }149 150    window.addEventListener("pointermove", handlePointerMove);151    requestAnimationFrame(anim);152}153 154function revealWebsite() {155    const loader = document.getElementById('loader-container');156    const mainContent = document.getElementById('main-content');157    if (loader && mainContent) {158        loader.style.opacity = '0';159        setTimeout(() => {160            loader.style.display = 'none';161            mainContent.style.opacity = '1';162            mainContent.style.pointerEvents = 'all';163        }, 1000);164    }165}166 167document.addEventListener('DOMContentLoaded', () => {168    initSpiderLoader();169    // Force reveal after 6 seconds170    setTimeout(revealWebsite, 6000);171});172