Update static/script.js

static/script.js

@@ -28,6 +28,15 @@ function renderMeta(meta) {
   mGemini.textContent = `Gemini: ${meta.generated_by.gemini}`;
   mFallback.textContent = `Fallback: ${meta.generated_by.fallback}`;
   mModels.textContent = `Gen: ${meta.model.generation} • Sentiment: ${meta.model.sentiment}`;
+
+  // meta fade-in animation
+  metaBox.style.opacity = "0";
+  metaBox.style.transform = "translateY(10px)";
+  requestAnimationFrame(() => {
+    metaBox.style.transition = "all .6s ease";
+    metaBox.style.opacity = "1";
+    metaBox.style.transform = "translateY(0)";
+  });
 }
 
 function renderPie(percent) {
@@ -44,9 +53,18 @@ function renderPie(percent) {
     plot_bgcolor: 'rgba(0,0,0,0)',
     font: {color: '#eaf2ff'},
     margin: {l: 4, r: 4, t: 0, b: 0},
-    showlegend: false
+    showlegend: false,
+    transition: {duration: 500, easing: "cubic-in-out"}
   };
-  Plotly.newPlot(pieDiv, data, layout, {displayModeBar:false, responsive:true});
+  Plotly.newPlot(pieDiv, data, layout, {displayModeBar:false, responsive:true}).then(() => {
+    pieDiv.style.opacity = "0";
+    pieDiv.style.transform = "scale(0.9)";
+    requestAnimationFrame(() => {
+      pieDiv.style.transition = "all .6s ease";
+      pieDiv.style.opacity = "1";
+      pieDiv.style.transform = "scale(1)";
+    });
+  });
 }
 
 function renderLine(rolling) {
@@ -54,7 +72,8 @@ function renderLine(rolling) {
     x: [...Array(rolling.length).keys()].map(i => i+1),
     y: rolling,
     type: 'scatter',
-    mode: 'lines+markers'
+    mode: 'lines+markers',
+    line: {shape: 'spline', smoothing: 1.3}
   }];
   const layout = {
     paper_bgcolor: 'rgba(0,0,0,0)',
@@ -62,19 +81,30 @@ function renderLine(rolling) {
     font: {color: '#eaf2ff'},
     margin: {l: 30, r: 10, t: 0, b: 24},
     yaxis: {range:[0,1], tickformat: '.0%'},
+    transition: {duration: 600, easing: "cubic-in-out"}
   };
-  Plotly.newPlot(lineDiv, data, layout, {displayModeBar:false, responsive:true});
+  Plotly.newPlot(lineDiv, data, layout, {displayModeBar:false, responsive:true}).then(() => {
+    lineDiv.style.opacity = "0";
+    lineDiv.style.transform = "translateY(20px)";
+    requestAnimationFrame(() => {
+      lineDiv.style.transition = "all .7s ease";
+      lineDiv.style.opacity = "1";
+      lineDiv.style.transform = "translateY(0)";
+    });
+  });
 }
 
 function renderTable(rows) {
   tableDiv.innerHTML = "";
-  rows.forEach(r => {
+  rows.forEach((r, i) => {
     const row = document.createElement("div");
     row.className = "row";
+
     // text
     const c1 = document.createElement("div");
     c1.className = "cell";
     c1.textContent = r.text;
+
     // source chip
     const c2 = document.createElement("div");
     c2.className = "cell";
@@ -82,6 +112,7 @@ function renderTable(rows) {
     chip.className = "chip " + (r.source === "gemini" ? "chip-gemini" : "chip-fallback");
     chip.textContent = r.source === "gemini" ? "Gemini" : "Fallback";
     c2.appendChild(chip);
+
     // sentiment badge
     const c3 = document.createElement("div");
     c3.className = "cell";
@@ -94,6 +125,16 @@ function renderTable(rows) {
     row.appendChild(c1);
     row.appendChild(c2);
     row.appendChild(c3);
+
+    // add animation
+    row.style.opacity = "0";
+    row.style.transform = "translateX(-15px)";
+    setTimeout(() => {
+      row.style.transition = "all .4s ease";
+      row.style.opacity = "1";
+      row.style.transform = "translateX(0)";
+    }, 100 * i);
+
     tableDiv.appendChild(row);
   });
 }