feat: cleanup flow example diagram

Author: mvriu5

src/components/nodes/NodeDisplay.tsx

@@ -3,7 +3,7 @@
 import { StableBadge } from "@/components/ui/StableBadge"
 import { Card, Flex, Text } from "@code0-tech/pictor"
 import { IconNote, IconVariable } from "@tabler/icons-react"
-import type { ReactNode } from "react"
+import type { CSSProperties, ReactNode } from "react"
 
 export type NodeSegmentType = "text" | "literal" | "reference" | "node"
 export type NodeAccent = "brand" | "yellow" | "aqua" | "blue" | "pink" | "lime" | "magenta"
@@ -78,9 +78,21 @@ function NodeMessage({ segments }: { segments: NodeSegment[] }) {
     })
 }
 
-export function NodeDisplay({ node }: { node: NodeItem }) {
+export function NodeDisplay({ node, animatedOutline = false }: { node: NodeItem; animatedOutline?: boolean }) {
     return (
-        <Card paddingSize="xs" py="0.35" borderColor="info" color="primary" outline={node.outline}>
+        <Card
+            paddingSize="xs"
+            py="0.35"
+            borderColor="info"
+            color="primary"
+            outline={node.outline}
+            className={
+                animatedOutline && node.outline
+                    ? "after:pointer-events-none after:absolute after:-inset-[calc(var(--padding)/3)] after:rounded-[calc(1rem+var(--padding)/3)] after:border after:border-[var(--node-accent-color)] after:opacity-[var(--node-accent-opacity,0)]"
+                    : undefined
+            }
+            style={{ "--node-accent-color": ICON_COLOR_MAP[node.color] } as CSSProperties}
+        >
             <Flex align="center" style={{ gap: "0.7rem" }}>
                 <span className="flex size-4 shrink-0 items-center justify-center [&>svg]:size-4" style={{ color: ICON_COLOR_MAP[node.color] }}>
                     {node.icon ?? <IconNote size={16} />}

src/components/sections/client/FlowExampleDiagram.tsx

@@ -77,9 +77,9 @@ export function FlowExampleDiagram({ trigger, items }: { trigger: FlowDiagramNod
                                     className="relative isolate rounded-2xl"
                                     animate={
                                         reducedMotion
-                                            ? { scale: 1 }
+                                            ? { "--node-accent-opacity": 0.45 }
                                             : {
-                                                  scale: [1, 1, 1.012, 1, 1, 1, 1],
+                                                  "--node-accent-opacity": [0, 0, 0.8, 0.45, 0.45, 0, 0],
                                               }
                                     }
                                     transition={{
@@ -89,26 +89,6 @@ export function FlowExampleDiagram({ trigger, items }: { trigger: FlowDiagramNod
                                         times: [0, arrivalTime, arrivalPeakTime, arrivalSettleTime, resetStartTime, resetEndTime, 1],
                                     }}
                                 >
-                                    <motion.div
-                                        aria-hidden="true"
-                                        className="pointer-events-none absolute inset-0 z-0 rounded-[inherit]"
-                                        style={{
-                                            boxShadow: `0 0 0 1px color-mix(in srgb, ${getNodeAccentColor(node.node.color)} 24%, transparent), 0 0 14px color-mix(in srgb, ${getNodeAccentColor(node.node.color)} 22%, transparent)`,
-                                        }}
-                                        animate={
-                                            reducedMotion
-                                                ? { opacity: 0.45 }
-                                                : {
-                                                      opacity: [0, 0, 0.75, 0.45, 0.45, 0, 0],
-                                                  }
-                                        }
-                                        transition={{
-                                            duration: reducedMotion ? 0 : cycleDuration,
-                                            repeat: reducedMotion ? 0 : Infinity,
-                                            ease: "linear",
-                                            times: [0, arrivalTime, arrivalPeakTime, arrivalSettleTime, resetStartTime, resetEndTime, 1],
-                                        }}
-                                    />
                                     <motion.div
                                         aria-hidden="true"
                                         className="pointer-events-none absolute -inset-2 z-0 rounded-3xl blur-xl"
@@ -117,7 +97,7 @@ export function FlowExampleDiagram({ trigger, items }: { trigger: FlowDiagramNod
                                             reducedMotion
                                                 ? { opacity: 0.08 }
                                                 : {
-                                                      opacity: [0, 0, 0.14, 0.08, 0.08, 0, 0],
+                                                      opacity: [0, 0, 0.1, 0.05, 0.05, 0, 0],
                                                   }
                                         }
                                         transition={{
@@ -128,7 +108,7 @@ export function FlowExampleDiagram({ trigger, items }: { trigger: FlowDiagramNod
                                         }}
                                     />
                                     <div className="relative z-10">
-                                        <NodeDisplay node={node.node} />
+                                        <NodeDisplay node={node.node} animatedOutline />
                                     </div>
                                 </motion.div>
                             )}