fix: quiet sparks instead of dashed rings around the automation panel

The pulsing dashed rings around the example workflow read as a second,
broken frame. The panel now sheds a few digits at its left edge like the
other frames on light backgrounds, and the ring motion, which nothing else
used, is removed from BitAura.

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

apps/web/src/components/bits/BitAura.tsx

@@ -4,8 +4,8 @@ import * as React from "react";
 
 type AuraSource = "top" | "right" | "bottom" | "left" | "around";
 type AuraTone = "dark" | "light";
-/** How the energy behaves: `sparks` drift off the edge, `rain` falls onto it, `pulse` sends rings outward. */
-type AuraMotion = "sparks" | "rain" | "pulse";
+/** How the energy behaves: `sparks` drift off the edge, `rain` falls onto it. */
+type AuraMotion = "sparks" | "rain";
 
 interface BitAuraProps {
   /** The edge the energy sits on, or `around` to let it travel round the element. */
@@ -53,8 +53,6 @@ interface Palette {
   core: string;
   digit: string;
   gain: number;
-  /** Opacity of the pulse rings at the edge. */
-  ring: number;
   /** Share of the digit sparks that are kept (1 = all). */
   density: number;
 }
@@ -86,7 +84,6 @@ const LIGHT_PALETTE: Palette = {
   digit: "15, 23, 42",
   // No haze on light backgrounds: coloured light only reads on dark. Ink digits only.
   gain: 0,
-  ring: 0.45,
   density: 0.6,
 };
 
@@ -96,21 +93,16 @@ const DARK_PALETTE: Palette = {
   core: "224, 231, 255",
   digit: "199, 210, 254",
   gain: 1,
-  ring: 0.8,
   density: 1,
 };
 
 const MOTION_DENSITY: Record<AuraMotion, number> = {
   sparks: 0.45,
   rain: 0.3,
-  pulse: 0.2,
 };
 
-const PULSE_RINGS = 3;
-const PULSE_PERIOD_S = 4.2;
 /** How often a drifting digit switches between 0 and 1. */
 const FLIPS_PER_S = 0.9;
-const PULSE_REACH = 56;
 
 const fraction = (value: number) => value - Math.floor(value);
 
@@ -150,12 +142,6 @@ const spotsAt = (
   t: number,
   box: Box,
 ): readonly Spot[] => {
-  if (motion === "pulse") {
-    return [0, 1, 2, 3].map((corner) => ({
-      at: (corner + 0.5) / 4,
-      power: 0.45 + 0.25 * Math.sin(t * 0.8 - corner * 1.57),
-    }));
-  }
   if (source === "around") {
     return [
       { at: fraction(t * 0.03), power: 1 },
@@ -327,26 +313,6 @@ export const BitAura: React.FC<BitAuraProps> = ({
         }
       }
 
-      if (motion === "pulse") {
-        context.setLineDash([3, 7]);
-        context.lineWidth = 1.5;
-        for (let ring = 0; ring < PULSE_RINGS; ring++) {
-          const phase = fraction(clock / PULSE_PERIOD_S + ring / PULSE_RINGS);
-          const grow = phase * PULSE_REACH;
-          context.strokeStyle = `rgba(${palette.core}, ${(1 - phase) ** 2 * palette.ring})`;
-          context.beginPath();
-          context.roundRect(
-            -grow,
-            -grow,
-            box.width + 2 * grow,
-            box.height + 2 * grow,
-            radius + grow,
-          );
-          context.stroke();
-        }
-        context.setLineDash([]);
-      }
-
       context.fillStyle = `rgb(${palette.digit})`;
       context.textAlign = "center";
       context.textBaseline = "middle";

apps/web/src/components/illustrations/AutomationFlow.tsx

@@ -252,7 +252,7 @@ export const AutomationFlow: React.FC = () => {
         {flow.summary}
       </p>
 
-      <BitAura source="around" tone="light" motion="pulse" className="mt-8">
+      <BitAura source="left" tone="light" className="mt-8">
         <div className="overflow-hidden rounded-3xl bg-slate-900">
           <div className="flex items-center justify-between border-b border-slate-800 px-5 py-4 md:px-7">
             <span className={`${MONO} text-slate-400`}>{flow.name}</span>