Warp Button

Features

• Rotating conic gradient ring that scales in and continuously spins via an @property --bwr-angle angle animation
• Warp-speed streak field — two parallax layers of light-streaks seamlessly scrolling past on a looping background-position animation
• One-shot jump-flash: a blurred light bloom sweeps across once as warp engages
• "Launch" stretch-blurs out and "Ready" materializes in from a compressed state (warp-in text swap)
• Subtle lift as the button engages, without an ambient glow
• Dark/light palette via body.dark class with no flicker
• Respects prefers-reduced-motion: reduce — animations collapse and the streak field is hidden
• Zero JavaScript required for the button effect — pure CSS hover and focus-visible states

Accessibility

Button label

<button> has aria-label="Launch" matching its idle text

Theme toggle role

role="switch" with aria-checked toggled by JS

Keyboard activation

Theme toggle responds to Enter and Space

Focus indicators

:focus-visible with --ring outline on all interactive elements

Hidden decorations

Ring, streak field, and flash spans have aria-hidden="true"

Reduced motion

prefers-reduced-motion: reduce disables all animations

Customise it with AI

Open Warp Button in Atheros AI Builder, pick a design system and ask the AI assistant to change the layout, copy or behaviour — the button is regenerated against your tokens. Take the HTML, CSS, JS and React source with you, or pull it into your repo from Claude Code, Cursor or Codex over MCP.