Edge Flow Card

Two luminous color streams travel around card edges on hover.

"use client";

export default function EdgeFlowCard() {
  const config = {
    colorA: "#38bdf8",
    colorB: "#f7c76b",
    bgColor: "#101827",
    textColor: "#f8fafc",
    radius: 22,
    borderWidth: 1,
    speed: 3.6,
    glow: 18,
    title: "Edge Flow",
    subtitle: "Hover the card"
  };

return (
    <div className="edge-flow-card" style={{ borderRadius: config.radius, color: config.textColor, padding: config.borderWidth }}>
      <style>{`
        @keyframes edge-flow-spin {
          from { transform: translate(-50%, -50%) rotate(0deg); }
          to { transform: translate(-50%, -50%) rotate(360deg); }
        }
        .edge-flow-card {
          position: relative;
          overflow: hidden;
          width: min(520px, 90vw);
          height: 320px;
        }
        .edge-flow-card::before {
          content: "";
          position: absolute;
          left: 50%;
          top: 50%;
          width: 165%;
          aspect-ratio: 1;
          opacity: 0;
          transform: translate(-50%, -50%);
          transition: opacity 300ms ease;
          animation: edge-flow-spin ${config.speed}s linear infinite;
          background: conic-gradient(from 0deg, ${config.colorA} 0deg, ${config.colorA} 10deg, color-mix(in srgb, ${config.colorA} 45%, transparent) 24deg, transparent 52deg, transparent 150deg, color-mix(in srgb, ${config.colorB} 45%, transparent) 170deg, ${config.colorB} 180deg, ${config.colorB} 190deg, color-mix(in srgb, ${config.colorB} 45%, transparent) 204deg, transparent 232deg, transparent 330deg, color-mix(in srgb, ${config.colorA} 45%, transparent) 350deg, ${config.colorA} 360deg);
          filter: blur(${Math.max(0, config.glow * 0.22)}px);
        }
        .edge-flow-card::after {
          content: "";
          position: absolute;
          left: 50%;
          top: 50%;
          width: 165%;
          aspect-ratio: 1;
          opacity: 0;
          transform: translate(-50%, -50%);
          transition: opacity 300ms ease;
          animation: edge-flow-spin ${config.speed}s linear infinite;
          background: conic-gradient(from 0deg, ${config.colorA} 0deg, ${config.colorA} 6deg, transparent 28deg, transparent 172deg, ${config.colorB} 180deg, ${config.colorB} 186deg, transparent 208deg, transparent 352deg, ${config.colorA} 360deg);
        }
        .edge-flow-card:hover::before,
        .edge-flow-card:hover::after { opacity: 1; }
        .edge-flow-inner {
          position: relative;
          display: grid;
          place-items: center;
          width: 100%;
          height: 100%;
          overflow: hidden;
          border: 1px solid rgba(255,255,255,0.1);
          border-radius: ${Math.max(0, config.radius - config.borderWidth)}px;
          background: ${config.bgColor};
          text-align: center;
          box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
        }
        .edge-flow-content { position: relative; }
        .edge-flow-kicker { margin: 0; font: 700 12px system-ui; letter-spacing: 0.22em; text-transform: uppercase; opacity: 0.55; }
        .edge-flow-title { margin: 8px 0 0; font: 700 34px system-ui; letter-spacing: -0.03em; }
      `}</style>
      <div className="edge-flow-inner">
        <div className="edge-flow-content">
          <p className="edge-flow-kicker">{config.subtitle}</p>
          <p className="edge-flow-title">{config.title}</p>
        </div>
      </div>
    </div>
  );
}