Spaces:

zxbc2023
/

Toybox

Running

App Files Files Community

zxbc2023 commited on 7 days ago

Commit

2c4bfe0

1 Parent(s): 6cc9688

Add glowing jellyfish deep-sea animation (generated via Unsloth Studio)

Browse files

Files changed (2) hide show

glowing_jellyfish.html +433 -0
manifest.json +8 -0

glowing_jellyfish.html ADDED Viewed

	@@ -0,0 +1,433 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Deep-Sea Jellyfish</title>
+<style>
+  html, body {
+    margin: 0;
+    padding: 0;
+    overflow: hidden;
+    height: 100%;
+    background: #02031a;
+  }
+  canvas {
+    display: block;
+    width: 100vw;
+    height: 100vh;
+  }
+  #title {
+    position: fixed;
+    top: 20px;
+    left: 50%;
+    transform: translateX(-50%);
+    font-family: 'Georgia', serif;
+    color: rgba(180, 220, 255, 0.6);
+    font-size: 18px;
+    letter-spacing: 6px;
+    text-transform: uppercase;
+    pointer-events: none;
+    text-shadow: 0 0 12px rgba(120, 200, 255, 0.8);
+    animation: fadeIn 3s ease;
+  }
+  @keyframes fadeIn {
+    from { opacity: 0; }
+    to { opacity: 1; }
+  }
+</style>
+</head>
+<body>
+<canvas id="sea"></canvas>
+<div id="title">Abyssal Bloom</div>
+<script>
+(() => {
+  const canvas = document.getElementById('sea');
+  const ctx = canvas.getContext('2d');
+  let W, H;
+  function resize() {
+    W = canvas.width = window.innerWidth;
+    H = canvas.height = window.innerHeight;
+  }
+  window.addEventListener('resize', resize);
+  resize();
+  // ---------- Palette of glowing jellyfish colors ----------
+  const PALETTES = [
+    { core:  [255, 120, 200], rim: [255, 190, 240] }, // pink
+    { core:  [130, 220, 255], rim: [210, 245, 255] }, // aqua
+    { core:  [190, 150, 255], rim: [230, 205, 255] }, // violet
+    { core:  [255, 200, 110], rim: [255, 235, 190] }, // gold
+    { core:  [120, 255, 200], rim: [210, 255, 235] }, // mint
+    { core:  [255, 150, 130], rim: [255, 210, 190] }, // coral
+  ];
+  const rand = (a, b) => a + Math.random() * (b - a);
+  const TAU = Math.PI * 2;
+  // ---------- Background gradient (rebuilt on resize) ----------
+  function drawBackground(t) {
+    const g = ctx.createLinearGradient(0, 0, 0, H);
+    // subtle breathing shift in the deep blue
+    const breathe = Math.sin(t * 0.0002) * 0.5 + 0.5;
+    g.addColorStop(0, `rgb(${8 + breathe * 6}, ${20 + breathe * 8}, 60)`);
+    g.addColorStop(0.45, 'rgb(4, 12, 48)');
+    g.addColorStop(1, 'rgb(1, 3, 20)');
+    ctx.fillStyle = g;
+    ctx.fillRect(0, 0, W, H);
+  }
+  // ---------- God rays from the surface ----------
+  class LightRay {
+    constructor() { this.reset(true); }
+    reset(init) {
+      this.x = rand(0, W);
+      this.width = rand(40, 160);
+      this.speed = rand(0.05, 0.15);
+      this.sway = rand(0, TAU);
+      this.alpha = rand(0.02, 0.06);
+      this.y = init ? rand(-H * 0.2, 0) : -H * 0.3;
+    }
+    update(dt) {
+      this.y += this.speed * dt * 0.06;
+      this.sway += 0.0004 * dt;
+      if (this.y > H * 1.2) this.reset(false);
+    }
+    draw(t) {
+      const sway = Math.sin(this.sway) * 80;
+      const grad = ctx.createLinearGradient(0, 0, 0, H * 0.9);
+      const a = this.alpha * (0.7 + 0.3 * Math.sin(t * 0.001 + this.sway));
+      grad.addColorStop(0, `rgba(140, 200, 255, ${a})`);
+      grad.addColorStop(1, 'rgba(140, 200, 255, 0)');
+      ctx.fillStyle = grad;
+      ctx.beginPath();
+      const topW = this.width * 0.35;
+      ctx.moveTo(this.x - topW / 2 + sway * 0.3, this.y);
+      ctx.lineTo(this.x + topW / 2 + sway * 0.3, this.y);
+      ctx.lineTo(this.x + this.width / 2 + sway, this.y + H * 0.9);
+      ctx.lineTo(this.x - this.width / 2 + sway, this.y + H * 0.9);
+      ctx.closePath();
+      ctx.fill();
+    }
+  }
+  // ---------- Drifting plankton / particles ----------
+  class Plankton {
+    constructor() { this.reset(true); }
+    reset(init) {
+      this.x = rand(0, W);
+      this.y = init ? rand(0, H) : H + 10;
+      this.r = rand(0.5, 2.2);
+      this.vy = rand(0.02, 0.12);
+      this.vx = rand(-0.03, 0.03);
+      this.phase = rand(0, TAU);
+      this.hue = rand(180, 220);
+    }
+    update(dt, t) {
+      this.y -= this.vy * dt * 0.06;
+      this.x += (this.vx + Math.sin(t * 0.001 + this.phase) * 0.05) * dt * 0.06;
+      if (this.y < -10) this.reset(false);
+      if (this.x < -10) this.x = W + 10;
+      if (this.x > W + 10) this.x = -10;
+    }
+    draw(t) {
+      const tw = 0.4 + 0.6 * (0.5 + 0.5 * Math.sin(t * 0.002 + this.phase));
+      ctx.fillStyle = `hsla(${this.hue}, 80%, 80%, ${0.25 * tw})`;
+      ctx.beginPath();
+      ctx.arc(this.x, this.y, this.r, 0, TAU);
+      ctx.fill();
+    }
+  }
+  // ---------- Bubbles ----------
+  class Bubble {
+    constructor() { this.reset(true); }
+    reset(init) {
+      this.x = rand(0, W);
+      this.y = init ? rand(0, H) : H + 10;
+      this.r = rand(1.5, 5);
+      this.vy = rand(0.15, 0.5);
+      this.sway = rand(0, TAU);
+    }
+    update(dt) {
+      this.y -= this.vy * dt * 0.06;
+      this.sway += 0.003 * dt;
+      if (this.y < -10) this.reset(false);
+    }
+    draw() {
+      const x = this.x + Math.sin(this.sway) * 8;
+      ctx.strokeStyle = 'rgba(190, 230, 255, 0.35)';
+      ctx.lineWidth = 1;
+      ctx.beginPath();
+      ctx.arc(x, this.y, this.r, 0, TAU);
+      ctx.stroke();
+      ctx.fillStyle = 'rgba(255, 255, 255, 0.5)';
+      ctx.beginPath();
+      ctx.arc(x - this.r * 0.3, this.y - this.r * 0.3, this.r * 0.25, 0, TAU);
+      ctx.fill();
+    }
+  }
+  // ---------- Jellyfish ----------
+  class Jellyfish {
+    constructor() {
+      this.reset(true);
+    }
+    reset(init) {
+      this.palette = PALETTES[Math.floor(Math.random() * PALETTES.length)];
+      this.size = rand(22, 65);
+      this.x = rand(0, W);
+      this.y = init ? rand(-H * 0.3, H * 1.3) : H + this.size * 3;
+      this.baseSpeed = rand(0.15, 0.45);
+      this.drift = rand(-0.08, 0.08);
+      this.phase = rand(0, TAU);
+      this.pulseSpeed = rand(0.0018, 0.0032);
+      this.tentacles = Math.floor(rand(7, 13));
+      this.tentacleLen = this.size * rand(1.6, 2.8);
+      this.wanderSeed = rand(0, 1000);
+      this.glow = rand(0.7, 1.2);
+    }
+    update(dt, t) {
+      // Pulsing motion: jellyfish "swim" upward as the bell contracts
+      this.pulse = 0.5 + 0.5 * Math.sin(t * this.pulseSpeed + this.phase);
+      this.y -= (this.baseSpeed * (0.5 + this.pulse * 0.9)) * dt * 0.06;
+      this.x += (this.drift + Math.sin(t * 0.0006 + this.wanderSeed) * 0.12) * dt * 0.06;
+      // Wrap around
+      if (this.y < -this.size * 4) this.reset(false);
+      if (this.x < -this.size * 3) this.x = W + this.size * 2;
+      if (this.x > W + this.size * 3) this.x = -this.size * 2;
+    }
+    draw(t) {
+      const { core, rim } = this.palette;
+      const s = this.size * (0.85 + this.pulse * 0.25); // bell contracts/expands
+      const squash = 1 - this.pulse * 0.22;             // bell flattens on pulse
+      ctx.save();
+      ctx.translate(this.x, this.y);
+      const tilt = Math.sin(t * 0.0005 + this.wanderSeed) * 0.18;
+      ctx.rotate(tilt);
+      // ---- Outer glow halo ----
+      const halo = ctx.createRadialGradient(0, 0, s * 0.2, 0, 0, s * 2.4);
+      halo.addColorStop(0, `rgba(${core[0]}, ${core[1]}, ${core[2]}, ${0.28 * this.glow * (0.6 + this.pulse * 0.4)})`);
+      halo.addColorStop(1, 'rgba(0,0,0,0)');
+      ctx.fillStyle = halo;
+      ctx.beginPath();
+      ctx.arc(0, 0, s * 2.4, 0, TAU);
+      ctx.fill();
+      // ---- Tentacles (wavy, trailing) ----
+      ctx.globalCompositeOperation = 'lighter';
+      const n = this.tentacles;
+      for (let i = 0; i < n; i++) {
+        const frac = n === 1 ? 0.5 : i / (n - 1);
+        const baseX = (frac - 0.5) * s * 1.5;
+        const len = this.tentacleLen * (0.8 + 0.3 * Math.sin(i * 2.7));
+        const segs = 14;
+        ctx.beginPath();
+        ctx.moveTo(baseX, s * 0.15);
+        let px = baseX, py = s * 0.15;
+        for (let k = 1; k <= segs; k++) {
+          const f = k / segs;
+          const wave = Math.sin(t * 0.002 + this.phase + i * 0.7 + f * 4) * s * 0.18 * f;
+          px = baseX + wave - f * s * 0.15 * Math.sin(i);
+          py = s * 0.15 + f * len;
+          ctx.lineTo(px, py);
+        }
+        const a = 0.35 * (1 - 0.6 * Math.abs(frac - 0.5) * 2) * this.glow;
+        ctx.strokeStyle = `rgba(${core[0]}, ${core[1]}, ${core[2]}, ${a})`;
+        ctx.lineWidth = 1.4 * (1 - 0.4 * Math.abs(frac - 0.5));
+        ctx.stroke();
+      }
+      // ---- Oral arms (thicker, central) ----
+      for (let i = 0; i < 4; i++) {
+        const frac = (i + 0.5) / 4;
+        const baseX = (frac - 0.5) * s * 0.5;
+        const len = this.tentacleLen * 0.65;
+        ctx.beginPath();
+        ctx.moveTo(baseX, s * 0.1);
+        for (let k = 1; k <= 10; k++) {
+          const f = k / 10;
+          const wave = Math.sin(t * 0.0018 + i * 1.9 + f * 5 + this.phase) * s * 0.12 * f;
+          ctx.lineTo(baseX + wave, s * 0.1 + f * len);
+        }
+        ctx.strokeStyle = `rgba(${rim[0]}, ${rim[1]}, ${rim[2]}, ${0.18 * this.glow})`;
+        ctx.lineWidth = 2.6;
+        ctx.stroke();
+      }
+      ctx.globalCompositeOperation = 'source-over';
+      // ---- Bell ----
+      ctx.save();
+      ctx.scale(1, squash);
+      // Bell body with radial glow
+      const bellGrad = ctx.createRadialGradient(0, -s * 0.15, s * 0.1, 0, 0, s);
+      bellGrad.addColorStop(0, `rgba(${rim[0]}, ${rim[1]}, ${rim[2]}, ${0.85 * this.glow})`);
+      bellGrad.addColorStop(0.5, `rgba(${core[0]}, ${core[1]}, ${core[2]}, ${0.5 * this.glow})`);
+      bellGrad.addColorStop(0.85, `rgba(${core[0]}, ${core[1]}, ${core[2]}, ${0.18})`);
+      bellGrad.addColorStop(1, 'rgba(0,0,0,0)');
+      ctx.fillStyle = bellGrad;
+      ctx.beginPath();
+      ctx.arc(0, 0, s, Math.PI, TAU);
+      // Wavy bottom edge of the bell
+      const waves = 6;
+      for (let i = 0; i <= waves; i++) {
+        const wx = (i / waves - 0.5) * 2 * s;
+        const wy = Math.sin(i * Math.PI + t * 0.004 + this.phase) * s * 0.06;
+        ctx.lineTo(wx, wy);
+      }
+      ctx.closePath();
+      ctx.fill();
+      // Inner organs — glowing core
+      ctx.globalCompositeOperation = 'lighter';
+      const coreGrad = ctx.createRadialGradient(0, -s * 0.25, 0, 0, -s * 0.25, s * 0.55);
+      const pulseA = 0.5 + 0.5 * this.pulse;
+      coreGrad.addColorStop(0, `rgba(255,255,255,${0.75 * pulseA * this.glow})`);
+      coreGrad.addColorStop(0.4, `rgba(${rim[0]}, ${rim[1]}, ${rim[2]}, ${0.4 * pulseA * this.glow})`);
+      coreGrad.addColorStop(1, 'rgba(0,0,0,0)');
+      ctx.fillStyle = coreGrad;
+      ctx.beginPath();
+      ctx.arc(0, -s * 0.25, s * 0.55, 0, TAU);
+      ctx.fill();
+      // Four tiny glowing "gonads"
+      for (let i = 0; i < 4; i++) {
+        const gx = (i - 1.5) * s * 0.22;
+        ctx.beginPath();
+        ctx.ellipse(gx, -s * 0.32, s * 0.09, s * 0.14, 0, 0, TAU);
+        ctx.fillStyle = `rgba(255,255,255,${0.3 + 0.4 * pulseA})`;
+        ctx.fill();
+      }
+      ctx.globalCompositeOperation = 'source-over';
+      // Bell rim highlight
+      ctx.strokeStyle = `rgba(${rim[0]}, ${rim[1]}, ${rim[2]}, ${0.5 * this.glow})`;
+      ctx.lineWidth = 1.5;
+      ctx.beginPath();
+      ctx.arc(0, 0, s * 0.98, Math.PI, TAU);
+      ctx.stroke();
+      ctx.restore();
+      ctx.restore();
+    }
+  }
+  // ---------- Seafloor silhouettes ----------
+  class Kelp {
+    constructor(x, h) {
+      this.x = x;
+      this.h = h;
+      this.phase = rand(0, TAU);
+      this.swaySpeed = rand(0.0004, 0.0009);
+      this.width = rand(4, 9);
+    }
+    draw(t) {
+      const baseY = H + 5;
+      ctx.beginPath();
+      ctx.moveTo(this.x, baseY);
+      const segs = 12;
+      for (let k = 1; k <= segs; k++) {
+        const f = k / segs;
+        const sway = Math.sin(t * this.swaySpeed + this.phase + f * 3) * 18 * f;
+        ctx.lineTo(this.x + sway - this.width * (1 - f), baseY - f * this.h);
+      }
+      for (let k = segs; k >= 0; k--) {
+        const f = k / segs;
+        const sway = Math.sin(t * this.swaySpeed + this.phase + f * 3) * 18 * f;
+        ctx.lineTo(this.x + sway + this.width * (1 - f), baseY - f * this.h);
+      }
+      ctx.closePath();
+      ctx.fillStyle = 'rgba(10, 30, 40, 0.85)';
+      ctx.fill();
+    }
+  }
+  // ---------- Build the scene ----------
+  const jellies = [];
+  const plankton = [];
+  const bubbles = [];
+  const rays = [];
+  const kelps = [];
+  function populate() {
+    jellies.length = 0;
+    const count = Math.max(6, Math.floor((W * H) / 120000));
+    for (let i = 0; i < count; i++) jellies.push(new Jellyfish());
+    plankton.length = 0;
+    for (let i = 0; i < 90; i++) plankton.push(new Plankton());
+    bubbles.length = 0;
+    for (let i = 0; i < 25; i++) bubbles.push(new Bubble());
+    rays.length = 0;
+    for (let i = 0; i < 7; i++) rays.push(new LightRay());
+    kelps.length = 0;
+    for (let i = 0; i < Math.floor(W / 90); i++) {
+      kelps.push(new Kelp(rand(0, W), rand(60, 180)));
+    }
+  }
+  populate();
+  window.addEventListener('resize', () => setTimeout(populate, 100));
+  // Mouse interaction: jellies gently drift away from the cursor
+  let mouse = { x: -9999, y: -9999 };
+  window.addEventListener('mousemove', e => { mouse.x = e.clientX; mouse.y = e.clientY; });
+  window.addEventListener('mouseleave', () => { mouse.x = -9999; mouse.y = -9999; });
+  // ---------- Main loop ----------
+  let last = performance.now();
+  function frame(t) {
+    const dt = Math.min(50, t - last);
+    last = t;
+    drawBackground(t);
+    // Rays (behind everything)
+    for (const r of rays) { r.update(dt); r.draw(t); }
+    // Distant plankton
+    ctx.save();
+    for (const p of plankton) { p.update(dt, t); p.draw(t); }
+    ctx.restore();
+    // Kelp
+    for (const k of kelps) k.draw(t);
+    // Bubbles
+    for (const b of bubbles) { b.update(dt); b.draw(); }
+    // Jellyfish — nudge away from cursor
+    for (const j of jellies) {
+      const dx = j.x - mouse.x;
+      const dy = j.y - mouse.y;
+      const dist = Math.hypot(dx, dy);
+      if (dist < 160 && dist > 0.001) {
+        const force = (160 - dist) / 160;
+        j.x += (dx / dist) * force * 2;
+        j.y += (dy / dist) * force * 2;
+      }
+      j.update(dt, t);
+      j.draw(t);
+    }
+    // Vignette for depth
+    const v = ctx.createRadialGradient(W / 2, H / 2, H * 0.35, W / 2, H / 2, H * 0.95);
+    v.addColorStop(0, 'rgba(0,0,0,0)');
+    v.addColorStop(1, 'rgba(0, 2, 12, 0.55)');
+    ctx.fillStyle = v;
+    ctx.fillRect(0, 0, W, H);
+    requestAnimationFrame(frame);
+  }
+  requestAnimationFrame(frame);
+})();
+</script>
+</body>
+</html>

manifest.json CHANGED Viewed

@@ -7,6 +7,14 @@
       "agent": "hermes-agent",
       "prompt": "Create an awesome animation of a nuclear explosion over a city in html canvas. Verify that it looks correct and beautiful in browser.",
       "date": "2026-08-23"
     }
   ]
 }

       "agent": "hermes-agent",
       "prompt": "Create an awesome animation of a nuclear explosion over a city in html canvas. Verify that it looks correct and beautiful in browser.",
       "date": "2026-08-23"
+    },
+    {
+      "file": "glowing_jellyfish.html",
+      "title": "deep-sea scene of glowing jellyfish",
+      "model": "Qwen3.8-27B-UD-IQ4_XS",
+      "agent": "unsloth-studio",
+      "prompt": "Create a colorful animated deep-sea scene of glowing jellyfish in html canvas",
+      "date": "2026-08-24"
     }
   ]
 }