Framer code component · v1.0

Show your AI agent thinking, one step at a time.

Agent Workflow is a drop-in animated pipeline for Framer: a trigger, up to six steps and a result, with a glowing pulse that walks through each one. Every label, icon, color and timing lives in the properties panel.

Zero dependencies

Responsive to its container

Respects reduced motion

01 — Light, default settings

Trigger fires → each step runs → the result lands

Waiting
Trigger

New support email

Gmail · Support inbox

Queued
Step 1

Read email

Parse sender, subject and body

Queued
Step 2

Classify intent

Billing · high priority

Queued
Step 3

Draft reply

Friendly, concise tone

Queued
Step 4

Send to Slack

Post to #support-inbox

02 — Dark

Seven colors changed. Nothing else.

Waiting
Trigger

New support email

Gmail · Support inbox

Queued
Step 1

Read email

Parse sender, subject and body

Queued
Step 2

Classify intent

Billing · high priority

Queued
Step 3

Draft reply

Friendly, concise tone

Queued
Step 4

Send to Slack

Post to #support-inbox

Drop it in. Make it yours.

Paste one link into your project and the whole pipeline is ready. No code, no setup, no extra packages.

© 2026 Cyedi Creative Studio

Made for the Framer Marketplace

Create a free website with Framer, the website builder loved by startups, designers and agencies.