How I Built a Framer Component and Listed It on the Marketplace (In One Day)

I wasn't trying to build a product. I was just trying to finish my portfolio.

Somewhere in the middle of that, I got completely obsessed with before/after image sliders (typical ADHD moment) and ended up going down a rabbit hole that led to my first ever Framer Marketplace submission.

Here's how it happened.

It Started With a Gap

I was working on my portfolio in Framer and wanted a before/after image slider to showcase some design work. Simple enough, right?

Except none of the existing options felt right. Some were too basic. Some weren't customizable enough. I wanted to control the handle color, the divider width, the label text — all from the property panel, without touching any code.

So I thought: how hard could it be to just build one?

(Famous last words.)

The Hard Parts of Writing the Code

I'll be honest, I'm a designer first. TypeScript is not my comfort zone.

The interaction logic alone took way longer than I expected. Getting the drag behavior to feel smooth, making sure touch events worked properly on mobile, handling the click-to-jump animation without it feeling janky, these things sound simple but there were a lot of edge cases.

A few things that tripped me up:

Performance. My first instinct was to use React state to track the slider position, which meant re-rendering on every mouse move. That was... not great. I had to switch to direct DOM manipulation using refs so the animation stays buttery smooth without any re-renders.

Touch support. Desktop drag worked fine, but mobile was a whole separate battle. touchmove, touchend, touchcancel — each one needed its own handler, and preventing default scroll behavior without breaking the rest of the page took some trial and error.

The inactive effect. Adding a dim or blur effect to the "after" image as you drag sounds straightforward, but getting it to respond fluidly to position changes (not just on/off) required a bit of math to calculate the effect intensity based on slider position.

This is where Claude became genuinely useful. I used it throughout the coding process, not to write the whole thing for me, but as a thinking partner. When I got stuck on the DOM manipulation approach, I talked through the problem and got to a better solution faster. When I wasn't sure about the best way to structure the Property Controls, it helped me think through the UX from a buyer's perspective.

It felt less like using an AI tool and more like having a developer friend on call.

Setting Up to Sell

Once the component was in a state I was actually proud of, I had to figure out the selling part.

Framer's Marketplace requires a checkout link from an external payment platform. After going back and forth between a few options (Gumroad, Lemon Squeezy, Contra), I ended up going with Contra, partly because Framer actually recommends it on their submission page, and partly because the 0% commission structure made the most sense for starting out.

Setting up the payment link on Contra was pretty quick. The main things I had to figure out:

• What to deliver. Not a file download, Framer components are delivered as a Component URL that buyers paste directly into their project. Much cleaner than dealing with file imports.

• After purchase instructions. Keeping it simple: here's your URL, here's how to install it, DM me if anything breaks.

• Refund policy. Digital products are final sale, but I made sure to say I'd help troubleshoot anything.

Submitting to the Framer Marketplace

The submission itself was pretty straightforward! byline, intro, description, demo link, checkout link.

The trickier part was the demo page. Framer is specific: one component instance, no extra branding or UI clutter, just the component doing its thing. I put together a clean page with a single slider using a nice before/after photo pair, published it, and used that as the live preview.

I also had to rename the component twice because "Image Compare Slider" and "Reveal Slider" were already taken. Ended up going with Split Reveal.

Then I hit submit.

What Happened Next

While the review was in progress, I posted about it on Threads! just a casual update about getting obsessed with a side project and deciding to put it out into the world.

It got 143K views.

I wasn't expecting that at all. The response made it clear there's genuine interest, which made the whole process feel a lot more real. Suddenly this wasn't just a personal project.. it was something people might actually want to use.

What I'd Do Differently

A few things I wish I'd known going in:

Start with the Property Controls in mind. I built the component first and added customization options later. It would have been faster to decide upfront what buyers would want to tweak, then build around that.

Make the demo page last. I spent time on the demo before the component was fully polished. Better to nail the component first, then make it look good.

Don't overthink the name. I spent way too long on this. Just pick something clear and move on.

The Takeaway

Building and listing a Framer component in a day is very doable! Even if you're not primarily a developer. The hardest parts aren't the technical ones, they're the small decisions that add up: what to name it, how to price it, what to write in the description, how to set up the checkout flow.

The component is currently under review. If it gets approved, I'll be posting the link.

And if you're thinking about building your own Framer component, just start. The gap between "I have an idea" and "it's listed" is smaller than you think.