How to animate a SaaS dashboard with Claude Code or Codex

Animate your static SaaS dashboard so navigation appears, three metric cards enter, and the chart receives attention.

Supported AI clients: use Claude Code or Codex with the MotionUI tools connected. The ordinary ChatGPT and Claude chat interfaces do not provide this MotionUI workflow. Claude Code can appear inside the Claude desktop app; choose its Code environment, not a normal chat.

• You will: Build an editable dashboard animation with Claude Code or Codex and MotionUI.

• Prerequisites: macOS or Windows, MotionUI, Figma dashboard, After Effects, Claude Code or Codex connection

How do you prepare the dashboard for animation?

Start in the MotionUI app, then prepare independently editable dashboard elements. MotionUI is a desktop app for macOS and Windows by HIVER connecting Figma, After Effects, Claude Code and Codex. MotionUI is available for macOS and Windows.

Step 1: Connect through the MotionUI app

Open MotionUI and access plugin setup from the app. Complete the setup for your workflow, then open your After Effects project. Keep the MotionUI panel open and confirm that the MotionUI app shows an active connection.

Your connected agent can inspect compositions, create layers, set keyframes and use MotionUI animation tools once connected. Follow the Claude Code or Codex in After Effects setup and animation guidance when establishing the connection.

Expected result: Your target composition is open and available for your connected agent to inspect.

Step 2: Prepare and import the example dashboard

Use a concrete scene: a navigation bar, metric cards labeled Revenue, Active users and Conversion, and a revenue chart beneath them. Import the dashboard directly from Figma into After Effects through MotionUI.

For independent entrances, the navigation and each card need separately controllable layers or precompositions. For chart emphasis, identify a separately controllable chart container. If you want the chart line itself to draw on, it needs an editable shape stroke suitable for Trim Path.

Inspect what actually arrived before choosing an effect. A flattened dashboard image cannot provide independent card entrances without separating or rebuilding those elements.

Expected result: The imported composition contains identifiable targets for each animation stage.

How do you scope the agent to the imported layers?

Ask your connected agent to describe the composition before making changes, then use the inspected layer names in every animation request. Treat the prompts below as suggested starting points.

Step 3: Inspect and confirm the animation targets

Send this inspection request:

Inspect the active dashboard composition and describe its layers, including any existing animation. Do not change anything. Identify possible navigation, metric card and chart targets by their actual layer names. Flag anything ambiguous for me to confirm.

Compare the response with the After Effects timeline. Confirm which layers form each card and which layer controls the chart container. Give ambiguous layers descriptive names yourself, then ask your connected agent to inspect again if needed.

Expected result: You have an explicit mapping from visible dashboard elements to editable layers. You are not relying on automatic semantic chart detection.

Step 4: Animate only the navigation

Save the project. Replace the placeholder in this scoped request with the inspected navigation layer name:

Animate only [navigation layer] entering with a subtle fade. Preserve its final position, dimensions and styling. Leave every other layer unchanged. Explain the proposed timing before applying it, then wait for my approval.

Review the proposal, approve it, and preview the result manually in After Effects. Keep the request limited to the entrance rather than asking your connected agent to finish the entire dashboard.

Expected result: The navigation appears without changing the existing layout.

How do you sequence cards and emphasize the chart?

Complete the card entrance before requesting chart emphasis. This keeps each review focused on a single visual decision.

Step 5: Reveal the metric cards from left to right

Ask your connected agent to animate the confirmed card targets after the navigation settles:

Animate only [Revenue target], [Active users target] and [Conversion target] with a consistent Slide Up entrance, ordered left to right. Preserve their final positions and internal layouts. Propose the duration and stagger first. Leave navigation and chart animation unchanged.

For manual control, select the card targets in Animate, choose the duration and In under Settings, and enable Apply to multiple layers. Choose a direction and delay, then apply Slide Up. Sequence order follows on-screen positions. See the entrances and sequences guide.

Expected result: Each card enters as a coherent unit in the intended reading order.

Step 6: Add chart emphasis and revise manually

Ask your connected agent for a subtle Pop emphasis on the confirmed chart container after the final card settles. Specify that chart data, labels and final layout must remain unchanged. Request a timing proposal before application.

Preview the full scene at the intended frame rate. Check navigation readability, card order and whether the chart emphasis feels distracting. Revise one property per request, such as reducing chart emphasis or tightening the card stagger.

You can also edit layers and keyframes yourself. To refine easing, select the relevant keyframes, open Easing, choose or adjust a curve, and click Apply Easing to Keys. The keyframe easing guide explains this workflow.

Expected result: Navigation establishes the scene, cards introduce the metrics, and the chart receives the final emphasis.

What should you check when troubleshooting?

• Your connected agent cannot inspect the composition: Confirm the target composition is open, the MotionUI panel remains open, and the MotionUI app shows an active connection.

• Cards enter in the wrong order: Check their on-screen positions and the chosen sequence direction. Adjust the sequence delay separately.

• Easing changes nothing: Select keyframes in the timeline, not only their layer, before applying easing.

• The motion feels slow: Review keyframe spacing as well as the easing curve. Shorten the timing, preview again, then reconsider movement distance.

Need to set up the app first? Follow the MotionUI setup guide for Mac and Windows.