Border Beam

Create a border beam card. Build the card as layers: an outer wrapper with padding: 1.5px, border-radius 14px, position: relative, overflow: hidden, and a neutral hairline background; inside it, the content card (page card background, border-radius 12.5px, position: relative so it sits above the beam). The beam: an absolutely positioned element with inset: -60% and a conic-gradient that is transparent for most of the circle and fades into the accent color for the last ~50 degrees (e.g. transparent 0-300deg, 40%-opacity accent at 330deg, full accent at 350deg, transparent at 360deg). Animate it with transform: rotate(360deg), 4s linear infinite. Because only the 1.5px padding ring is visible, the spinning gradient reads as a beam of light traveling around the border. When prefers-reduced-motion is enabled, remove the animation and show a plain border. Build the component, not this demo of it. - Ambient motion that IS the component may loop: a drifting background, a marquee, a spinner while something is genuinely loading. - Do not add any timer, interval, loop or script that performs a person's action by itself. No auto-hover, no auto-click, no cycling through states, no pretend submitting, no replaying the interaction on a schedule. - Every state that answers a person waits for a real event from that person. - Placeholder copy and sample content are welcome. Simulated behaviour is not.