I just released Brick Cats for Framer. 🧱🐱
A playful interactive canvas component built around animated brick-style cats on a studded baseplate.
It comes with customizable colors, cat density, animation speed, hover interaction, glow effects, brick-drop animation, and responsive rendering.
Built to add a little personality to portfolios, landing pages, creative studios, and experimental web projects.
Made with 💛 by @Karim Saif .
Typography doesn't always have to appear.
Sometimes it can draw itself. ✍️
I built Path Drawing, a Framer component that turns text into an animated SVG stroke reveal.
You can customize the font, size, stroke, gradient, duration, looping, alignment, position, and drawing length directly from Framer's property panel.
Built to stay lightweight, responsive, and production-friendly while supporting reduced motion and Framer's static rendering.
A simple effect, but a fun way to give hero sections and editorial typography more personality.
Typography doesn't have to be static.
I built Gooey Text for Framer, a customizable text transition component that turns simple text changes into smooth, liquid-like motion.
It includes:
• Gooey Morph transitions
• Slide X and Slide Y variations
• Hover interactions
• Automatic looping
• Framer Font controls
• Custom animation timing
• Responsive sizing
• Reduced-motion support
Built to be dropped directly into Framer projects without complicated setup.
A small interaction, but a big difference in how a website feels.
Made with 💛 by @Karim Saif
🔥 I just released Text Burn Neon for Framer.
A character-by-character typography animation that makes headlines ignite with flickering heat, fiery color transitions, and customizable neon glow.
You can control everything directly from Framer, typography, colors, glow intensity, timing, flickers, character delay, and looping.
Built for designers who want their typography to feel less static and more alive.
Built with React + GSAP and designed specifically for Framer.
Typography can be an interaction.
I just built Text Inertia for Framer, an interactive text component where individual words respond to cursor movement with smooth, elastic motion.
You can customize the typography, movement strength, velocity, rotation, elasticity, alignment, and more directly from Framer.
Perfect for hero sections, portfolios, creative agencies, and experimental landing pages.
Static images don't have to stay static.
I just released Fluid Image Flow for Framer, a real-time WebGL component that lets images react to cursor and touch movement with fluid distortion and smooth transitions.
It includes:
• Real-time fluid simulation
• Interactive cursor/touch effects
• Image-to-image transitions
• 4 ready-made presets
• Full Custom controls
• Responsive WebGL rendering
• Reduced-motion and static-renderer support
Designed for portfolios, creative websites, agency pages, editorial layouts, and any Framer project that needs a more immersive visual layer.
I just built Magnetic Warp for Framer 🧲
A WebGL-powered image component that turns static visuals into interactive experiences.
Move your cursor across the image and watch it smoothly bend and react around the pointer.
Built with:
• Magnetic cursor interaction
• Customizable physics
• 4 ready-made presets
• Responsive image support
• Adjustable WebGL quality
• Reduced-motion support
• Framer property controls
• Performance-conscious rendering
Perfect for portfolios, agencies, product pages, creative websites, and interactive hero sections.
🎙️ Building a Voice AI or TTS product? (Sound on 🔊)
Your pre-launch website is the first impression, and a basic “coming soon” page doesn’t have to be the answer.
I built Voice AI Waitlist, a modern Framer template designed for AI and speech-tech products preparing for launch.
It includes:
• Animated voice waveform demo
• Live launch countdown
• Built-in waitlist signup
• Dark / light mode toggle
• Fully responsive design
• Custom Thank You + 404 pages
• Token-based colors & typography
• Step-by-step customization instructions
Everything you need to start collecting early-access signups without building the entire launch page from scratch.
Built for founders launching AI products, validating demand, and building hype before launch. 🚀
I just released Jelly Lens, a new interactive WebGL component for Framer.
The idea was simple: make an image feel less static.
Jelly Lens turns the cursor into a soft glass lens that follows movement with spring physics, magnifies the image beneath it, and adds subtle chromatic refraction and glass highlights.
It includes ready-made presets as well as detailed Framer controls for customization.
I just released Sheer Veil for Framer.
A real-time WebGL curtain effect designed to bring a more cinematic feel to modern websites.
It features:
• Realistic fabric folds
• Wind simulation
• Interactive cursor distortion
• Dynamic silk lighting
• Image reveal
• Split or single panels
• Submit, click, hover, or manual opening
• Ready-made visual presets
• Responsive rendering
Designed for creative portfolios, luxury websites, product launches, waitlists, events, and immersive hero sections.
Made with 💛 by @Karim Saif
Try it in Framer.
A small Framer milestone I’m really happy about.
My DNA Carousel component is now #1 in Framer’s Carousel Components, and it’s completely free. 🧬
I built it to bring a more distinctive, interactive carousel experience to Framer without making it complicated for designers to use.
Seeing it reach #1 has been incredibly motivating.
Thank you to everyone who tried it, used it, shared it, or simply stopped by to check it out.
I built a music player for Framer that doesn't need to take over your layout. 🎵
The idea was simple: keep the player minimal when it's not being used, then reveal the full experience when someone interacts with it.
The result is a Hover Expand Music Player with:
→ Custom audio uploads
→ Album artwork
→ Play / pause / restart / stop
→ Interactive progress
→ Volume control
→ Animated equalizer
→ Smooth spring expansion
→ Reduced-motion support
→ Fully customizable Framer controls
Everything can be configured directly from the Framer property panel.
Built with the goal of making audio feel like part of the interaction, not just another UI element.
I just released Video Player Pro for Framer 🎥
I wanted a video component that felt more native to a modern Framer website instead of looking like a browser-default video element.
The player includes:
• Hover-to-show controls
• Play / pause
• Progress and seeking
• Volume and mute
• Playback speed controls
• Fullscreen
• Autoplay and loop
• Responsive sizing
• Custom colors, blur, opacity, radius, and spacing
• Keyboard shortcuts
• Touch-device support
• Reduced-motion support
Everything is customizable directly through Framer's property panel.
It's designed for portfolios, agencies, product websites, case studies, landing pages, and creative projects where video needs to feel like part of the design.
I just built a CD-inspired music player for Framer. 💿
Instead of another standard audio player, I wanted the interaction to feel physical.
The CD slides out of its sleeve, spins while the track is playing, and connects to a clean playback interface underneath.
The component includes:
• Real audio playback
• Custom music uploads
• Play / pause controls
• Restart and skip controls
• Interactive progress seeking
• Keyboard accessibility
• Animated equalizer
• Responsive scaling
• Reduced-motion support
• Static Framer rendering
• Custom colors and animation controls
It's designed for musicians, artists, record labels, portfolios, creative studios, and anyone looking for a more tactile music experience.
I just built a new interactive market chart component for Framer.
Market Chart brings a complete market-data visual system into the Framer canvas, including:
• Candlestick and area charts
• Volume visualization
• Interactive crosshair inspection
• Multiple time ranges
• Simulated live market movement
• Responsive SVG rendering
• Extensive visual customization
It is designed for fintech, crypto, investment, analytics, SaaS, and dashboard interfaces.
I just released Animated Beam for Framer ⚡
A flexible component for creating animated integrations, workflows, product ecosystems, and connected interface visuals.
It includes:
• Hub & Spoke mode
• Converge mode
• Parallel mode
• 9 visual presets
• Responsive SVG beam paths
• Animated gradient effects
• Custom nodes and images
• Optional endpoint cards
• Custom convergence icons
• Curvature and direction controls
• Animation timing and easing controls
• Reduced-motion support
• Static rendering support
Everything can be customized directly from Framer's property panel, so you can start with a preset and quickly adapt it to your own visual system.
I just released a new Funnel Chart component for Framer.
The goal was simple: make conversion funnels feel like a polished part of a website instead of a generic analytics widget.
It includes:
• Horizontal & vertical layouts
• Custom stage colors & gradients
• Curved or straight edges
• Adjustable depth layers
• Labels, values & percentages
• Patterns and grid systems
• Entrance animations
• Interactive hover effects
• Fully responsive sizing
• Framer Property Controls
It works especially well for SaaS websites, marketing pages, analytics dashboards, sales funnels, customer journeys, and data-driven landing pages.
Introducing Light Bloom, a new interactive WebGL background for Framer.
I wanted to create something that feels more atmospheric than a traditional gradient background, so I built procedural light rays that evolve across the screen with subtle cursor interaction.
It comes with:
• 7 color presets
• 7 animation presets
• Custom color controls
• Adjustable glow, density, speed, grain, and mouse sensitivity
• Responsive WebGL rendering
• Static-renderer support
• Performance-conscious viewport and visibility handling
Perfect for hero sections, portfolios, creative websites, product launches, and immersive landing pages.
I just released a new Framer component: Animated Ribbons.
It turns handcrafted SVG paths into a flexible animated background that can be customized directly inside Framer.
You can control:
• Ribbon colors
• Multi-color gradients
• Position, rotation, and scale
• Stroke width
• On-load animation
• In-view animation
• Scroll-driven drawing
• Animation timing and easing
• Staggering
• Grain texture
• Background color
The idea was simple: create a visual effect that feels expressive and premium without making the design difficult to customize.
Great for portfolios, creative studios, hero sections, product pages, and experimental websites.
What if your Framer background behaved like liquid metal?
I built Ferrofluid Background, a procedural WebGL component that creates a magnetic ferrofluid surface with:
🧲 Dynamic magnetic spikes
🖱 Cursor interaction
✨ Metallic reflections
🌊 Fluid motion
🎨 Multiple visual presets
⚡ Performance-conscious rendering
📱 Responsive WebGL rendering
Designed to work directly inside Framer with everything exposed through Property Controls.
I just released Brick Cats for Framer. 🧱🐱
A playful interactive canvas component built around animated brick-style cats on a studded baseplate.
It comes with customizable colors, cat density, animation speed, hover interaction, glow effects, brick-drop animation, and responsive rendering.
Built to add a little personality to portfolios, landing pages, creative studios, and experimental web projects.
Made with 💛 by @Karim Saif .
Typography doesn't always have to appear.
Sometimes it can draw itself. ✍️
I built Path Drawing, a Framer component that turns text into an animated SVG stroke reveal.
You can customize the font, size, stroke, gradient, duration, looping, alignment, position, and drawing length directly from Framer's property panel.
Built to stay lightweight, responsive, and production-friendly while supporting reduced motion and Framer's static rendering.
A simple effect, but a fun way to give hero sections and editorial typography more personality.
Typography doesn't have to be static.
I built Gooey Text for Framer, a customizable text transition component that turns simple text changes into smooth, liquid-like motion.
It includes:
• Gooey Morph transitions
• Slide X and Slide Y variations
• Hover interactions
• Automatic looping
• Framer Font controls
• Custom animation timing
• Responsive sizing
• Reduced-motion support
Built to be dropped directly into Framer projects without complicated setup.
A small interaction, but a big difference in how a website feels.
Made with 💛 by @Karim Saif
🔥 I just released Text Burn Neon for Framer.
A character-by-character typography animation that makes headlines ignite with flickering heat, fiery color transitions, and customizable neon glow.
You can control everything directly from Framer, typography, colors, glow intensity, timing, flickers, character delay, and looping.
Built for designers who want their typography to feel less static and more alive.
Built with React + GSAP and designed specifically for Framer.
Typography can be an interaction.
I just built Text Inertia for Framer, an interactive text component where individual words respond to cursor movement with smooth, elastic motion.
You can customize the typography, movement strength, velocity, rotation, elasticity, alignment, and more directly from Framer.
Perfect for hero sections, portfolios, creative agencies, and experimental landing pages.
Static images don't have to stay static.
I just released Fluid Image Flow for Framer, a real-time WebGL component that lets images react to cursor and touch movement with fluid distortion and smooth transitions.
It includes:
• Real-time fluid simulation
• Interactive cursor/touch effects
• Image-to-image transitions
• 4 ready-made presets
• Full Custom controls
• Responsive WebGL rendering
• Reduced-motion and static-renderer support
Designed for portfolios, creative websites, agency pages, editorial layouts, and any Framer project that needs a more immersive visual layer.
I just built Magnetic Warp for Framer 🧲
A WebGL-powered image component that turns static visuals into interactive experiences.
Move your cursor across the image and watch it smoothly bend and react around the pointer.
Built with:
• Magnetic cursor interaction
• Customizable physics
• 4 ready-made presets
• Responsive image support
• Adjustable WebGL quality
• Reduced-motion support
• Framer property controls
• Performance-conscious rendering
Perfect for portfolios, agencies, product pages, creative websites, and interactive hero sections.
🎙️ Building a Voice AI or TTS product? (Sound on 🔊)
Your pre-launch website is the first impression, and a basic “coming soon” page doesn’t have to be the answer.
I built Voice AI Waitlist, a modern Framer template designed for AI and speech-tech products preparing for launch.
It includes:
• Animated voice waveform demo
• Live launch countdown
• Built-in waitlist signup
• Dark / light mode toggle
• Fully responsive design
• Custom Thank You + 404 pages
• Token-based colors & typography
• Step-by-step customization instructions
Everything you need to start collecting early-access signups without building the entire launch page from scratch.
Built for founders launching AI products, validating demand, and building hype before launch. 🚀
I just released Jelly Lens, a new interactive WebGL component for Framer.
The idea was simple: make an image feel less static.
Jelly Lens turns the cursor into a soft glass lens that follows movement with spring physics, magnifies the image beneath it, and adds subtle chromatic refraction and glass highlights.
It includes ready-made presets as well as detailed Framer controls for customization.
I just released Sheer Veil for Framer.
A real-time WebGL curtain effect designed to bring a more cinematic feel to modern websites.
It features:
• Realistic fabric folds
• Wind simulation
• Interactive cursor distortion
• Dynamic silk lighting
• Image reveal
• Split or single panels
• Submit, click, hover, or manual opening
• Ready-made visual presets
• Responsive rendering
Designed for creative portfolios, luxury websites, product launches, waitlists, events, and immersive hero sections.
Made with 💛 by @Karim Saif
Try it in Framer.
A small Framer milestone I’m really happy about.
My DNA Carousel component is now #1 in Framer’s Carousel Components, and it’s completely free. 🧬
I built it to bring a more distinctive, interactive carousel experience to Framer without making it complicated for designers to use.
Seeing it reach #1 has been incredibly motivating.
Thank you to everyone who tried it, used it, shared it, or simply stopped by to check it out.
I built a music player for Framer that doesn't need to take over your layout. 🎵
The idea was simple: keep the player minimal when it's not being used, then reveal the full experience when someone interacts with it.
The result is a Hover Expand Music Player with:
→ Custom audio uploads
→ Album artwork
→ Play / pause / restart / stop
→ Interactive progress
→ Volume control
→ Animated equalizer
→ Smooth spring expansion
→ Reduced-motion support
→ Fully customizable Framer controls
Everything can be configured directly from the Framer property panel.
Built with the goal of making audio feel like part of the interaction, not just another UI element.
I just released Video Player Pro for Framer 🎥
I wanted a video component that felt more native to a modern Framer website instead of looking like a browser-default video element.
The player includes:
• Hover-to-show controls
• Play / pause
• Progress and seeking
• Volume and mute
• Playback speed controls
• Fullscreen
• Autoplay and loop
• Responsive sizing
• Custom colors, blur, opacity, radius, and spacing
• Keyboard shortcuts
• Touch-device support
• Reduced-motion support
Everything is customizable directly through Framer's property panel.
It's designed for portfolios, agencies, product websites, case studies, landing pages, and creative projects where video needs to feel like part of the design.
I just built a CD-inspired music player for Framer. 💿
Instead of another standard audio player, I wanted the interaction to feel physical.
The CD slides out of its sleeve, spins while the track is playing, and connects to a clean playback interface underneath.
The component includes:
• Real audio playback
• Custom music uploads
• Play / pause controls
• Restart and skip controls
• Interactive progress seeking
• Keyboard accessibility
• Animated equalizer
• Responsive scaling
• Reduced-motion support
• Static Framer rendering
• Custom colors and animation controls
It's designed for musicians, artists, record labels, portfolios, creative studios, and anyone looking for a more tactile music experience.
I just built a new interactive market chart component for Framer.
Market Chart brings a complete market-data visual system into the Framer canvas, including:
• Candlestick and area charts
• Volume visualization
• Interactive crosshair inspection
• Multiple time ranges
• Simulated live market movement
• Responsive SVG rendering
• Extensive visual customization
It is designed for fintech, crypto, investment, analytics, SaaS, and dashboard interfaces.
I just released Animated Beam for Framer ⚡
A flexible component for creating animated integrations, workflows, product ecosystems, and connected interface visuals.
It includes:
• Hub & Spoke mode
• Converge mode
• Parallel mode
• 9 visual presets
• Responsive SVG beam paths
• Animated gradient effects
• Custom nodes and images
• Optional endpoint cards
• Custom convergence icons
• Curvature and direction controls
• Animation timing and easing controls
• Reduced-motion support
• Static rendering support
Everything can be customized directly from Framer's property panel, so you can start with a preset and quickly adapt it to your own visual system.
I just released a new Funnel Chart component for Framer.
The goal was simple: make conversion funnels feel like a polished part of a website instead of a generic analytics widget.
It includes:
• Horizontal & vertical layouts
• Custom stage colors & gradients
• Curved or straight edges
• Adjustable depth layers
• Labels, values & percentages
• Patterns and grid systems
• Entrance animations
• Interactive hover effects
• Fully responsive sizing
• Framer Property Controls
It works especially well for SaaS websites, marketing pages, analytics dashboards, sales funnels, customer journeys, and data-driven landing pages.
Introducing Light Bloom, a new interactive WebGL background for Framer.
I wanted to create something that feels more atmospheric than a traditional gradient background, so I built procedural light rays that evolve across the screen with subtle cursor interaction.
It comes with:
• 7 color presets
• 7 animation presets
• Custom color controls
• Adjustable glow, density, speed, grain, and mouse sensitivity
• Responsive WebGL rendering
• Static-renderer support
• Performance-conscious viewport and visibility handling
Perfect for hero sections, portfolios, creative websites, product launches, and immersive landing pages.
I just released a new Framer component: Animated Ribbons.
It turns handcrafted SVG paths into a flexible animated background that can be customized directly inside Framer.
You can control:
• Ribbon colors
• Multi-color gradients
• Position, rotation, and scale
• Stroke width
• On-load animation
• In-view animation
• Scroll-driven drawing
• Animation timing and easing
• Staggering
• Grain texture
• Background color
The idea was simple: create a visual effect that feels expressive and premium without making the design difficult to customize.
Great for portfolios, creative studios, hero sections, product pages, and experimental websites.
What if your Framer background behaved like liquid metal?
I built Ferrofluid Background, a procedural WebGL component that creates a magnetic ferrofluid surface with:
🧲 Dynamic magnetic spikes
🖱 Cursor interaction
✨ Metallic reflections
🌊 Fluid motion
🎨 Multiple visual presets
⚡ Performance-conscious rendering
📱 Responsive WebGL rendering
Designed to work directly inside Framer with everything exposed through Property Controls.
I just released Brick Cats for Framer. 🧱🐱
A playful interactive canvas component built around animated brick-style cats on a studded baseplate.
It comes with customizable colors, cat density, animation speed, hover interaction, glow effects, brick-drop animation, and responsive rendering.
Built to add a little personality to portfolios, landing pages, creative studios, and experimental web projects.
Made with 💛 by @Karim Saif .
Typography doesn't always have to appear.
Sometimes it can draw itself. ✍️
I built Path Drawing, a Framer component that turns text into an animated SVG stroke reveal.
You can customize the font, size, stroke, gradient, duration, looping, alignment, position, and drawing length directly from Framer's property panel.
Built to stay lightweight, responsive, and production-friendly while supporting reduced motion and Framer's static rendering.
A simple effect, but a fun way to give hero sections and editorial typography more personality.
Typography doesn't have to be static.
I built Gooey Text for Framer, a customizable text transition component that turns simple text changes into smooth, liquid-like motion.
It includes:
• Gooey Morph transitions
• Slide X and Slide Y variations
• Hover interactions
• Automatic looping
• Framer Font controls
• Custom animation timing
• Responsive sizing
• Reduced-motion support
Built to be dropped directly into Framer projects without complicated setup.
A small interaction, but a big difference in how a website feels.
Made with 💛 by @Karim Saif
🔥 I just released Text Burn Neon for Framer.
A character-by-character typography animation that makes headlines ignite with flickering heat, fiery color transitions, and customizable neon glow.
You can control everything directly from Framer, typography, colors, glow intensity, timing, flickers, character delay, and looping.
Built for designers who want their typography to feel less static and more alive.
Built with React + GSAP and designed specifically for Framer.
Typography can be an interaction.
I just built Text Inertia for Framer, an interactive text component where individual words respond to cursor movement with smooth, elastic motion.
You can customize the typography, movement strength, velocity, rotation, elasticity, alignment, and more directly from Framer.
Perfect for hero sections, portfolios, creative agencies, and experimental landing pages.
Static images don't have to stay static.
I just released Fluid Image Flow for Framer, a real-time WebGL component that lets images react to cursor and touch movement with fluid distortion and smooth transitions.
It includes:
• Real-time fluid simulation
• Interactive cursor/touch effects
• Image-to-image transitions
• 4 ready-made presets
• Full Custom controls
• Responsive WebGL rendering
• Reduced-motion and static-renderer support
Designed for portfolios, creative websites, agency pages, editorial layouts, and any Framer project that needs a more immersive visual layer.
I just built Magnetic Warp for Framer 🧲
A WebGL-powered image component that turns static visuals into interactive experiences.
Move your cursor across the image and watch it smoothly bend and react around the pointer.
Built with:
• Magnetic cursor interaction
• Customizable physics
• 4 ready-made presets
• Responsive image support
• Adjustable WebGL quality
• Reduced-motion support
• Framer property controls
• Performance-conscious rendering
Perfect for portfolios, agencies, product pages, creative websites, and interactive hero sections.
🎙️ Building a Voice AI or TTS product? (Sound on 🔊)
Your pre-launch website is the first impression, and a basic “coming soon” page doesn’t have to be the answer.
I built Voice AI Waitlist, a modern Framer template designed for AI and speech-tech products preparing for launch.
It includes:
• Animated voice waveform demo
• Live launch countdown
• Built-in waitlist signup
• Dark / light mode toggle
• Fully responsive design
• Custom Thank You + 404 pages
• Token-based colors & typography
• Step-by-step customization instructions
Everything you need to start collecting early-access signups without building the entire launch page from scratch.
Built for founders launching AI products, validating demand, and building hype before launch. 🚀
I just released Jelly Lens, a new interactive WebGL component for Framer.
The idea was simple: make an image feel less static.
Jelly Lens turns the cursor into a soft glass lens that follows movement with spring physics, magnifies the image beneath it, and adds subtle chromatic refraction and glass highlights.
It includes ready-made presets as well as detailed Framer controls for customization.
I just released Sheer Veil for Framer.
A real-time WebGL curtain effect designed to bring a more cinematic feel to modern websites.
It features:
• Realistic fabric folds
• Wind simulation
• Interactive cursor distortion
• Dynamic silk lighting
• Image reveal
• Split or single panels
• Submit, click, hover, or manual opening
• Ready-made visual presets
• Responsive rendering
Designed for creative portfolios, luxury websites, product launches, waitlists, events, and immersive hero sections.
Made with 💛 by @Karim Saif
Try it in Framer.
A small Framer milestone I’m really happy about.
My DNA Carousel component is now #1 in Framer’s Carousel Components, and it’s completely free. 🧬
I built it to bring a more distinctive, interactive carousel experience to Framer without making it complicated for designers to use.
Seeing it reach #1 has been incredibly motivating.
Thank you to everyone who tried it, used it, shared it, or simply stopped by to check it out.
I built a music player for Framer that doesn't need to take over your layout. 🎵
The idea was simple: keep the player minimal when it's not being used, then reveal the full experience when someone interacts with it.
The result is a Hover Expand Music Player with:
→ Custom audio uploads
→ Album artwork
→ Play / pause / restart / stop
→ Interactive progress
→ Volume control
→ Animated equalizer
→ Smooth spring expansion
→ Reduced-motion support
→ Fully customizable Framer controls
Everything can be configured directly from the Framer property panel.
Built with the goal of making audio feel like part of the interaction, not just another UI element.
I just released Video Player Pro for Framer 🎥
I wanted a video component that felt more native to a modern Framer website instead of looking like a browser-default video element.
The player includes:
• Hover-to-show controls
• Play / pause
• Progress and seeking
• Volume and mute
• Playback speed controls
• Fullscreen
• Autoplay and loop
• Responsive sizing
• Custom colors, blur, opacity, radius, and spacing
• Keyboard shortcuts
• Touch-device support
• Reduced-motion support
Everything is customizable directly through Framer's property panel.
It's designed for portfolios, agencies, product websites, case studies, landing pages, and creative projects where video needs to feel like part of the design.
I just built a CD-inspired music player for Framer. 💿
Instead of another standard audio player, I wanted the interaction to feel physical.
The CD slides out of its sleeve, spins while the track is playing, and connects to a clean playback interface underneath.
The component includes:
• Real audio playback
• Custom music uploads
• Play / pause controls
• Restart and skip controls
• Interactive progress seeking
• Keyboard accessibility
• Animated equalizer
• Responsive scaling
• Reduced-motion support
• Static Framer rendering
• Custom colors and animation controls
It's designed for musicians, artists, record labels, portfolios, creative studios, and anyone looking for a more tactile music experience.
I just built a new interactive market chart component for Framer.
Market Chart brings a complete market-data visual system into the Framer canvas, including:
• Candlestick and area charts
• Volume visualization
• Interactive crosshair inspection
• Multiple time ranges
• Simulated live market movement
• Responsive SVG rendering
• Extensive visual customization
It is designed for fintech, crypto, investment, analytics, SaaS, and dashboard interfaces.
I just released Animated Beam for Framer ⚡
A flexible component for creating animated integrations, workflows, product ecosystems, and connected interface visuals.
It includes:
• Hub & Spoke mode
• Converge mode
• Parallel mode
• 9 visual presets
• Responsive SVG beam paths
• Animated gradient effects
• Custom nodes and images
• Optional endpoint cards
• Custom convergence icons
• Curvature and direction controls
• Animation timing and easing controls
• Reduced-motion support
• Static rendering support
Everything can be customized directly from Framer's property panel, so you can start with a preset and quickly adapt it to your own visual system.
I just released a new Funnel Chart component for Framer.
The goal was simple: make conversion funnels feel like a polished part of a website instead of a generic analytics widget.
It includes:
• Horizontal & vertical layouts
• Custom stage colors & gradients
• Curved or straight edges
• Adjustable depth layers
• Labels, values & percentages
• Patterns and grid systems
• Entrance animations
• Interactive hover effects
• Fully responsive sizing
• Framer Property Controls
It works especially well for SaaS websites, marketing pages, analytics dashboards, sales funnels, customer journeys, and data-driven landing pages.
Introducing Light Bloom, a new interactive WebGL background for Framer.
I wanted to create something that feels more atmospheric than a traditional gradient background, so I built procedural light rays that evolve across the screen with subtle cursor interaction.
It comes with:
• 7 color presets
• 7 animation presets
• Custom color controls
• Adjustable glow, density, speed, grain, and mouse sensitivity
• Responsive WebGL rendering
• Static-renderer support
• Performance-conscious viewport and visibility handling
Perfect for hero sections, portfolios, creative websites, product launches, and immersive landing pages.
I just released a new Framer component: Animated Ribbons.
It turns handcrafted SVG paths into a flexible animated background that can be customized directly inside Framer.
You can control:
• Ribbon colors
• Multi-color gradients
• Position, rotation, and scale
• Stroke width
• On-load animation
• In-view animation
• Scroll-driven drawing
• Animation timing and easing
• Staggering
• Grain texture
• Background color
The idea was simple: create a visual effect that feels expressive and premium without making the design difficult to customize.
Great for portfolios, creative studios, hero sections, product pages, and experimental websites.
What if your Framer background behaved like liquid metal?
I built Ferrofluid Background, a procedural WebGL component that creates a magnetic ferrofluid surface with:
🧲 Dynamic magnetic spikes
🖱 Cursor interaction
✨ Metallic reflections
🌊 Fluid motion
🎨 Multiple visual presets
⚡ Performance-conscious rendering
📱 Responsive WebGL rendering
Designed to work directly inside Framer with everything exposed through Property Controls.
