CMS Discovery OS Pro is live ⚡
Search, filter and sort any Framer CMS collection — without giving up the cards you designed. The controller never renders your cards; a small Bridge goes inside the card you already built.
Operators, multi-field sort profiles, numbered pagination, and a Setup Doctor that scores your wiring out of 100.
A testimonial section is usually a carousel. I wanted one where someone physically drags the next quote into frame. Everything in the frame is one WebGL scene. The rope is real braid — 3 strands wound on a core — and its lay shifts by exactly the length hauled, so you see it running through her hands instead of sitting there like a prop.
Play with it here: https://mehedihasan27.github.io/jerry-rope-testimonials/
Weekend, so finally got some time to experiment! Gargantua, A black hole rendered by ray-marching null geodesics, with the page's type gravitationally lensed around it. Check the link to give it a try. It obeys actual physics laws. Turn the sound on for a better experience.
Just shipped: Revenue Recovery OS — a live revenue calculator component for Framer
Built something I've wanted to exist for a while.
It's a calculator component that takes a few business numbers — monthly visitors, conversion rate, deal value — and spits out how much revenue a site might be leaving on the table. Monthly upside. Annual upside. Three diagnosis cards explaining where the leak is coming from.
It works for three business models:
Service — leads, close rate, client value
Ecommerce — orders, AOV, repeat purchase
SaaS — trials, paid conversion, retention months
Each one runs its own formula and generates a tailored diagnosis based on the actual input pattern — not generic advice.
Why I built it
Agencies spend a lot of time trying to convince clients a redesign or CRO project is worth the investment. Most of that conversation is vague. This makes it concrete. Drop it on a landing page, let the prospect put in their own numbers, and the business case writes itself.
It also works as a lead magnet. Gate the result behind an email field, send the data to a webhook, done.
What's under the hood
Live calculation — updates as you type, no submit button
Progressive disclosure — results stay at zero until real inputs exist, diagnosis only unlocks after a valid estimate
Full recovery plan with illustrated action cards and evidence citations
Mobile: results in a slide-up bottom sheet from a fixed dock
Light + dark theme, full color/font/radius controls
All copy editable from the properties panel
Would love to hear how agencies are handling the ROI conversation with clients right now.
Lineage product details page is designed to make every decision feel clear and confident. It brings the essentials forward: product benefits, ingredient details, usage guidance, subscription options, shipping information, and customer trust signals, all in one focused experience.
The page balances clean storytelling with practical buying information, helping visitors quickly understand what the product is, why it matters, how it works, and whether it fits their routine. Every section supports a smoother path from curiosity to purchase without overwhelming the customer.
Built a WebGL image carousel for Framer and I can't stop scrolling it 🌊
WaveFlow uses a custom GLSL vertex shader to bow and ripple each card as you drag — the faster you scroll, the more dramatic the deformation. Slow down and it eases back to flat. Every frame is live GPU geometry, no CSS tricks.
The background reacts too. It samples the dominant color from whichever image is centered and cross-fades the gradient toward it. Dark base, color bloom from below. Feels alive.
→ Drag or scroll to move through cards
→ Wave intensity, easing, speed, corner radius — all property controls
→ Grayscale mode + autoplay built in
→ Drop in your own images via the Assets panel
Built with Three.js r164 + custom ShaderMaterial. Zero dependencies beyond that.
Letting this one breathe before I put it on the Marketplace. Happy to hear what you'd want from a v2.
Cylindrical Image Carousel — Framer Component
A GPU-powered 3D image carousel built with Three.js for Framer. Images bend, fold, and shift in perspective as users drag or scroll—creating a smooth cylindrical coverflow effect.
Features include infinite looping, responsive sizing, shadows, rounded corners, motion smoothing, and controls for card size, spacing, depth, bend, perspective, scroll speed, and more.
Perfect for portfolios, product showcases, galleries, and editorial layouts.
Testimonial section of the Lineage Template!
Loved how smooth transition of the cards turned out. Also the bottom widget let's you play video with or without the sound, as video's will play with their captions so that's one of the control I wanted to have.
Cipher turns simple words into premium kinetic headlines. Each character scrambles through encrypted glyphs, then flips through a virtual 3D cube to reveal a second word, color, or both.
Built for Framer hero sections, CTAs, and scroll-triggered headers, it includes hover, click, in-view, and loop triggers, plus direction, blur, easing, typography, and accessibility controls. Drop it on a dark frame, set your front and reveal text, pick a trigger, and ship a polished cipher-flip effect in under a minute.
Hey community,
I put together a membership page demo for Lineage, a wellness-focused e-commerce concept built around recurring product rituals, clean ingredients, and a calmer subscription experience.
The page is designed to feel less like a generic pricing table and more like a considered membership flow: clear plan benefits, product-forward visuals, soft editorial pacing, and a checkout-adjacent structure that keeps the focus on trust and ease.
A few things I explored in this demo:
A quiet, premium visual system with sage-toned UI details
Membership benefits presented in a more lifestyle-driven way
Responsive layouts across desktop, tablet, and mobile
Smooth section pacing without making the page feel too “salesy”
Reusable Framer components for nav, footer, cards, and content sections
Would love feedback from the community, especially around the conversion flow, content hierarchy, and whether the membership value feels clear enough on first pass.
#MadeInFramer #Framer #WebDesign #Ecommerce #Membership #NoCode
AI Product Advisor Chatbot for Framer Commerce Sites
Just added a chatbot feature to a Framer commerce project that acts like a lightweight product advisor.
The chatbot lets visitors ask about ingredients, product concerns, goals, dosing, or which formula might fit them best. Instead of only replying with text, it can recommend relevant products directly inside the chat with product cards, images, price, short descriptions, and deep links to the product detail pages.
A few things it supports:
- Product recommendations based on user intent
- Ingredient and formulation explanations
- Clickable product cards inside chat replies
- Product detail deep links like /product-details?product=sleep-recovery
- Editable recommended products from the Framer layer panel
- Demo mode for simulated replies
- Optional API endpoint for real AI/chat responses
- Desktop/tablet floating widget behaviour
- Mobile-friendly behaviour that scrolls with the page instead of clashing with floating mobile navigation
The goal was to make the chatbot feel more useful than a generic support bubble. It works as a guided shopping assistant: someone can ask “What should I take for sleep?” or “Tell me about magnesium glycinate,” and the chatbot can explain the ingredient logic while pointing them toward the right product.
Built as a Framer code component, so the content, styling, products, images, labels, and recommendation data can still be edited from Framer.
Just launched CMS Discovery OS for Framer.
It turns any Framer CMS collection into a polished searchable directory with smart filters, saved views, favorites, sorting, pagination, responsive cards, and setup diagnostics.
Built for resource libraries, template galleries, case study grids, help centers, changelogs, job boards, product indexes, and component catalogs.
The idea is simple: Framer CMS is powerful, but every CMS-heavy site eventually needs a better discovery layer. This gives creators that layer without rebuilding the same search and filter logic from scratch.
Live demo: https://noble-storm-086971.framer.app/cms-discovery-os
Launch price: $19
Built a product-style capsule animation for the Lineage brand, fully inside Framer as a custom Code Component.
The animation features a translucent green capsule opening in slow motion, a soft powder/ingredient bloom, floating particles, and a clean wellness-commerce visual style. I started with a standalone canvas prototype, then converted it into a reusable Framer component with editable controls for brand text, capsule color, background colors, loop speed, particle density, and pause state.
No video or external assets are used. It’s all canvas-rendered, so it stays lightweight and scalable while still feeling like a premium product animation.
Would love feedback on the realism of the capsule material and whether this kind of interactive product visual feels useful for supplement, skincare, or wellness landing pages.
#framer #codecomponent #canvasanimation #productdesign #motiondesign #D2C
I’ve been exploring how product pages can feel less like a static grid and more like a guided discovery system.
This product line UX is built around a clean Framer CMS setup: searchable product cards, filterable collections, category-aware browsing, cart actions, and responsive layouts that keep the experience polished across breakpoints.
The idea was to make product discovery feel calm, fast, and premium. Useful for wellness brands, skincare lines, supplement shops, editorial commerce, resource libraries, or any CMS-heavy site where visitors need to browse, compare, and narrow things down without friction.
What’s included:
CMS-driven product cards
Search-first browsing
Product filters
Add-to-bag and learn-more actions
Responsive card layout
Clean editorial storefront feel
I built this as part of CMS Discovery OS, a premium Framer component for directories, resource libraries, product collections, and index-style experiences.
Would love to hear what you’d use this for, ecommerce, template libraries, SaaS resources, or something stranger.
Just launched CMS Discovery OS for Framer.
It turns any Framer CMS collection into a polished searchable directory with smart filters, saved views, favorites, sorting, pagination, responsive cards, and setup diagnostics.
Built for resource libraries, template galleries, case study grids, help centers, changelogs, job boards, product indexes, and component catalogs.
The idea is simple: Framer CMS is powerful, but every CMS-heavy site eventually needs a better discovery layer. This gives creators that layer without rebuilding the same search and filter logic from scratch.
Live demo: https://noble-storm-086971.framer.app/cms-discovery-os
Launch price: $19
Glass Toggle in Framer
Made a quick glass-style toggle in Framer. The trick is keeping it simple: translucent layers, blur, soft borders, and smooth variants.
How to build it:
Create a Frame for the toggle track.
Set the fill to a transparent white, like rgba(255,255,255,0.18).
Add backdrop-filter: blur(16px) if using custom CSS/code.
Add a subtle border: 1px solid rgba(255,255,255,0.35).
Add a small knob inside with a soft gradient and shadow.
Make two variants: Off and On.
Move the knob left/right between variants.
Add a tap interaction to switch variants with a spring transition.
Small details matter here: keep the shadows soft, avoid heavy opacity, and let the background show through. That’s what gives it the glass feel.
Smoother Card Animations for Framer!
Just updated this Framer component with cleaner, smoother card motion. The animation now feels more natural on hover and interaction, with softer easing, less abrupt movement, GPU-friendly transforms, and reduced-motion support.
Built for modern landing pages, product sections, portfolios, and interactive showcases where motion should feel polished without getting in the way.
Launching today: Kinetic Index.
A premium Framer component for cinematic scroll-driven typography. Turn simple text lists into immersive motion sections for: - Portfolio indexes - Studio credits - Guest lists - Product launches - Event schedules - Editorial hero sections Includes 6 animation modes, responsive type controls, custom glyphs, masks, overlays, presets, and reduced-motion support. Built for Framer designers who want premium kinetic typography without building the scroll logic from scratch.
Available now on Gumroad.
