Built for Webflow

Stop pasting code that doesn't work.

Loops writes custom code for your Webflow site, ships it to staging, sees what actually happened, and fixes what's broken.

Claude
Add staggered fade-ins to the portfolio section

On it. Writing the animation and pushing it to your staging site...

Code pushed to staging
Page reloaded
Checking your site...
"Fade-in running on 6 items"

Working perfectly. Check your staging site!

Slower, and add a little scale-up too

Updated. Logs confirm the new timing and scale are live.

Refresh and take a look.

Describe what you want...

You already know how this goes.

Ask an AI for code. Paste it. It doesn't work. Explain why. Get new code. Paste again. Still broken. Rinse, repeat, lose your mind.

I need a scroll-triggered animation for my portfolio grid

Here's the code! Just paste this into your project:

const observer = new IntersectionObserver (...)
// ...
// 47 more lines

Uncaught TypeError: Cannot read properties of null (reading 'querySelectorAll')

The script is running before the DOM loads. Wrap it in a DOMContentLoaded listener:

const observer = new IntersectionObserver (...)
// ...
// 47 more lines

Failed to execute 'observe' on 'IntersectionObserver': parameter 1 is not of type 'Element'.

Sorry, the selector doesn't match your markup. What class is your grid using? Try this:

const observer = new IntersectionObserver (...)
// ...
// 47 more lines

No errors now but everything fades in at the same time, not one by one.

Right, we need a staggered delay. Replace lines 14–22 with this:

const observer = new IntersectionObserver (...)
// ...
// 47 more lines

Which lines? The code looks completely different from the last version you sent.

...five round-trips later, you're debugging code you didn't write, in an environment the AI can't see.

What if it could just see your site and fix it itself?

How the loop works

You talk to Claude. Claude writes the code and sends it to your site. Then it checks the result and keeps going until it's right.

Claude
Add fade-ins to the portfolio grid
Pushing code to your site…

Claude checks your site:

✓ Fade-in running on 6 items
✓ No errors

Working perfectly!

Describe what you want…

Your AI Assistant

You describe what you want

code pushed to site
Claude checks the result
yoursite.webflow.io
<script src="loops.js"></script>
Console
✓ Fade-in initialized on 6 items
✓ All animations complete
↑ Claude reads this directly

Your Webflow Site

Staging site with one script tag

The feedback loop

Loops closes the loop between the AI and your Webflow site. Claude doesn't just write code blindly — it can see the results, read errors, and fix problems on its own.

1

You describe what you want

"Add staggered fade-ins to the portfolio grid." Or "Pull the latest posts from my API." Plain English, no code.

2

Claude writes the code and pushes it

Claude writes the JavaScript and pushes it straight to your staging site. Your page reloads automatically with the new code running.

Claude sees what actually happened

This is the magic. Claude can see your staging site directly — read console output, take screenshots, inspect the page. "Fade-in initialized on 6 elements" or "Error: element not found." It doesn't guess, it knows.

✓ "Fade-in initialized on 6 .portfolio_item elements"
Claude reads this directly from your browser
4

If something's wrong, Claude fixes it

Saw an error? Claude reads it, understands the problem, rewrites the code, pushes again. Your site reloads, Claude checks again. Loop repeats until it's right. No pasting, no back-and-forth — it just converges.

✗ "Cannot read properties of null (.portfolio_grid)"
Claude sees this, fixes the selector, pushes v4...
✓ "Fade-in initialized on 6 elements"
5

You review the result

Check your staging site. Love it? You're done. Want changes? Just say "make it slower" and the loop runs again in seconds.

Getting started is a conversation

No install guides. No config files. Just tell your AI what you need.

your AI coding assistant
Y

Set up Loops on my Webflow site so I can start adding custom functionality

AI

Done! I've set everything up. Just paste this one tag in Webflow → Site Settings → Custom Code → Before </body>:

<script src="https://cdn.loops.dev/v1/proj_k7x2mR/loops.js"></script>

That's the only thing you need to do in Webflow. Now just tell me what you want to build.

Y
Add a fade-in animation to the portfolio grid…
Any JS
If JavaScript can do it, you can ask for it
Staging only
Your live site is never touched
No lock-in
Plain JS files — take them anytime

Works with every coding agent

…and any AI that can run terminal commands

What would you add to your Webflow site?

Animations, data fetching, form logic, dynamic content — just describe it to Claude and it's done.