Interactions and motion, without writing animation code

Start from a preset or from nothing, then add steps for opacity, movement, scale, rotation or blur, each with its own duration and delay. The bars under the steps show the whole timeline.

• Presets to start from: Fade up, Fade in, Pop in, Slide from left and Blur in
• Easing from ease out to a spring, and children that play one after another, 60 to 160 ms apart
• Each animation has a name, so you can reuse it on other elements of the page
• Load, scroll and click animations on a timeline, for Astro, Vite and HTML sites

Choose what starts each animation: the page loading, the element scrolling into view, a click on it, or a button elsewhere on the page that plays it.

• On click, play: make a button start an animation somewhere else on the page
• Mouse effects: tilt toward the pointer or drift with it, subtle, normal or strong
• Scroll reveals are CSS scroll-driven animations, so they need no script, and browsers without them simply show the element

Select an element and describe the motion you want, or run /xodia:animate in Claude Code. Your AI follows Xodia's motion skills and picks the lightest way to build each effect.

• Interactions: Plans interactions the way design tools describe them (a trigger and an effect) and picks the lightest way to build each one: CSS, Motion or GSAP.
• CSS animation: Builds hover effects, reveals, scroll-linked motion, loops and page transitions with CSS alone, in Tailwind or plain stylesheets.
• GSAP: Builds timelines, scroll stories, pinned sections and text effects with GSAP, cleaned up properly in React, Next.js and Astro.