Easegate: Web motion that feels physical, not cheap

Menus that bounce on every click, hover states that make the layout jump, toasts that restart from zero when a second one arrives. Motion added without rules makes an app feel cheap and drops frames on phones. Easegate gives your agent a fixed set of motion rules for Next.js, React, CSS and Framer Motion, starting with the question of whether something should move at all.

What it does

• Frequency gate rates how often an interaction plays. Keyboard shortcuts and actions used 100+ times a day get no animation; delight is kept for rare moments.
• Named purpose requires one word (feedback, spatial, state, continuity, explanation, delight) before any motion is built.
• Shared tokens adds easing curves, durations and a press scale, or extends the tokens the repo already has instead of forking them.
• Composite-only properties keeps animation on transform and opacity, and rules out transition: all, scale(0) and ease-in on UI.
• Springs without overshoot defaults to bounce: 0, with a little bounce only when a gesture carried momentum.
• Reduced motion and interruption ship in the same change: an opacity crossfade for reduced motion, pointer-gated hover and retargetable transitions.

How it works

1. Gate and purpose decide whether the element animates and why.
2. Tool choice picks the cheapest option: CSS transition, @starting-style, CSS animation, WAAPI, then Framer Motion only for springs, layout, exit and gestures.
3. Build writes the code with tokens, durations (exit shorter than enter) and press feedback.
4. Verify plays motion at 2x to 5x in DevTools, records the Performance panel, and names which findings still need a real device.

Frameworks & tools

CSS, Framer Motion, WAAPI, Chrome DevTools Animations and Performance panels.

Why this beats prompting it yourself

A plain prompt adds motion everywhere with built-in easing. Easegate can return "no animation" as a valid result, uses one token set, and reviews existing motion as a findings table with file and line, severity, before and after values.

Use cases

• New components such as drawers, toasts, dropdowns and press states.
• Jank fixes when motion drops frames during navigation.
• Motion audits of a diff, page or whole codebase before a UI pass ships.

Known limitations

Review mode is read-only until you ask for fixes. Feel on a mid-range phone cannot be confirmed from code alone. It does not set up the full design token system or critique layout, copy and colour.