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.

I was building a portfolio in Framer and needed a before/after image slider to show off design work. The existing options fell short — some lacked the customization I wanted. I wanted to control the handle color, divider width, and label text directly from the property panel, without writing code every time.

As a designer learning TypeScript, a few things tripped me up:

• Performance issues — my initial React state tracking caused re-renders on every mouse movement. Switching to direct DOM manipulation via refs unlocked smooth animations.
• Touch support — mobile required separate handlers for touchmove, touchend, and touchcancel, with careful management of default scroll behavior.
• Inactive effect — creating fluid blur/dim effects tied to slider position needed math for intensity based on the position delta.

I found Claude useful as a collaborative thinking partner rather than a code generator — helping me reason through DOM manipulation approaches and the Property Controls structure.

I compared Gumroad, Lemon Squeezy, and Contra. Picked Contra — Framer recommended it, and the zero-commission structure was hard to ignore.

Key setup decisions:

• Component delivery via Component URL (cleaner than file imports).
• Clear post-purchase instructions.
• Final-sale refund policy with troubleshooting support.

The submission needed: byline, introduction, description, demo link, and checkout link. The demo page had one component instance with minimal branding. After renaming twice (existing components had similar names), I landed on "Split Reveal".

A casual Threads post about the project picked up 143,000 views — real validation that people wanted this.

• Plan Property Controls upfront before building.
• Finalize the component before creating demo pages.
• Spend less time agonizing over naming.

Building and listing a Framer component in one day is achievable, even without deep development experience. The hardest parts are the small decisions — naming, pricing, descriptions, checkout setup — not the code. The gap between idea and marketplace listing is smaller than I thought.