FAB Expand

Create an expanding floating action button (FAB). An accent-colored circular FAB (48px, plus icon, soft colored shadow) pinned to the bottom-right corner. Clicking it fans out a vertical stack of quick actions above it: each action is a small ink circle button (icon) paired with a monospace label pill floating to its left. Choreography: the plus icon rotates 45deg into an × with a spring (stiffness 420, damping 24). The actions pop in bottom-to-top with a cascade: each from 50% scale and 10px down, spring stiffness 480 damping 26, 0.06s stagger, so the stack builds away from the thumb. Closing reverses the cascade top-to-bottom, faster (0.12s each). Hovering an action scales it to 110%; the FAB itself lifts to 106% on hover and squashes to 92% on press. Keep the actions absolutely positioned relative to the FAB (bottom offset = FAB height + gap + index × row height) so the layout never reflows. Close on outside click and Escape. Accessibility: the FAB uses aria-expanded and swaps its label between 'Open actions' / 'Close actions'; every action button has an aria-label matching its pill text. If prefers-reduced-motion is set, show and hide the stack instantly and skip the icon rotation. Build the component, not this demo of it. - Ambient motion that IS the component may loop: a drifting background, a marquee, a spinner while something is genuinely loading. - Do not add any timer, interval, loop or script that performs a person's action by itself. No auto-hover, no auto-click, no cycling through states, no pretend submitting, no replaying the interaction on a schedule. - Every state that answers a person waits for a real event from that person. - Placeholder copy and sample content are welcome. Simulated behaviour is not.