Starfield Button

Written for the variant you picked above: Night

Build a night-sky pill button that gathers a constellation round its edge. Props: children, palette {star, bright, line, face, label}, count (18), onClick and type. Geometry (pure functions): the outline of a w × h rounded rectangle with radius h/2, walked clockwise, with the point and outward normal at any distance and the distance nearest to a point. The sky: place `count` stars round the outline, unevenly — each slot's position jittered by a seeded random — each pushed 9–24px out along the normal, with a radius of 1.1–2.7px; about a quarter are bright, drawn in the bright colour with a soft halo and a thin four-point spike. Join neighbours round the outline with 0.7px lines, skipping roughly a quarter of the joins so it reads as a figure rather than a fence. On pointerenter, find where the pointer crossed the edge; reveal the stars in order of their distance round the outline from that point (60–580ms), each blinking up to 1.8× and settling, then twinkling forever at its own pace; draw each line in by dash offset after both its stars are lit. The whole constellation then rocks slowly ±5° round the button's centre over 14s. On leave it fades out with a slight blur. Keyboard focus reveals it from the top centre; touch reveals it on press for 2.6s. The button: a 52px pill in the face colour, warmed at the bottom by a radial tint of the bright colour, a hairline rim, a faint dust of six tiny stars on the face, and a soft glow on hover. Pressing sends a shooting star — a short gradient streak — across the face at a slight angle. Everything lives in an aria-hidden SVG overlay with pointer-events none. Reduced motion: the finished constellation fades in, without blinking, twinkling, rocking or shooting stars. Selected variant — Night (night): Deep navy: face #141846 with #f4f1ff label, white stars #f4f1ff, gold bright stars #ffd88a, lilac lines at 50%, on a #080a1c ground. 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: Point at the button and a constellation gathers round it from where you came in; press for a shooting star. Keyboard focus reveals it too. Motion: Stars blink on over about 0.6s, lines draw in after them, everything twinkles and rocks slowly; the shooting star crosses in 520ms. Reduced motion shows a still constellation. Accessibility: A real button with its text label; the sky is decorative SVG in an aria-hidden overlay with pointer-events none. Responsive behavior: The button keeps its size; leave about 32px of room around it. Touch: A press shows the constellation for 2.6s and fires a shooting star. 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

Point at the button and a constellation gathers round it from where you came in; press for a shooting star. Keyboard focus reveals it too.

Motion

Stars blink on over about 0.6s, lines draw in after them, everything twinkles and rocks slowly; the shooting star crosses in 520ms. Reduced motion shows a still constellation.

Accessibility

A real button with its text label; the sky is decorative SVG in an aria-hidden overlay with pointer-events none.

Responsive

The button keeps its size; leave about 32px of room around it.

On touch

A press shows the constellation for 2.6s and fires a shooting star.