Skip to main content
Stims provides motion comfort controls, reduced-motion support, and sensory-friendly defaults to make audio-reactive visuals accessible across comfort levels.

​
Motion preferences

The motion preference system detects and respects your comfort settings, storing them locally for future sessions.

​
Checking motion preference

The app checks your motion preference on startup: 
// From motion-preferences.ts:38-43
export function getActiveMotionPreference() {
  if (!activePreference) {
    activePreference = readFromStorage();
  }
  return activePreference;
}
Motion is enabled by default. If you prefer calmer visuals, use the Low motion quality preset or disable motion in the system check panel.

​
Setting motion preference

You can update your motion preference from the system check panel:
1

Open the system check

On the homepage, scroll to Check your device and click Open full system check.
2

Toggle low-motion mode

Look for the 🫧 Comfort readiness item. If your system prefers reduced motion, you’ll see:
Low-motion mode: System preference active
Otherwise, you can manually enable it in the performance panel.
3

Preference persists

Your choice is saved to localStorage:
// From motion-preferences.ts:9
const MOTION_PREFERENCE_KEY = 'stims:motion-enabled';
It applies across all toys on this device.

​
Quality presets for comfort

The settings panel includes a Low motion quality preset that reduces particle density and shimmer: 
// From settings-panel.ts:22-28
{
  id: 'low-motion',
  label: 'Low motion',
  description: 'Reduce particle density and shimmer for calmer motion.',
  maxPixelRatio: 1.5,
  renderScale: 0.95,
  particleScale: 0.5,
}

​
Available presets

  • Max pixel ratio: 1.25x
  • Render scale: 0.9x
  • Particle scale: 0.65x
  • Use case: Older GPUs or devices with thermal constraints
  • Max pixel ratio: 1.5x
  • Render scale: 0.95x
  • Particle scale: 0.5x
  • Use case: Calmer visuals with reduced particle density and shimmer
  • Max pixel ratio: 1.25x
  • Render scale: 0.9x
  • Particle scale: 0.75x
  • Use case: 10-foot viewing with lower DPI for steady frame pacing
  • Max pixel ratio: 2x
  • Render scale: 1x
  • Particle scale: 1x
  • Use case: Native look for most laptops and desktops
  • Max pixel ratio: 2.5x
  • Render scale: 1x
  • Particle scale: 1.35x
  • Use case: High-end GPUs; may increase thermal load

​
Reduced-motion detection

The system reads your OS-level motion preference via prefers-reduced-motion: 
@media (prefers-reduced-motion: reduce) {
  /* Disable animations */
}
When detected, the system check panel displays: 
Reduced-motion preference detected. Low-motion preset is recommended.

​
Accessibility features

​
Audio fallback options

All audio-reactive toys support multiple input sources:
  • Microphone: Live input for responsive visuals
  • Demo audio: No permission needed, instant playback
  • YouTube tab capture: Shared audio source from a separate tab
See the Audio setup guide for details.

​
Input flexibility

Toys support multiple input methods:
  • Multi-touch gestures for pinch, rotate, and swipe
  • Touch-action defaults to prevent accidental scrolling
  • Control targets sized for reliable taps (minimum 44×44px)
  • All interactive controls are keyboard-accessible
  • Focus indicators for button and select elements
  • Arrow keys for some toys (e.g., Aurora Painter mood switching)
  • Semantic HTML with ARIA labels
  • Status messages announced via aria-live regions
  • Control panel headings and landmarks

​
Performance panel controls

The performance panel provides granular control over rendering intensity:
1

Pixel ratio cap

Limit resolution on high-DPI displays:
Pixel ratio cap: 1.00x to 3.00x (default: 2.00x)
Lower values reduce GPU load.
2

Particle budget

Scale particle counts:
Particle budget: 40% to 160% (default: 100%)
1.0 keeps default counts; lower values reduce motion intensity.
3

Shader quality

Choose shader complexity:
  • Low (faster): Simplified shaders for older GPUs
  • Balanced: Default quality for most devices
  • High (detailed): Full shader features for high-end GPUs
See the Performance guide for detailed tuning instructions.

​
Sensory-friendly defaults

Stims prioritizes sensory-friendly defaults:
  • All settings exposed in the control panel
  • No hidden keyboard shortcuts required to adjust intensity
  • Persistent settings across toys (stored in localStorage)
  • Demo audio available immediately (no permission gate)
  • Microphone errors surface with recovery guidance
  • YouTube tab capture for shared listening
  • Toys load fast (pooled renderer and audio services)
  • No forced onboarding or first-time tutorials
  • ← Back to library link always visible in top-left
The README includes this guidance:
Motion comfort: the system check and performance panel surface reduced-motion guidance and quality presets so you can dial in lower-intensity visuals.

​
System check readiness items

The system check panel tracks four readiness categories:
SignalDescription
🖥️ GraphicsWebGL/WebGPU availability and fallback guidance
🎙️ MicPermission state, browser support, and demo audio fallback
🧭 MotionDevice orientation API for tilt controls
🫧 ComfortReduced-motion preference and low-motion preset recommendation
Each item displays a status dot (green/yellow/red) and a descriptive note.

​
Next steps

Performance

Adjust quality presets and pixel ratio for smooth playback

Playing toys

Browse and launch toys from the library

Build docs developers (and LLMs) love

Get started for freeTalk to us