Prism Rim Button

Written for the variant you picked above: Spectrum

Build a dark call-to-action pill with a gradient hairline border (React + CSS, no libraries). Geometry in em: min-width 16.2em, height 4em, padding 0 2em, a 0.1em transparent border, fully rounded, default font-size 20px. Label "Get Started" in Poppins 500 (fallback Inter) at 1.08em in #f5f4f7, then a filled white paper-plane icon (1.15em) 0.75em after it. Layers on one element with background-clip boxes: (1) a soft radial sheen (60% × 120% at 52% 50%) in a warm or cool tint over (2) a dark horizontal gradient interior (edge colour → slightly lighter middle → edge colour), both on padding-box, over (3) the rim gradient on border-box. The rim is a 90° linear-gradient of evenly spaced stops, mirrored back on itself and sized 200% wide so it can scroll without a seam. Hover: the rim gradient flows (background-position to −200% over 3.2s, linear, infinite) and a glow spills off each end (box-shadows −0.6em/+0.6em, 1.8em blur, −0.7em spread, in the first and last rim colours); the plane hops 0.14em up-right with overshoot. Press scales to 0.98. Focus-visible thickens the border to 0.14em and adds a soft white ring. Reduced motion keeps the rim still. Props: rim {stops[], inside[a, b], sheen}, size, icon (or false), plus native button props. Selected variant — Spectrum (spectrum): Rim stops #5fe0d4, #a6e7a2, #ebe36c, #e98f7a, #d85ad6, #ee6f8e (aqua through yellow and coral to magenta and rose); interior #161112 to #1f1819 with a #3a2626 sheen, a warm brown-black. This selection takes precedence over references to other themes or options in the general brief. Implement this selected appearance; do not add a variant picker or alternative appearances unless requested. Implementation requirements: Use React and TypeScript. Keep the component self-contained, with uniquely scoped CSS and no animation libraries. Include required imports, styles and font setup in the result. Interaction: Hover sets the rim's colour flowing and brightens the glow at each end; press scales down slightly. Works as a native button. Motion: Rim flow 3.2s linear loop on hover; end glows ease over 0.5s; the plane hops with a 0.45s overshoot. Accessibility: A native button with its visible label as the name; the icon is aria-hidden. White text on a near-black interior is above 15:1. Focus-visible thickens the rim and adds a ring. Reduced motion stops the flow. Responsive behavior: Sized in em from one font-size; at 20px it is 324px wide and fits a 360px phone. Touch: No hover on touch; the rim stays as a still spectrum and press feedback still shows. Preserve keyboard access, visible focus and reduced-motion behavior. Keep fictional demo data and simulated service calls in a separate usage example; expose callbacks for real actions and recover from rejected requests. Keep usage-example links inside the demo: use local buttons or prevent navigation. Demonstration links must not navigate to Vitrine routes or open other pages; preserve real URL support in the reusable component itself. Verify the result at narrow and wide viewport sizes, with keyboard input and reduced motion enabled.

Notes

Interaction

Hover sets the rim's colour flowing and brightens the glow at each end; press scales down slightly. Works as a native button.

Motion

Rim flow 3.2s linear loop on hover; end glows ease over 0.5s; the plane hops with a 0.45s overshoot.

Accessibility

A native button with its visible label as the name; the icon is aria-hidden. White text on a near-black interior is above 15:1. Focus-visible thickens the rim and adds a ring. Reduced motion stops the flow.

Responsive

Sized in em from one font-size; at 20px it is 324px wide and fits a 360px phone.

On touch

No hover on touch; the rim stays as a still spectrum and press feedback still shows.