Hey everyone! 👋

Just launched a new component built for anyone looking to add high-end creative direction to their visual sections: Pixel Image Reveal.

It transforms static images into cinematic WebGL entrance animations. Instead of standard CSS fades or wipes, it drives a dynamic GLSL pixelation pass—shifting smoothly from coarse retro grid blocks into crisp, anti-aliased detail with a customizable curtain wash.

Highlights:

Custom GLSL shader with anti-aliased grid overlays

4 versatile trigger modes: Viewport (scroll), Image Load, Hover, and Click

Full color curtain wipes to match any design palette

Fine-grained control over pixel resolution steps and start/end densities

Production-ready: built-in prefers-reduced-motion detection, static canvas fallback, and explicit GPU memory disposal (forceContextLoss)

Works cleanly on desktop and mobile for hero visuals, agency case studies, and editorial lookbooks.

Check out the live preview and copy the component for free : https://framer.link/Cp3JTwW

Would love to hear your feedback and see how you use it in your builds!

Hey everyone! 👋

I have published Stacked Media Cards, a cinematic 3D card deck built to showcase images and videos with tactile depth and smooth motion.

Built with custom WebGL shaders and Three.js, it delivers realistic fanning angles, adaptive ambient halo glows, and kinetic drop transitions without bogging down site performance.

A few highlights:

Rich Media Support: Seamlessly mix responsive images and auto-looping muted videos in one deck.

Fluid Gestures: Native touch swiping, drag interactions, and smooth trackpad/wheel cycling.

Adaptive Ambient Glow: Dynamic halo lighting that shifts colors to match each card's tint.

Performance First: Auto-pauses GPU rendering offscreen with zero idle drain.

Check out the preview and let me know your thoughts!

Hey everyone,

Just dropped Media Hover Grid on the Marketplace!

Most WebGL galleries can feel heavy or cumbersome to integrate, so I built this entirely with vanilla Three.js—zero external CDN dependencies or heavy bundles.

What it does:

Proximity Magnification: Cards dynamically scale up and shift depth as the pointer gets closer.

Focal Grayscale Reveal: Surrounding tiles gently stay monochromatic while the hovered tile pulls into full, rich color.

Smart Video Decoder: Seamlessly handles both images and .mp4/.webm videos with bounded GPU memory so your site stays fast.

Full Canvas Controls: Native Framer property controls for hover scale, falloff radius, grid density, card aspect ratio, and layout spacing.

SSR/Static Fallback Ready: Built to cleanly handle Framer’s static rendering without blank flash errors.

Perfect for design agency portfolios, photography showcases, or creative director archives where you want that fluid, tactile gallery feel.

Would love to hear your thoughts and see what you build with it!

Hey everyone! 👋

I wanted a way to showcase portfolio projects and video reels that felt less like another flat grid and more like walking through a private exhibition hall in Paris or Tokyo.

So I built 3D Studio Gallery — an interactive 3D media walkthrough aisle powered by vanilla Three.js and custom GLSL shaders.

Key highlights:

Real-time planar floor reflections: Procedural marble with subtle veins, customizable tile seams, warmth, and micro-ripple distortion.

Dual scroll drive modes: Use standalone mouse wheel control with momentum damping, or lock it directly to your page scroll.

Mixed media ready: Upload images, WebM/MP4 videos, and static preview posters per stand.

Production-ready performance: Built-in frustum culling, intelligent off-screen video pausing, and static canvas fallbacks so your Framer editor stays lightweight and responsive.

Would love to hear your thoughts and see how you use it in your portfolios or client projects! Drop feedback below 👇

Hey everyone! Just launched 3D Glow Carousel on the Marketplace.

I wanted to build an interactive 3D media deck that feels cinematic without hurting site performance. It bends neighboring cards along a subtle curve, casts real-time chromatic edge glows, and supports both images and looped videos seamlessly.

Quick Highlights:

Curved 3D Motion: Smooth spatial perspective powered by Three.js & custom GLSL shaders.

Real-time Aura Glow & Grain: Dial in ambient edge glow, custom curvature, and filmic grain overlays right from the property controls.

Fluid Drag & Inertia: Natural pointer dragging, trackpad wheel scrubbing, and keyboard arrow controls.

Production-Ready & Light: Zero layout shift, instant procedural fallbacks before assets load, and full static renderer / reduced-motion safety.

Perfect for SaaS feature highlights, AI tool decks, or design agency reels.

Check it out on the Marketplace and let me know what you think!

Hey everyone! 👋

A few days ago, I launched Interactive Fluid on the Marketplace, and I wanted to share a look under the hood.

Most fluid text effects on the web rely on heavy external libraries, video loops, or slow canvas redraws. I wanted to build something that feels snappy, reactive, and completely native to Framer’s workflow.

What it does:

True GPU Fluid Physics: Runs real-time velocity advection, vorticity curl, and pressure projection directly on the GPU.

Shared Displacement: The typography and the background dot matrix share the exact same displacement field, so your text organically distorts with the fluid wake.

Custom Typography UI: Plug in any font directly with Framer’s extended font controls, tweak line height, block width, and letter spacing.

Performance-First: Written in Vanilla Three.js with zero external CDNs, Drei, or R3F. It automatically sleeps when off-screen or during static rendering so your site stays lightweight.

It works great for dark-mode hero headers, tech/Web3 landing pages, or playful portfolio statements.

Here's the link of the component: https://framer.link/vGDlLMa

Would love to hear your feedback, see what you create with it, or answer any technical questions about the shader setup!

Hey Framer crew! 👋

Just launched WebGL Image Ribbon — an endless 3D carousel with dynamic center expansion and organic vertical scatter.

Instead of another flat slider, cards seamlessly wrap in a continuous loop, expand smoothly as they enter the center focal zone, and glide with natural momentum drag and wheel physics.

Quick Highlights:

Endless 3D Ribbon: Seamless boundary looping with zero visual clipping.

Fluid Physics: Smooth drag, touch swipe, and wheel scroll with exponential damping.

Lightweight Three.js: Highly optimized plane rendering with adaptive pixel ratio.

Drop & Play: Upload images directly in the Framer properties panel—no custom code needed.

Perfect for agency portfolios, luxury lookbooks, and SaaS product showcase strips.

Here's the link of the component: https://framer.link/ud94vYL

Let me know what you think!

Hey Framer community! 👋

I built an Infinite 3D Tunnel Gallery inspired by high-fashion lookbooks and indie record label sites. Media flows endlessly along two opposing angled walls with smooth momentum physics and mouse tilt.

✨ Highlights:

Unlimited Images & Videos: Upload as many files as you want directly through Framer’s file picker.

Natural Fit (No Cropping): Photos and videos keep their true native proportions across varied collage scale sizes.

Flow Direction: Choose whether items cruise towards or away from the camera.

Interactive 3D Physics: Silky-smooth drag/wheel momentum, speed-tilt, and 3D hover pop.

Transparent & Lightweight: Blends seamlessly into any background. 60 FPS vanilla Three.js with strict WebGL cleanup and static SSR fallbacks.

How to use: Drop the code component into your project, add your media in the properties panel, and customize the tunnel width, speed, and gap.

Here's the link of the component: https://framer.link/sXup46T

Enjoy, and let me know what you build with it! 🚀