DURATION
December 2025 – Current
Keywords
AI prototyping, indie publishing, creative utilities
LIVE SITE
Framer users constantly run into specific component problems mid-build. I took that as a product signal and built a growing line of code components around the gaps people were already trying to solve.
This project began with a simple observation: in the middle of a build, Framer users are often not looking for a template, but for more focused solutions to specific parts of what they are building. Under my digital product brand SOSOTAR, I’ve been building a growing line of marketplace code components around those moments: missing tools, weak native patterns, and motion behaviors that still take too much effort to build well.
This is my experimentation into collaborating with vibe coding tools to ship highly useful creative utilities. Some sharpen familiar interface patterns. Others turn more expressive visuals into something stable, customizable, and usable in production.
Because I build heavily in Framer myself, a big part of the work is knowing what people are likely to search for when they hit a gap mid-build. I treated that behavior as a product signal and built accordingly. The naming was part of the product. With no additional marketing, the first eight components began gaining explosive traction in the marketplace through organic search.
Each component is designed in Figma, then I developed in Cursor using an iterative approach until the interaction, property controls and visual polish feel ready for release. So far I’ve shipped eight, with four more planned each month.
Fluid Mesh Gradient
[ move your cursor to 'agitate' the gradient ]
Ambient gradients are everywhere, but they often come at the cost of performance or control. This component uses WebGL to turn shader-based motion into a fluid, interactive background tool that feels expressive without becoming heavy. Calamari.
Bend Any Text
Curved text is one of those effects people reach for often, but usually with limited control. This component packages seven different bend styles into a hyper flexible text bending tool, making the effect easier to use across a wider range of layouts and moods.
Curved Section Pro
Curved divider sections are deceptively hard to build well, especially once responsiveness enters the picture. I approached this less as a curve problem and more as a section-insert problem, which made it easier to give users control over fills, placement, and how the component blends into the rest of the page.
Dashed Dividers
Built to fix the limitations of native dashed lines in Framer, especially their lack of shape options and tendency to distort across screen sizes.
Moving Gradient Text
I came up with a simple [[ ]] syntax to let users apply cursor-reactive gradient effects to specific parts of a paragraph rather than the whole text block, and mapped cursor location precisely to drive gradient transition.
Carousel with Slider
C'mon, a carousel with slider? why such a boring piece? Well, if you every try to build a carousel in Framer, you may quickly run into an annoyance of the platform: the native horizontal scroll appears briefly on scroll, but can't always stay visible. This lowers affordance of navigability, and lowers usability. Carousel with Slider nails the need for always-on slider, and builds segments into the track to allow quick glance of slide quantity and additional anchors to jump into a place.
Masked Popout Text
A more unusual take on masked 3D text, where the extruded depth does the visual work instead of the front face.
Logo Carousel Pro
A refined logo carousel built around a common marketing-site pattern, with the controls, fade behavior, and flexibility tuned for real production use.