Mehedi Hasan

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.

Re-created this animation from Awwwards in Framer, cause this was way too good to resist.

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

Capsule animation done in Framer, for Lineage Template.

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.

Nobody talks about how hard mobile navigation is to get right in Framer.

The sticky navbar works fine for most sites. But when you're building something brand-heavy, it competes with the content and kills the feel. You need it to get out of the way.

For Lineage — my supplement brand template — I built a three-state floating menu system in a single code component.

How it works:

↑ Scrolled away — the top bar disappears past 80px. A floating MENU pill appears from the bottom. Content breathes.

☰ Menu open — tapping the pill opens a white card floating over the page with 12px margins and 32px border radius on every corner. Not edge-to-edge. That gap is everything — it makes the menu feel like it's over the page, not replacing it.

⊞ Products — tapping Products slides up a full-screen overlay via AnimatePresence. Not inline expand. Closing it drops back to the floating card. The layering feels intentional.

Things that tripped me up:

— left: 50%; transform: translateX(-50%) breaks inside Framer's iframe. Use a full-width fixed container with justify-content: center instead.

— The dot-grid icon needs two real SVG states. Toggling opacity on one icon doesn't read the same way.

— createPortal is necessary for the overlay to escape parent overflow clipping.

Everything is in one Navbar.tsx with addPropertyControls so buyers configure it without touching code.

Drop a question below if you're building something similar 👇

Just launched Ingredient Orbit, a free Framer component for turning ingredients, features, or product details into an interactive orbiting particle animation.

Add symbols or images, customize the motion, colors, typography, and presets, then drop it into any product or landing page.

Free to remix and use.

Clinical Dose is an interactive dose-comparison component from the upcoming "Lineage" template that shows what “clinically dosed” actually means. Users can switch between key ingredients and compare the studied dose, Lineage’s dose, and an average competitor dose, with evidence grade, trial count, sourcing, form, testing status, and a link into the ingredient dossier.

Built a Framer-native quiz for Lineage: 10 steps, full-screen, zero external quiz tool.

It collects name, goals, sleep, stress, age, calories, diet, supplements, energy pattern, and email, then routes to a product result. The fun bit is the logic layer: the quiz is config-driven, with a tiny branch engine supporting eq, gt, lt, gte, lte, contains, and any, plus history/back-state pruning so users can move backward without stale answers leaking forward.

UI details: custom glass stress slider with real role="slider" keyboard support, inline “Other” supplement input, client-side validation, reduced-motion handling, Framer controls for copy/colors/result products, and a sage/recovery visual system pulled from the Lineage design language.

Current result priority: Sleep issue → Rest+ Stack Clean diet → Daily Foundation Poor diet → Greens Reset Fallback → Daily Foundation

Feels like a product recommendation engine, but it still lives entirely as a Framer Code Component.