# Motion

## Agent Instructions

You are adding motion to KIRUPA. Identify the interaction or orientation benefit before animating. Reuse the relevant header, launcher, or globe motion rather than adding another animation vocabulary. Keep decorative layers noninteractive and do not shift reading text or hit targets. Prefer transform/opacity and stop offscreen work. Provide a static reduced-motion state and a local pause for looping documentation previews. Sound remains off unless explicitly requested. Check focus, hover, touch, and error states while motion is active and paused.

Follow WCAG 2.2 AA for new or changed content: semantic HTML, keyboard access, visible focus, readable contrast in every theme, text alternatives, labeled controls, and explicit errors. Support zoom/reflow, respect reduced motion, and keep sound optional. Read /design/sections/accessibility.md for acceptance checks. Report unresolved barriers; automated checks alone do not establish conformance.

## Reference

Header animations, control transitions, reduced-motion behavior, and local pause controls.

The shared header moves pixel clouds using transform and long 60-300 second durations. Style-specific scripts add a Sci-Fi atlas, Ukiyo-e sails/birds/mist, or Platformer clouds and a question-block bump. Minimal's reading line follows article scroll instead of running a decorative loop. You can see the sky on the [homepage](https://www.kirupa.com/) and inspect its real animation here:

[Sky and navigation motion](/design/motion.htm#specimen-motion)

The kirupaBot launcher combines float, bounce, and icon-turn animations. Its press/hover state moves into the hard shadow; the panel uses a short reveal. Theme variants change the material and easing, not the fact that the control must remain findable and clickable.

Respect prefers-reduced-motion in CSS and canvas renderers. Preserve a usable still state. Animate transform and opacity where practical, and keep decorative layers pointer-transparent. Do not move text while somebody is trying to read it.

This preview is the real header markup and style scripts, without the site's sound, onboarding, presence, or preference bootstrap. The Pause motion button is local to this specimen. Offscreen specimens pause automatically; neither control changes the device's reduced-motion preference.

- Do stop unnecessary work when a preview or canvas is offscreen.
- Do keep keyboard focus and hit targets stable through a transition.
- Do not use a spinning or bouncing object to conceal a loading error.

## Sources

- [ssi/newDesign/src/header.shtml](https://github.com/kirupa/kirupaWWW/blob/main/ssi/newDesign/src/header.shtml)
- [ssi/newDesign/src/kirupabot-widget.css](https://github.com/kirupa/kirupaWWW/blob/main/ssi/newDesign/src/kirupabot-widget.css)
- [ssi/newDesign/styles/scifi.js](https://github.com/kirupa/kirupaWWW/blob/main/ssi/newDesign/styles/scifi.js)
- [ssi/newDesign/styles/ukiyoe.js](https://github.com/kirupa/kirupaWWW/blob/main/ssi/newDesign/styles/ukiyoe.js)
- [ssi/newDesign/styles/platformer.js](https://github.com/kirupa/kirupaWWW/blob/main/ssi/newDesign/styles/platformer.js)

[Section page and specimens](/design/motion.htm) | [Instruction index](/design/index.md) | [Plain prompt](/design/agent/motion.txt)