Skip to content
Saved0

Online

Online Fidget Spinner: Spin with Mouse, Touch or Keys

Give it a spin. Use your mouse, touch or keyboard, then pause whenever you like.

Format
Online
Version
v1
Size
See details below
Time
See steps
Try the interaction
Fidget spinner: hero from the running application
App Capture · v1

Loading the interaction…

How to play

1. Start when you are ready

The spinner begins paused and muted. Select Start / resume, or use a spin button to begin.

2. Give it a direction

Drag horizontally across the spinner, or select Spin clockwise / Spin counterclockwise. You can reach both buttons with Tab and activate them with Enter or Space.

3. Pause or reduce movement

Use Pause to stop the animation. Reduce motion changes continuous rotation into individual steps. The interaction also pauses when this page loses focus or goes into the background.

4. Reset the position

Choose Reset and confirm to return to the starting position. Cancel leaves the current state alone. Motion and volume preferences are stored locally; audio still needs an explicit action.

If something is not working

The interaction did not load

Use Restart interaction in the error panel. If it still fails, reload this page and retry. Instructions remain readable.

The browser did not enable audio

Continue silently or select Enable sound again. Audio starts only after your action; changing a volume setting does not grant browser audio permission.

Controls, screens & a short demo

Open an image to inspect it at full size. Each caption identifies its source and version.

States at a glance

Fidget spinner: Start / resume moves from paused to playing; Pause stops the round. Reset asks first: confirm clears and pauses, cancel keeps the round.
Illustration · v1Start opens a round. Pause stops it. Reset asks for confirmation: confirm clears the round and pauses; cancel keeps it. Sound starts muted. Your display and sound preferences stay on this device.

On your phone

Fidget spinner: mobile from the running application
App Capture · v1A real 390px viewport capture. The page continues below this first screen; scroll to reach the remaining controls.

Keyboard controls

Fidget spinner: keyboard from the running application
App Capture · v1A capture after a keyboard action. Tab to a control, then use its labelled keyboard action; the focus outline shows the active control.

Reduced motion

Fidget spinner: reduced motion from the running application
App Capture · v1The checked Reduced motion control shows the reduced-motion setting. A still image illustrates the controls; it does not prove animation timing.

Loading and retry

Fidget spinner: actual delayed-module loading message and Retry loading control, captured during an injected test
App Capture · v1The real slow-loading message, captured with a deliberately delayed module. Retry loading reloads the interaction when your connection is ready.

Watch the demonstration

Open the video file

Fidget spinner: silent, original-speed recording of the actual application controls · v1
Read the demonstration description

This silent, original-speed screen recording shows the current interaction controls. Start the round, use the labelled actions, pause, and reset only after confirmation. It does not demonstrate a physical product or play the optional sound effects.

  1. Start when you are ready. The spinner begins paused and muted. Select Start / resume, or use a spin button to begin.
  2. Give it a direction. Drag horizontally across the spinner, or select Spin clockwise / Spin counterclockwise. You can reach both buttons with Tab and activate them with Enter or Space.
  3. Pause or reduce movement. Use Pause to stop the animation. Reduce motion changes continuous rotation into individual steps. The interaction also pauses when this page loses focus or goes into the background.
  4. Reset the position. Choose Reset and confirm to return to the starting position. Cancel leaves the current state alone. Motion and volume preferences are stored locally; audio still needs an explicit action.

Before you begin

  • A visual digital experience; it does not reproduce physical touch.