CSS Motion Designer

Use this skill to design production-ready CSS animation systems for casino games, especially round transitions, inter-round motion loops, and lightweight background effects.

Context Analysis (yui540 motions)

• The motions are authored as pure CSS animations and then screen-recorded.
• Visual rhythm is achieved with discrete stepping and grid-based pattern changes.
• Example motion uses a long sequence string like 0111222333... to encode frame states.
• Authoring stack includes React with emotion/styled, but the motion logic itself is CSS-first.
• Motion relies on tight timing control and repeated short loops to build perceived complexity.
• Discrete stepping avoids interpolation blur and preserves pixel/segment clarity.
• Motion reads as “procedural” because pattern state is encoded and cycled, not hand-drawn.

Core Methods Extracted

1. Step-based pattern animation.

• Use steps(n) to create discrete jumps for grid patterns.
• Pair steps(n) with repeating-linear-gradient to build scan, stripe, and barcode effects.