Microstock Killer

0.00 / 5.00 s Loop

Current frame Download at 4000 px Transparent

Animation Code

function draw(ctx, time, width, height) {
  const DURATION = 5;
  const t = ((time % DURATION) + DURATION) % DURATION;

const TAU = Math.PI * 2;
  const clamp = (v, a = 0, b = 1) => Math.min(b, Math.max(a, v));
  const lerp = (a, b, k) => a + (b - a) * k;
  const seg = (s, e) => clamp((t - s) / (e - s));
  const easeOutCubic = (x) => 1 - Math.pow(1 - x, 3);
  const easeInOutCubic = (x) => (x < 0.5 ? 4 * x * x * x : 1 - Math.pow(-2 * x + 2, 3) / 2);
  const easeInOutSine = (x) => -(Math.cos(Math.PI * x) - 1) / 2;
  const easeOutBack = (x) => {
    const c1 = 1.70158;
    const c3 = c1 + 1;
    return 1 + c3 * Math.pow(x - 1, 3) + c1 * Math.pow(x - 1, 2);
  };

ctx.save();
  ctx.globalAlpha = 1;
  ctx.fillStyle = "#00B140";
  ctx.fillRect(0, 0, width, height);
  ctx.restore();

const unit = Math.min(width / 16, height / 9);
  const cx = width / 2;
  const cy = height / 2;
  const R = unit * 3.5;

const C = {
    rimDark: "#1F2A44",
    rimMid: "#2E3F66",
    gold: "#E0A030",
    goldLight: "#F5C75A",
    face: "#F7F4EC",
    faceShade: "#E8E2D3",
    tickMinor: "#8A97B5",
    hand: "#1F2A44",
    handInner: "#5A6FA0",
    accent: "#E8505B"
  };

const pIntro = easeOutBack(seg(0, 0.9));
  const aIntro = easeOutCubic(seg(0, 0.5));
  const pOut = easeInOutCubic(seg(4.4, 5.0));
  const alpha = aIntro * (1 - pOut);
  const scaleAll = Math.max(0.001, pIntro) * (1 - pOut * 0.06);

const floatY = Math.sin(t * 1.4) * unit * 0.035;
  const sway = Math.sin(t * 1.1) * 0.006;

ctx.save();
  ctx.globalAlpha = alpha;
  ctx.translate(cx, cy + floatY);
  ctx.rotate(sway);
  ctx.scale(scaleAll, scaleAll);

ctx.fillStyle = C.rimDark;
  ctx.beginPath();
  ctx.arc(0, 0, R, 0, TAU);
  ctx.fill();

ctx.save();
  ctx.beginPath();
  ctx.arc(0, 0, R, 0, TAU);
  ctx.clip();
  ctx.fillStyle = C.rimMid;
  ctx.beginPath();
  ctx.arc(-R * 0.05, -R * 0.05, R, 0, TAU);
  ctx.fill();
  ctx.restore();

ctx.strokeStyle = C.gold;
  ctx.lineWidth = R * 0.022;
  ctx.beginPath();
  ctx.arc(0, 0, R * 0.935, 0, TAU);
  ctx.stroke();

ctx.fillStyle = C.face;
  ctx.beginPath();
  ctx.arc(0, 0, R * 0.9, 0, TAU);
  ctx.fill();

ctx.save();
  ctx.beginPath();
  ctx.arc(0, 0, R * 0.9, 0, TAU);
  ctx.clip();
  ctx.fillStyle = C.faceShade;
  ctx.beginPath();
  ctx.arc(-R * 0.08, -R * 0.08, R * 0.92, 0, TAU);
  ctx.arc(0, 0, R * 1.2, 0, TAU, true);
  ctx.fill();
  ctx.restore();

ctx.strokeStyle = "rgba(31, 42, 68, 0.12)";
  ctx.lineWidth = R * 0.008;
  ctx.beginPath();
  ctx.arc(0, 0, R * 0.62, 0, TAU);
  ctx.stroke();

ctx.lineCap = "round";
  for (let i = 0; i < 60; i++) {
    const ang = (i / 60) * TAU;
    const isHour = i % 5 === 0;
    const isQuarter = i % 15 === 0;
    const start = 0.7 + i * 0.014;
    const p = easeOutCubic(seg(start, start + 0.45));
    if (p <= 0.001) continue;

const outer = R * 0.82;
    const len = (isQuarter ? R * 0.13 : isHour ? R * 0.1 : R * 0.035) * p;
    ctx.strokeStyle = isQuarter ? C.gold : isHour ? C.rimDark : C.tickMinor;
    ctx.lineWidth = isQuarter ? R * 0.036 : isHour ? R * 0.024 : R * 0.01;

const s = Math.sin(ang);
    const c = Math.cos(ang);
    ctx.beginPath();
    ctx.moveTo(s * outer, -c * outer);
    ctx.lineTo(s * (outer - len), -c * (outer - len));
    ctx.stroke();
  }

function hand(angle, len, tail, w, color, innerColor) {
    ctx.save();
    ctx.rotate(angle);
    ctx.lineCap = "round";
    ctx.strokeStyle = color;
    ctx.lineWidth = w;
    ctx.beginPath();
    ctx.moveTo(0, tail);
    ctx.lineTo(0, -len);
    ctx.stroke();
    if (innerColor) {
      ctx.strokeStyle = innerColor;
      ctx.lineWidth = w * 0.32;
      ctx.beginPath();
      ctx.moveTo(0, -len * 0.14);
      ctx.lineTo(0, -len * 0.86);
      ctx.stroke();
    }
    ctx.restore();
  }

const hourTarget = (10 + 10 / 60) / 12 * TAU;
  const minTarget = (10 / 60) * TAU;
  const sweep = easeInOutCubic(seg(1.2, 3.2));
  const hourAngle = lerp(hourTarget - 0.9, hourTarget, sweep) + t * 0.004 + Math.sin(t * 1.5) * 0.004;
  const minAngle = lerp(minTarget - 2.6, minTarget, sweep) + t * 0.012 + Math.sin(t * 1.7 + 1) * 0.004;
  const secAngle = easeInOutSine(seg(1.3, 4.4)) * TAU;

const pHands = easeOutCubic(seg(1.0, 1.6));

if (pHands > 0.001) {
    hand(hourAngle, R * 0.48 * pHands, R * 0.08, R * 0.05, C.hand, C.handInner);
    hand(minAngle, R * 0.7 * pHands, R * 0.1, R * 0.036, C.hand, C.handInner);

hand(secAngle, R * 0.76 * pHands, R * 0.2, R * 0.014, C.accent, null);
    ctx.save();
    ctx.rotate(secAngle);
    ctx.fillStyle = C.accent;
    ctx.beginPath();
    ctx.arc(0, R * 0.2, R * 0.03, 0, TAU);
    ctx.fill();
    ctx.restore();
  }

const pCap = easeOutBack(seg(0.9, 1.4));
  const capS = Math.max(0.001, pCap);
  ctx.fillStyle = C.rimDark;
  ctx.beginPath();
  ctx.arc(0, 0, R * 0.058 * capS, 0, TAU);
  ctx.fill();
  ctx.fillStyle = C.accent;
  ctx.beginPath();
  ctx.arc(0, 0, R * 0.036 * capS, 0, TAU);
  ctx.fill();
  ctx.fillStyle = C.face;
  ctx.beginPath();
  ctx.arc(0, 0, R * 0.012 * capS, 0, TAU);
  ctx.fill();

const pShine = seg(3.0, 4.1);
  if (pShine > 0 && pShine < 1) {
    const env = Math.sin(Math.PI * pShine);
    const gx = lerp(-R * 1.4, R * 1.4, easeInOutSine(pShine));
    ctx.save();
    ctx.beginPath();
    ctx.arc(0, 0, R * 0.9, 0, TAU);
    ctx.clip();
    ctx.rotate(-0.55);
    ctx.globalAlpha = alpha * 0.2 * env;
    ctx.fillStyle = "#FFFFFF";
    ctx.fillRect(gx - R * 0.14, -R * 1.2, R * 0.18, R * 2.4);
    ctx.fillRect(gx + R * 0.12, -R * 1.2, R * 0.05, R * 2.4);
    ctx.restore();
  }

ctx.save();
  ctx.globalAlpha = alpha * 0.35;
  ctx.strokeStyle = C.goldLight;
  ctx.lineWidth = R * 0.012;
  ctx.lineCap = "round";
  ctx.beginPath();
  ctx.arc(0, 0, R * 0.935, Math.PI * 1.12, Math.PI * 1.45);
  ctx.stroke();
  ctx.restore();

ctx.restore();
}

Edit Video

Trim range

Start

End

Playback speed

1.00×

Applies to preview and export. 2× = double playback speed, so output duration is halved.

Colors

Hue0°

Saturation100%

Protect green screen color when Hue/Saturation is shifted

Click a swatch to override it. Hue/Saturation only apply to colors that are not manually overridden.

Transform

Object 100%

Text 100%

X

Y

Text size applies to fillText only. Drag the preview to move, double-click to recenter.

Outline

Thickness100%

Scales every outline and text stroke. 0% removes outlines.

Microstock Killer

Animation Code

Edit Video

Auto-Lint Analyzer

Export metadata

Semua event

PROMPT SETTINGS

BULK PROMPT

GEMINI AI