motion-anything/recipes/web/star-border/preview.html at main · nexu-io/motion-anything · GitHub

1
2
3
<!doctype html><html lang="en"><head><meta charset="utf-8"/><meta name="viewport" content="width=device-width,initial-scale=1"/><title>star-border · recipe</title><link rel="stylesheet" href="star-border.css"/>
<style>:root{color-scheme:dark}body{margin:0;min-height:100vh;display:grid;place-items:center;gap:22px;text-align:center;font-family:ui-sans-serif,system-ui,sans-serif;background:radial-gradient(120% 120% at 50% 0%,#1b1c24,#0b0b12);color:#e7e8ee}.badge{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:#8b7cf6}.hint{font-size:13px;color:#7c7f8c}</style></head>
<body><div class="badge">motion-anything · ambient</div><button class="star">✦ Get started</button><p class="hint">One CTA · a slow light circles the border · static under reduced-motion.</p></body></html>