Bloom Edge

Written for the variant you picked above: Blossom

Build a pill button that grows things round its edge. Props: children, flora (one of three growths), colors {stem, a, b, c}, tone {face, label}, onClick and type. Geometry (pure functions): the outline of a w × h rounded rectangle with radius h/2, walked clockwise — its length, the point at distance s with tangent and outward normal, and the distance nearest to any point. On pointerenter, find the outline distance nearest to where the pointer came in. In an SVG overlay that reaches 30px past the button (pointer-events none, overflow visible), draw two stems from that point, each half the outline long, one each way, running 5px outside the edge with a gentle sine meander of ±1.6px; draw them in with stroke-dashoffset at 520px per second. Along both halves, every 15–17px, place a piece rotated to the outward normal plus a seeded jitter of ±28°, and grow it in (scale 0 → 1.18 → 1 with a springy ease, or an unfurl from −70° for curled pieces) with a delay equal to its distance along the stem at the same 520px/s, so growth follows the stems outward. Use a seeded jitter so every hover looks hand-placed but stays stable. On leave, wilt: every piece shrinks to 20% and turns 40°, the furthest first, and the stems withdraw by animating the dash offset past the end, then the group is removed. A new hover clears any growth still wilting. Keyboard focus grows from the top centre; touch grows on press and wilts after 2.4s. Reduced motion: the finished arrangement fades in and out. The button is a 52px pill in the face colour with the label colour, a 1px lift on hover and a small press, and a focus ring in the stem colour. Selected variant — Blossom (blossom): Cherry blossom: every third piece a five-petal flower (#f29bba petals, #f2c94c centre, on a short stem), the rest leaf shapes (#8db27a); a brown stem #6f5a4a; some flowers release a petal that drifts down and spins on a loop. Ground #fbf3f1, button #3a2430 with #fff3f7 text. 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 the edge blooms from where you came in; leave and it wilts. Keyboard focus blooms it from the top. Motion: Stems draw at 520px/s; pieces spring in, staggered by distance; petals drift down on a 2.2s loop; frost glints. Wilting takes about 0.8s. Reduced motion fades a still arrangement in and out. Accessibility: A real button with its text label; the growth is decorative SVG in an aria-hidden overlay with pointer-events none. Responsive behavior: The button keeps its size; leave about 30px of room around it. Touch: A press grows the edge for 2.4s. 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 the edge blooms from where you came in; leave and it wilts. Keyboard focus blooms it from the top.

Motion

Stems draw at 520px/s; pieces spring in, staggered by distance; petals drift down on a 2.2s loop; frost glints. Wilting takes about 0.8s. Reduced motion fades a still arrangement in and out.

Accessibility

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

Responsive

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

On touch

A press grows the edge for 2.4s.