Radial Share

Features

• Central circular share FAB that fans four social spokes out on open — Instagram, LinkedIn, Threads, and YouTube using Tabler Icons (inline SVGs, 24x24, stroke-width 2)
• Spokes sweep to four cardinal points along a clockwise arc — a per-item rotation plus a counter-rotated translateX on the spoke keeps every glyph upright through the springy overshoot flight
• Staggered per-spoke transition-delay cascades items outward on open and retracts them in reverse order on close, with a faster ease-in exit curve
• A hairline accent ring scales in to connect the open spokes and a soft radial halo glows behind the fan, both fading out on close
• FAB icon morphs between the share glyph and a close glyph with a rotate-and-scale cross-fade; the FAB lifts on hover, compresses on press, and lights up in the accent with a tinted elevation shadow while open
• Unified accent hover on every spoke: the fill takes --primary with a subtle sheen gradient and the glyph takes the derived on-primary color, so legibility retones across design systems
• Hover/focus tooltips label each spoke (Instagram, LinkedIn, Threads, YouTube) in an inverse --text/--bg pill
• Spokes are visibility: hidden and non-tabbable while closed; Escape closes and returns focus to the FAB
• All colors, shadows, and motion driven by CSS custom properties for easy theming, with dark-tuned elevation swapped in by body.dark

Accessibility

ARIA expanded

FAB is a <button aria-expanded aria-controls="rsh-menu" aria-label="Share"> toggled on open

Focus management

Escape closes the dial and returns focus to the FAB

Tab order

Spokes are visibility: hidden and non-tabbable while closed

Social links

Real <a> with target="_blank" and rel="noopener noreferrer" and aria-label

Focus indicators

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

Reduced motion

prefers-reduced-motion: reduce opens the dial instantly, still functional

Customise it with AI

Open Radial Share in Atheros AI Builder, pick a design system and ask the AI assistant to change the layout, copy or behaviour — the social 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.