Skip to content

Replace onboarding video with animation#778

Merged
microbit-grace merged 36 commits intobetafrom
animation
Mar 12, 2026
Merged

Replace onboarding video with animation#778
microbit-grace merged 36 commits intobetafrom
animation

Conversation

@microbit-grace
Copy link

@microbit-grace microbit-grace commented Mar 4, 2026

New animation layout introduced for portrait mobile / narrower screen sizes.

Accessibility-wise, the role is set as img (similar to a GIF). It requires alt text, a pause and resume button (see https://www.w3.org/WAI/WCAG21/Understanding/pause-stop-hide.html). I also tried setting the role as video using a visually hidden component, but the voice over seems to skip the alt text provided and read "Unable to play media", presumably because it's not an actual playable video. Descriptive transcript is not required because the role is img, not video.

@github-actions
Copy link

github-actions bot commented Mar 4, 2026

Preview build will be at
https://review-createai.microbit.org/animation/

@microbit-grace microbit-grace changed the title [WIP] Onboarding animation Replace onboarding video with onboarding animation Mar 11, 2026
@microbit-grace microbit-grace changed the title Replace onboarding video with onboarding animation Replace onboarding video with animation Mar 11, 2026
@microbit-grace microbit-grace marked this pull request as ready for review March 11, 2026 11:31
@microbit-matt-hillsdon
Copy link

Should we start paused for prefers-reduced-motion folks? Would need to take care to skip to content not e.g. white screen pre fade in.

Copy link
Author

@microbit-grace microbit-grace left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should we start paused for prefers-reduced-motion folks? Would need to take care to skip to content not e.g. white screen pre fade in.

That makes sense, working on it...

@microbit-grace
Copy link
Author

Should we start paused for prefers-reduced-motion folks? Would need to take care to skip to content not e.g. white screen pre fade in.

Implemented here ---> ed52ab2 8bd58bc

Copy link

@microbit-matt-hillsdon microbit-matt-hillsdon left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looking great.

My framer-motion experiment didn't result in meaningful improvement.

@microbit-grace microbit-grace merged commit 16c9205 into beta Mar 12, 2026
1 check passed
@microbit-grace microbit-grace deleted the animation branch March 12, 2026 13:34
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants