AI Interaction Builder
The AI Interaction Builder lets you add animations and scroll effects to your design by describing them in plain language. Instead of manually configuring triggers, easings, and keyframes, you tell the AI what motion you want and it generates production-ready interaction objects that get applied directly to your canvas.
Under the hood, the builder reads the full HTML structure, CSS, and element tree of your page. It uses that context to pick appropriate animation strategies, choose the right elements to target, and avoid conflicting with existing styles. The result is motion that feels intentional and polished, not random or template-like.
Prerequisites
- An active Flowmo project with at least one element on the canvas.
- Elements you want to animate. You can either select them on the canvas, attach them to the chat, or let the AI analyze the full page tree and decide for you.
- A Flowmo account signed in. The Interaction Builder requires authentication.
How to Access the Interaction Builder
The Interaction Builder is one of the specialized assistants available through the AI chat panel. There are two ways to reach it:
- Smart Router (automatic). Open the AI panel and type a prompt that describes an animation. Use words like "animate," "fade in," "hover effect," "scroll reveal," or "carousel." The Smart Router detects your intent and routes you to the Interactions Builder automatically.
- Manual mode selection. In the AI panel, click the assistant mode dropdown (the label shows the current assistant name, such as "Design Agent" or "Element Editor"). Select Interactions Builder from the list.
When the Interactions Builder is active, the panel title reads "Interactions Builder" and the accent color shifts to an amber/orange gradient.
Step-by-Step: Creating Your First Interaction
Step 1: Select or Attach Elements
Before prompting, decide which elements you want to animate. You have three options:
- Select on canvas. Click an element on the canvas. The builder automatically uses the selected element as the trigger and animation target.
- Attach elements. Click the attach button in the chat input area and pick one or more elements. The builder receives their full HTML and CSS, which helps it understand structure, dimensions, and nesting for better animation decisions.
- No selection. If you do not select or attach anything, the builder analyzes the full page element tree and chooses which elements to animate based on your description.
Tip: Attaching elements gives the AI richer context. It can see child elements for stagger effects, check for overflow: hidden containers (great for clip-reveal animations), and identify SVGs for draw effects.
Step 2: Describe the Animation
Type a natural-language prompt describing the motion you want. Be specific about the feel, timing, and behavior.
Example prompts:
"Fade in the hero heading from below on scroll with a subtle scale effect."
"Add a hover lift effect to each card — slight scale up with a shadow increase."
"Create a staggered scroll reveal for all items in the features grid."
"Make the navigation slide down from the top on page load."
Press Enter or click the send button to submit.
Step 3: AI Generates and Applies
The AI processes your prompt along with the element context and page tree. It generates one or more InteractionDefinition objects and applies them directly to your project through the engine. You will see:
- A streaming progress indicator while the AI is working.
- A confirmation message: "Interactions applied. Added: X, Updated: Y."
- A Go live action button on the response message.
The interactions are live immediately. Scroll your page, hover over elements, or reload to see them in action.
Step 4: Iterate and Refine
Not happy with the timing? Want a different easing curve? Simply describe the change:
"Make it faster and use a bouncier easing."
"Add a 100ms stagger between the cards."
"Change the entrance direction to come from the left instead of below."
The builder updates the existing interaction in place when you are editing, preserving the same ID and merging your changes onto the current object.
Editing an Existing Interaction
You can edit any interaction that already exists on your project:
- Open the Interactions panel in the designer.
- Select the interaction you want to modify.
- Click the AI edit option (or ask the AI directly while the interaction is selected).
- Describe your change. The AI receives the full current interaction object and returns an updated version with the same ID.
When editing, the AI prompt includes the label "CURRENT_INTERACTION" with the full existing object, so it knows exactly what to modify rather than creating something from scratch.
Supported Trigger Types
The Interaction Builder can generate interactions for any of these trigger types:
| Trigger | Use Case |
|---|---|
| scroll-reveal | Entrance animations when elements scroll into view |
| scroll-scrub | Parallax effects, progress bars, pinned scroll sections |
| hover | Card lifts, button highlights, image zooms |
| click | Toggles, expand/collapse, tab switches |
| load | Hero animations, preloader sequences |
| drag | Draggable elements with axis constraints |
| mouse-position | Tilt effects, depth parallax |
| follow-mouse | Cursor followers, magnetic buttons |
| swipe | Mobile carousel gestures |
| viewport | Animations based on viewport visibility |
| carousel-control | Next/previous slide navigation |
| form-submit | Post-submission feedback animations |
Timeline Animations
For complex choreographed sequences where you need precise millisecond-level control over multiple elements, the AI can generate timeline-based animations. These include:
- Layers with individual element selectors.
- Tracks for each animated CSS property (opacity, transform, etc.).
- Keyframes at specific time positions with configurable easing.
The AI auto-calculates the timeline duration from the latest keyframe and sanitizes layer data to ensure compatibility with the engine. Invalid track types (plugins, action tracks) are automatically stripped.
Tip: For most use cases, simple interactions with stagger values are enough. Only ask for a timeline when you need precise control like "the heading fades in at 0ms, the subtitle at 200ms, and the button slides up at 400ms."
Tips for Better Results
- Describe the feel, not just the mechanics. "Cinematic entrance" works better than "opacity 0 to 1 with translateY." The AI understands motion design language.
- Mention the element type. Saying "fade in the cards" or "animate the hero heading" helps the AI pick appropriate strategies (text-split for headlines, stagger for grids, clip-reveal for images).
- Keep it simple. A single opacity + translateY entrance is often all you need. The AI follows a "less is more" principle and avoids over-animating.
- Use scroll-reveal for most entrance effects. It triggers once when the element enters the viewport and pairs naturally with stagger for lists.
- Attach multiple elements when you want coordinated motion across siblings. The AI analyzes the HTML hierarchy to choreograph animations in natural reading order.
Common Issues
| Problem | Solution |
|---|---|
| "Please select an element on the canvas" | The AI generated an interaction that needs a target but could not find one. Select an element, attach elements to the chat, or make sure your page has content so the page tree is available. |
| "Engine is not available to apply interactions" | The canvas engine has not loaded yet. Wait for the project to fully load, then try again. |
| "The model didn't return valid interactions" | The AI response could not be parsed. Try rephrasing your prompt with clearer language. Avoid very long or ambiguous descriptions. |
| Interaction applied but nothing moves | Check that the trigger conditions are met. For scroll-reveal, you need to scroll the element into view. For hover, you need to hover over the trigger element. Open the Interactions panel to verify the interaction is enabled. |
| Animation conflicts with existing styles | If elements already have CSS transforms, the AI tries to detect and avoid conflicts. If you see jittery motion, mention the conflict in your prompt: "The element already has a translateX, only animate opacity and scale." |