AquaMotion

by Sharxxy

HTML

<div style="display:flex; flex:1; flex-direction:row;">
  <div id="toolbar">
    <button data-tool="pencil" class="active">✏️</button>
    <button data-tool="eraser">🩹</button>
    <button data-tool="line">➖</button>
    <button data-tool="rect">⬛</button>
    <button data-tool="circle">⭕</button>
    <input type="color" id="colorPicker" value="#000000">
    <input type="range" id="brushSize" min="1" max="50" value="3">
    <button id="undo">↩️</button>
    <button id="redo">↪️</button>
    <button id="zoomIn">+</button>
    <button id="zoomOut">-</button>
    <button id="resetView">🎯</button>
  </div>

  <div id="main">
    <div id="canvasContainer">
      <canvas id="canvas" width="800" height="600"></canvas>
    </div>
    <div id="timeline">
      <div id="layersPanel">
        <h3>Layers</h3>
        <p>Layer 1</p>
        <p>Layer 2</p>
      </div>
      <div id="framesPanel"></div>
    </div>
  </div>
</div>

CSS

body {
    margin:0; font-family:sans-serif; background:#0b1e3d; color:#fff;
    display:flex; flex-direction:column; height:100vh;
  }

  /* Toolbar docked left like Animate */
  #toolbar {
    width:70px; background:#1e3c72; border-right:2px solid #4fc3f7;
    display:flex; flex-direction:column; align-items:center; padding:5px; gap:5px;
  }
  #toolbar button {
    width:50px; height:50px;
    display:flex; align-items:center; justify-content:center;
    background:rgba(255,255,255,0.1); border:none; color:#fff; border-radius:8px;
    cursor:pointer; font-size:20px;
  }
  #toolbar button.active {background:#4fc3f7; color:#000;}
  #toolbar input {width:50px;}

  #main {flex:1; display:flex; overflow:hidden;}
  #canvasContainer {flex:1; display:flex; justify-content:center; align-items:center; background:#ddd; overflow:hidden;}
  canvas {background:#fff; border:1px solid #4fc3f7; cursor:crosshair;}

  #timeline {
    height:160px; background:#0b1e3d; border-top:2px solid #4fc3f7;
    display:flex; overflow:hidden;
  }
  #layersPanel {
    width:120px; border-right:2px solid #4fc3f7; padding:10px;
  }
  #framesPanel {
    flex:1; display:flex; align-items:center; overflow-x:auto; padding:10px;
  }
  .frameItem {
    min-width:60px; height:80px; background:rgba(255,255,255,0.1);
    margin:0 5px; border-radius:5px; display:flex; justify-content:center; align-items:center;
    cursor:pointer; border:1px solid #4fc3f7;
  }
  .frameItem.active {background:#4fc3f7; color:#000;}

JavaScript

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

let currentTool = 'pencil';
let brushColor = '#000000';
let brushSize = 3;
let drawing = false;
let startPos = null;

// Tool buttons
document.querySelectorAll("#toolbar button[data-tool]").forEach(btn=>{
  btn.addEventListener("click",()=>{
    document.querySelectorAll("#toolbar button[data-tool]").forEach(b=>b.classList.remove("active"));
    btn.classList.add("active");
    currentTool = btn.getAttribute("data-tool");
  });
});

document.getElementById("colorPicker").oninput=e=>brushColor=e.target.value;
document.getElementById("brushSize").oninput=e=>brushSize=parseInt(e.target.value);

// Drawing logic
canvas.addEventListener("mousedown",e=>{
  drawing = true;
  startPos = {x: e.offsetX, y: e.offsetY};
  if(currentTool==="pencil"||currentTool==="eraser"){
    ctx.beginPath();
    ctx.moveTo(startPos.x,startPos.y);
  }
});
canvas.addEventListener("mousemove",e=>{
  if(!drawing) return;
  let x=e.offsetX, y=e.offsetY;
  ctx.lineWidth = brushSize;
  ctx.strokeStyle = (currentTool==="eraser")?"#fff":brushColor;
  ctx.fillStyle = brushColor;

  if(currentTool==="pencil"||currentTool==="eraser"){
    ctx.lineTo(x,y);
    ctx.stroke();
  }
});
canvas.addEventListener("mouseup",e=>{
  if(!drawing) return;
  let x=e.offsetX, y=e.offsetY;
  if(currentTool==="line"){
    ctx.beginPath();
    ctx.moveTo(startPos.x,startPos.y);
    ctx.lineTo(x,y);
    ctx.strokeStyle=brushColor;
    ctx.lineWidth=brushSize;
    ctx.stroke();
  }
  if(currentTool==="rect"){
    ctx.fillStyle=brushColor;
    ctx.fillRect(startPos.x,startPos.y,x-startPos.x,y-startPos.y);
  }
  if(currentTool==="circle"){
    let radius=Math.hypot(x-startPos.x,y-startPos.y);
    ctx.beginPath();
    ctx.arc(startPos.x,startPos.y,radius,0,Math.PI*2);
    ctx.fillStyle=brushColor;
    ctx.fill();
  }
  drawing=false;
});

// Pan + Zoom
let scale=1,...