Orbiting Glow Border

Live preview — fully interactive

The prompt

Build a card with an orbiting glow border.

## Structure
- Outer .frame (1.5px padding, radius 20px) whose background is the spinning conic-gradient
- Inner .card (radius 18.5px, background #101018) that masks the gradient into a thin ring

## Animation
- Register @property --a a

Full prompt (596 chars) unlocks after purchase

The code

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style>
  @property --a { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
  * { margin: 0; padding: 0; box-sizing: border-box; }
  body { background: #08080d; min-height: 100vh; display: flex; align-items: center; justify-content: center; font-family:

Complete self-contained HTML unlocks after purchase

About this effect

A dark card framed by a traveling highlight. The border is a rotating conic-gradient masked to a 1.5px ring. Hover doubles the spin and brightens the beam. Works in every modern browser that supports @property.