Optimize demo GIF with flat colors

Reduced from 8.7MB to 380KB by removing gradients and effects.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

Author: nerveband

assets/demo.gif

@@ -86,27 +86,13 @@ export const BeeperCliDemo: React.FC = () => {
     { extrapolateLeft: "clamp", extrapolateRight: "clamp" }
   );
 
-  // Animated gradient angle
-  const gradientAngle = interpolate(frame, [0, durationInFrames], [135, 225]);
-
   return (
     <AbsoluteFill
       style={{
-        background: `
-          radial-gradient(ellipse at 30% 20%, ${COLORS.purple}30 0%, transparent 50%),
-          radial-gradient(ellipse at 70% 80%, ${COLORS.cyan}25 0%, transparent 40%),
-          linear-gradient(${gradientAngle}deg,
-            ${COLORS.gradientStart} 0%,
-            ${COLORS.gradientEnd} 100%
-          )
-        `,
+        background: COLORS.gradientStart,
         fontFamily: FONT_FAMILY,
       }}
     >
-      {/* Floating orbs for visual effect */}
-      <FloatingOrb x={15} y={20} size={300} color={COLORS.purple} opacity={0.15} speed={0.015} frame={frame} />
-      <FloatingOrb x={80} y={70} size={250} color={COLORS.cyan} opacity={0.12} speed={0.02} frame={frame} />
-      <FloatingOrb x={50} y={85} size={200} color={COLORS.yellow} opacity={0.08} speed={0.025} frame={frame} />
 
       {/* Title */}
       <div
@@ -126,7 +112,6 @@ export const BeeperCliDemo: React.FC = () => {
             color: COLORS.white,
             margin: 0,
             letterSpacing: "-0.02em",
-            textShadow: "0 2px 20px rgba(0, 0, 0, 0.3)",
           }}
         >
           Beeper API CLI
@@ -208,7 +193,6 @@ export const BeeperCliDemo: React.FC = () => {
             letterSpacing: "0.08em",
             textTransform: "uppercase",
             opacity: sequenceOpacity,
-            textShadow: "0 2px 10px rgba(0, 0, 0, 0.3)",
           }}
         >
           {currentSequence.description}
@@ -237,7 +221,7 @@ export const BeeperCliDemo: React.FC = () => {
                   opacity: isActive ? 1 : 0.4,
                   transform: `scale(${dotScale})`,
                   transition: "width 0.3s ease",
-                  boxShadow: isActive ? `0 0 20px ${COLORS.cyan}` : "none",
+                  boxShadow: "none",
                 }}
               />
             );
@@ -248,48 +232,6 @@ export const BeeperCliDemo: React.FC = () => {
   );
 };
 
-// Floating orb component
-interface FloatingOrbProps {
-  x: number;
-  y: number;
-  size: number;
-  color: string;
-  opacity: number;
-  speed: number;
-  frame: number;
-}
-
-const FloatingOrb: React.FC<FloatingOrbProps> = ({
-  x,
-  y,
-  size,
-  color,
-  opacity,
-  speed,
-  frame,
-}) => {
-  const offsetX = Math.sin(frame * speed) * 20;
-  const offsetY = Math.cos(frame * speed * 0.7) * 15;
-
-  return (
-    <div
-      style={{
-        position: "absolute",
-        left: `${x}%`,
-        top: `${y}%`,
-        width: size,
-        height: size,
-        borderRadius: "50%",
-        background: `radial-gradient(circle at 30% 30%, ${color}, transparent)`,
-        opacity,
-        transform: `translate(${offsetX}px, ${offsetY}px)`,
-        filter: "blur(60px)",
-        pointerEvents: "none",
-      }}
-    />
-  );
-};
-
 // Blinking cursor
 interface CursorProps {
   visible: boolean;

remotion-demo/src/BeeperCliDemo.tsx

@@ -1,72 +1,28 @@
 import React from "react";
-import { useCurrentFrame, interpolate } from "remotion";
 import { FONT_FAMILY } from "../fonts";
 
 interface TerminalWindowProps {
   children: React.ReactNode;
 }
 
 export const TerminalWindow: React.FC<TerminalWindowProps> = ({ children }) => {
-  const frame = useCurrentFrame();
-
-  // Subtle floating animation
-  const floatY = interpolate(Math.sin(frame / 40), [-1, 1], [-4, 4]);
-  const floatRotate = interpolate(Math.sin(frame / 50), [-1, 1], [-0.3, 0.3]);
-
   return (
     <div
       style={{
-        transform: `translateY(${floatY}px) rotate(${floatRotate}deg)`,
-        borderRadius: 20,
+        borderRadius: 16,
         overflow: "hidden",
-        boxShadow: `
-          0 0 0 1px rgba(255, 255, 255, 0.18),
-          0 0 0 2px rgba(255, 255, 255, 0.05),
-          0 4px 12px rgba(0, 0, 0, 0.15),
-          0 16px 48px rgba(0, 0, 0, 0.2),
-          0 32px 80px rgba(0, 0, 0, 0.15),
-          inset 0 1px 1px rgba(255, 255, 255, 0.15),
-          inset 0 -1px 1px rgba(0, 0, 0, 0.1)
-        `,
-        background: `
-          linear-gradient(165deg,
-            rgba(20, 25, 45, 0.95) 0%,
-            rgba(15, 20, 40, 0.98) 30%,
-            rgba(10, 15, 35, 0.98) 70%,
-            rgba(8, 12, 30, 0.95) 100%
-          )
-        `,
-        backdropFilter: "blur(50px) saturate(180%)",
-        WebkitBackdropFilter: "blur(50px) saturate(180%)",
+        boxShadow: "0 8px 32px rgba(0, 0, 0, 0.3)",
+        background: "#1a1a2e",
         position: "relative",
       }}
     >
-      {/* Glass reflection */}
-      <div
-        style={{
-          position: "absolute",
-          top: 0,
-          left: 0,
-          right: 0,
-          height: "50%",
-          background: "linear-gradient(180deg, rgba(255,255,255,0.04) 0%, transparent 100%)",
-          borderRadius: "20px 20px 0 0",
-          pointerEvents: "none",
-        }}
-      />
 
       {/* Title bar */}
       <div
         style={{
-          height: 52,
-          background: `
-            linear-gradient(180deg,
-              rgba(40, 50, 80, 0.95) 0%,
-              rgba(30, 40, 70, 0.95) 50%,
-              rgba(25, 35, 65, 0.95) 100%
-            )
-          `,
-          borderBottom: "1px solid rgba(255, 255, 255, 0.08)",
+          height: 48,
+          background: "#16162a",
+          borderBottom: "1px solid #2a2a4a",
           display: "flex",
           alignItems: "center",
           padding: "0 20px",
@@ -128,30 +84,12 @@ interface TrafficLightProps {
 const TrafficLight: React.FC<TrafficLightProps> = ({ color }) => (
   <div
     style={{
-      width: 13,
-      height: 13,
+      width: 12,
+      height: 12,
       borderRadius: "50%",
       backgroundColor: color,
-      boxShadow: `
-        inset 0 1px 0 rgba(255, 255, 255, 0.4),
-        inset 0 -1px 2px rgba(0, 0, 0, 0.25),
-        0 1px 2px rgba(0, 0, 0, 0.2)
-      `,
-      position: "relative",
     }}
-  >
-    <div
-      style={{
-        position: "absolute",
-        top: 2,
-        left: 3,
-        width: 5,
-        height: 3,
-        borderRadius: "50%",
-        background: "linear-gradient(180deg, rgba(255,255,255,0.5) 0%, transparent 100%)",
-      }}
-    />
-  </div>
+  />
 );
 
 interface WindowButtonProps {