Agent Kit

Playful Motion

Build energetic consumer product pages driven by real spring physics: staggered reveals, scroll-linked transforms, oversized rounded geometry and micro-interactions that stay purposeful and never fight the reader.

What this produces

Screenshots of a real page Claude Opus 5.5 at Max effort built by following Playful Motion. A live build, not a mockup.

SkillExpressive17 sections4,183 wordsv1.1.0

Pairs with

v1.1.0Replaced the useReducedMotion() render branch, which caused hydration mismatches, with MotionConfig and a useSyncExternalStore hook (§7, §15, §19). Added contrast figures for bright brand colours (§4), elliptical arch radii (§5), the useScroll target note (§6) and the configurator as the canonical demo (§10). Showcase rebuilt by Claude Opus 5.5 at Max effort.

Licensed for use in your own and your clients' projects under the React Bits Pro license. Redistribution, resale, or publishing the text of this skill is not permitted.