51:I[267044,["/creators-assets/_next/static/immutable/chunks/356g_j0l71_46.js","/creators-assets/_next/static/immutable/chunks/15s1ft4k9lx-7.js","/creators-assets/_next/static/immutable/chunks/0x8sumr53pdkk.js","/creators-assets/_next/static/immutable/chunks/3pud1dqsw0-_7.js","/creators-assets/_next/static/immutable/chunks/1m75iqpnspynu.js","/creators-assets/_next/static/immutable/chunks/0c6romi9ma0is.js","/creators-assets/_next/static/immutable/chunks/3ohf-5_4hfjuq.js","/creators-assets/_next/static/immutable/chunks/2jjhfe7-w6y9a.js","/creators-assets/_next/static/immutable/chunks/325i2v5l4tnlq.js","/creators-assets/_next/static/immutable/chunks/0kisxyo3aw231.js","/creators-assets/_next/static/immutable/chunks/2b1mm8iiske-y.js","/creators-assets/_next/static/immutable/chunks/0i7m0zg6jfazw.js","/creators-assets/_next/static/immutable/chunks/3-hmotkz_bdv_.js","/creators-assets/_next/static/immutable/chunks/06bqtx1jsc1kz.js","/creators-assets/_next/static/immutable/chunks/3q5wansxm4vp6.js","/creators-assets/_next/static/immutable/chunks/14h9277o22-rl.js","/creators-assets/_next/static/immutable/chunks/3naniu4pnqfyw.js","/creators-assets/_next/static/immutable/chunks/2-y_r3u4wh2s3.js","/creators-assets/_next/static/immutable/chunks/456d4lcv9-syj.js","/creators-assets/_next/static/immutable/chunks/36-o7-3julke0.js","/creators-assets/_next/static/immutable/chunks/2xq6uu2rcdc2i.js","/creators-assets/_next/static/immutable/chunks/2y9gv91n8o3i9.js","/creators-assets/_next/static/immutable/chunks/3z6ke99nzr4_e.js","/creators-assets/_next/static/immutable/chunks/3e73rezw4k1a2.js","/creators-assets/_next/static/immutable/chunks/40oma2w708rd-.js","/creators-assets/_next/static/immutable/chunks/1fkcqskfw4hol.js","/creators-assets/_next/static/immutable/chunks/3ixl4aqv6ylo7.js","/creators-assets/_next/static/immutable/chunks/2x7-2b3jcc9x7.js","/creators-assets/_next/static/immutable/chunks/2di2v55rtz-8i.js","/creators-assets/_next/static/immutable/chunks/3_pg4jxj9aiiw.js","/creators-assets/_next/static/immutable/chunks/0l9v835j421-s.js","/creators-assets/_next/static/immutable/chunks/0qx5rzvbsd7bx.js","/creators-assets/_next/static/immutable/chunks/3b306xa-3tb7g.js","/creators-assets/_next/static/immutable/chunks/3g6klxxyg4m8-.js","/creators-assets/_next/static/immutable/chunks/2fvzgkzqkig_w.js","/creators-assets/_next/static/immutable/chunks/00owjoob9gqs9.js","/creators-assets/_next/static/immutable/chunks/3k6sa9ujkqb5c.js"],"S"] 52:Tce9,

Bring a playful brick-built world to your Framer site with Brick Cats, an interactive canvas animation featuring adorable brick-style cats standing on a studded building plate.

Cats gently animate across the scene while pointer interaction adds depth and energy. Customize the entire look, from brick and cat colors to animation speed, density, hover strength, glow, and more.

Designed to be lightweight, responsive, and easy to drop into any Framer project.

Great For

Playful and creative landing pages
Portfolio websites
Personal websites
Design studios and agencies
Creative developer portfolios
Kids and education websites
Interactive hero sections
Product launches
Experimental web experiences
Fun loading or decorative sections

Preview

https://brickcats.framer.website/

Features

Interactive brick-built cat scene
Animated brick-style cats
Studded baseplate environment
Pointer-based interaction
Adjustable cat density
Adjustable animation speed
Adjustable hover strength
Optional hover glow
Optional brick drop animation
Custom cat and brick color palettes
Custom background color
Custom eye color
Custom glow color
Adjustable stud size
Pause animation control
Responsive canvas rendering
Retina/DPR-aware rendering
Reduced-motion support
Visibility-aware animation
Automatic canvas resizing
Optimized rendering with cached baseplate layers
Built for Framer with responsive layout support

Customize

Make the component match your brand in seconds.

Colors

Background
Body
Cool brick colors
Warm brick colors
Eye color
Glow color

Animation

Speed
Hover strength
Brick drop
Pause animation
Hover glow

Scene

Stud size
Cat density

Create anything from a subtle monochrome scene to a colorful playful brick world.

Support

Need help setting up or customizing the component?

Email: karimsaif010@gmail.com

X: @karimsaif0

Made with 💛 by @Karim Saif .

53:Td0a,

Path Drawing turns your typography into a beautifully animated SVG stroke reveal. Watch your text progressively draw itself from start to finish with a smooth gradient outline and precise control over typography, timing, stroke, positioning, and animation behavior.

Built specifically for Framer, it is lightweight, responsive, and designed to work smoothly across different frame sizes and fonts.

Great for

Hero headlines
Portfolio websites
Creative agency websites
Personal portfolios
Landing pages
Product launches
Fashion and editorial websites
Experimental typography
Loading and intro sequences
Interactive storytelling
Section transitions
Statement typography

Live Preview: https://pathdrawing.framer.website/

Features

✍️ Animated SVG path-drawing text
🌈 Custom two-color gradient stroke
🔤 Native Framer font picker
📏 Adjustable font size
🖊️ Adjustable stroke width
⏱️ Custom animation duration
🔁 Optional infinite looping
↔️ Left, center, and right alignment
↕️ Adjustable vertical position
📐 Adjustable drawing length
📱 Fully responsive
♿ Reduced-motion support
⚡ Lightweight CSS/SVG animation
🎨 Works with custom Framer fonts
🔒 Safe static-renderer behavior for Framer
🔄 Automatically adapts the drawing length to the selected text/font

The component uses Framer's native ControlType.Font alongside dedicated controls for text, font size, stroke width, duration, colors, looping, alignment, vertical position, and draw length.

Support

Need help using the component, customizing the animation, or integrating it into your Framer project?

X: @Karim Saif

Email: karimsaif010@gmail.com

For support, bug reports, customization questions, or feedback, feel free to reach out.

X — @Karim Saif

54:Taf4,

Gooey Text creates a distinctive gooey morph effect between two text states using SVG filters and GSAP animation. Choose between Morph, Slide X, and Slide Y transitions, then customize the typography, color, blur intensity, timing, and interaction behavior directly from Framer's property panel.

Designed to be lightweight, responsive, and easy to drop into landing pages, hero sections, buttons, navigation, portfolios, and interactive experiences.

Great for

Hero headlines and landing pages
Interactive typography
Creative portfolios
Agency and studio websites
Navigation and menu interactions
CTA sections
Product launches
Experimental web design
Framer templates
Motion-focused websites

Preview:

https://gooeytext.framer.website/

Features

Smooth gooey text transitions
Morph, Slide X, and Slide Y variants
Custom Text A and Text B
Framer Font control
Adjustable text color
Adjustable goo strength
Custom animation duration
Adjustable slide distance
Loop animation
Hover interaction
Start from either text state
Responsive sizing
Reduced-motion support
Static-renderer support for Framer
Automatic animation cleanup
Lightweight SVG-based effect
Fully customizable through Framer Property Controls

Customize

Everything important is exposed through Framer's property controls.

Customize:

Text A
Text B
Font
Text alignment
Font size and typography
Text color
Goo strength
Animation duration
Slide distance
Loop timing
Hover behavior
Starting text state
Transition variant

No code changes are required for normal customization.

Support

Need help using the component, want to report an issue, or have an idea for an improvement?

X: @Karim Saif

Email: karimsaif010@gmail.com

I'm happy to help with setup, customization, and component questions.

55:Tabf,

Bring bold typography to life with Text Burn Neon, a character-by-character text animation that ignites your words with flickering heat, fiery colors, and customizable neon glow.

Built with GSAP for smooth, high-performance animation, every character burns in independently to create a dramatic ignition effect that works beautifully for hero headlines, landing pages, portfolios, product launches, creative websites, and experimental typography.

Customize the text, typography, burn colors, glow intensity, animation timing, flicker behavior, character delay, alignment, and looping directly from Framer's property panel.

Great for

Hero headlines and landing page intros
Creative portfolios and personal websites
Product launches and campaign pages
Gaming, entertainment, and cinematic websites
Dark-mode and neon-inspired designs
Experimental typography
Interactive marketing sections
Coming soon and launch pages
Bold CTA sections
Creative agency websites

Preview :

https://burntextreveal.framer.website/

Features

Character-by-character neon burn animation
Flickering ignition effect
Custom burn, hot, base, and glow colors
Adjustable neon glow intensity
Custom animation duration
Adjustable flicker count
Randomized character ignition timing
Optional infinite looping
Custom loop delay
Framer font control
Adjustable font size and letter spacing
Adjustable line height
Left, center, and right alignment
Multiline text support
Responsive sizing
Static-renderer support for reliable Framer output
GSAP-powered animation
Clean React-based implementation
Fully customizable through Framer property controls

Support

Need help customizing Text Burn Neon or integrating it into your Framer project?

I'm happy to help with setup, customization, or troubleshooting.

Support: karimsaif0101@gmail.com

X: @karimsaif0

Created and customized for Framer by @Karim Saif .

56:Tb00,

Text Inertia is an interactive typography component that gives each word a smooth, physical reaction to cursor movement.

Move your cursor across the text and watch the words stretch, shift, and rotate with an elastic motion. Adjust the strength, velocity, rotation, elasticity, typography, and alignment directly from Framer's property panel.

Built with lightweight native React animation and designed to work smoothly inside Framer without external animation dependencies.

Great For

Interactive hero headlines
Portfolio websites
Creative agency websites
Personal portfolios
Experimental typography
Landing pages
Product showcases
Interactive navigation
Motion-focused websites
Modern Framer designs

Preview

https://inertiatextt.framer.website/

Features

Cursor-driven word interaction
Independent word movement
Elastic motion
Dynamic rotation
Adjustable interaction strength
Adjustable cursor velocity response
Custom elasticity
Custom font controls
Adjustable font size
Letter spacing control
Line height control
Text color control
Left, center, and right alignment
Disable interaction when needed
Reduced-motion support
Framer static-renderer support
Lightweight, dependency-free animation
Responsive Framer layout support

Customize

Make the interaction match your design.

Typography Choose your font, size, letter spacing, line height, and color.

Interaction Control the strength, velocity, rotation, and elasticity of the animation.

Layout Choose left, center, or right alignment to fit your composition.

Behavior Disable the interaction whenever you want a static text experience while keeping the same typography and layout.

Support

Need help customizing the component or integrating it into your Framer project?

X: @Karim Saif

Email: karimsaif010@gmail.com

I’m happy to help with setup, customization, and component-related questions.

57:T979,

Fluid Image Flow transforms static images into a dynamic, interactive fluid experience. Move your cursor across the canvas to create liquid-like distortion, swirling motion, and flowing transitions between two images.

Built with WebGL and a real-time fluid simulation, it combines image displacement, velocity, dye diffusion, pressure solving, and vorticity to create a smooth interactive visual effect.

Great For

Creative agency websites
Portfolio and personal websites
Photography and editorial layouts
Fashion and luxury websites
Hero sections
Interactive image galleries
Product showcases
Art and experimental websites
Landing pages
WebGL-focused experiences
Interactive transitions
Motion-heavy Framer projects

Live Preview: https://fluidimageflow.framer.website/

Features

Real-time WebGL fluid simulation
Interactive cursor and touch movement
Smooth image displacement
Transition between two images
Automatic fluid movement
Four built-in fluid presets
Custom simulation controls
Adjustable fluid curl and force
Adjustable dye and velocity dissipation
Adjustable displacement strength
Adjustable pointer strength
Adjustable automatic flow speed
Low, Medium, and High quality modes
Responsive canvas sizing
Retina/DPR-aware rendering
Reduced-motion support
Static renderer fallback for Framer
Intersection-based rendering optimization
WebGL context-loss handling
Automatic resource cleanup
Responsive image controls
Touch-friendly interaction

Support

Need help setting up the component or customizing the effect?

X: @karimsaif

Email: karimsaif010@gmail.com

58:Tb5d,

Magnetic Warp is an interactive WebGL image component for Framer that transforms static images into fluid, responsive visuals. Move your cursor across the image to create a smooth magnetic distortion that pulls and bends the image around your pointer.

Built with customizable presets, adjustable physics, responsive sizing, reduced-motion support, and optimized WebGL rendering, Magnetic Warp adds depth and interaction without requiring any additional setup.

Preview

https://magneticwarp.framer.website/

Great For

Creative portfolios
Agency websites
Digital product landing pages
Photography websites
Art and editorial websites
Fashion and luxury brands
Interactive hero sections
Experimental web experiences
Featured project sections
Modern Framer websites

Features

Interactive magnetic image distortion
WebGL-powered rendering
Smooth cursor-based interaction
Balanced, Soft, Strong, and Wide presets
Custom strength control
Adjustable stiffness and damping
Customizable interaction radius
Responsive image support
Cover-style image rendering
Adjustable WebGL quality
Reduced-motion support
Static-renderer support
Automatic resizing with ResizeObserver
Offscreen rendering optimization
WebGL context handling
Custom background color
Adjustable corner radius
Disabled mode for a completely static image
Lightweight and fully customizable in Framer

Customize

Magnetic Warp gives you control over the interaction without changing the core component.

Choose from four presets or use the Balanced preset to fine-tune the effect manually. Adjust the magnetic Strength, Stiffness, Damping, and Radius to create anything from a subtle image movement to a stronger fluid distortion.

You can also control WebGL Quality, background color, corner radius, and disabled mode directly from Framer's property panel.

Support

Need help setting up Magnetic Warp or have a question about customization?

X: https://x.com/karimsaif0

Email: karimsaif010@gmail.com

59:Ta0d,

Voice AI Waitlist is a sleek, conversion-focused landing page template built for launching a text-to-speech or voice AI product before it's live. It combines a bold hero section, a live countdown timer, an animated waveform demo, and a waitlist signup form, all wrapped in a modern dark-first design with a built-in light mode toggle.

Preview :: https://voiceaiwaitlist.framer.website/

Great for

AI/voice/speech-tech startups building pre-launch hype
SaaS products validating demand before shipping
Founders who want a polished "coming soon" page without building from scratch
Anyone running an early-access or beta waitlist campaign

Pages included

Home — hero, countdown, animated TTS demo, waitlist form
/thank-you — confirmation page shown after signup
/404 — custom not-found page

Features

🌗 One-click dark / light mode toggle, with the visitor's choice remembered on return visits
🎙️ Animated text-to-speech waveform demo section
⏱️ Live countdown timer to launch day
📝 Waitlist signup form, ready to connect to your email/CRM tool
🎨 Fully token-based color & type system — change one style, updates the whole site
📱 Fully responsive across desktop, tablet, and mobile

Fast customization No guesswork, the template ships with a built-in Template Instruction page: a step-by-step guide covering duplication, branding, fonts & colors, editing the homepage, SEO setup, and launch checklist, so you can make it yours in minutes.

Support Questions or issues? Reach out anytime:

X: @karimsaif0
Email: karimsaif010@gmail.com

5a:Tada,

A fluid WebGL image effect that turns your cursor into a soft, glassy jelly lens. Move your cursor across the image to create a smooth magnifying effect with spring-based motion, subtle chromatic refraction, and a polished glass highlight.

Designed to add depth and tactile interaction to image-driven Framer websites without requiring complicated setup.

Preview: https://jellylensinteraction.framer.website/

Great for

Creative portfolios
Digital agencies
Art direction websites
Photography portfolios
Fashion and editorial websites
Product showcases
Interactive landing pages
Experimental and WebGL websites
Hero sections
Image galleries
Award-style websites

Features

Interactive cursor-following jelly lens
Real-time WebGL rendering
Smooth spring-based movement
Adjustable magnification
Adjustable lens radius
Adjustable stiffness and damping
Subtle chromatic refraction
Glass highlight effect
Image cover scaling
Responsive canvas sizing
Automatic device pixel ratio control
Reduced-motion support
Offscreen rendering optimization
WebGL context recovery
Static-renderer fallback
Ready-made visual presets
Fully customizable through Framer property controls
No external image-processing setup required

Customize

Choose from four ready-made presets:

Soft Jelly
Glass Lens
Strong Magnifier
Liquid Bubble

Or switch to Custom and fine-tune the interaction yourself.

Customize the magnification strength, lens radius, spring stiffness, damping, rendering quality, interaction state, and reduced-motion behavior directly from Framer.

Support

Created and customized for Framer by Karim Saif.

If you need help using the component, have found a bug, or have an idea for an improvement, reach out:

Email: karimsaif010@gmail.com

X: @Karim Saif

5b:Ta3c,

Sheer Veil is an interactive WebGL curtain effect designed to create cinematic hero sections, launches, forms, and immersive website reveals.

The curtain behaves like translucent fabric with realistic folds, subtle textile detail, lighting, wind movement, and cursor interaction. Use it as a visual entrance layer, reveal animation, or atmospheric hero effect with controls for colors, transparency, folds, panels, lighting, interaction, and opening behavior.

Choose from five ready-made visual presets Organza, Ivory, Pearl, Smoke, and Midnight or customize the look to match your site.

Preview

https://sheerveilplastic.framer.website/

Great For

Luxury landing pages
Fashion and beauty websites
Creative portfolios
Product launches
Event and wedding websites
Coming-soon pages
Signup and waitlist experiences
Interactive hero sections
Cinematic website intros
Experimental Framer websites

Features

Real-time WebGL fabric simulation
Translucent sheer curtain effect
Realistic procedural folds
Interactive cursor distortion
Continuous wind simulation
Cursor-based light highlights
Custom silk and sheen colors
Adjustable fabric transparency
Split or single curtain panels
Multiple opening triggers
Submit-triggered reveal
Click-to-open interaction
Hover-to-open interaction
Manual open/close control
Automatic close timing
Background image reveal
Procedural textile weave
Optional film-grain texture
Five built-in visual presets
Responsive canvas rendering
Reduced-motion support
Static Framer canvas/thumbnail rendering
Offscreen animation pausing for better performance

Support

Need help setting up Sheer Veil or customizing it for your Framer project?

X: @karimsaif

Email: karimsaif010@gmail.com

5c:Tf25,

A compact, interactive music player for Framer that smoothly expands on hover into a full playback interface. Upload your own audio, add album artwork, customize the colors and sizing, and give your website a polished music experience without any external setup.

Built with smooth spring motion, real audio playback, progress controls, volume control, and responsive Framer property controls.

Preview

https://hoverexpandplayer.framer.website/

Great For

Music portfolios
Artist & musician websites
Creative portfolios
Personal websites
Audio experiences
Interactive landing pages
Product showcases
Creative agencies
Experimental websites
Framer projects that need a compact audio player

Features

🎵 Upload your own music directly from Framer
🖼️ Custom album artwork
✨ Smooth hover-to-expand interaction
▶️ Play / pause controls
🔄 Restart track
⏹️ Stop track
🎚️ Volume control
📊 Interactive playback progress
⌨️ Keyboard-friendly progress controls
🎧 Live playback time and duration
📈 Animated equalizer
🌙 Reduced-motion support
📐 Fully customizable closed and expanded sizes
🎨 Custom background, text, accent, progress, and muted colors
💫 Optional shadow and adjustable shadow opacity
⚡ Adjustable animation speed
📱 Responsive Framer component
🧩 Framer property controls for easy customization

The component supports uploaded MP3, WAV, OGG, M4A, and AAC files through its Music control.

Customize

Everything is designed to be customized directly inside Framer.

Content

Track title
Artist name
Music file
Album artwork

Layout

Closed width
Closed height
Open width
Open height
Corner radius

Colors

Background
Text
Muted text
Accent
Progress track
Progress fill

Interaction

Hover expansion
Animation speed
Preview open/closed state

Effects

Shadow
Shadow opacity

All of these controls are exposed through Framer's property panel.

Support

Need help customizing the component or have an issue with your setup?

Email: karimsaif010@gmail.com

X: @Karim Saif

5d:Ta91,

A modern, customizable video player for Framer with clean controls, smooth hover interactions, and a polished minimal interface.

Upload your video, add an optional poster image, and customize the player directly from Framer’s property panel. Controls can automatically appear on hover and disappear when the pointer leaves, while touch devices keep the controls accessible.

Preview : https://videoplayerpro.framer.website/

Great For

Product and SaaS websites
Creative portfolios
Agency websites
Design studios
Product showcases
Case studies
Landing pages
Video portfolios
Brand websites
Editorial and storytelling websites
Interactive Framer projects
Background and promotional videos

Features

Custom video upload
Optional poster image
Hover-to-show video controls
Configurable hover fade duration
Play and pause controls
Progress bar with seeking
Current time and duration display
Volume slider
Mute and unmute
Custom playback speeds
Configurable default playback speed
Fullscreen mode
Autoplay support
Muted playback support
Loop playback
Responsive sizing
Cover, contain, and fill object-fit modes
Custom video corner radius
Custom control panel radius
Control background opacity
Backdrop blur
Custom control color
Custom accent color
Adjustable progress-bar height
Adjustable control padding
Adjustable control spacing
Keyboard shortcuts
Touch-device support
Reduced-motion support
Static-renderer support
Accessible control labels
No external UI libraries required

Support

Need help setting up the Video Player or have an issue with the component?

Contact me and I'll be happy to help.

Email: karimsaif010@gmail.com

X: https://x.com/karimsaif0

5e:Tae0,

CD Envelope Player

A tactile music player inspired by physical CD packaging.

The CD smoothly slides out of its sleeve, spins while music is playing, and pairs with a minimal playback card for a polished, editorial-style experience.

Upload your own audio, customize the colors and motion, and create a distinctive music experience without any external setup.

Preview

Preview: https://cdenvelopeplayer.framer.website/

Great For

Music portfolios
Artist and musician websites
Record labels
Creative studios
Music releases
Album landing pages
Personal portfolios
Editorial websites
Experimental and interactive websites
Premium Framer projects

Features

Real audio playback
Upload your own music
Animated CD sliding from the sleeve
CD rotation while playing
Play / pause controls
Restart track control
30-second skip control
Interactive progress bar
Keyboard-accessible seeking
Current time and duration display
Animated equalizer
Artist and track title
Autoplay support
Adjustable playback volume
Reduced-motion support
Static-renderer support
Responsive narrow-frame scaling
Smooth Framer-native animations
Fully customizable colors
Custom CD size
Adjustable slide distance
Adjustable animation duration
Adjustable spin speed
Adjustable card spacing and radius
Adjustable sleeve radius
Show/hide interface elements

Customize

Everything is designed to be easy to adapt inside Framer.

Customize the CD size, slide distance, slide animation, spin speed, card spacing, corner radius, sleeve radius, colors, accent color, playback information, and visibility of the player controls.

Upload your own MP3, WAV, OGG, M4A, or AAC file and turn the component into a custom music player for your project.

Support

Need help setting up the component or customizing it for your project?

Contact Karim Saif:

X: @Karim Saif

Email: karimsaif010@fmail.com

5f:T9a3,

A polished, responsive market chart component for Framer with interactive candlesticks, smooth area charts, volume visualization, range switching, crosshair inspection, and simulated live market movement.

Designed for modern fintech, crypto, SaaS, analytics, trading, dashboard, and financial website designs.

Preview

Live Preview — Market Chart

Great for

Fintech and financial websites
Crypto and Web3 landing pages
Trading dashboards
Investment and portfolio interfaces
SaaS analytics dashboards
Stock and market data presentations
Product showcases
Data visualization sections
Interactive Framer prototypes
Modern dark or light interface designs

Features

Responsive SVG-based chart
Candlestick chart mode
Smooth area chart mode
SOL, AAPL, and BTC demo datasets
1W, 1M, 3M, 6M, and 1Y ranges
Interactive range selector
Simulated live market stream
Volume bars
Current-price line and price badge
Interactive crosshair
OHLCV hover information
Keyboard chart navigation
Bullish and bearish colors
Optional hollow bullish candles
Adjustable candle opacity
Compact price formatting
Custom colors
Adjustable chart height
Adjustable price typography
Custom border radius
Grid visibility control
Tooltip visibility control
Animation controls
Reduced-motion support
Static-renderer support
Responsive layout for different Framer frame sizes

Support

Need help using or customizing the component?

Contact me at karimsaif010@gmail.com

Follow me on X for new Framer components, templates, experiments, and updates:

@karimsaif

60:Ta2a,

Bring your Framer layouts to life with a flexible animated beam system designed for integrations, workflows, networks, product connections, and modern interface visuals.

Animated Beam gives you three visual modes, Hub & Spoke, Converge, and Parallel, with responsive SVG paths, animated gradient beams, customizable nodes, endpoint cards, convergence icons, and a collection of ready-to-use visual presets.

Preview : https://animatedbeam.framer.website/

Great for

SaaS integration sections
AI and automation workflows
Product ecosystem diagrams
API and developer platforms
Tool and app integrations
Partner and technology networks
Workflow visualizations
Product feature sections
Hero sections
Landing pages
Dashboard interfaces
Startup and technology websites
Agency and portfolio websites
“How it works” sections
Connected product experiences

Features

3 animation modes
Hub & Spoke layout
Converge layout
Parallel layout
9 ready-made visual presets
Fully responsive SVG beam paths
Animated gradient beams
Custom beam colors
Adjustable beam width and opacity
Adjustable animation duration
Animation delay and stagger controls
Repeat delay control
Speed variation
Multiple easing options
Reverse animation
Custom curvature
Horizontal and vertical Parallel layouts
Horizontal and vertical flipping
Custom convergence position
Custom convergence bend
Customizable Hub nodes
Custom node images
Custom center image
Optional endpoint cards
Custom card text and icons
Custom card colors and borders

Support

Need help setting up Animated Beam or have a problem with your Framer project?

Email: karimsaif010@gmail.com

Follow Karim Saif on X for new Framer components, experiments, resources, and updates.

X: @karimsaif

61:T69e,

Funnel Chart is a flexible, animated funnel visualization for Framer, designed to turn conversion data into a polished visual story.

Create beautiful sales funnels, marketing journeys, conversion flows, onboarding analytics, customer journeys, and product performance charts with fully customizable stages, colors, gradients, patterns, labels, grids, animation, and hover interactions.

Choose between horizontal or vertical layouts, adjust the depth and spacing, use curved or straight edges, and customize every stage individually. The responsive layout adapts automatically to your Framer canvas.

Perfect for dashboards, SaaS websites, marketing pages, analytics sections, case studies, and presentations.

Preview

Live Funnel Chart Preview

Great for

SaaS & product websites
Marketing funnels
Sales conversion flows
Analytics dashboards
Customer journeys
Lead generation pages
E-commerce conversion data
Product case studies
Growth & performance sections
Onboarding flows
Business presentations
Data-driven landing pages

Support

Need help customizing the component or have a question?

X: @karimsaif

Email: karimsaif010@gmail.com

62:Tbe2,

Light Bloom is an interactive WebGL background that creates atmospheric beams of light rising from the bottom of the screen. Procedural noise generates organic light formations, while cursor movement adds a subtle interactive glow for a more dynamic visual effect.

It includes ready-made color and animation presets, plus individual controls for creating your own visual style.

Preview

Light Bloom Background Preview

Great For

Hero sections
Landing pages
Portfolio websites
Creative agency websites
SaaS websites
Product launches
Digital experiences
Full-screen backgrounds
Dark-mode designs
Interactive visual sections

Features

WebGL-powered light bloom
Procedural animated light rays
Cursor-reactive lighting
7 color presets
7 animation presets
Custom color controls
Adjustable glow intensity
Adjustable wave density
Adjustable animation speed
Film-grain control
Mouse sensitivity control
Responsive canvas
High-DPI support with capped rendering resolution
Static-renderer support
Automatic animation pausing when outside the viewport
Page-visibility optimization
WebGL context recovery
Lightweight fullscreen shader architecture

Customize

Choose from Aurora, Violet, Ocean, Ember, Ice, Mono, or switch to Custom and create your own palette.

For animation, choose Slow, Smooth, Flow, Pulse, Cinematic, Static, or use Custom for individual control.

Custom controls include:

Core Light controls the brightest part of the light.
Bloom controls the main atmospheric light color.
Background controls the base background.
Glow Intensity controls the overall light strength.
Wave Density controls the density of the light formations.
Speed controls animation speed.
Grain adds subtle texture.
Mouse Sensitivity controls cursor interaction.

Support

Need help customizing the component or using it in your Framer project?

X: @karimsaif

Email: karimsaif010@gmail.com

63:Tb34,

Animated Ribbons is a lightweight decorative background component that brings flowing, hand-crafted ribbon paths to Framer websites.

Create elegant animated line compositions with multiple preset ribbons, custom colors, gradients, positioning, rotation, scaling, and flexible animation triggers. Use it as a subtle visual layer behind hero sections, portfolios, landing pages, creative studios, product pages, and experimental websites.

Designed to stay visually expressive while remaining simple to customize directly from the Framer property panel.

Preview

Live Preview: https://animatedribbonsbg.framer.website/

Great For

Hero sections
Portfolio websites
Creative agencies
Design studios
Product landing pages
Experimental websites
Editorial layouts
Fashion and art websites
Personal portfolios
Background decoration
Minimalist websites
Motion-focused designs

Features

6 handcrafted animated ribbon paths
Adjustable number of visible ribbons
Individual ribbon colors
Multi-color gradients
Gradient angle controls
Position controls
Rotation controls
Individual ribbon scaling
Adjustable stroke width
Rounded or sharp line caps
On-load animation
In-view animation
Scroll-driven drawing animation
Scroll animation range controls
Scroll staggering
Reverse scroll animation
Animation duration
Start delay
Animation stagger
Multiple easing options
Play-once option
Configurable in-view threshold
Optional animated grain texture
Adjustable grain amount
Adjustable grain size
Custom background color
Reduced-motion support
Static-renderer support
Responsive Framer layout support
Lightweight SVG-based rendering

Support

Need help customizing the component or integrating it into your Framer project?

X: https://x.com/karimsaif0

Email: karimsaif010@gmail.com

I’m happy to help with setup, customization, and troubleshooting.

64:T895,

A cinematic, interactive WebGL ferrofluid effect for Framer.

Ferrofluid Background transforms your website into a living metallic surface inspired by ferrofluid — sharp magnetic spikes, liquid-like motion, glossy reflections, and dynamic cursor interaction combine to create a futuristic visual backdrop.

Built with WebGL and GLSL, it renders the effect directly on the GPU without external assets or video files. Use it as a full-screen background, hero visual, or atmospheric layer behind your typography and UI.

Preview

https://ferrofluidbackground.framer.website/

Great For

Ferrofluid Background works especially well for:

🚀 SaaS and technology websites
🤖 AI and futuristic landing pages
🎨 Creative portfolios
🧑‍🎨 Designer and developer portfolios
💎 Premium product websites
🖥 Hero sections
🌌 Dark-mode websites
🧪 Experimental and generative websites
🎮 Gaming and interactive experiences
🖼 Full-screen visual backgrounds
🪩 Creative agency websites
✨ Art-directed landing pages

Insert → Customize → Publish.

Support

Need help using Ferrofluid Background, found a bug, or have an idea for an improvement?

Feel free to reach out.

Email: karimsaif010@gmail.com

X: @karimsaif0

I'm always happy to help with questions, feedback, and feature requests.

50:["$","$L51",null,{"value":{"fallback":{"$inf$activity-creator-cdbd7ebc-86d4-4b64-baea-421f236c7c35-all:/unified/creator/cdbd7ebc-86d4-4b64-baea-421f236c7c35/activity/":[{"data":[{"id":"01a1160f-4af2-75ef-a47f-91784d0d7f21","type":"component.created","target":{"type":"component","id":"RNnYj6qrq3pKurWWveTI","preview":"Brick Cats Interact","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/cdbd7ebc-86d4-4b64-baea-421f236c7c35/01a1160e-a58f-758f-b480-fbe466cfaa25.png","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"cdbd7ebc-86d4-4b64-baea-421f236c7c35","name":"Karim Saif","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/38316/JKMR4LgEt-1ogBJEJjcXu0BLVSwyn9DCkQ64JbBx","slug":"karim-saif","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":"component","visibility":"public","startedAt":"2026-10-07T11:11:03.410Z","latestAt":"2026-10-07T11:11:03.410Z"},{"id":"01a11068-75fa-71d3-b42e-f9866ecb4a90","type":"component.created","target":{"type":"component","id":"kkcO5O9VKGnVgK8yYTpI","preview":"Path Drawing Text","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/cdbd7ebc-86d4-4b64-baea-421f236c7c35/01a11066-7ad6-726c-8197-d9ffc8755102.png","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"cdbd7ebc-86d4-4b64-baea-421f236c7c35","name":"Karim Saif","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/38316/JKMR4LgEt-1ogBJEJjcXu0BLVSwyn9DCkQ64JbBx","slug":"karim-saif","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":"component","visibility":"public","startedAt":"2026-10-06T08:50:43.834Z","latestAt":"2026-10-06T08:50:43.834Z"},{"id":"01a10ce0-0a80-76ef-984d-1899c7d50803","type":"component.created","target":{"type":"component","id":"OHAumHcpxW6g15knbg4j","preview":"Gooey Text","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/cdbd7ebc-86d4-4b64-baea-421f236c7c35/01a10cdf-06aa-733a-a42a-9cbc6191b1b7.png","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"cdbd7ebc-86d4-4b64-baea-421f236c7c35","name":"Karim Saif","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/38316/JKMR4LgEt-1ogBJEJjcXu0BLVSwyn9DCkQ64JbBx","slug":"karim-saif","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":"component","visibility":"public","startedAt":"2026-10-05T16:22:51.776Z","latestAt":"2026-10-05T16:22:51.776Z"},{"id":"01a10cd9-1605-70ac-b466-ef7ae40ea3c5","type":"post.liked","target":{"type":"post","id":"01a10ca0-5f27-759b-9ea5-0470ce338f40","preview":"Literally just posted that I had zero sales this month 😅 And here we go. \nAnother North Bureau sale. \nReally grateful for every single one. Thank you!","previewJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Literally just posted that I had zero sales this month "},{"type":"emoji","attrs":{"name":"sweat_smile","emoji":"😅"}},{"type":"text","text":" And here we go. "}]},{"type":"paragraph","content":[{"type":"text","text":"Another North Bureau sale. "}]},{"type":"paragraph","content":[{"type":"text","text":"Really grateful for every single one. Thank you!"}]}]},"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/07a17754-5df9-4d71-ad8c-5365212f2a3f/01a10ca0-18c3-748f-b038-bece62d57fd4.png","targetDeleted":false,"owned":false,"actions":{"postId":"01a10ca0-5f27-759b-9ea5-0470ce338f40","like":{"count":2,"liked":false},"reply":{"parentCommentId":null},"repost":{"count":0,"reposted":false,"repostId":null}}},"context":null,"actors":[{"id":"cdbd7ebc-86d4-4b64-baea-421f236c7c35","name":"Karim Saif","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/38316/JKMR4LgEt-1ogBJEJjcXu0BLVSwyn9DCkQ64JbBx","slug":"karim-saif","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-10-05T16:15:15.965Z","latestAt":"2026-10-05T16:15:15.965Z"},{"id":"01a10cd8-8f5a-727b-8f24-1bcafdf6e5d4","type":"post.liked","target":{"type":"post","id":"01a10cc1-8289-7674-9d0e-5bde63b1ef33","preview":"CROTOX - A Perfect Free Framer Portfolio Template for Web Designers/Brand Designers to Showcase Their Work. 🚀\nFeel free to use it: https://framer.link/ftz69Ea","previewJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"CROTOX - A Perfect Free Framer Portfolio Template for Web Designers/Brand Designers to Showcase Their Work. "},{"type":"emoji","attrs":{"name":"rocket","emoji":"🚀"}}]},{"type":"paragraph","content":[{"type":"text","text":"Feel free to use it: "},{"type":"text","text":"https://framer.link/ftz69Ea","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"https://framer.link/ftz69Ea","target":"_blank"}}]}]}]},"thumbnail":"https://image.mux.com/4LW0101Xb00Vzd5LtSGejj1tie6M83hhRpf34IDHc5PjMc/thumbnail.webp?time=9.583","targetDeleted":false,"owned":false,"actions":{"postId":"01a10cc1-8289-7674-9d0e-5bde63b1ef33","like":{"count":15,"liked":false},"reply":{"parentCommentId":null},"repost":{"count":1,"reposted":false,"repostId":null}}},"context":null,"actors":[{"id":"cdbd7ebc-86d4-4b64-baea-421f236c7c35","name":"Karim Saif","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/38316/JKMR4LgEt-1ogBJEJjcXu0BLVSwyn9DCkQ64JbBx","slug":"karim-saif","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-10-05T16:14:41.482Z","latestAt":"2026-10-05T16:14:41.482Z"},{"id":"01a107bb-59eb-71bf-a19f-fa82fed7a336","type":"component.created","target":{"type":"component","id":"mKf4BzcGLMeIPNm644yJ","preview":"Burn Text Reveal","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/cdbd7ebc-86d4-4b64-baea-421f236c7c35/01a107ba-ab0a-7740-a580-b5d4d9271c99.png","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"cdbd7ebc-86d4-4b64-baea-421f236c7c35","name":"Karim Saif","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/38316/JKMR4LgEt-1ogBJEJjcXu0BLVSwyn9DCkQ64JbBx","slug":"karim-saif","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":"component","visibility":"public","startedAt":"2026-10-04T16:24:41.195Z","latestAt":"2026-10-04T16:24:41.195Z"},{"id":"01a103ae-6c44-767c-b38c-81d20f612e8d","type":"component.created","target":{"type":"component","id":"vkg1z55LCmbSewjsmc6s","preview":"Inertia Text","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/cdbd7ebc-86d4-4b64-baea-421f236c7c35/01a103ad-ec2d-733c-ba5a-045403e143ca.png","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"cdbd7ebc-86d4-4b64-baea-421f236c7c35","name":"Karim Saif","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/38316/JKMR4LgEt-1ogBJEJjcXu0BLVSwyn9DCkQ64JbBx","slug":"karim-saif","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":"component","visibility":"public","startedAt":"2026-10-03T21:32:05.060Z","latestAt":"2026-10-03T21:32:05.060Z"},{"id":"01a10350-ae08-7649-8585-6a6d2850a953","type":"comment.reply","target":{"type":"post","id":"01a0febf-1241-75ee-9c9c-8d7460259b60","preview":"Fluid Image Flow","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/cdbd7ebc-86d4-4b64-baea-421f236c7c35/01a0fec1-9240-769b-9fc5-a6edc3574a11.png","targetDeleted":false,"owned":true,"actions":{"postId":"01a0febf-1241-75ee-9c9c-8d7460259b60","like":{"count":4,"liked":false},"reply":{"parentCommentId":null},"repost":{"count":0,"reposted":false,"repostId":null}}},"context":{"type":"comment","id":"01a10350-adf5-76bc-897b-3213a93e7c28","preview":"Yeah, Thanks a lot! Henry","previewJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Yeah, Thanks a lot! Henry"}]}]},"thumbnail":null,"targetDeleted":false,"owned":true,"actions":{"postId":"01a0febf-1241-75ee-9c9c-8d7460259b60","like":{"count":0,"liked":false},"reply":{"parentCommentId":"01a0ff99-6d72-7005-9508-434d617b3f59"},"repost":null}},"actors":[{"id":"cdbd7ebc-86d4-4b64-baea-421f236c7c35","name":"Karim Saif","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/38316/JKMR4LgEt-1ogBJEJjcXu0BLVSwyn9DCkQ64JbBx","slug":"karim-saif","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-10-03T19:49:41.512Z","latestAt":"2026-10-03T19:49:41.512Z"},{"id":"01a10350-4fb7-732c-a5be-1059fae6e5f5","type":"comment.liked","target":{"type":"comment","id":"01a0ff99-6d72-7005-9508-434d617b3f59","preview":"Trippy...love it! 🔥","previewJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Trippy...love it! "},{"type":"emoji","attrs":{"name":"fire","emoji":"🔥"}}]}]},"thumbnail":null,"targetDeleted":false,"owned":false,"actions":{"postId":"01a0febf-1241-75ee-9c9c-8d7460259b60","like":{"count":1,"liked":false},"reply":{"parentCommentId":"01a0ff99-6d72-7005-9508-434d617b3f59"},"repost":null}},"context":{"type":"post","id":"01a0febf-1241-75ee-9c9c-8d7460259b60","preview":"Fluid Image Flow","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/cdbd7ebc-86d4-4b64-baea-421f236c7c35/01a0fec1-9240-769b-9fc5-a6edc3574a11.png","targetDeleted":false,"owned":true,"actions":{"postId":"01a0febf-1241-75ee-9c9c-8d7460259b60","like":{"count":4,"liked":false},"reply":{"parentCommentId":null},"repost":{"count":0,"reposted":false,"repostId":null}}},"actors":[{"id":"cdbd7ebc-86d4-4b64-baea-421f236c7c35","name":"Karim Saif","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/38316/JKMR4LgEt-1ogBJEJjcXu0BLVSwyn9DCkQ64JbBx","slug":"karim-saif","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-10-03T19:49:17.362Z","latestAt":"2026-10-03T19:49:17.362Z"},{"id":"01a0febf-14be-70d5-94f6-452d305e00d6","type":"component.created","target":{"type":"component","id":"ayroSvNIYaHrLLrGhV0A","preview":"Fluid Image Flow","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/cdbd7ebc-86d4-4b64-baea-421f236c7c35/01a0fec1-9240-769b-9fc5-a6edc3574a11.png","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"cdbd7ebc-86d4-4b64-baea-421f236c7c35","name":"Karim Saif","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/38316/JKMR4LgEt-1ogBJEJjcXu0BLVSwyn9DCkQ64JbBx","slug":"karim-saif","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":"component","visibility":"public","startedAt":"2026-10-02T22:32:10.686Z","latestAt":"2026-10-02T22:32:10.686Z"},{"id":"01a0fd12-2a68-72e8-a4d6-1da6b87b7d5f","type":"component.created","target":{"type":"component","id":"ViSRtJGdNa4sqwjT2muM","preview":"Magnetic Warp","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/cdbd7ebc-86d4-4b64-baea-421f236c7c35/01a0fd11-2a50-7458-bfff-7bb61837ffcb.png","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"cdbd7ebc-86d4-4b64-baea-421f236c7c35","name":"Karim Saif","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/38316/JKMR4LgEt-1ogBJEJjcXu0BLVSwyn9DCkQ64JbBx","slug":"karim-saif","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":"component","visibility":"public","startedAt":"2026-10-02T14:43:41.288Z","latestAt":"2026-10-02T14:43:41.288Z"},{"id":"01a0f86d-47da-7285-9db3-26a386754f13","type":"template.created","target":{"type":"template","id":"74443","preview":"Voice Waitlist","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/cdbd7ebc-86d4-4b64-baea-421f236c7c35/01a0f869-7743-729a-9aff-6cee82981985.png","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"cdbd7ebc-86d4-4b64-baea-421f236c7c35","name":"Karim Saif","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/38316/JKMR4LgEt-1ogBJEJjcXu0BLVSwyn9DCkQ64JbBx","slug":"karim-saif","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":"template","visibility":"public","startedAt":"2026-10-01T17:05:06.522Z","latestAt":"2026-10-01T17:05:06.522Z"},{"id":"01a0f40b-cee1-71ac-a971-3db8ed5ed9ba","type":"comment.reply","target":{"type":"post","id":"01a0ef95-d187-775a-bfe7-30dd5e0a4b54","preview":"Jelly Lens Interact","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/cdbd7ebc-86d4-4b64-baea-421f236c7c35/01a0ef95-7714-77ea-9eeb-0d077768b342.png","targetDeleted":false,"owned":true,"actions":{"postId":"01a0ef95-d187-775a-bfe7-30dd5e0a4b54","like":{"count":9,"liked":false},"reply":{"parentCommentId":null},"repost":{"count":0,"reposted":false,"repostId":null}}},"context":{"type":"comment","id":"01a0f40b-cebb-74f9-bc28-e97cfe9e8496","preview":"Thanks a lot, Tanjim","previewJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Thanks a lot, Tanjim"}]}]},"thumbnail":null,"targetDeleted":false,"owned":true,"actions":{"postId":"01a0ef95-d187-775a-bfe7-30dd5e0a4b54","like":{"count":1,"liked":false},"reply":{"parentCommentId":"01a0f06e-c4cc-74a7-add1-3246c4fe5b7e"},"repost":null}},"actors":[{"id":"cdbd7ebc-86d4-4b64-baea-421f236c7c35","name":"Karim Saif","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/38316/JKMR4LgEt-1ogBJEJjcXu0BLVSwyn9DCkQ64JbBx","slug":"karim-saif","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-09-30T20:40:09.697Z","latestAt":"2026-09-30T20:40:09.697Z"},{"id":"01a0f40b-919f-77f8-a5c5-4d95f7a31d67","type":"comment.liked","target":{"type":"comment","id":"01a0f06e-c4cc-74a7-add1-3246c4fe5b7e","preview":"Superb!!","previewJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Superb!! "}]}]},"thumbnail":null,"targetDeleted":false,"owned":false,"actions":{"postId":"01a0ef95-d187-775a-bfe7-30dd5e0a4b54","like":{"count":1,"liked":false},"reply":{"parentCommentId":"01a0f06e-c4cc-74a7-add1-3246c4fe5b7e"},"repost":null}},"context":{"type":"post","id":"01a0ef95-d187-775a-bfe7-30dd5e0a4b54","preview":"Jelly Lens Interact","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/cdbd7ebc-86d4-4b64-baea-421f236c7c35/01a0ef95-7714-77ea-9eeb-0d077768b342.png","targetDeleted":false,"owned":true,"actions":{"postId":"01a0ef95-d187-775a-bfe7-30dd5e0a4b54","like":{"count":9,"liked":false},"reply":{"parentCommentId":null},"repost":{"count":0,"reposted":false,"repostId":null}}},"actors":[{"id":"cdbd7ebc-86d4-4b64-baea-421f236c7c35","name":"Karim Saif","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/38316/JKMR4LgEt-1ogBJEJjcXu0BLVSwyn9DCkQ64JbBx","slug":"karim-saif","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-09-30T20:39:54.008Z","latestAt":"2026-09-30T20:39:54.008Z"},{"id":"01a0ef95-d596-75ac-9af0-5f98733ce0d2","type":"component.created","target":{"type":"component","id":"yA7DKIW2yU3q1QHbDXZ5","preview":"Jelly Lens Interact","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/cdbd7ebc-86d4-4b64-baea-421f236c7c35/01a0ef95-7714-77ea-9eeb-0d077768b342.png","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"cdbd7ebc-86d4-4b64-baea-421f236c7c35","name":"Karim Saif","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/38316/JKMR4LgEt-1ogBJEJjcXu0BLVSwyn9DCkQ64JbBx","slug":"karim-saif","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":"component","visibility":"public","startedAt":"2026-09-29T23:52:49.302Z","latestAt":"2026-09-29T23:52:49.302Z"},{"id":"01a0ea08-60d9-7169-8a81-90e55add6ff8","type":"component.created","target":{"type":"component","id":"XFSrMb9RL33p5VCHZKYu","preview":"Sheer Veil Plastic","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/cdbd7ebc-86d4-4b64-baea-421f236c7c35/01a0ea03-0f24-70f8-ae01-2e6ca4fc66f2.png","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"cdbd7ebc-86d4-4b64-baea-421f236c7c35","name":"Karim Saif","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/38316/JKMR4LgEt-1ogBJEJjcXu0BLVSwyn9DCkQ64JbBx","slug":"karim-saif","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":"component","visibility":"public","startedAt":"2026-09-28T22:00:12.761Z","latestAt":"2026-09-28T22:00:12.761Z"},{"id":"01a0e570-8468-760d-b65d-26c7148f2888","type":"component.created","target":{"type":"component","id":"kNr8Ntg3WsYnpl4HE4al","preview":"Hover Expand Player","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/cdbd7ebc-86d4-4b64-baea-421f236c7c35/01a0e56f-c87a-74b2-97b2-093972e475a6.png","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"cdbd7ebc-86d4-4b64-baea-421f236c7c35","name":"Karim Saif","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/38316/JKMR4LgEt-1ogBJEJjcXu0BLVSwyn9DCkQ64JbBx","slug":"karim-saif","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":"component","visibility":"public","startedAt":"2026-09-28T00:35:51.528Z","latestAt":"2026-09-28T00:35:51.528Z"},{"id":"01a0dfc9-4d47-723a-a008-5dd10f21fbce","type":"component.created","target":{"type":"component","id":"k7A2z3CkFR0nf3Bc68UG","preview":"Video Player Pro KS","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/cdbd7ebc-86d4-4b64-baea-421f236c7c35/01a0dfc8-288d-7736-87b1-c07f6486c61e.png","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"cdbd7ebc-86d4-4b64-baea-421f236c7c35","name":"Karim Saif","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/38316/JKMR4LgEt-1ogBJEJjcXu0BLVSwyn9DCkQ64JbBx","slug":"karim-saif","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":"component","visibility":"public","startedAt":"2026-09-26T22:15:06.823Z","latestAt":"2026-09-26T22:15:06.823Z"},{"id":"01a0dd9f-af36-73ac-8257-f8f53318d98f","type":"post.liked","target":{"type":"post","id":"01a07ac4-ced3-770d-8ee9-f811b143d872","preview":"My new #Framer template is now live\nThis template is a $99 value, but for the next 30 days, it’s yours for free.\nCargoFlow – Logistics & Transportation Framer Template\nCargoFlow is a modern, clean, and easy-to-use Framer template designed for logistics companies, freight forwarders, transportation services, shipping companies, supply chain businesses, cargo services, and freight management companies that want to present their services with clarity and professionalism.\nCheck: https://framer.link/O91cdwK\n#logistics #transportation #travel #service #ui #ux #framer #framer #template #freetemplate #webflow #nocode #lowcode #figma #framer #logistics #transportaion #transport #freight #air #shipping #service #supplychain #supply #air #rail","previewJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"My new #"},{"type":"text","text":"Framer","marks":[{"type":"bold"}]},{"type":"text","text":" template is now live"}]},{"type":"paragraph","content":[{"type":"text","text":"This template is a $99 value, but for the next 30 days, it’s yours for free."}]},{"type":"paragraph","content":[{"type":"text","text":"CargoFlow – Logistics & Transportation Framer Template","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"CargoFlow is a modern, clean, and easy-to-use Framer template designed for logistics companies, freight forwarders, transportation services, shipping companies, supply chain businesses, cargo services, and freight management companies that want to present their services with clarity and professionalism."}]},{"type":"paragraph","content":[{"type":"text","text":"Check: "},{"type":"text","text":"https://framer.link/O91cdwK","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"https://framer.link/O91cdwK","target":"_blank"}}]}]},{"type":"paragraph","content":[{"type":"text","text":"#logistics","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"https://lnkd.in/gYK8s8Ac#logistics","target":"_blank"}},{"type":"bold"}]},{"type":"text","text":" "},{"type":"text","text":"#transportation","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"https://www.linkedin.com/search/results/all/?keywords=%23transportation&origin=HASH_TAG_FROM_FEED","target":"_blank"}},{"type":"bold"}]},{"type":"text","text":" "},{"type":"text","text":"#travel","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"https://www.linkedin.com/search/results/all/?keywords=%23travel&origin=HASH_TAG_FROM_FEED","target":"_blank"}},{"type":"bold"}]},{"type":"text","text":" "},{"type":"text","text":"#service","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"https://www.linkedin.com/search/results/all/?keywords=%23service&origin=HASH_TAG_FROM_FEED","target":"_blank"}},{"type":"bold"}]},{"type":"text","text":" "},{"type":"text","text":"#ui","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"https://www.linkedin.com/search/results/all/?keywords=%23ui&origin=HASH_TAG_FROM_FEED","target":"_blank"}},{"type":"bold"}]},{"type":"text","text":" "},{"type":"text","text":"#ux","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"https://www.linkedin.com/search/results/all/?keywords=%23ux&origin=HASH_TAG_FROM_FEED","target":"_blank"}},{"type":"bold"}]},{"type":"text","text":" "},{"type":"text","text":"#framer","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"https://www.linkedin.com/search/results/all/?keywords=%23framer&origin=HASH_TAG_FROM_FEED","target":"_blank"}},{"type":"bold"}]},{"type":"text","text":" "},{"type":"text","text":"#framer","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"https://www.linkedin.com/search/results/all/?keywords=%23framer&origin=HASH_TAG_FROM_FEED","target":"_blank"}},{"type":"bold"}]},{"type":"text","text":" "},{"type":"text","text":"#template","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"https://www.linkedin.com/search/results/all/?keywords=%23template&origin=HASH_TAG_FROM_FEED","target":"_blank"}},{"type":"bold"}]},{"type":"text","text":" "},{"type":"text","text":"#freetemplate","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"https://www.linkedin.com/search/results/all/?keywords=%23freetemplate&origin=HASH_TAG_FROM_FEED","target":"_blank"}},{"type":"bold"}]},{"type":"text","text":" "},{"type":"text","text":"#webflow","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"https://www.linkedin.com/search/results/all/?keywords=%23webflow&origin=HASH_TAG_FROM_FEED","target":"_blank"}},{"type":"bold"}]},{"type":"text","text":" "},{"type":"text","text":"#nocode","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"https://www.linkedin.com/search/results/all/?keywords=%23nocode&origin=HASH_TAG_FROM_FEED","target":"_blank"}},{"type":"bold"}]},{"type":"text","text":" "},{"type":"text","text":"#lowcode","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"https://www.linkedin.com/search/results/all/?keywords=%23lowcode&origin=HASH_TAG_FROM_FEED","target":"_blank"}},{"type":"bold"}]},{"type":"text","text":" "},{"type":"text","text":"#figma","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"https://www.linkedin.com/search/results/all/?keywords=%23figma&origin=HASH_TAG_FROM_FEED","target":"_blank"}},{"type":"bold"}]},{"type":"text","text":" "},{"type":"text","text":"#framer","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"https://www.linkedin.com/search/results/all/?keywords=%23framer&origin=HASH_TAG_FROM_FEED","target":"_blank"}},{"type":"bold"}]},{"type":"text","text":" "},{"type":"text","text":"#logistics","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"https://www.linkedin.com/search/results/all/?keywords=%23logistics&origin=HASH_TAG_FROM_FEED","target":"_blank"}},{"type":"bold"}]},{"type":"text","text":" "},{"type":"text","text":"#transportaion","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"https://www.linkedin.com/search/results/all/?keywords=%23transportaion&origin=HASH_TAG_FROM_FEED","target":"_blank"}},{"type":"bold"}]},{"type":"text","text":" "},{"type":"text","text":"#transport","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"https://www.linkedin.com/search/results/all/?keywords=%23transport&origin=HASH_TAG_FROM_FEED","target":"_blank"}},{"type":"bold"}]},{"type":"text","text":" "},{"type":"text","text":"#freight","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"https://www.linkedin.com/search/results/all/?keywords=%23freight&origin=HASH_TAG_FROM_FEED","target":"_blank"}},{"type":"bold"}]},{"type":"text","text":" "},{"type":"text","text":"#air","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"https://www.linkedin.com/search/results/all/?keywords=%23air&origin=HASH_TAG_FROM_FEED","target":"_blank"}},{"type":"bold"}]},{"type":"text","text":" "},{"type":"text","text":"#shipping","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"https://www.linkedin.com/search/results/all/?keywords=%23shipping&origin=HASH_TAG_FROM_FEED","target":"_blank"}},{"type":"bold"}]},{"type":"text","text":" "},{"type":"text","text":"#service","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"https://www.linkedin.com/search/results/all/?keywords=%23service&origin=HASH_TAG_FROM_FEED","target":"_blank"}},{"type":"bold"}]},{"type":"text","text":" "},{"type":"text","text":"#supplychain","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"https://www.linkedin.com/search/results/all/?keywords=%23supplychain&origin=HASH_TAG_FROM_FEED","target":"_blank"}},{"type":"bold"}]},{"type":"text","text":" "},{"type":"text","text":"#supply","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"https://www.linkedin.com/search/results/all/?keywords=%23supply&origin=HASH_TAG_FROM_FEED","target":"_blank"}},{"type":"bold"}]},{"type":"text","text":" "},{"type":"text","text":"#air","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"https://www.linkedin.com/search/results/all/?keywords=%23air&origin=HASH_TAG_FROM_FEED","target":"_blank"}},{"type":"bold"}]},{"type":"text","text":" "},{"type":"text","text":"#rail","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"https://www.linkedin.com/search/results/all/?keywords=%23rail&origin=HASH_TAG_FROM_FEED","target":"_blank"}},{"type":"bold"}]}]}]},"thumbnail":"https://image.mux.com/X02fcjRF01hereka79k1Nj6KTY3uko4867qE4i1Zhs3KI/thumbnail.webp?time=3.167","targetDeleted":false,"owned":false,"actions":{"postId":"01a07ac4-ced3-770d-8ee9-f811b143d872","like":{"count":12,"liked":false},"reply":{"parentCommentId":null},"repost":{"count":0,"reposted":false,"repostId":null}}},"context":null,"actors":[{"id":"cdbd7ebc-86d4-4b64-baea-421f236c7c35","name":"Karim Saif","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/38316/JKMR4LgEt-1ogBJEJjcXu0BLVSwyn9DCkQ64JbBx","slug":"karim-saif","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-09-26T12:10:24.943Z","latestAt":"2026-09-26T12:10:24.943Z"},{"id":"01a0dd9f-a75a-72fb-b72c-b5aa532a423c","type":"post.liked","target":{"type":"post","id":"01a08be5-3a12-773b-8189-a48bf51995e4","preview":"Meet Flowra, a clean & calming Framer template built for yoga studios, wellness centers, meditation coaches, fitness instructors, and retreats.\nCheck- https://framer.link/jCJbTFq\nCMS for classes, events & blogs\nBuild your wellness website faster with Flowra.\n#framer #template #yoga #studio #wellness #meditation #fintess #cms #figma #tempaltes","previewJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Meet Flowra, a clean & calming Framer template built for yoga studios, wellness centers, meditation coaches, fitness instructors, and retreats."}]},{"type":"paragraph","content":[{"type":"text","text":"Check- "},{"type":"text","text":"https://framer.link/jCJbTFq","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"https://framer.link/jCJbTFq","target":"_blank"}}]}]},{"type":"paragraph","content":[{"type":"text","text":"CMS for classes, events & blogs"}]},{"type":"paragraph","content":[{"type":"text","text":"Build your wellness website faster with Flowra."}]},{"type":"paragraph","content":[{"type":"text","text":"#framer #template #yoga #studio #wellness #meditation #fintess #cms #figma #tempaltes"}]}]},"thumbnail":"https://image.mux.com/LbNL6V02qQN1wzsGXUrlLACUpA5r8k4jgzfMxSMLt7pw/thumbnail.webp?time=38.126","targetDeleted":false,"owned":false,"actions":{"postId":"01a08be5-3a12-773b-8189-a48bf51995e4","like":{"count":15,"liked":false},"reply":{"parentCommentId":null},"repost":{"count":0,"reposted":false,"repostId":null}}},"context":null,"actors":[{"id":"cdbd7ebc-86d4-4b64-baea-421f236c7c35","name":"Karim Saif","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/38316/JKMR4LgEt-1ogBJEJjcXu0BLVSwyn9DCkQ64JbBx","slug":"karim-saif","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-09-26T12:10:22.934Z","latestAt":"2026-09-26T12:10:22.934Z"}],"pagination":{"next":"MjAyNi0wOS0yNlQxMjoxMDoyMi45MzRafDAxYTBkZDlmLWE3NWEtNzJmYi1iNzJjLWI1YWE1MzJhNDIzYw","previous":null},"totalCount":"$undefined","feedSession":"$undefined"}],"$inf$posts:cdbd7ebc-86d4-4b64-baea-421f236c7c35:/unified/posts/?creator=cdbd7ebc-86d4-4b64-baea-421f236c7c35&with=reposts":[{"data":[{"id":"01a1160f-4873-754d-9e9d-5e1ee631a586","title":null,"body":"

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 .

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"I just released"},{"type":"text","text":" Brick Cats","marks":[{"type":"bold"}]},{"type":"text","text":" for Framer. "},{"type":"emoji","attrs":{"name":"bricks","emoji":"🧱"}},{"type":"emoji","attrs":{"name":"cat","emoji":"🐱"}}]},{"type":"paragraph","content":[{"type":"text","text":"A playful interactive canvas component built around animated brick-style cats on a studded baseplate."}]},{"type":"paragraph","content":[{"type":"text","text":"It comes with customizable colors, cat density, animation speed, hover interaction, glow effects, brick-drop animation, and responsive rendering."}]},{"type":"paragraph","content":[{"type":"text","text":"Built to add a little personality to portfolios, landing pages, creative studios, and experimental web projects."}]},{"type":"paragraph","content":[{"type":"text","text":"Made with "},{"type":"emoji","attrs":{"name":"yellow_heart","emoji":"💛"}},{"type":"text","text":" by "},{"type":"mention","attrs":{"id":"cdbd7ebc-86d4-4b64-baea-421f236c7c35","slug":"karim-saif","label":"Karim Saif","mentionSuggestionChar":"@"}},{"type":"text","text":" ."}]}]},"author":{"framerUserId":"cdbd7ebc-86d4-4b64-baea-421f236c7c35","name":"Karim Saif","slug":"karim-saif","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/38316/JKMR4LgEt-1ogBJEJjcXu0BLVSwyn9DCkQ64JbBx","followed":false,"followsYou":false},"media":[],"resources":[{"id":"RNnYj6qrq3pKurWWveTI","resolved":true,"title":"Brick Cats Interact","body":"$52","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Bring a playful brick-built world to your Framer site with "},{"type":"text","text":"Brick Cats","marks":[{"type":"bold"}]},{"type":"text","text":", an interactive canvas animation featuring adorable brick-style cats standing on a studded building plate."}]},{"type":"paragraph","content":[{"type":"text","text":"Cats gently animate across the scene while pointer interaction adds depth and energy. Customize the entire look, from brick and cat colors to animation speed, density, hover strength, glow, and more."}]},{"type":"paragraph","content":[{"type":"text","text":"Designed to be lightweight, responsive, and easy to drop into any Framer project."}]},{"type":"paragraph","content":[{"type":"text","text":"Great For","marks":[{"type":"bold"}]}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Playful and creative landing pages"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Portfolio websites"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Personal websites"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Design studios and agencies"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Creative developer portfolios"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Kids and education websites"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Interactive hero sections"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Product launches"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Experimental web experiences"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Fun loading or decorative sections"}]}]}]},{"type":"paragraph","content":[{"type":"text","text":"Preview","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"https://brickcats.framer.website/","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"https://brickcats.framer.website/","target":"_blank"}}]}]},{"type":"paragraph","content":[{"type":"text","text":"Features","marks":[{"type":"bold"}]}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Interactive brick-built cat scene"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Animated brick-style cats"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Studded baseplate environment"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Pointer-based interaction"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Adjustable cat density"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Adjustable animation speed"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Adjustable hover strength"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Optional hover glow"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Optional brick drop animation"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Custom cat and brick color palettes"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Custom background color"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Custom eye color"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Custom glow color"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Adjustable stud size"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Pause animation control"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Responsive canvas rendering"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Retina/DPR-aware rendering"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Reduced-motion support"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Visibility-aware animation"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Automatic canvas resizing"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Optimized rendering with cached baseplate layers"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Built for Framer with responsive layout support"}]}]}]},{"type":"paragraph","content":[{"type":"text","text":"Customize","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"Make the component match your brand in seconds."}]},{"type":"paragraph","content":[{"type":"text","text":"Colors","marks":[{"type":"bold"}]}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Background"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Body"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Cool brick colors"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Warm brick colors"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Eye color"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Glow color"}]}]}]},{"type":"paragraph","content":[{"type":"text","text":"Animation","marks":[{"type":"bold"}]}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Speed"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Hover strength"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Brick drop"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Pause animation"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Hover glow"}]}]}]},{"type":"paragraph","content":[{"type":"text","text":"Scene","marks":[{"type":"bold"}]}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Stud size"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Cat density"}]}]}]},{"type":"paragraph","content":[{"type":"text","text":"Create anything from a subtle monochrome scene to a colorful playful brick world."}]},{"type":"paragraph","content":[{"type":"text","text":"Support","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"Need help setting up or customizing the component?"}]},{"type":"paragraph","content":[{"type":"text","text":"Email:","marks":[{"type":"bold"}]},{"type":"text","text":" "},{"type":"text","text":"karimsaif010@gmail.com","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"mailto:karimsaif010@gmail.com","target":"_blank"}}]},{"type":"text","text":" "}]},{"type":"paragraph","content":[{"type":"text","text":"X:","marks":[{"type":"bold"}]},{"type":"text","text":" "},{"type":"text","text":"@karimsaif0","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"https://x.com/karimsaif0?utm_source=chatgpt.com","target":"_blank"}}]}]},{"type":"paragraph","content":[{"type":"text","text":"Made with "},{"type":"emoji","attrs":{"name":"yellow_heart","emoji":"💛"}},{"type":"text","text":" by "},{"type":"mention","attrs":{"id":"cdbd7ebc-86d4-4b64-baea-421f236c7c35","slug":"karim-saif","label":"Karim Saif","mentionSuggestionChar":"@"}},{"type":"text","text":" ."}]}]},"introduction":"Adorable brick-style cats standing","slug":"brick-cats-interact","author":{"framerUserId":"cdbd7ebc-86d4-4b64-baea-421f236c7c35","name":"Karim Saif","slug":"karim-saif","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/38316/JKMR4LgEt-1ogBJEJjcXu0BLVSwyn9DCkQ64JbBx","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/cdbd7ebc-86d4-4b64-baea-421f236c7c35/01a1160e-a58f-758f-b480-fbe466cfaa25.png","metadata":{"tint":{"h":240,"s":25,"l":13},"width":1165,"height":773}}],"post":null,"createdAt":"2026-10-07T11:11:02.059Z","updatedAt":"2026-10-07T11:11:02.059Z","publishedAt":"2026-10-07T11:11:02.056Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://brickcats.framer.website/","price":"6","paymentUrl":"https://karimsaif.lemonsqueezy.com/checkout/buy/2ab5f76f-29d1-4666-82c3-078051c86ad0","workshop":false,"categories":[{"id":"1a3a0eb3-698e-461a-bf42-2502a7ed43e0","name":"Backgrounds","slug":"backgrounds"}],"lastSaveId":"n0LYUsgQczHd3g48EAi8","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":4,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":2,"edited":true,"editedAt":"2026-10-07T11:11:22.675Z","createdAt":"2026-10-07T11:11:02.772Z","updatedAt":"2026-10-07T11:11:22.675Z"},{"id":"01a11068-7387-7572-9750-4cf8f2919606","title":null,"body":"

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.

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Typography doesn't always have to appear."}]},{"type":"paragraph","content":[{"type":"text","text":"Sometimes it can "},{"type":"text","text":"draw itself.","marks":[{"type":"bold"}]},{"type":"text","text":" ✍️"}]},{"type":"paragraph","content":[{"type":"text","text":"I built "},{"type":"text","text":"Path Drawing","marks":[{"type":"bold"}]},{"type":"text","text":", a Framer component that turns text into an animated SVG stroke reveal."}]},{"type":"paragraph","content":[{"type":"text","text":"You can customize the font, size, stroke, gradient, duration, looping, alignment, position, and drawing length directly from Framer's property panel."}]},{"type":"paragraph","content":[{"type":"text","text":"Built to stay lightweight, responsive, and production-friendly while supporting reduced motion and Framer's static rendering."}]},{"type":"paragraph","content":[{"type":"text","text":"A simple effect, but a fun way to give hero sections and editorial typography more personality."}]}]},"author":{"framerUserId":"cdbd7ebc-86d4-4b64-baea-421f236c7c35","name":"Karim Saif","slug":"karim-saif","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/38316/JKMR4LgEt-1ogBJEJjcXu0BLVSwyn9DCkQ64JbBx","followed":false,"followsYou":false},"media":[],"resources":[{"id":"kkcO5O9VKGnVgK8yYTpI","resolved":true,"title":"Path Drawing Text","body":"$53","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Path Drawing","marks":[{"type":"bold"}]},{"type":"text","text":" turns your typography into a beautifully animated SVG stroke reveal. Watch your text progressively draw itself from start to finish with a smooth gradient outline and precise control over typography, timing, stroke, positioning, and animation behavior."}]},{"type":"paragraph","content":[{"type":"text","text":"Built specifically for Framer, it is lightweight, responsive, and designed to work smoothly across different frame sizes and fonts."}]},{"type":"paragraph","content":[{"type":"text","text":"Great for","marks":[{"type":"bold"}]}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Hero headlines"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Portfolio websites"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Creative agency websites"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Personal portfolios"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Landing pages"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Product launches"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Fashion and editorial websites"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Experimental typography"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Loading and intro sequences"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Interactive storytelling"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Section transitions"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Statement typography"}]}]}]},{"type":"paragraph","content":[{"type":"text","text":"Live Preview:","marks":[{"type":"bold"}]},{"type":"text","text":" "},{"type":"text","text":"https://pathdrawing.framer.website/","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"https://pathdrawing.framer.website/","target":"_blank"}}]}]},{"type":"paragraph","content":[{"type":"text","text":"Features","marks":[{"type":"bold"}]}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"✍️ Animated SVG path-drawing text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"emoji","attrs":{"name":"rainbow","emoji":"🌈"}},{"type":"text","text":" Custom two-color gradient stroke"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"emoji","attrs":{"name":"abc","emoji":"🔤"}},{"type":"text","text":" Native Framer font picker"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"emoji","attrs":{"name":"straight_ruler","emoji":"📏"}},{"type":"text","text":" Adjustable font size"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"🖊️ Adjustable stroke width"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"⏱️ Custom animation duration"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"emoji","attrs":{"name":"repeat","emoji":"🔁"}},{"type":"text","text":" Optional infinite looping"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"↔️ Left, center, and right alignment"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"↕️ Adjustable vertical position"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"emoji","attrs":{"name":"triangular_ruler","emoji":"📐"}},{"type":"text","text":" Adjustable drawing length"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"emoji","attrs":{"name":"iphone","emoji":"📱"}},{"type":"text","text":" Fully responsive"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"♿ Reduced-motion support"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"⚡ Lightweight CSS/SVG animation"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"emoji","attrs":{"name":"art","emoji":"🎨"}},{"type":"text","text":" Works with custom Framer fonts"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"🔒 Safe static-renderer behavior for Framer"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"emoji","attrs":{"name":"arrows_counterclockwise","emoji":"🔄"}},{"type":"text","text":" Automatically adapts the drawing length to the selected text/font"}]}]}]},{"type":"paragraph","content":[{"type":"text","text":"The component uses Framer's native ControlType.Font alongside dedicated controls for text, font size, stroke width, duration, colors, looping, alignment, vertical position, and draw length."}]},{"type":"paragraph"},{"type":"paragraph","content":[{"type":"text","text":"Support","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"Need help using the component, customizing the animation, or integrating it into your Framer project?"}]},{"type":"paragraph","content":[{"type":"text","text":"X:","marks":[{"type":"bold"}]},{"type":"text","text":" "},{"type":"mention","attrs":{"id":"cdbd7ebc-86d4-4b64-baea-421f236c7c35","slug":"karim-saif","label":"Karim Saif","mentionSuggestionChar":"@"}},{"type":"text","text":" "}]},{"type":"paragraph","content":[{"type":"text","text":"Email:","marks":[{"type":"bold"}]},{"type":"text","text":" "},{"type":"text","text":"karimsaif010@gmail.com","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"mailto:karimsaif010@gmail.com","target":"_blank"}}]}]},{"type":"paragraph","content":[{"type":"text","text":"For support, bug reports, customization questions, or feedback, feel free to reach out."}]},{"type":"paragraph","content":[{"type":"text","text":"X — ","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"https://x.com/karimsaif0?utm_source=chatgpt.com","target":"_blank"}}]},{"type":"mention","attrs":{"id":"cdbd7ebc-86d4-4b64-baea-421f236c7c35","slug":"karim-saif","label":"Karim Saif","mentionSuggestionChar":"@"}},{"type":"text","text":" "}]}]},"introduction":"Animated SVG stroke reveal.","slug":"path-drawing-text","author":{"framerUserId":"cdbd7ebc-86d4-4b64-baea-421f236c7c35","name":"Karim Saif","slug":"karim-saif","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/38316/JKMR4LgEt-1ogBJEJjcXu0BLVSwyn9DCkQ64JbBx","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/cdbd7ebc-86d4-4b64-baea-421f236c7c35/01a11066-7ad6-726c-8197-d9ffc8755102.png","metadata":{"tint":{"h":0,"s":0,"l":20},"width":1186,"height":782}}],"post":null,"createdAt":"2026-10-06T08:50:42.503Z","updatedAt":"2026-10-06T08:50:42.503Z","publishedAt":"2026-10-06T08:50:42.501Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":"https://re.chujiqiqi.com/m/PATH-DRAWING-8wQG13.js@sWcBBrEfu6Rrs6kb3wX7","previewUrl":"https://pathdrawing.framer.website/","price":null,"paymentUrl":null,"workshop":false,"categories":[{"id":"7fe42fdd-1b16-4f5a-93b8-009488614de8","name":"Text","slug":"text"}],"lastSaveId":"sWcBBrEfu6Rrs6kb3wX7","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":5,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-10-06T08:50:43.208Z","updatedAt":"2026-10-06T08:50:43.208Z"},{"id":"01a10ce0-07e5-722c-b002-6b604f26a00c","title":null,"body":"

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

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Typography doesn't have to be static."}]},{"type":"paragraph","content":[{"type":"text","text":"I built "},{"type":"text","text":"Gooey Text for Framer","marks":[{"type":"bold"}]},{"type":"text","text":", a customizable text transition component that turns simple text changes into smooth, liquid-like motion."}]},{"type":"paragraph","content":[{"type":"text","text":"It includes:"}]},{"type":"paragraph","content":[{"type":"text","text":"• Gooey Morph transitions "}]},{"type":"paragraph","content":[{"type":"text","text":"• Slide X and Slide Y variations "}]},{"type":"paragraph","content":[{"type":"text","text":"• Hover interactions "}]},{"type":"paragraph","content":[{"type":"text","text":"• Automatic looping "}]},{"type":"paragraph","content":[{"type":"text","text":"• Framer Font controls "}]},{"type":"paragraph","content":[{"type":"text","text":"• Custom animation timing "}]},{"type":"paragraph","content":[{"type":"text","text":"• Responsive sizing "}]},{"type":"paragraph","content":[{"type":"text","text":"• Reduced-motion support"}]},{"type":"paragraph","content":[{"type":"text","text":"Built to be dropped directly into Framer projects without complicated setup."}]},{"type":"paragraph","content":[{"type":"text","text":"A small interaction, but a big difference in how a website feels."}]},{"type":"paragraph","content":[{"type":"text","text":"Made with "},{"type":"emoji","attrs":{"name":"yellow_heart","emoji":"💛"}},{"type":"text","text":" by "},{"type":"mention","attrs":{"id":"cdbd7ebc-86d4-4b64-baea-421f236c7c35","slug":"karim-saif","label":"Karim Saif","mentionSuggestionChar":"@"}},{"type":"text","text":" "}]}]},"author":{"framerUserId":"cdbd7ebc-86d4-4b64-baea-421f236c7c35","name":"Karim Saif","slug":"karim-saif","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/38316/JKMR4LgEt-1ogBJEJjcXu0BLVSwyn9DCkQ64JbBx","followed":false,"followsYou":false},"media":[],"resources":[{"id":"OHAumHcpxW6g15knbg4j","resolved":true,"title":"Gooey Text","body":"$54","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Gooey Text","marks":[{"type":"bold"}]},{"type":"text","text":" creates a distinctive gooey morph effect between two text states using SVG filters and GSAP animation. Choose between Morph, Slide X, and Slide Y transitions, then customize the typography, color, blur intensity, timing, and interaction behavior directly from Framer's property panel."}]},{"type":"paragraph","content":[{"type":"text","text":"Designed to be lightweight, responsive, and easy to drop into landing pages, hero sections, buttons, navigation, portfolios, and interactive experiences."}]},{"type":"customHeading","content":[{"type":"text","text":"Great for"}],"attrs":{"level":1}},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Hero headlines and landing pages"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Interactive typography"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Creative portfolios"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Agency and studio websites"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Navigation and menu interactions"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"CTA sections"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Product launches"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Experimental web design"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Framer templates"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Motion-focused websites"}]}]}]},{"type":"customHeading","content":[{"type":"text","text":"Preview:"}],"attrs":{"level":1}},{"type":"paragraph","content":[{"type":"text","text":"https://gooeytext.framer.website/","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"https://gooeytext.framer.website/","target":"_blank"}}]}]},{"type":"customHeading","content":[{"type":"text","text":"Features"}],"attrs":{"level":1}},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Smooth gooey text transitions"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Morph, Slide X, and Slide Y variants"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Custom Text A and Text B"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Framer Font control"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Adjustable text color"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Adjustable goo strength"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Custom animation duration"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Adjustable slide distance"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Loop animation"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Hover interaction"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Start from either text state"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Responsive sizing"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Reduced-motion support"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Static-renderer support for Framer"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Automatic animation cleanup"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Lightweight SVG-based effect"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Fully customizable through Framer Property Controls"}]}]}]},{"type":"customHeading","content":[{"type":"text","text":"Customize"}],"attrs":{"level":1}},{"type":"paragraph","content":[{"type":"text","text":"Everything important is exposed through Framer's property controls."}]},{"type":"paragraph","content":[{"type":"text","text":"Customize:"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Text A"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Text B"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Font"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Text alignment"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Font size and typography"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Text color"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Goo strength"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Animation duration"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Slide distance"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Loop timing"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Hover behavior"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Starting text state"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Transition variant"}]}]}]},{"type":"paragraph","content":[{"type":"text","text":"No code changes are required for normal customization."}]},{"type":"customHeading","content":[{"type":"text","text":"Support"}],"attrs":{"level":1}},{"type":"paragraph","content":[{"type":"text","text":"Need help using the component, want to report an issue, or have an idea for an improvement?"}]},{"type":"paragraph","content":[{"type":"text","text":"X:","marks":[{"type":"bold"}]},{"type":"text","text":" "},{"type":"mention","attrs":{"id":"cdbd7ebc-86d4-4b64-baea-421f236c7c35","slug":"karim-saif","label":"Karim Saif","mentionSuggestionChar":"@"}}]},{"type":"paragraph","content":[{"type":"text","text":"Email:","marks":[{"type":"bold"}]},{"type":"text","text":" "},{"type":"text","text":"karimsaif010@gmail.com","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"mailto:karimsaif010@gmail.com","target":"_blank"}}]}]},{"type":"paragraph","content":[{"type":"text","text":"I'm happy to help with setup, customization, and component questions."}]}]},"introduction":"Gooey morph effect between two txt","slug":"gooey-text","author":{"framerUserId":"cdbd7ebc-86d4-4b64-baea-421f236c7c35","name":"Karim Saif","slug":"karim-saif","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/38316/JKMR4LgEt-1ogBJEJjcXu0BLVSwyn9DCkQ64JbBx","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/cdbd7ebc-86d4-4b64-baea-421f236c7c35/01a10cdf-06aa-733a-a42a-9cbc6191b1b7.png","metadata":{"tint":{"h":0,"s":8,"l":31},"width":1186,"height":778}}],"post":null,"createdAt":"2026-10-05T16:22:50.284Z","updatedAt":"2026-10-05T16:22:50.284Z","publishedAt":"2026-10-05T16:22:50.275Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":"https://re.chujiqiqi.com/m/Gooey-Text-k5Sju5.js@SdIzhpbrFUSY3JLyK5vR","previewUrl":"https://gooeytext.framer.website/","price":null,"paymentUrl":null,"workshop":false,"categories":[{"id":"7fe42fdd-1b16-4f5a-93b8-009488614de8","name":"Text","slug":"text"}],"lastSaveId":"SdIzhpbrFUSY3JLyK5vR","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":7,"liked":false},"comments":{"count":1},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-10-05T16:22:51.109Z","updatedAt":"2026-10-05T16:22:51.109Z"},{"id":"01a107bb-5770-7598-82fe-bd8a128bfc8e","title":null,"body":"

🔥 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.

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"emoji","attrs":{"name":"fire","emoji":"🔥"}},{"type":"text","text":" I just released "},{"type":"text","text":"Text Burn Neon for Framer","marks":[{"type":"bold"}]},{"type":"text","text":"."}]},{"type":"paragraph","content":[{"type":"text","text":"A character-by-character typography animation that makes headlines ignite with flickering heat, fiery color transitions, and customizable neon glow."}]},{"type":"paragraph","content":[{"type":"text","text":"You can control everything directly from Framer, typography, colors, glow intensity, timing, flickers, character delay, and looping."}]},{"type":"paragraph","content":[{"type":"text","text":"Built for designers who want their typography to feel less static and more alive."}]},{"type":"paragraph","content":[{"type":"text","text":"Built with React + GSAP and designed specifically for Framer."}]}]},"author":{"framerUserId":"cdbd7ebc-86d4-4b64-baea-421f236c7c35","name":"Karim Saif","slug":"karim-saif","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/38316/JKMR4LgEt-1ogBJEJjcXu0BLVSwyn9DCkQ64JbBx","followed":false,"followsYou":false},"media":[],"resources":[{"id":"mKf4BzcGLMeIPNm644yJ","resolved":true,"title":"Burn Text Reveal","body":"$55","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Bring bold typography to life with "},{"type":"text","text":"Text Burn Neon","marks":[{"type":"bold"}]},{"type":"text","text":", a character-by-character text animation that ignites your words with flickering heat, fiery colors, and customizable neon glow."}]},{"type":"paragraph","content":[{"type":"text","text":"Built with GSAP for smooth, high-performance animation, every character burns in independently to create a dramatic ignition effect that works beautifully for hero headlines, landing pages, portfolios, product launches, creative websites, and experimental typography."}]},{"type":"paragraph","content":[{"type":"text","text":"Customize the text, typography, burn colors, glow intensity, animation timing, flicker behavior, character delay, alignment, and looping directly from Framer's property panel."}]},{"type":"customHeading","content":[{"type":"text","text":"Great for"}],"attrs":{"level":2}},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Hero headlines and landing page intros"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Creative portfolios and personal websites"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Product launches and campaign pages"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Gaming, entertainment, and cinematic websites"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Dark-mode and neon-inspired designs"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Experimental typography"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Interactive marketing sections"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Coming soon and launch pages"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Bold CTA sections"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Creative agency websites"}]}]}]},{"type":"customHeading","content":[{"type":"text","text":"Preview : "}],"attrs":{"level":2}},{"type":"paragraph","content":[{"type":"text","text":"https://burntextreveal.framer.website/","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"https://burntextreveal.framer.website/","target":"_blank"}}]}]},{"type":"paragraph"},{"type":"customHeading","content":[{"type":"text","text":"Features"}],"attrs":{"level":2}},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Character-by-character neon burn animation"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Flickering ignition effect"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Custom burn, hot, base, and glow colors"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Adjustable neon glow intensity"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Custom animation duration"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Adjustable flicker count"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Randomized character ignition timing"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Optional infinite looping"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Custom loop delay"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Framer font control"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Adjustable font size and letter spacing"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Adjustable line height"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Left, center, and right alignment"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Multiline text support"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Responsive sizing"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Static-renderer support for reliable Framer output"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"GSAP-powered animation"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Clean React-based implementation"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Fully customizable through Framer property controls"}]}]}]},{"type":"customHeading","content":[{"type":"text","text":"Support"}],"attrs":{"level":2}},{"type":"paragraph","content":[{"type":"text","text":"Need help customizing Text Burn Neon or integrating it into your Framer project?"}]},{"type":"paragraph","content":[{"type":"text","text":"I'm happy to help with setup, customization, or troubleshooting."}]},{"type":"paragraph","content":[{"type":"text","text":"Support:","marks":[{"type":"bold"}]},{"type":"text","text":" "},{"type":"text","text":"karimsaif0101@gmail.com","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"mailto:karimsaif0101@gmail.com","target":"_blank"}}]}]},{"type":"paragraph","content":[{"type":"text","text":"X:","marks":[{"type":"bold"}]},{"type":"text","text":" @karimsaif0"}]},{"type":"paragraph","content":[{"type":"text","text":"Created and customized for Framer by "},{"type":"mention","attrs":{"id":"cdbd7ebc-86d4-4b64-baea-421f236c7c35","slug":"karim-saif","label":"Karim Saif","mentionSuggestionChar":"@"}},{"type":"text","text":" ."}]},{"type":"paragraph"}]},"introduction":"Words with flickering heat","slug":"burn-text-reveal","author":{"framerUserId":"cdbd7ebc-86d4-4b64-baea-421f236c7c35","name":"Karim Saif","slug":"karim-saif","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/38316/JKMR4LgEt-1ogBJEJjcXu0BLVSwyn9DCkQ64JbBx","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/cdbd7ebc-86d4-4b64-baea-421f236c7c35/01a107ba-ab0a-7740-a580-b5d4d9271c99.png","metadata":{"tint":{"h":40,"s":22,"l":28},"width":1182,"height":779}}],"post":null,"createdAt":"2026-10-04T16:24:39.874Z","updatedAt":"2026-10-04T16:24:39.874Z","publishedAt":"2026-10-04T16:24:39.869Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":"https://re.chujiqiqi.com/m/Burn-Text-Reveal-64GMWr.js@YyXVAPBPVSksvmO90r1H","previewUrl":"https://burntextreveal.framer.website/","price":null,"paymentUrl":null,"workshop":false,"categories":[{"id":"7fe42fdd-1b16-4f5a-93b8-009488614de8","name":"Text","slug":"text"}],"lastSaveId":"YyXVAPBPVSksvmO90r1H","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":5,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-10-04T16:24:40.560Z","updatedAt":"2026-10-04T16:24:40.560Z"},{"id":"01a103ae-69d2-75dd-a248-b654d6a60dab","title":null,"body":"

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.

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Typography can be an interaction."}]},{"type":"paragraph","content":[{"type":"text","text":"I just built "},{"type":"text","text":"Text Inertia","marks":[{"type":"bold"}]},{"type":"text","text":" for Framer, an interactive text component where individual words respond to cursor movement with smooth, elastic motion."}]},{"type":"paragraph","content":[{"type":"text","text":"You can customize the typography, movement strength, velocity, rotation, elasticity, alignment, and more directly from Framer."}]},{"type":"paragraph","content":[{"type":"text","text":"Perfect for hero sections, portfolios, creative agencies, and experimental landing pages."}]}]},"author":{"framerUserId":"cdbd7ebc-86d4-4b64-baea-421f236c7c35","name":"Karim Saif","slug":"karim-saif","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/38316/JKMR4LgEt-1ogBJEJjcXu0BLVSwyn9DCkQ64JbBx","followed":false,"followsYou":false},"media":[],"resources":[{"id":"vkg1z55LCmbSewjsmc6s","resolved":true,"title":"Inertia Text","body":"$56","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Text Inertia","marks":[{"type":"bold"}]},{"type":"text","text":" is an interactive typography component that gives each word a smooth, physical reaction to cursor movement."}]},{"type":"paragraph","content":[{"type":"text","text":"Move your cursor across the text and watch the words stretch, shift, and rotate with an elastic motion. Adjust the strength, velocity, rotation, elasticity, typography, and alignment directly from Framer's property panel."}]},{"type":"paragraph","content":[{"type":"text","text":"Built with lightweight native React animation and designed to work smoothly inside Framer without external animation dependencies."}]},{"type":"customHeading","content":[{"type":"text","text":"Great For","marks":[{"type":"bold"}]}],"attrs":{"level":2}},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Interactive hero headlines"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Portfolio websites"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Creative agency websites"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Personal portfolios"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Experimental typography"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Landing pages"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Product showcases"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Interactive navigation"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Motion-focused websites"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Modern Framer designs"}]}]}]},{"type":"customHeading","content":[{"type":"text","text":"Preview"}],"attrs":{"level":2}},{"type":"paragraph","content":[{"type":"text","text":"https://inertiatextt.framer.website/","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"https://inertiatextt.framer.website/","target":"_blank"}}]}]},{"type":"customHeading","content":[{"type":"text","text":"Features"}],"attrs":{"level":2}},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Cursor-driven word interaction"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Independent word movement"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Elastic motion"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Dynamic rotation"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Adjustable interaction strength"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Adjustable cursor velocity response"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Custom elasticity"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Custom font controls"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Adjustable font size"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Letter spacing control"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Line height control"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Text color control"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Left, center, and right alignment"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Disable interaction when needed"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Reduced-motion support"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Framer static-renderer support"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Lightweight, dependency-free animation"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Responsive Framer layout support"}]}]}]},{"type":"customHeading","content":[{"type":"text","text":"Customize"}],"attrs":{"level":2}},{"type":"paragraph","content":[{"type":"text","text":"Make the interaction match your design."}]},{"type":"paragraph","content":[{"type":"text","text":"Typography","marks":[{"type":"bold"}]},{"type":"text","text":" Choose your font, size, letter spacing, line height, and color."}]},{"type":"paragraph","content":[{"type":"text","text":"Interaction","marks":[{"type":"bold"}]},{"type":"text","text":" Control the strength, velocity, rotation, and elasticity of the animation."}]},{"type":"paragraph","content":[{"type":"text","text":"Layout","marks":[{"type":"bold"}]},{"type":"text","text":" Choose left, center, or right alignment to fit your composition."}]},{"type":"paragraph","content":[{"type":"text","text":"Behavior","marks":[{"type":"bold"}]},{"type":"text","text":" Disable the interaction whenever you want a static text experience while keeping the same typography and layout."}]},{"type":"customHeading","content":[{"type":"text","text":"Support"}],"attrs":{"level":2}},{"type":"paragraph","content":[{"type":"text","text":"Need help customizing the component or integrating it into your Framer project?"}]},{"type":"paragraph","content":[{"type":"text","text":"X:","marks":[{"type":"bold"}]},{"type":"text","text":" "},{"type":"mention","attrs":{"id":"cdbd7ebc-86d4-4b64-baea-421f236c7c35","slug":"karim-saif","label":"Karim Saif","mentionSuggestionChar":"@"}},{"type":"text","text":" "}]},{"type":"paragraph","content":[{"type":"text","text":"Email:","marks":[{"type":"bold"}]},{"type":"text","text":" "},{"type":"text","text":"karimsaif010@gmail.com","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"mailto:karimsaif010@gmail.com","target":"_blank"}}]}]},{"type":"paragraph","content":[{"type":"text","text":"I’m happy to help with setup, customization, and component-related questions."}]}]},"introduction":"Word a smooth, physical reaction","slug":"inertia-text","author":{"framerUserId":"cdbd7ebc-86d4-4b64-baea-421f236c7c35","name":"Karim Saif","slug":"karim-saif","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/38316/JKMR4LgEt-1ogBJEJjcXu0BLVSwyn9DCkQ64JbBx","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/cdbd7ebc-86d4-4b64-baea-421f236c7c35/01a103ad-ec2d-733c-ba5a-045403e143ca.png","metadata":{"tint":{"h":30,"s":29,"l":55},"width":1186,"height":779}}],"post":null,"createdAt":"2026-10-03T21:32:03.744Z","updatedAt":"2026-10-04T15:59:04.018Z","publishedAt":"2026-10-03T21:32:03.742Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":"https://re.chujiqiqi.com/m/Inertia-Text-B4sl6o.js@IuTbZIeWVeDjA3AOuTtM","previewUrl":"https://inertiatextt.framer.website/","price":null,"paymentUrl":null,"workshop":false,"categories":[{"id":"7fe42fdd-1b16-4f5a-93b8-009488614de8","name":"Text","slug":"text"}],"lastSaveId":"IuTbZIeWVeDjA3AOuTtM","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":1,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-10-03T21:32:04.434Z","updatedAt":"2026-10-03T21:32:04.434Z"},{"id":"01a0febf-1241-75ee-9c9c-8d7460259b60","title":null,"body":"

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.

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Static images don't have to stay static."}]},{"type":"paragraph","content":[{"type":"text","text":"I just released "},{"type":"text","text":"Fluid Image Flow","marks":[{"type":"bold"}]},{"type":"text","text":" for Framer, a real-time WebGL component that lets images react to cursor and touch movement with fluid distortion and smooth transitions."}]},{"type":"paragraph","content":[{"type":"text","text":"It includes:"}]},{"type":"paragraph","content":[{"type":"text","text":"• Real-time fluid simulation "}]},{"type":"paragraph","content":[{"type":"text","text":"• Interactive cursor/touch effects "}]},{"type":"paragraph","content":[{"type":"text","text":"• Image-to-image transitions "}]},{"type":"paragraph","content":[{"type":"text","text":"• 4 ready-made presets "}]},{"type":"paragraph","content":[{"type":"text","text":"• Full Custom controls "}]},{"type":"paragraph","content":[{"type":"text","text":"• Responsive WebGL rendering "}]},{"type":"paragraph","content":[{"type":"text","text":"• Reduced-motion and static-renderer support"}]},{"type":"paragraph","content":[{"type":"text","text":"Designed for portfolios, creative websites, agency pages, editorial layouts, and any Framer project that needs a more immersive visual layer."}]}]},"author":{"framerUserId":"cdbd7ebc-86d4-4b64-baea-421f236c7c35","name":"Karim Saif","slug":"karim-saif","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/38316/JKMR4LgEt-1ogBJEJjcXu0BLVSwyn9DCkQ64JbBx","followed":false,"followsYou":false},"media":[],"resources":[{"id":"ayroSvNIYaHrLLrGhV0A","resolved":true,"title":"Fluid Image Flow","body":"$57","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Fluid Image Flow","marks":[{"type":"bold"}]},{"type":"text","text":" transforms static images into a dynamic, interactive fluid experience. Move your cursor across the canvas to create liquid-like distortion, swirling motion, and flowing transitions between two images."}]},{"type":"paragraph","content":[{"type":"text","text":"Built with WebGL and a real-time fluid simulation, it combines image displacement, velocity, dye diffusion, pressure solving, and vorticity to create a smooth interactive visual effect."}]},{"type":"paragraph"},{"type":"paragraph","content":[{"type":"text","text":"Great For","marks":[{"type":"bold"}]}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Creative agency websites"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Portfolio and personal websites"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Photography and editorial layouts"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Fashion and luxury websites"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Hero sections"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Interactive image galleries"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Product showcases"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Art and experimental websites"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Landing pages"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"WebGL-focused experiences"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Interactive transitions"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Motion-heavy Framer projects"}]}]}]},{"type":"paragraph","content":[{"type":"text","text":"Live Preview:","marks":[{"type":"bold"}]},{"type":"text","text":" "},{"type":"text","text":"https://fluidimageflow.framer.website/","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"https://fluidimageflow.framer.website/","target":"_blank"}}]}]},{"type":"paragraph","content":[{"type":"text","text":"Features","marks":[{"type":"bold"}]}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Real-time WebGL fluid simulation"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Interactive cursor and touch movement"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Smooth image displacement"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Transition between two images"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Automatic fluid movement"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Four built-in fluid presets"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Custom simulation controls"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Adjustable fluid curl and force"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Adjustable dye and velocity dissipation"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Adjustable displacement strength"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Adjustable pointer strength"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Adjustable automatic flow speed"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Low, Medium, and High quality modes"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Responsive canvas sizing"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Retina/DPR-aware rendering"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Reduced-motion support"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Static renderer fallback for Framer"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Intersection-based rendering optimization"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"WebGL context-loss handling"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Automatic resource cleanup"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Responsive image controls"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Touch-friendly interaction"}]}]}]},{"type":"paragraph"},{"type":"paragraph","content":[{"type":"text","text":"Support","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"Need help setting up the component or customizing the effect?"}]},{"type":"paragraph","content":[{"type":"text","text":"X:","marks":[{"type":"bold"}]},{"type":"text","text":" @karimsaif "}]},{"type":"paragraph","content":[{"type":"text","text":"Email:","marks":[{"type":"bold"}]},{"type":"text","text":" "},{"type":"text","text":"karimsaif010@gmail.com","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"mailto:karimsaif010@gmail.com","target":"_blank"}}]}]}]},"introduction":"Interactive fluid experience","slug":"fluid-image-flow","author":{"framerUserId":"cdbd7ebc-86d4-4b64-baea-421f236c7c35","name":"Karim Saif","slug":"karim-saif","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/38316/JKMR4LgEt-1ogBJEJjcXu0BLVSwyn9DCkQ64JbBx","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/cdbd7ebc-86d4-4b64-baea-421f236c7c35/01a0fec1-9240-769b-9fc5-a6edc3574a11.png","metadata":{"tint":{"h":180,"s":13,"l":54},"width":1191,"height":786}}],"post":null,"createdAt":"2026-10-02T22:32:09.361Z","updatedAt":"2026-10-02T22:35:07.609Z","publishedAt":"2026-10-02T22:32:09.359Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":"https://re.chujiqiqi.com/m/FluidImageFlow-druqR3.js@kVuh2IK4oZVcLsEkww0u","previewUrl":"https://fluidimageflow.framer.website/","price":null,"paymentUrl":null,"workshop":false,"categories":[{"id":"323e97d6-f443-488c-8661-794a9a83a20f","name":"Effects","slug":"effects"}],"lastSaveId":"kVuh2IK4oZVcLsEkww0u","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":4,"liked":false},"comments":{"count":2},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-10-02T22:32:10.049Z","updatedAt":"2026-10-02T22:32:10.049Z"},{"id":"01a0fd12-27d0-75ee-81c9-138eb7b0d642","title":null,"body":"

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.

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"I just built "},{"type":"text","text":"Magnetic Warp","marks":[{"type":"bold"}]},{"type":"text","text":" for Framer "},{"type":"emoji","attrs":{"name":"magnet","emoji":"🧲"}}]},{"type":"paragraph","content":[{"type":"text","text":"A WebGL-powered image component that turns static visuals into interactive experiences."}]},{"type":"paragraph","content":[{"type":"text","text":"Move your cursor across the image and watch it smoothly bend and react around the pointer."}]},{"type":"paragraph","content":[{"type":"text","text":"Built with:"}]},{"type":"paragraph","content":[{"type":"text","text":"• Magnetic cursor interaction "}]},{"type":"paragraph","content":[{"type":"text","text":"• Customizable physics "}]},{"type":"paragraph","content":[{"type":"text","text":"• 4 ready-made presets "}]},{"type":"paragraph","content":[{"type":"text","text":"• Responsive image support "}]},{"type":"paragraph","content":[{"type":"text","text":"• Adjustable WebGL quality "}]},{"type":"paragraph","content":[{"type":"text","text":"• Reduced-motion support "}]},{"type":"paragraph","content":[{"type":"text","text":"• Framer property controls "}]},{"type":"paragraph","content":[{"type":"text","text":"• Performance-conscious rendering"}]},{"type":"paragraph","content":[{"type":"text","text":"Perfect for portfolios, agencies, product pages, creative websites, and interactive hero sections."}]}]},"author":{"framerUserId":"cdbd7ebc-86d4-4b64-baea-421f236c7c35","name":"Karim Saif","slug":"karim-saif","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/38316/JKMR4LgEt-1ogBJEJjcXu0BLVSwyn9DCkQ64JbBx","followed":false,"followsYou":false},"media":[],"resources":[{"id":"ViSRtJGdNa4sqwjT2muM","resolved":true,"title":"Magnetic Warp","body":"$58","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Magnetic Warp is an interactive WebGL image component for Framer that transforms static images into fluid, responsive visuals. Move your cursor across the image to create a smooth magnetic distortion that pulls and bends the image around your pointer."}]},{"type":"paragraph","content":[{"type":"text","text":"Built with customizable presets, adjustable physics, responsive sizing, reduced-motion support, and optimized WebGL rendering, Magnetic Warp adds depth and interaction without requiring any additional setup."}]},{"type":"paragraph","content":[{"type":"text","text":"Preview","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"https://magneticwarp.framer.website/","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"https://magneticwarp.framer.website/","target":"_blank"}}]}]},{"type":"paragraph","content":[{"type":"text","text":"Great For","marks":[{"type":"bold"}]}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Creative portfolios"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Agency websites"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Digital product landing pages"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Photography websites"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Art and editorial websites"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Fashion and luxury brands"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Interactive hero sections"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Experimental web experiences"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Featured project sections"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Modern Framer websites"}]}]}]},{"type":"paragraph","content":[{"type":"text","text":"Features","marks":[{"type":"bold"}]}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Interactive magnetic image distortion"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"WebGL-powered rendering"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Smooth cursor-based interaction"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Balanced, Soft, Strong, and Wide presets"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Custom strength control"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Adjustable stiffness and damping"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Customizable interaction radius"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Responsive image support"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Cover-style image rendering"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Adjustable WebGL quality"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Reduced-motion support"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Static-renderer support"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Automatic resizing with ResizeObserver"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Offscreen rendering optimization"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"WebGL context handling"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Custom background color"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Adjustable corner radius"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Disabled mode for a completely static image"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Lightweight and fully customizable in Framer"}]}]}]},{"type":"paragraph","content":[{"type":"text","text":"Customize","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"Magnetic Warp gives you control over the interaction without changing the core component."}]},{"type":"paragraph","content":[{"type":"text","text":"Choose from four presets or use the "},{"type":"text","text":"Balanced","marks":[{"type":"bold"}]},{"type":"text","text":" preset to fine-tune the effect manually. Adjust the magnetic "},{"type":"text","text":"Strength","marks":[{"type":"bold"}]},{"type":"text","text":", "},{"type":"text","text":"Stiffness","marks":[{"type":"bold"}]},{"type":"text","text":", "},{"type":"text","text":"Damping","marks":[{"type":"bold"}]},{"type":"text","text":", and "},{"type":"text","text":"Radius","marks":[{"type":"bold"}]},{"type":"text","text":" to create anything from a subtle image movement to a stronger fluid distortion."}]},{"type":"paragraph","content":[{"type":"text","text":"You can also control WebGL "},{"type":"text","text":"Quality","marks":[{"type":"bold"}]},{"type":"text","text":", background color, corner radius, and disabled mode directly from Framer's property panel."}]},{"type":"paragraph","content":[{"type":"text","text":"Support","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"Need help setting up Magnetic Warp or have a question about customization?"}]},{"type":"paragraph","content":[{"type":"text","text":"X:"},{"type":"text","text":" https://x.com/karimsaif0","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"https://x.com/karimsaif0","target":"_blank"}}]},{"type":"text","text":" "}]},{"type":"paragraph","content":[{"type":"text","text":"Email: "},{"type":"text","text":"karimsaif010@gmail.com","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"mailto:karimsaif010@gmail.com","target":"_blank"}}]}]}]},"introduction":"Interactive WebGL image","slug":"magnetic-warp","author":{"framerUserId":"cdbd7ebc-86d4-4b64-baea-421f236c7c35","name":"Karim Saif","slug":"karim-saif","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/38316/JKMR4LgEt-1ogBJEJjcXu0BLVSwyn9DCkQ64JbBx","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/cdbd7ebc-86d4-4b64-baea-421f236c7c35/01a0fd11-2a50-7458-bfff-7bb61837ffcb.png","metadata":{"tint":{"h":0,"s":0,"l":22},"width":1181,"height":775}}],"post":null,"createdAt":"2026-10-02T14:43:39.962Z","updatedAt":"2026-10-02T14:43:39.962Z","publishedAt":"2026-10-02T14:43:39.959Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://magneticwarp.framer.website/","price":"6","paymentUrl":"https://karimsaif.lemonsqueezy.com/checkout/buy/a7dc2b92-aa3a-4de0-8be5-f71b6e66f771","workshop":false,"categories":[{"id":"7677fa83-43ce-41a2-a3fe-db438ec0fd33","name":"Interactive","slug":"interactive"}],"lastSaveId":"vVAewKAMQiwWxv6gxzYE","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":4,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-10-02T14:43:40.624Z","updatedAt":"2026-10-02T14:43:40.624Z"},{"id":"01a0f86d-4540-743b-9f9b-041b9771503d","title":null,"body":"

🎙️ 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. 🚀

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"🎙️ Building a Voice AI or TTS product? (Sound on 🔊)"}]},{"type":"paragraph","content":[{"type":"text","text":"Your pre-launch website is the first impression, and a basic “coming soon” page doesn’t have to be the answer."}]},{"type":"paragraph","content":[{"type":"text","text":"I built "},{"type":"text","text":"Voice AI Waitlist","marks":[{"type":"bold"}]},{"type":"text","text":", a modern Framer template designed for AI and speech-tech products preparing for launch."}]},{"type":"paragraph","content":[{"type":"text","text":"It includes:"}]},{"type":"paragraph","content":[{"type":"text","text":"• Animated voice waveform demo "}]},{"type":"paragraph","content":[{"type":"text","text":"• Live launch countdown "}]},{"type":"paragraph","content":[{"type":"text","text":"• Built-in waitlist signup "}]},{"type":"paragraph","content":[{"type":"text","text":"• Dark / light mode toggle "}]},{"type":"paragraph","content":[{"type":"text","text":"• Fully responsive design "}]},{"type":"paragraph","content":[{"type":"text","text":"• Custom Thank You + 404 pages "}]},{"type":"paragraph","content":[{"type":"text","text":"• Token-based colors & typography "}]},{"type":"paragraph","content":[{"type":"text","text":"• Step-by-step customization instructions"}]},{"type":"paragraph","content":[{"type":"text","text":"Everything you need to start collecting early-access signups without building the entire launch page from scratch."}]},{"type":"paragraph","content":[{"type":"text","text":"Built for founders launching AI products, validating demand, and building hype before launch. "},{"type":"emoji","attrs":{"name":"rocket","emoji":"🚀"}}]}]},"author":{"framerUserId":"cdbd7ebc-86d4-4b64-baea-421f236c7c35","name":"Karim Saif","slug":"karim-saif","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/38316/JKMR4LgEt-1ogBJEJjcXu0BLVSwyn9DCkQ64JbBx","followed":false,"followsYou":false},"media":[],"resources":[{"id":"74443","resolved":true,"title":"Voice Waitlist","body":"$59","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Voice AI Waitlist is a sleek, conversion-focused landing page template built for launching a text-to-speech or voice AI product before it's live. It combines a bold hero section, a live countdown timer, an animated waveform demo, and a waitlist signup form, all wrapped in a modern dark-first design with a built-in light mode toggle."}]},{"type":"paragraph"},{"type":"paragraph","content":[{"type":"text","text":"Preview :: ","marks":[{"type":"bold"}]},{"type":"text","text":"https://voiceaiwaitlist.framer.website/","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"https://voiceaiwaitlist.framer.website/","target":"_blank"}},{"type":"bold"}]}]},{"type":"paragraph"},{"type":"paragraph","content":[{"type":"text","text":"Great for","marks":[{"type":"bold"}]}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"AI/voice/speech-tech startups building pre-launch hype"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"SaaS products validating demand before shipping"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Founders who want a polished \"coming soon\" page without building from scratch"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Anyone running an early-access or beta waitlist campaign"}]}]}]},{"type":"paragraph"},{"type":"paragraph","content":[{"type":"text","text":"Pages included","marks":[{"type":"bold"}]}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Home","marks":[{"type":"bold"}]},{"type":"text","text":" — hero, countdown, animated TTS demo, waitlist form"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"/thank-you","marks":[{"type":"bold"}]},{"type":"text","text":" — confirmation page shown after signup"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"/404","marks":[{"type":"bold"}]},{"type":"text","text":" — custom not-found page"}]}]}]},{"type":"paragraph"},{"type":"paragraph","content":[{"type":"text","text":"Features","marks":[{"type":"bold"}]}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"emoji","attrs":{"name":"last_quarter_moon","emoji":"🌗"}},{"type":"text","text":" One-click "},{"type":"text","text":"dark / light mode toggle","marks":[{"type":"bold"}]},{"type":"text","text":", with the visitor's choice remembered on return visits"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"🎙️ Animated text-to-speech waveform demo section"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"⏱️ Live countdown timer to launch day"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"emoji","attrs":{"name":"memo","emoji":"📝"}},{"type":"text","text":" Waitlist signup form, ready to connect to your email/CRM tool"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"emoji","attrs":{"name":"art","emoji":"🎨"}},{"type":"text","text":" Fully token-based color & type system — change one style, updates the whole site"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"emoji","attrs":{"name":"iphone","emoji":"📱"}},{"type":"text","text":" Fully responsive across desktop, tablet, and mobile"}]}]}]},{"type":"paragraph"},{"type":"paragraph","content":[{"type":"text","text":"Fast customization","marks":[{"type":"bold"}]},{"type":"text","text":" No guesswork, the template ships with a built-in "},{"type":"text","text":"Template Instruction","marks":[{"type":"bold"}]},{"type":"text","text":" page: a step-by-step guide covering duplication, branding, fonts & colors, editing the homepage, SEO setup, and launch checklist, so you can make it yours in minutes."}]},{"type":"paragraph"},{"type":"paragraph","content":[{"type":"text","text":"Support","marks":[{"type":"bold"}]},{"type":"text","text":" Questions or issues? Reach out anytime:"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"X: "},{"type":"text","text":"@karimsaif0","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"https://x.com/karimsaif0","target":"_blank"}}]}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Email: "},{"type":"text","text":"karimsaif010@gmail.com","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"mailto:karimsaif010@gmail.com","target":"_blank"}}]}]}]}]}]},"introduction":"Text-to-speech or voice AI","slug":"voice-waitlist","author":{"framerUserId":"cdbd7ebc-86d4-4b64-baea-421f236c7c35","name":"Karim Saif","slug":"karim-saif","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/38316/JKMR4LgEt-1ogBJEJjcXu0BLVSwyn9DCkQ64JbBx","followed":false,"followsYou":false},"media":[{"type":"video","url":"https://stream.mux.com/dbq5Cx00auzB78ZoZ8802aGthVTZhSnYlyPJ01HFMomwPY.m3u8","metadata":{"posterUrl":"https://image.mux.com/dbq5Cx00auzB78ZoZ8802aGthVTZhSnYlyPJ01HFMomwPY/thumbnail.webp?time=18.217","aspectRatio":"4:3","duration":33.786167}},{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/cdbd7ebc-86d4-4b64-baea-421f236c7c35/01a0f869-7743-729a-9aff-6cee82981985.png","metadata":{"tint":{"h":0,"s":0,"l":3},"width":1600,"height":1200}},{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/cdbd7ebc-86d4-4b64-baea-421f236c7c35/01a0f869-7717-713f-955a-8f52b956ce5f.png","metadata":{"tint":{"h":0,"s":0,"l":57},"width":1600,"height":1200}},{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/cdbd7ebc-86d4-4b64-baea-421f236c7c35/01a0f869-7772-7049-a010-4239e4f19de7.png","metadata":{"tint":{"h":0,"s":0,"l":3},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-10-01T17:05:05.090Z","updatedAt":"2026-10-01T17:05:05.090Z","publishedAt":"2026-10-01T17:05:05.078Z","featuredAt":null,"approvedAt":null,"type":"template","attributes":{"price":"16","paymentUrl":"https://karimsaif.lemonsqueezy.com/checkout/buy/06685889-1589-42fb-928b-660b4f934134","remixUrl":null,"previewUrl":"https://voiceaiwaitlist.framer.website/","categories":[],"styles":[{"id":110,"name":"Animated","slug":"animated"},{"id":193,"name":"Black & White","slug":"black-and-white"},{"id":208,"name":"Dark","slug":"dark"}],"mainCategory":{"id":26,"name":"AI","slug":"ai"},"features":[],"tags":[],"isAgentTemplate":false,"demoVideo":null,"skills":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":4,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":2,"edited":true,"editedAt":"2026-10-01T17:06:20.042Z","createdAt":"2026-10-01T17:05:05.857Z","updatedAt":"2026-10-01T17:06:20.042Z"},{"id":"01a0ef95-d187-775a-bfe7-30dd5e0a4b54","title":null,"body":"

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.

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"I just released "},{"type":"text","text":"Jelly Lens","marks":[{"type":"bold"}]},{"type":"text","text":", a new interactive WebGL component for Framer."}]},{"type":"paragraph","content":[{"type":"text","text":"The idea was simple: make an image feel less static."}]},{"type":"paragraph","content":[{"type":"text","text":"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."}]},{"type":"paragraph","content":[{"type":"text","text":"It includes ready-made presets as well as detailed Framer controls for customization."}]}]},"author":{"framerUserId":"cdbd7ebc-86d4-4b64-baea-421f236c7c35","name":"Karim Saif","slug":"karim-saif","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/38316/JKMR4LgEt-1ogBJEJjcXu0BLVSwyn9DCkQ64JbBx","followed":false,"followsYou":false},"media":[],"resources":[{"id":"yA7DKIW2yU3q1QHbDXZ5","resolved":true,"title":"Jelly Lens Interact","body":"$5a","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"A fluid WebGL image effect that turns your cursor into a soft, glassy jelly lens. Move your cursor across the image to create a smooth magnifying effect with spring-based motion, subtle chromatic refraction, and a polished glass highlight."}]},{"type":"paragraph","content":[{"type":"text","text":"Designed to add depth and tactile interaction to image-driven Framer websites without requiring complicated setup."}]},{"type":"paragraph","content":[{"type":"text","text":"Preview: ","marks":[{"type":"bold"}]},{"type":"text","text":"https://jellylensinteraction.framer.website/","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"https://jellylensinteraction.framer.website/","target":"_blank"}},{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"Great for","marks":[{"type":"bold"}]}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Creative portfolios"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Digital agencies"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Art direction websites"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Photography portfolios"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Fashion and editorial websites"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Product showcases"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Interactive landing pages"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Experimental and WebGL websites"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Hero sections"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Image galleries"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Award-style websites"}]}]}]},{"type":"paragraph","content":[{"type":"text","text":"Features","marks":[{"type":"bold"}]}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Interactive cursor-following jelly lens"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Real-time WebGL rendering"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Smooth spring-based movement"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Adjustable magnification"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Adjustable lens radius"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Adjustable stiffness and damping"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Subtle chromatic refraction"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Glass highlight effect"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Image cover scaling"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Responsive canvas sizing"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Automatic device pixel ratio control"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Reduced-motion support"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Offscreen rendering optimization"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"WebGL context recovery"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Static-renderer fallback"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Ready-made visual presets"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Fully customizable through Framer property controls"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"No external image-processing setup required"}]}]}]},{"type":"paragraph","content":[{"type":"text","text":"Customize","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"Choose from four ready-made presets:"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Soft Jelly"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Glass Lens"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Strong Magnifier"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Liquid Bubble"}]}]}]},{"type":"paragraph","content":[{"type":"text","text":"Or switch to "},{"type":"text","text":"Custom","marks":[{"type":"bold"}]},{"type":"text","text":" and fine-tune the interaction yourself."}]},{"type":"paragraph","content":[{"type":"text","text":"Customize the magnification strength, lens radius, spring stiffness, damping, rendering quality, interaction state, and reduced-motion behavior directly from Framer."}]},{"type":"paragraph","content":[{"type":"text","text":"Support","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"Created and customized for Framer by Karim Saif."}]},{"type":"paragraph","content":[{"type":"text","text":"If you need help using the component, have found a bug, or have an idea for an improvement, reach out:"}]},{"type":"paragraph","content":[{"type":"text","text":"Email:","marks":[{"type":"bold"}]},{"type":"text","text":" "},{"type":"text","text":"karimsaif010@gmail.com","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"mailto:karimsaif010@gmail.com","target":"_blank"}}]}]},{"type":"paragraph","content":[{"type":"text","text":"X:","marks":[{"type":"bold"}]},{"type":"text","text":" "},{"type":"mention","attrs":{"id":"cdbd7ebc-86d4-4b64-baea-421f236c7c35","slug":"karim-saif","label":"Karim Saif","mentionSuggestionChar":"@"}},{"type":"text","text":" "}]}]},"introduction":"Fluid WebGL image effect","slug":"jelly-lens-interact","author":{"framerUserId":"cdbd7ebc-86d4-4b64-baea-421f236c7c35","name":"Karim Saif","slug":"karim-saif","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/38316/JKMR4LgEt-1ogBJEJjcXu0BLVSwyn9DCkQ64JbBx","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/cdbd7ebc-86d4-4b64-baea-421f236c7c35/01a0ef95-7714-77ea-9eeb-0d077768b342.png","metadata":{"tint":{"h":0,"s":0,"l":14},"width":1166,"height":864}}],"post":null,"createdAt":"2026-09-29T23:52:47.581Z","updatedAt":"2026-09-29T23:52:47.581Z","publishedAt":"2026-09-29T23:52:47.578Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://jellylensinteraction.framer.website/","price":"6","paymentUrl":"https://karimsaif.lemonsqueezy.com/checkout/buy/acc376af-9131-4b95-a7e2-945953cba573","workshop":false,"categories":[{"id":"7677fa83-43ce-41a2-a3fe-db438ec0fd33","name":"Interactive","slug":"interactive"}],"lastSaveId":"JqFKtF1hWH0IhZ0Pttp3","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":9,"liked":false},"comments":{"count":2},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-09-29T23:52:48.263Z","updatedAt":"2026-09-29T23:52:48.263Z"},{"id":"01a0ea08-5e60-70fa-9b35-aa66b520eb61","title":null,"body":"

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.

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"I just released "},{"type":"text","text":"Sheer Veil","marks":[{"type":"bold"}]},{"type":"text","text":" for Framer."}]},{"type":"paragraph","content":[{"type":"text","text":"A real-time WebGL curtain effect designed to bring a more cinematic feel to modern websites."}]},{"type":"paragraph","content":[{"type":"text","text":"It features: "}]},{"type":"paragraph","content":[{"type":"text","text":"• Realistic fabric folds "}]},{"type":"paragraph","content":[{"type":"text","text":"• Wind simulation "}]},{"type":"paragraph","content":[{"type":"text","text":"• Interactive cursor distortion "}]},{"type":"paragraph","content":[{"type":"text","text":"• Dynamic silk lighting "}]},{"type":"paragraph","content":[{"type":"text","text":"• Image reveal "}]},{"type":"paragraph","content":[{"type":"text","text":"• Split or single panels "}]},{"type":"paragraph","content":[{"type":"text","text":"• Submit, click, hover, or manual opening "}]},{"type":"paragraph","content":[{"type":"text","text":"• Ready-made visual presets "}]},{"type":"paragraph","content":[{"type":"text","text":"• Responsive rendering"}]},{"type":"paragraph","content":[{"type":"text","text":"Designed for creative portfolios, luxury websites, product launches, waitlists, events, and immersive hero sections."}]},{"type":"paragraph","content":[{"type":"text","text":"Made with "},{"type":"emoji","attrs":{"name":"yellow_heart","emoji":"💛"}},{"type":"text","text":" by "},{"type":"mention","attrs":{"id":"cdbd7ebc-86d4-4b64-baea-421f236c7c35","slug":"karim-saif","label":"Karim Saif","mentionSuggestionChar":"@"}},{"type":"text","text":" "}]},{"type":"paragraph","content":[{"type":"text","text":"Try it in Framer."}]}]},"author":{"framerUserId":"cdbd7ebc-86d4-4b64-baea-421f236c7c35","name":"Karim Saif","slug":"karim-saif","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/38316/JKMR4LgEt-1ogBJEJjcXu0BLVSwyn9DCkQ64JbBx","followed":false,"followsYou":false},"media":[],"resources":[{"id":"XFSrMb9RL33p5VCHZKYu","resolved":true,"title":"Sheer Veil Plastic","body":"$5b","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Sheer Veil","marks":[{"type":"bold"}]},{"type":"text","text":" is an interactive WebGL curtain effect designed to create cinematic hero sections, launches, forms, and immersive website reveals."}]},{"type":"paragraph","content":[{"type":"text","text":"The curtain behaves like translucent fabric with realistic folds, subtle textile detail, lighting, wind movement, and cursor interaction. Use it as a visual entrance layer, reveal animation, or atmospheric hero effect with controls for colors, transparency, folds, panels, lighting, interaction, and opening behavior."}]},{"type":"paragraph","content":[{"type":"text","text":"Choose from five ready-made visual presets "},{"type":"text","text":"Organza, Ivory, Pearl, Smoke, and Midnight","marks":[{"type":"bold"}]},{"type":"text","text":" or customize the look to match your site."}]},{"type":"customHeading","content":[{"type":"text","text":"Preview"}],"attrs":{"level":1}},{"type":"paragraph","content":[{"type":"text","text":"https://sheerveilplastic.framer.website/","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"https://sheerveilplastic.framer.website/","target":"_blank"}}]}]},{"type":"customHeading","content":[{"type":"text","text":"Great For"}],"attrs":{"level":1}},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Luxury landing pages"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Fashion and beauty websites"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Creative portfolios"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Product launches"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Event and wedding websites"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Coming-soon pages"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Signup and waitlist experiences"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Interactive hero sections"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Cinematic website intros"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Experimental Framer websites"}]}]}]},{"type":"customHeading","content":[{"type":"text","text":"Features"}],"attrs":{"level":1}},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Real-time WebGL fabric simulation"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Translucent sheer curtain effect"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Realistic procedural folds"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Interactive cursor distortion"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Continuous wind simulation"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Cursor-based light highlights"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Custom silk and sheen colors"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Adjustable fabric transparency"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Split or single curtain panels"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Multiple opening triggers"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Submit-triggered reveal"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Click-to-open interaction"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Hover-to-open interaction"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Manual open/close control"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Automatic close timing"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Background image reveal"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Procedural textile weave"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Optional film-grain texture"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Five built-in visual presets"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Responsive canvas rendering"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Reduced-motion support"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Static Framer canvas/thumbnail rendering"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Offscreen animation pausing for better performance"}]}]}]},{"type":"customHeading","attrs":{"level":1}},{"type":"customHeading","content":[{"type":"text","text":"Support"}],"attrs":{"level":1}},{"type":"paragraph","content":[{"type":"text","text":"Need help setting up "},{"type":"text","text":"Sheer Veil","marks":[{"type":"bold"}]},{"type":"text","text":" or customizing it for your Framer project?"}]},{"type":"paragraph","content":[{"type":"text","text":"X:","marks":[{"type":"bold"}]},{"type":"text","text":" "},{"type":"text","text":"@karimsaif","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow ugc","href":"https://x.com/karimsaif0","target":"_blank"}}]},{"type":"text","text":" ","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow ugc","href":"https://x.com/karimsaif0","target":"_blank"}}]}]},{"type":"paragraph","content":[{"type":"text","text":"Email:","marks":[{"type":"bold"}]},{"type":"text","text":" "},{"type":"text","text":"karimsaif010@gmail.com","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"mailto:karimsaif010@gmail.com","target":"_blank"}}]}]}]},"introduction":"Interactive WebGL curtain","slug":"sheer-veil-plastic","author":{"framerUserId":"cdbd7ebc-86d4-4b64-baea-421f236c7c35","name":"Karim Saif","slug":"karim-saif","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/38316/JKMR4LgEt-1ogBJEJjcXu0BLVSwyn9DCkQ64JbBx","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/cdbd7ebc-86d4-4b64-baea-421f236c7c35/01a0ea03-0f24-70f8-ae01-2e6ca4fc66f2.png","metadata":{"tint":{"h":180,"s":7,"l":22},"width":1188,"height":775}}],"post":null,"createdAt":"2026-09-28T22:00:11.447Z","updatedAt":"2026-09-28T22:09:43.585Z","publishedAt":"2026-09-28T22:00:11.444Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":"https://re.chujiqiqi.com/m/Sheer-Veil-bykIL5.js@jy9sNZR2Nm5VOlT96dDj","previewUrl":"https://sheerveilplastic.framer.website/","price":null,"paymentUrl":null,"workshop":false,"categories":[{"id":"7677fa83-43ce-41a2-a3fe-db438ec0fd33","name":"Interactive","slug":"interactive"}],"lastSaveId":"jy9sNZR2Nm5VOlT96dDj","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":10,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-09-28T22:00:12.128Z","updatedAt":"2026-09-28T22:00:12.128Z"},{"id":"01a0e8c7-d2ec-706d-b69c-343648e3ecc1","title":null,"body":"

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.

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"A small Framer milestone I’m really happy about."}]},{"type":"paragraph","content":[{"type":"text","text":"My "},{"type":"text","text":"DNA Carousel","marks":[{"type":"bold"}]},{"type":"text","text":" component is now "},{"type":"text","text":"#1 in Framer’s Carousel Components","marks":[{"type":"bold"}]},{"type":"text","text":", and it’s completely free. "},{"type":"emoji","attrs":{"name":"dna","emoji":"🧬"}}]},{"type":"paragraph","content":[{"type":"text","text":"I built it to bring a more distinctive, interactive carousel experience to Framer without making it complicated for designers to use."}]},{"type":"paragraph","content":[{"type":"text","text":"Seeing it reach #1 has been incredibly motivating."}]},{"type":"paragraph","content":[{"type":"text","text":"Thank you to everyone who tried it, used it, shared it, or simply stopped by to check it out."}]}]},"author":{"framerUserId":"cdbd7ebc-86d4-4b64-baea-421f236c7c35","name":"Karim Saif","slug":"karim-saif","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/38316/JKMR4LgEt-1ogBJEJjcXu0BLVSwyn9DCkQ64JbBx","followed":false,"followsYou":false},"media":[{"type":"video","url":"https://stream.mux.com/NcvsdOkhBjDqt00p4s6ie86QDxvLuIMT78WUAenvBodM.m3u8","metadata":{"posterUrl":"https://image.mux.com/NcvsdOkhBjDqt00p4s6ie86QDxvLuIMT78WUAenvBodM/thumbnail.webp?time=10.783","aspectRatio":"4:3","duration":12.216667}}],"resources":[],"contests":[],"categories":[{"id":"cf35162f-8406-49a9-a023-4c58024795ee","name":"General","slug":"general","description":"General","metaTitle":"General","metaDescription":"General"}],"tags":[],"likes":{"count":10,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-09-28T16:10:04.912Z","updatedAt":"2026-09-28T16:10:04.912Z"},{"id":"01a0e570-81d3-76ba-bf48-3f780a7a7639","title":null,"body":"

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.

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"I built a music player for Framer that doesn't need to take over your layout. ","marks":[{"type":"bold"}]},{"type":"emoji","attrs":{"name":"musical_note","emoji":"🎵"}}]},{"type":"paragraph","content":[{"type":"text","text":"The idea was simple: keep the player minimal when it's not being used, then reveal the full experience when someone interacts with it."}]},{"type":"paragraph","content":[{"type":"text","text":"The result is a "},{"type":"text","text":"Hover Expand Music Player","marks":[{"type":"bold"}]},{"type":"text","text":" with:"}]},{"type":"paragraph","content":[{"type":"text","text":"→ Custom audio uploads "}]},{"type":"paragraph","content":[{"type":"text","text":"→ Album artwork "}]},{"type":"paragraph","content":[{"type":"text","text":"→ Play / pause / restart / stop "}]},{"type":"paragraph","content":[{"type":"text","text":"→ Interactive progress "}]},{"type":"paragraph","content":[{"type":"text","text":"→ Volume control "}]},{"type":"paragraph","content":[{"type":"text","text":"→ Animated equalizer "}]},{"type":"paragraph","content":[{"type":"text","text":"→ Smooth spring expansion "}]},{"type":"paragraph","content":[{"type":"text","text":"→ Reduced-motion support "}]},{"type":"paragraph","content":[{"type":"text","text":"→ Fully customizable Framer controls"}]},{"type":"paragraph","content":[{"type":"text","text":"Everything can be configured directly from the Framer property panel."}]},{"type":"paragraph","content":[{"type":"text","text":"Built with the goal of making audio feel like part of the interaction, not just another UI element."}]}]},"author":{"framerUserId":"cdbd7ebc-86d4-4b64-baea-421f236c7c35","name":"Karim Saif","slug":"karim-saif","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/38316/JKMR4LgEt-1ogBJEJjcXu0BLVSwyn9DCkQ64JbBx","followed":false,"followsYou":false},"media":[],"resources":[{"id":"kNr8Ntg3WsYnpl4HE4al","resolved":true,"title":"Hover Expand Player","body":"$5c","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"A compact, interactive music player for Framer that smoothly expands on hover into a full playback interface. Upload your own audio, add album artwork, customize the colors and sizing, and give your website a polished music experience without any external setup."}]},{"type":"paragraph","content":[{"type":"text","text":"Built with smooth spring motion, real audio playback, progress controls, volume control, and responsive Framer property controls."}]},{"type":"customHeading","content":[{"type":"text","text":"Preview"}],"attrs":{"level":2}},{"type":"paragraph","content":[{"type":"text","text":"https://hoverexpandplayer.framer.website/","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"https://hoverexpandplayer.framer.website/","target":"_blank"}}]}]},{"type":"customHeading","content":[{"type":"text","text":"Great For"}],"attrs":{"level":2}},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Music portfolios"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Artist & musician websites"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Creative portfolios"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Personal websites"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Audio experiences"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Interactive landing pages"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Product showcases"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Creative agencies"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Experimental websites"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Framer projects that need a compact audio player"}]}]}]},{"type":"customHeading","content":[{"type":"text","text":"Features"}],"attrs":{"level":2}},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"emoji","attrs":{"name":"musical_note","emoji":"🎵"}},{"type":"text","text":" Upload your own music directly from Framer"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"🖼️ Custom album artwork"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"✨ Smooth hover-to-expand interaction"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"▶️ Play / pause controls"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"emoji","attrs":{"name":"arrows_counterclockwise","emoji":"🔄"}},{"type":"text","text":" Restart track"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"⏹️ Stop track"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"🎚️ Volume control"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"emoji","attrs":{"name":"bar_chart","emoji":"📊"}},{"type":"text","text":" Interactive playback progress"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"⌨️ Keyboard-friendly progress controls"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"🎧 Live playback time and duration"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"emoji","attrs":{"name":"chart_with_upwards_trend","emoji":"📈"}},{"type":"text","text":" Animated equalizer"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"emoji","attrs":{"name":"crescent_moon","emoji":"🌙"}},{"type":"text","text":" Reduced-motion support"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"emoji","attrs":{"name":"triangular_ruler","emoji":"📐"}},{"type":"text","text":" Fully customizable closed and expanded sizes"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"emoji","attrs":{"name":"art","emoji":"🎨"}},{"type":"text","text":" Custom background, text, accent, progress, and muted colors"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"emoji","attrs":{"name":"dizzy","emoji":"💫"}},{"type":"text","text":" Optional shadow and adjustable shadow opacity"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"⚡ Adjustable animation speed"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"emoji","attrs":{"name":"iphone","emoji":"📱"}},{"type":"text","text":" Responsive Framer component"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"emoji","attrs":{"name":"jigsaw","emoji":"🧩"}},{"type":"text","text":" Framer property controls for easy customization"}]}]}]},{"type":"paragraph","content":[{"type":"text","text":"The component supports uploaded MP3, WAV, OGG, M4A, and AAC files through its Music control."}]},{"type":"customHeading","content":[{"type":"text","text":"Customize"}],"attrs":{"level":2}},{"type":"paragraph","content":[{"type":"text","text":"Everything is designed to be customized directly inside Framer."}]},{"type":"paragraph","content":[{"type":"text","text":"Content","marks":[{"type":"bold"}]}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Track title"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Artist name"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Music file"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Album artwork"}]}]}]},{"type":"paragraph","content":[{"type":"text","text":"Layout","marks":[{"type":"bold"}]}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Closed width"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Closed height"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Open width"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Open height"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Corner radius"}]}]}]},{"type":"paragraph","content":[{"type":"text","text":"Colors","marks":[{"type":"bold"}]}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Background"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Muted text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Accent"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Progress track"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Progress fill"}]}]}]},{"type":"paragraph","content":[{"type":"text","text":"Interaction","marks":[{"type":"bold"}]}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Hover expansion"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Animation speed"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Preview open/closed state"}]}]}]},{"type":"paragraph","content":[{"type":"text","text":"Effects","marks":[{"type":"bold"}]}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Shadow"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Shadow opacity"}]}]}]},{"type":"paragraph","content":[{"type":"text","text":"All of these controls are exposed through Framer's property panel."}]},{"type":"customHeading","content":[{"type":"text","text":"Support"}],"attrs":{"level":2}},{"type":"paragraph","content":[{"type":"text","text":"Need help customizing the component or have an issue with your setup?"}]},{"type":"paragraph","content":[{"type":"text","text":"Email:","marks":[{"type":"bold"}]},{"type":"text","text":" "},{"type":"text","text":"karimsaif010@gmail.com","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"mailto:karimsaif010@gmail.com","target":"_blank"}}]}]},{"type":"paragraph","content":[{"type":"text","text":"X:","marks":[{"type":"bold"}]},{"type":"text","text":" "},{"type":"mention","attrs":{"id":"cdbd7ebc-86d4-4b64-baea-421f236c7c35","slug":"karim-saif","label":"Karim Saif","mentionSuggestionChar":"@"}},{"type":"text","text":" "}]}]},"introduction":"Interactive music player","slug":"hover-expand-player","author":{"framerUserId":"cdbd7ebc-86d4-4b64-baea-421f236c7c35","name":"Karim Saif","slug":"karim-saif","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/38316/JKMR4LgEt-1ogBJEJjcXu0BLVSwyn9DCkQ64JbBx","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/cdbd7ebc-86d4-4b64-baea-421f236c7c35/01a0e56f-c87a-74b2-97b2-093972e475a6.png","metadata":{"tint":{"h":0,"s":0,"l":57},"width":1177,"height":780}}],"post":null,"createdAt":"2026-09-28T00:35:50.113Z","updatedAt":"2026-09-28T00:35:50.113Z","publishedAt":"2026-09-28T00:35:50.110Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":"https://re.chujiqiqi.com/m/Hover-Expand-Player-ZJKwux.js@7l3UVcaxLrDHJ0BrpzuM","previewUrl":"https://hoverexpandplayer.framer.website/","price":null,"paymentUrl":null,"workshop":false,"categories":[{"id":"ae04a700-60cc-429a-b133-88f3c9709ec0","name":"Players","slug":"players"}],"lastSaveId":"7l3UVcaxLrDHJ0BrpzuM","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":11,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-09-28T00:35:50.868Z","updatedAt":"2026-09-28T00:35:50.868Z"},{"id":"01a0dfc9-4acf-758f-8393-3cdaef73f441","title":null,"body":"

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.

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"I just released Video Player Pro for Framer "},{"type":"emoji","attrs":{"name":"movie_camera","emoji":"🎥"}}]},{"type":"paragraph","content":[{"type":"text","text":"I wanted a video component that felt more native to a modern Framer website instead of looking like a browser-default video element."}]},{"type":"paragraph","content":[{"type":"text","text":"The player includes:"}]},{"type":"paragraph","content":[{"type":"text","text":"• Hover-to-show controls "}]},{"type":"paragraph","content":[{"type":"text","text":"• Play / pause "}]},{"type":"paragraph","content":[{"type":"text","text":"• Progress and seeking "}]},{"type":"paragraph","content":[{"type":"text","text":"• Volume and mute "}]},{"type":"paragraph","content":[{"type":"text","text":"• Playback speed controls "}]},{"type":"paragraph","content":[{"type":"text","text":"• Fullscreen "}]},{"type":"paragraph","content":[{"type":"text","text":"• Autoplay and loop "}]},{"type":"paragraph","content":[{"type":"text","text":"• Responsive sizing "}]},{"type":"paragraph","content":[{"type":"text","text":"• Custom colors, blur, opacity, radius, and spacing "}]},{"type":"paragraph","content":[{"type":"text","text":"• Keyboard shortcuts "}]},{"type":"paragraph","content":[{"type":"text","text":"• Touch-device support "}]},{"type":"paragraph","content":[{"type":"text","text":"• Reduced-motion support"}]},{"type":"paragraph","content":[{"type":"text","text":"Everything is customizable directly through Framer's property panel."}]},{"type":"paragraph","content":[{"type":"text","text":"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."}]}]},"author":{"framerUserId":"cdbd7ebc-86d4-4b64-baea-421f236c7c35","name":"Karim Saif","slug":"karim-saif","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/38316/JKMR4LgEt-1ogBJEJjcXu0BLVSwyn9DCkQ64JbBx","followed":false,"followsYou":false},"media":[],"resources":[{"id":"k7A2z3CkFR0nf3Bc68UG","resolved":true,"title":"Video Player Pro KS","body":"$5d","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"A modern, customizable video player for Framer with clean controls, smooth hover interactions, and a polished minimal interface."}]},{"type":"paragraph","content":[{"type":"text","text":"Upload your video, add an optional poster image, and customize the player directly from Framer’s property panel. Controls can automatically appear on hover and disappear when the pointer leaves, while touch devices keep the controls accessible."}]},{"type":"paragraph","content":[{"type":"text","text":"Preview : ","marks":[{"type":"bold"}]},{"type":"text","text":"https://videoplayerpro.framer.website/","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"https://videoplayerpro.framer.website/","target":"_blank"}},{"type":"bold"}]}]},{"type":"customHeading","content":[{"type":"text","text":"Great For"}],"attrs":{"level":1}},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Product and SaaS websites"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Creative portfolios"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Agency websites"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Design studios"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Product showcases"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Case studies"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Landing pages"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Video portfolios"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Brand websites"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Editorial and storytelling websites"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Interactive Framer projects"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Background and promotional videos"}]}]}]},{"type":"customHeading","content":[{"type":"text","text":"Features"}],"attrs":{"level":1}},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Custom video upload"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Optional poster image"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Hover-to-show video controls"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Configurable hover fade duration"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Play and pause controls"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Progress bar with seeking"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Current time and duration display"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Volume slider"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Mute and unmute"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Custom playback speeds"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Configurable default playback speed"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Fullscreen mode"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Autoplay support"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Muted playback support"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Loop playback"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Responsive sizing"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Cover, contain, and fill object-fit modes"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Custom video corner radius"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Custom control panel radius"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Control background opacity"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Backdrop blur"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Custom control color"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Custom accent color"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Adjustable progress-bar height"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Adjustable control padding"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Adjustable control spacing"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Keyboard shortcuts"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Touch-device support"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Reduced-motion support"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Static-renderer support"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Accessible control labels"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"No external UI libraries required"}]}]}]},{"type":"customHeading","content":[{"type":"text","text":"Support"}],"attrs":{"level":1}},{"type":"paragraph","content":[{"type":"text","text":"Need help setting up the Video Player or have an issue with the component?"}]},{"type":"paragraph","content":[{"type":"text","text":"Contact me and I'll be happy to help."}]},{"type":"paragraph","content":[{"type":"text","text":"Email:","marks":[{"type":"bold"}]},{"type":"text","text":" "},{"type":"text","text":"karimsaif010@gmail.com","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"mailto:karimsaif010@gmail.com","target":"_blank"}}]}]},{"type":"paragraph","content":[{"type":"text","text":"X:","marks":[{"type":"bold"}]},{"type":"text","text":" "},{"type":"text","text":"https://x.com/karimsaif0","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"https://x.com/karimsaif0","target":"_blank"}}]}]}]},"introduction":"Customizable video player","slug":"video-player-pro-ks","author":{"framerUserId":"cdbd7ebc-86d4-4b64-baea-421f236c7c35","name":"Karim Saif","slug":"karim-saif","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/38316/JKMR4LgEt-1ogBJEJjcXu0BLVSwyn9DCkQ64JbBx","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/cdbd7ebc-86d4-4b64-baea-421f236c7c35/01a0dfc8-288d-7736-87b1-c07f6486c61e.png","metadata":{"tint":{"h":60,"s":53,"l":39},"width":1183,"height":782}}],"post":null,"createdAt":"2026-09-26T22:15:05.489Z","updatedAt":"2026-09-26T22:15:05.489Z","publishedAt":"2026-09-26T22:15:05.486Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":"https://re.chujiqiqi.com/m/Video-Player-Pro-jezK4D.js@gzGcrUl7Wi7mq0kUAm6Z","previewUrl":"https://videoplayerpro.framer.website/","price":null,"paymentUrl":null,"workshop":false,"categories":[{"id":"ae04a700-60cc-429a-b133-88f3c9709ec0","name":"Players","slug":"players"}],"lastSaveId":"gzGcrUl7Wi7mq0kUAm6Z","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":10,"liked":false},"comments":{"count":1},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-09-26T22:15:06.191Z","updatedAt":"2026-09-26T22:15:06.191Z"},{"id":"01a0da8a-9f64-757c-8be6-de6c751139a4","title":null,"body":"

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.

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"I just built a CD-inspired music player for Framer. 💿"}]},{"type":"paragraph","content":[{"type":"text","text":"Instead of another standard audio player, I wanted the interaction to feel physical."}]},{"type":"paragraph","content":[{"type":"text","text":"The CD slides out of its sleeve, spins while the track is playing, and connects to a clean playback interface underneath."}]},{"type":"paragraph","content":[{"type":"text","text":"The component includes:"}]},{"type":"paragraph","content":[{"type":"text","text":"• Real audio playback "}]},{"type":"paragraph","content":[{"type":"text","text":"• Custom music uploads "}]},{"type":"paragraph","content":[{"type":"text","text":"• Play / pause controls "}]},{"type":"paragraph","content":[{"type":"text","text":"• Restart and skip controls "}]},{"type":"paragraph","content":[{"type":"text","text":"• Interactive progress seeking "}]},{"type":"paragraph","content":[{"type":"text","text":"• Keyboard accessibility "}]},{"type":"paragraph","content":[{"type":"text","text":"• Animated equalizer "}]},{"type":"paragraph","content":[{"type":"text","text":"• Responsive scaling "}]},{"type":"paragraph","content":[{"type":"text","text":"• Reduced-motion support "}]},{"type":"paragraph","content":[{"type":"text","text":"• Static Framer rendering "}]},{"type":"paragraph","content":[{"type":"text","text":"• Custom colors and animation controls"}]},{"type":"paragraph","content":[{"type":"text","text":"It's designed for musicians, artists, record labels, portfolios, creative studios, and anyone looking for a more tactile music experience."}]}]},"author":{"framerUserId":"cdbd7ebc-86d4-4b64-baea-421f236c7c35","name":"Karim Saif","slug":"karim-saif","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/38316/JKMR4LgEt-1ogBJEJjcXu0BLVSwyn9DCkQ64JbBx","followed":false,"followsYou":false},"media":[],"resources":[{"id":"Zh9PIp3GqQOiy6gjYvZD","resolved":true,"title":"CD Envelope Player","body":"$5e","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"CD Envelope Player"}]},{"type":"paragraph","content":[{"type":"text","text":"A tactile music player inspired by physical CD packaging."}]},{"type":"paragraph","content":[{"type":"text","text":"The CD smoothly slides out of its sleeve, spins while music is playing, and pairs with a minimal playback card for a polished, editorial-style experience."}]},{"type":"paragraph","content":[{"type":"text","text":"Upload your own audio, customize the colors and motion, and create a distinctive music experience without any external setup."}]},{"type":"customHeading","content":[{"type":"text","text":"Preview"}],"attrs":{"level":1}},{"type":"paragraph","content":[{"type":"text","text":"Preview: "},{"type":"text","text":"https://cdenvelopeplayer.framer.website/","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"https://cdenvelopeplayer.framer.website/","target":"_blank"}}]}]},{"type":"customHeading","content":[{"type":"text","text":"Great For"}],"attrs":{"level":1}},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Music portfolios"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Artist and musician websites"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Record labels"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Creative studios"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Music releases"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Album landing pages"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Personal portfolios"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Editorial websites"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Experimental and interactive websites"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Premium Framer projects"}]}]}]},{"type":"customHeading","content":[{"type":"text","text":"Features"}],"attrs":{"level":1}},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Real audio playback"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Upload your own music"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Animated CD sliding from the sleeve"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"CD rotation while playing"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Play / pause controls"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Restart track control"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"30-second skip control"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Interactive progress bar"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Keyboard-accessible seeking"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Current time and duration display"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Animated equalizer"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Artist and track title"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Autoplay support"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Adjustable playback volume"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Reduced-motion support"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Static-renderer support"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Responsive narrow-frame scaling"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Smooth Framer-native animations"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Fully customizable colors"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Custom CD size"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Adjustable slide distance"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Adjustable animation duration"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Adjustable spin speed"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Adjustable card spacing and radius"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Adjustable sleeve radius"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Show/hide interface elements"}]}]}]},{"type":"customHeading","content":[{"type":"text","text":"Customize"}],"attrs":{"level":1}},{"type":"paragraph","content":[{"type":"text","text":"Everything is designed to be easy to adapt inside Framer."}]},{"type":"paragraph","content":[{"type":"text","text":"Customize the CD size, slide distance, slide animation, spin speed, card spacing, corner radius, sleeve radius, colors, accent color, playback information, and visibility of the player controls."}]},{"type":"paragraph","content":[{"type":"text","text":"Upload your own MP3, WAV, OGG, M4A, or AAC file and turn the component into a custom music player for your project."}]},{"type":"customHeading","content":[{"type":"text","text":"Support"}],"attrs":{"level":1}},{"type":"paragraph","content":[{"type":"text","text":"Need help setting up the component or customizing it for your project?"}]},{"type":"paragraph","content":[{"type":"text","text":"Contact Karim Saif:"}]},{"type":"paragraph","content":[{"type":"text","text":"X: "},{"type":"mention","attrs":{"id":"cdbd7ebc-86d4-4b64-baea-421f236c7c35","slug":"karim-saif","label":"Karim Saif","mentionSuggestionChar":"@"}},{"type":"text","text":" "}]},{"type":"paragraph","content":[{"type":"text","text":"Email: "},{"type":"text","text":"karimsaif010@fmail.com","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"mailto:karimsaif010@fmail.com","target":"_blank"}}]}]}]},"introduction":"Tactile music player","slug":"cd-envelope-player","author":{"framerUserId":"cdbd7ebc-86d4-4b64-baea-421f236c7c35","name":"Karim Saif","slug":"karim-saif","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/38316/JKMR4LgEt-1ogBJEJjcXu0BLVSwyn9DCkQ64JbBx","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/cdbd7ebc-86d4-4b64-baea-421f236c7c35/01a0da89-e347-73cc-9bec-eb3a82eca3ce.png","metadata":{"tint":{"h":60,"s":17,"l":51},"width":1181,"height":781}}],"post":null,"createdAt":"2026-09-25T21:48:32.292Z","updatedAt":"2026-09-25T21:48:32.292Z","publishedAt":"2026-09-25T21:48:32.289Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":"https://re.chujiqiqi.com/m/CDEnvelopePlayer-fy6tA3.js@EnU0hiR7szNdiIXjaMdV","previewUrl":"https://cdenvelopeplayer.framer.website/","price":null,"paymentUrl":null,"workshop":false,"categories":[{"id":"ae04a700-60cc-429a-b133-88f3c9709ec0","name":"Players","slug":"players"}],"lastSaveId":"EnU0hiR7szNdiIXjaMdV","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":9,"liked":false},"comments":{"count":2},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-09-25T21:48:32.997Z","updatedAt":"2026-09-25T21:48:32.997Z"},{"id":"01a0d596-3974-73fe-9b91-aaa1f498e64e","title":null,"body":"

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.

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"I just built a new interactive market chart component for Framer."}]},{"type":"paragraph","content":[{"type":"text","text":"Market Chart","marks":[{"type":"bold"}]},{"type":"text","text":" brings a complete market-data visual system into the Framer canvas, including:"}]},{"type":"paragraph","content":[{"type":"text","text":"• Candlestick and area charts "}]},{"type":"paragraph","content":[{"type":"text","text":"• Volume visualization "}]},{"type":"paragraph","content":[{"type":"text","text":"• Interactive crosshair inspection "}]},{"type":"paragraph","content":[{"type":"text","text":"• Multiple time ranges "}]},{"type":"paragraph","content":[{"type":"text","text":"• Simulated live market movement "}]},{"type":"paragraph","content":[{"type":"text","text":"• Responsive SVG rendering "}]},{"type":"paragraph","content":[{"type":"text","text":"• Extensive visual customization"}]},{"type":"paragraph","content":[{"type":"text","text":"It is designed for fintech, crypto, investment, analytics, SaaS, and dashboard interfaces."}]}]},"author":{"framerUserId":"cdbd7ebc-86d4-4b64-baea-421f236c7c35","name":"Karim Saif","slug":"karim-saif","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/38316/JKMR4LgEt-1ogBJEJjcXu0BLVSwyn9DCkQ64JbBx","followed":false,"followsYou":false},"media":[],"resources":[{"id":"vhxU8ONuIsjsnQzOg1yU","resolved":true,"title":"Market Chart","body":"$5f","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"A polished, responsive market chart component for Framer with interactive candlesticks, smooth area charts, volume visualization, range switching, crosshair inspection, and simulated live market movement."}]},{"type":"paragraph","content":[{"type":"text","text":"Designed for modern fintech, crypto, SaaS, analytics, trading, dashboard, and financial website designs."}]},{"type":"paragraph","content":[{"type":"text","text":"Preview","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"Live Preview — Market Chart","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"https://marketchart.framer.website","target":"_blank"}}]}]},{"type":"paragraph","content":[{"type":"text","text":"Great for","marks":[{"type":"bold"}]}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Fintech and financial websites"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Crypto and Web3 landing pages"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Trading dashboards"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Investment and portfolio interfaces"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"SaaS analytics dashboards"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Stock and market data presentations"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Product showcases"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Data visualization sections"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Interactive Framer prototypes"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Modern dark or light interface designs"}]}]}]},{"type":"paragraph","content":[{"type":"text","text":"Features","marks":[{"type":"bold"}]}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Responsive SVG-based chart"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Candlestick chart mode"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Smooth area chart mode"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"SOL, AAPL, and BTC demo datasets"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"1W, 1M, 3M, 6M, and 1Y ranges"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Interactive range selector"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Simulated live market stream"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Volume bars"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Current-price line and price badge"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Interactive crosshair"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"OHLCV hover information"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Keyboard chart navigation"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Bullish and bearish colors"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Optional hollow bullish candles"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Adjustable candle opacity"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Compact price formatting"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Custom colors"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Adjustable chart height"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Adjustable price typography"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Custom border radius"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Grid visibility control"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Tooltip visibility control"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Animation controls"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Reduced-motion support"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Static-renderer support"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Responsive layout for different Framer frame sizes"}]},{"type":"paragraph"}]}]},{"type":"paragraph","content":[{"type":"text","text":"Support","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"Need help using or customizing the component?"}]},{"type":"paragraph","content":[{"type":"text","text":"Contact me at "},{"type":"text","text":"karimsaif010@gmail.com","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"mailto:karimsaif010@gmail.com","target":"_blank"}},{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"Follow me on X for new Framer components, templates, experiments, and updates:"}]},{"type":"paragraph","content":[{"type":"text","text":"@karimsaif","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"https://x.com/karimsaif0","target":"_blank"}}]}]}]},"introduction":"Responsive market chart","slug":"market-chart","author":{"framerUserId":"cdbd7ebc-86d4-4b64-baea-421f236c7c35","name":"Karim Saif","slug":"karim-saif","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/38316/JKMR4LgEt-1ogBJEJjcXu0BLVSwyn9DCkQ64JbBx","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/cdbd7ebc-86d4-4b64-baea-421f236c7c35/01a0d595-4edb-7002-8c83-4d05489e1614.png","metadata":{"tint":{"h":210,"s":70,"l":60},"width":1188,"height":780}}],"post":null,"createdAt":"2026-09-24T22:43:06.581Z","updatedAt":"2026-09-24T22:43:06.581Z","publishedAt":"2026-09-24T22:43:06.578Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://marketchart.framer.website/","price":"6","paymentUrl":"https://karimsaif.lemonsqueezy.com/checkout/buy/b7e61a53-11fa-41f2-80bb-16db91fdae5c","workshop":false,"categories":[{"id":"51314a1b-a5bd-4ae8-acf0-bd3d5058c367","name":"Charts","slug":"charts"}],"lastSaveId":"lBLAtiyg8OHs1bXvfA3a","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":6,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-09-24T22:43:07.252Z","updatedAt":"2026-09-24T22:43:07.252Z"},{"id":"01a0d334-d7e6-73ed-9d37-3672d2b8c93b","title":null,"body":"

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.

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"I just released Animated Beam for Framer ⚡"}]},{"type":"paragraph","content":[{"type":"text","text":"A flexible component for creating animated integrations, workflows, product ecosystems, and connected interface visuals."}]},{"type":"paragraph","content":[{"type":"text","text":"It includes:"}]},{"type":"paragraph","content":[{"type":"text","text":"• Hub & Spoke mode "}]},{"type":"paragraph","content":[{"type":"text","text":"• Converge mode "}]},{"type":"paragraph","content":[{"type":"text","text":"• Parallel mode "}]},{"type":"paragraph","content":[{"type":"text","text":"• 9 visual presets "}]},{"type":"paragraph","content":[{"type":"text","text":"• Responsive SVG beam paths "}]},{"type":"paragraph","content":[{"type":"text","text":"• Animated gradient effects "}]},{"type":"paragraph","content":[{"type":"text","text":"• Custom nodes and images "}]},{"type":"paragraph","content":[{"type":"text","text":"• Optional endpoint cards "}]},{"type":"paragraph","content":[{"type":"text","text":"• Custom convergence icons "}]},{"type":"paragraph","content":[{"type":"text","text":"• Curvature and direction controls "}]},{"type":"paragraph","content":[{"type":"text","text":"• Animation timing and easing controls "}]},{"type":"paragraph","content":[{"type":"text","text":"• Reduced-motion support "}]},{"type":"paragraph","content":[{"type":"text","text":"• Static rendering support"}]},{"type":"paragraph","content":[{"type":"text","text":"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."}]}]},"author":{"framerUserId":"cdbd7ebc-86d4-4b64-baea-421f236c7c35","name":"Karim Saif","slug":"karim-saif","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/38316/JKMR4LgEt-1ogBJEJjcXu0BLVSwyn9DCkQ64JbBx","followed":false,"followsYou":false},"media":[],"resources":[{"id":"helyrJcsmYGSAXp2Hkwz","resolved":true,"title":"Animated Beam Chart","body":"$60","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Bring your Framer layouts to life with a flexible animated beam system designed for integrations, workflows, networks, product connections, and modern interface visuals."}]},{"type":"paragraph","content":[{"type":"text","text":"Animated Beam gives you three visual modes, Hub & Spoke, Converge, and Parallel, with responsive SVG paths, animated gradient beams, customizable nodes, endpoint cards, convergence icons, and a collection of ready-to-use visual presets."}]},{"type":"paragraph","content":[{"type":"text","text":"Preview : ","marks":[{"type":"bold"}]},{"type":"text","text":"https://animatedbeam.framer.website/","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"https://animatedbeam.framer.website/","target":"_blank"}},{"type":"bold"}]}]},{"type":"customHeading","content":[{"type":"text","text":"Great for"}],"attrs":{"level":1}},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"SaaS integration sections"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"AI and automation workflows"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Product ecosystem diagrams"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"API and developer platforms"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Tool and app integrations"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Partner and technology networks"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Workflow visualizations"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Product feature sections"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Hero sections"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Landing pages"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Dashboard interfaces"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Startup and technology websites"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Agency and portfolio websites"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"“How it works” sections"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Connected product experiences"}]}]}]},{"type":"customHeading","content":[{"type":"text","text":"Features"}],"attrs":{"level":1}},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"3 animation modes"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Hub & Spoke layout"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Converge layout"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Parallel layout"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"9 ready-made visual presets"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Fully responsive SVG beam paths"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Animated gradient beams"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Custom beam colors"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Adjustable beam width and opacity"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Adjustable animation duration"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Animation delay and stagger controls"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Repeat delay control"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Speed variation"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Multiple easing options"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Reverse animation"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Custom curvature"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Horizontal and vertical Parallel layouts"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Horizontal and vertical flipping"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Custom convergence position"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Custom convergence bend"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Customizable Hub nodes"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Custom node images"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Custom center image"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Optional endpoint cards"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Custom card text and icons"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Custom card colors and borders"}]}]}]},{"type":"customHeading","content":[{"type":"text","text":"Support"}],"attrs":{"level":1}},{"type":"paragraph","content":[{"type":"text","text":"Need help setting up Animated Beam or have a problem with your Framer project?"}]},{"type":"paragraph","content":[{"type":"text","text":"Email: "},{"type":"text","text":"karimsaif010@gmail.com","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"mailto:karimsaif010@gmail.com","target":"_blank"}}]}]},{"type":"paragraph","content":[{"type":"text","text":"Follow Karim Saif on X for new Framer components, experiments, resources, and updates."}]},{"type":"paragraph","content":[{"type":"text","text":"X: @karimsaif"}]}]},"introduction":"Flexible animated beam system","slug":"animated-beam-chart","author":{"framerUserId":"cdbd7ebc-86d4-4b64-baea-421f236c7c35","name":"Karim Saif","slug":"karim-saif","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/38316/JKMR4LgEt-1ogBJEJjcXu0BLVSwyn9DCkQ64JbBx","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/cdbd7ebc-86d4-4b64-baea-421f236c7c35/01a0d333-e0b0-771e-9d1d-32245be60be3.png","metadata":{"tint":{"h":210,"s":70,"l":60},"width":1190,"height":869}}],"post":null,"createdAt":"2026-09-24T11:37:30.083Z","updatedAt":"2026-09-24T12:15:26.451Z","publishedAt":"2026-09-24T11:37:30.079Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":"https://re.chujiqiqi.com/m/Animated-Beam-utP42x.js@UAGEVhevuoiQHv9cJoqE","previewUrl":"https://animatedbeam.framer.website/","price":null,"paymentUrl":null,"workshop":false,"categories":[{"id":"51314a1b-a5bd-4ae8-acf0-bd3d5058c367","name":"Charts","slug":"charts"}],"lastSaveId":"UAGEVhevuoiQHv9cJoqE","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":6,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-09-24T11:37:30.854Z","updatedAt":"2026-09-24T11:37:30.854Z"},{"id":"01a0ce34-0a30-753d-a242-23fec61dec09","title":null,"body":"

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.

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"I just released a new"},{"type":"text","text":" Funnel Chart ","marks":[{"type":"bold"}]},{"type":"text","text":"component for Framer."}]},{"type":"paragraph","content":[{"type":"text","text":"The goal was simple: make conversion funnels feel like a polished part of a website instead of a generic analytics widget."}]},{"type":"paragraph","content":[{"type":"text","text":"It includes:"}]},{"type":"paragraph","content":[{"type":"text","text":"• Horizontal & vertical layouts "}]},{"type":"paragraph","content":[{"type":"text","text":"• Custom stage colors & gradients "}]},{"type":"paragraph","content":[{"type":"text","text":"• Curved or straight edges "}]},{"type":"paragraph","content":[{"type":"text","text":"• Adjustable depth layers "}]},{"type":"paragraph","content":[{"type":"text","text":"• Labels, values & percentages "}]},{"type":"paragraph","content":[{"type":"text","text":"• Patterns and grid systems "}]},{"type":"paragraph","content":[{"type":"text","text":"• Entrance animations "}]},{"type":"paragraph","content":[{"type":"text","text":"• Interactive hover effects "}]},{"type":"paragraph","content":[{"type":"text","text":"• Fully responsive sizing "}]},{"type":"paragraph","content":[{"type":"text","text":"• Framer Property Controls"}]},{"type":"paragraph","content":[{"type":"text","text":"It works especially well for SaaS websites, marketing pages, analytics dashboards, sales funnels, customer journeys, and data-driven landing pages."}]},{"type":"paragraph"}]},"author":{"framerUserId":"cdbd7ebc-86d4-4b64-baea-421f236c7c35","name":"Karim Saif","slug":"karim-saif","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/38316/JKMR4LgEt-1ogBJEJjcXu0BLVSwyn9DCkQ64JbBx","followed":false,"followsYou":false},"media":[],"resources":[{"id":"KSwAYr8uraxcX2tQlfIx","resolved":true,"title":"Funnel Chart","body":"$61","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Funnel Chart","marks":[{"type":"bold"}]},{"type":"text","text":" is a flexible, animated funnel visualization for Framer, designed to turn conversion data into a polished visual story."}]},{"type":"paragraph","content":[{"type":"text","text":"Create beautiful sales funnels, marketing journeys, conversion flows, onboarding analytics, customer journeys, and product performance charts with fully customizable stages, colors, gradients, patterns, labels, grids, animation, and hover interactions."}]},{"type":"paragraph","content":[{"type":"text","text":"Choose between horizontal or vertical layouts, adjust the depth and spacing, use curved or straight edges, and customize every stage individually. The responsive layout adapts automatically to your Framer canvas."}]},{"type":"paragraph","content":[{"type":"text","text":"Perfect for dashboards, SaaS websites, marketing pages, analytics sections, case studies, and presentations."}]},{"type":"customHeading","content":[{"type":"text","text":"Preview"}],"attrs":{"level":1}},{"type":"paragraph","content":[{"type":"text","text":"Live Funnel Chart Preview","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow ugc","href":"https://funnelchart.framer.website","target":"_blank"}}]}]},{"type":"customHeading","content":[{"type":"text","text":"Great for"}],"attrs":{"level":1}},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"SaaS & product websites"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Marketing funnels"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Sales conversion flows"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Analytics dashboards"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Customer journeys"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Lead generation pages"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"E-commerce conversion data"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Product case studies"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Growth & performance sections"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Onboarding flows"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Business presentations"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Data-driven landing pages"}]}]}]},{"type":"customHeading","attrs":{"level":1}},{"type":"customHeading","content":[{"type":"text","text":"Support"}],"attrs":{"level":1}},{"type":"paragraph","content":[{"type":"text","text":"Need help customizing the component or have a question?"}]},{"type":"paragraph","content":[{"type":"text","text":"X:","marks":[{"type":"bold"}]},{"type":"text","text":" "},{"type":"text","text":"@karimsaif","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow ugc","href":"https://x.com/karimsaif0","target":"_blank"}}]},{"type":"text","text":" ","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow ugc","href":"https://x.com/karimsaif0","target":"_blank"}}]}]},{"type":"paragraph","content":[{"type":"text","text":"Email:","marks":[{"type":"bold"}]},{"type":"text","text":" "},{"type":"text","text":"karimsaif010@gmail.com","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"mailto:karimsaif010@gmail.com","target":"_blank"}}]}]}]},"introduction":"Animated funnel visualization","slug":"funnel-chart","author":{"framerUserId":"cdbd7ebc-86d4-4b64-baea-421f236c7c35","name":"Karim Saif","slug":"karim-saif","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/38316/JKMR4LgEt-1ogBJEJjcXu0BLVSwyn9DCkQ64JbBx","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/cdbd7ebc-86d4-4b64-baea-421f236c7c35/01a0ce33-4c13-73d6-a15a-386c0d6755a0.png","metadata":{"tint":{"h":180,"s":53,"l":42},"width":1187,"height":786}}],"post":null,"createdAt":"2026-09-23T12:18:31.458Z","updatedAt":"2026-09-23T12:18:31.458Z","publishedAt":"2026-09-23T12:18:31.455Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":"https://re.chujiqiqi.com/m/Funnel-Chart-B0d7l3.js@vFA6BxiJyW96ijW97FT9","previewUrl":"https://funnelchart.framer.website/","price":null,"paymentUrl":null,"workshop":false,"categories":[{"id":"51314a1b-a5bd-4ae8-acf0-bd3d5058c367","name":"Charts","slug":"charts"}],"lastSaveId":"vFA6BxiJyW96ijW97FT9","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":4,"liked":false},"comments":{"count":2},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-09-23T12:18:32.112Z","updatedAt":"2026-09-23T12:18:32.112Z"},{"id":"01a0c8cf-3857-73f8-842f-546ff03214a3","title":null,"body":"

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.

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Introducing "},{"type":"text","text":"Light Bloom,","marks":[{"type":"bold"}]},{"type":"text","text":" a new interactive WebGL background for Framer."}]},{"type":"paragraph","content":[{"type":"text","text":"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."}]},{"type":"paragraph","content":[{"type":"text","text":"It comes with:"}]},{"type":"paragraph","content":[{"type":"text","text":"• 7 color presets "}]},{"type":"paragraph","content":[{"type":"text","text":"• 7 animation presets "}]},{"type":"paragraph","content":[{"type":"text","text":"• Custom color controls "}]},{"type":"paragraph","content":[{"type":"text","text":"• Adjustable glow, density, speed, grain, and mouse sensitivity "}]},{"type":"paragraph","content":[{"type":"text","text":"• Responsive WebGL rendering "}]},{"type":"paragraph","content":[{"type":"text","text":"• Static-renderer support "}]},{"type":"paragraph","content":[{"type":"text","text":"• Performance-conscious viewport and visibility handling"}]},{"type":"paragraph","content":[{"type":"text","text":"Perfect for hero sections, portfolios, creative websites, product launches, and immersive landing pages."}]}]},"author":{"framerUserId":"cdbd7ebc-86d4-4b64-baea-421f236c7c35","name":"Karim Saif","slug":"karim-saif","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/38316/JKMR4LgEt-1ogBJEJjcXu0BLVSwyn9DCkQ64JbBx","followed":false,"followsYou":false},"media":[],"resources":[{"id":"MvOtI2rkCQ4I0SexrmMB","resolved":true,"title":"Light Bloom BG","body":"$62","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Light Bloom ","marks":[{"type":"bold"}]},{"type":"text","text":"is an interactive WebGL background that creates atmospheric beams of light rising from the bottom of the screen. Procedural noise generates organic light formations, while cursor movement adds a subtle interactive glow for a more dynamic visual effect."}]},{"type":"paragraph","content":[{"type":"text","text":"It includes ready-made color and animation presets, plus individual controls for creating your own visual style."}]},{"type":"customHeading","content":[{"type":"text","text":"Preview"}],"attrs":{"level":2}},{"type":"paragraph","content":[{"type":"text","text":"Light Bloom Background Preview","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow ugc","href":"https://lightbloombackground.framer.website","target":"_blank"}},{"type":"bold"}]}]},{"type":"customHeading","content":[{"type":"text","text":"Great For"}],"attrs":{"level":2}},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Hero sections"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Landing pages"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Portfolio websites"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Creative agency websites"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"SaaS websites"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Product launches"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Digital experiences"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Full-screen backgrounds"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Dark-mode designs"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Interactive visual sections"}]}]}]},{"type":"customHeading","content":[{"type":"text","text":"Features"}],"attrs":{"level":2}},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"WebGL-powered light bloom"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Procedural animated light rays"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Cursor-reactive lighting"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"7 color presets"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"7 animation presets"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Custom color controls"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Adjustable glow intensity"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Adjustable wave density"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Adjustable animation speed"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Film-grain control"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Mouse sensitivity control"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Responsive canvas"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"High-DPI support with capped rendering resolution"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Static-renderer support"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Automatic animation pausing when outside the viewport"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Page-visibility optimization"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"WebGL context recovery"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Lightweight fullscreen shader architecture"}]}]}]},{"type":"customHeading","content":[{"type":"text","text":"Customize"}],"attrs":{"level":2}},{"type":"paragraph","content":[{"type":"text","text":"Choose from "},{"type":"text","text":"Aurora, Violet, Ocean, Ember, Ice, Mono","marks":[{"type":"bold"}]},{"type":"text","text":", or switch to "},{"type":"text","text":"Custom","marks":[{"type":"bold"}]},{"type":"text","text":" and create your own palette."}]},{"type":"paragraph","content":[{"type":"text","text":"For animation, choose "},{"type":"text","text":"Slow, Smooth, Flow, Pulse, Cinematic, Static","marks":[{"type":"bold"}]},{"type":"text","text":", or use "},{"type":"text","text":"Custom","marks":[{"type":"bold"}]},{"type":"text","text":" for individual control."}]},{"type":"paragraph","content":[{"type":"text","text":"Custom controls include:"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Core Light","marks":[{"type":"bold"}]},{"type":"text","text":" controls the brightest part of the light."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Bloom","marks":[{"type":"bold"}]},{"type":"text","text":" controls the main atmospheric light color."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Background","marks":[{"type":"bold"}]},{"type":"text","text":" controls the base background."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Glow Intensity","marks":[{"type":"bold"}]},{"type":"text","text":" controls the overall light strength."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Wave Density","marks":[{"type":"bold"}]},{"type":"text","text":" controls the density of the light formations."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Speed","marks":[{"type":"bold"}]},{"type":"text","text":" controls animation speed."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Grain","marks":[{"type":"bold"}]},{"type":"text","text":" adds subtle texture."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Mouse Sensitivity","marks":[{"type":"bold"}]},{"type":"text","text":" controls cursor interaction."}]}]}]},{"type":"customHeading","content":[{"type":"text","text":"Support"}],"attrs":{"level":2}},{"type":"paragraph","content":[{"type":"text","text":"Need help customizing the component or using it in your Framer project?"}]},{"type":"paragraph","content":[{"type":"text","text":"X:","marks":[{"type":"bold"}]},{"type":"text","text":" "},{"type":"text","text":"@karimsaif","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow ugc","href":"https://x.com/karimsaif0","target":"_blank"}}]},{"type":"text","text":" ","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow ugc","href":"https://x.com/karimsaif0","target":"_blank"}}]}]},{"type":"paragraph","content":[{"type":"text","text":"Email:","marks":[{"type":"bold"}]},{"type":"text","text":" "},{"type":"text","text":"karimsaif010@gmail.com","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"mailto:karimsaif010@gmail.com","target":"_blank"}}]}]}]},"introduction":"WebGL background Cursor","slug":"light-bloom-bg","author":{"framerUserId":"cdbd7ebc-86d4-4b64-baea-421f236c7c35","name":"Karim Saif","slug":"karim-saif","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/38316/JKMR4LgEt-1ogBJEJjcXu0BLVSwyn9DCkQ64JbBx","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/cdbd7ebc-86d4-4b64-baea-421f236c7c35/01a0c8ce-8b64-77d1-abe3-ac3a526a63cd.png","metadata":{"tint":{"h":0,"s":0,"l":57},"width":1183,"height":771}}],"post":null,"createdAt":"2026-09-22T11:10:18.046Z","updatedAt":"2026-09-22T11:10:18.046Z","publishedAt":"2026-09-22T11:10:18.043Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":"https://re.chujiqiqi.com/m/Light-Bloom-7eC36f.js@3Xrqf3yHDadNtO1qlrV8","previewUrl":"https://lightbloombackground.framer.website/","price":null,"paymentUrl":null,"workshop":false,"categories":[{"id":"1a3a0eb3-698e-461a-bf42-2502a7ed43e0","name":"Backgrounds","slug":"backgrounds"}],"lastSaveId":"3Xrqf3yHDadNtO1qlrV8","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":4,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-09-22T11:10:18.711Z","updatedAt":"2026-09-22T11:10:18.711Z"},{"id":"01a0c404-40ca-776d-9b92-ab7b3539934a","title":null,"body":"

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.

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"I just released a new Framer component: "},{"type":"text","text":"Animated Ribbons","marks":[{"type":"bold"}]},{"type":"text","text":"."}]},{"type":"paragraph","content":[{"type":"text","text":"It turns handcrafted SVG paths into a flexible animated background that can be customized directly inside Framer."}]},{"type":"paragraph","content":[{"type":"text","text":"You can control:"}]},{"type":"paragraph","content":[{"type":"text","text":"• Ribbon colors "}]},{"type":"paragraph","content":[{"type":"text","text":"• Multi-color gradients "}]},{"type":"paragraph","content":[{"type":"text","text":"• Position, rotation, and scale"}]},{"type":"paragraph","content":[{"type":"text","text":" • Stroke width "}]},{"type":"paragraph","content":[{"type":"text","text":"• On-load animation "}]},{"type":"paragraph","content":[{"type":"text","text":"• In-view animation "}]},{"type":"paragraph","content":[{"type":"text","text":"• Scroll-driven drawing "}]},{"type":"paragraph","content":[{"type":"text","text":"• Animation timing and easing "}]},{"type":"paragraph","content":[{"type":"text","text":"• Staggering "}]},{"type":"paragraph","content":[{"type":"text","text":"• Grain texture "}]},{"type":"paragraph","content":[{"type":"text","text":"• Background color"}]},{"type":"paragraph","content":[{"type":"text","text":"The idea was simple: create a visual effect that feels expressive and premium without making the design difficult to customize."}]},{"type":"paragraph","content":[{"type":"text","text":"Great for portfolios, creative studios, hero sections, product pages, and experimental websites."}]}]},"author":{"framerUserId":"cdbd7ebc-86d4-4b64-baea-421f236c7c35","name":"Karim Saif","slug":"karim-saif","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/38316/JKMR4LgEt-1ogBJEJjcXu0BLVSwyn9DCkQ64JbBx","followed":false,"followsYou":false},"media":[],"resources":[{"id":"96hBZ6XyBcbEXGRhRYpI","resolved":true,"title":"Animated Ribbons BG","body":"$63","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Animated Ribbons","marks":[{"type":"bold"}]},{"type":"text","text":" is a lightweight decorative background component that brings flowing, hand-crafted ribbon paths to Framer websites."}]},{"type":"paragraph","content":[{"type":"text","text":"Create elegant animated line compositions with multiple preset ribbons, custom colors, gradients, positioning, rotation, scaling, and flexible animation triggers. Use it as a subtle visual layer behind hero sections, portfolios, landing pages, creative studios, product pages, and experimental websites."}]},{"type":"paragraph","content":[{"type":"text","text":"Designed to stay visually expressive while remaining simple to customize directly from the Framer property panel."}]},{"type":"customHeading","content":[{"type":"text","text":"Preview"}],"attrs":{"level":2}},{"type":"paragraph","content":[{"type":"text","text":"Live Preview:","marks":[{"type":"bold"}]},{"type":"text","text":" "},{"type":"text","text":"https://animatedribbonsbg.framer.website/","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"https://animatedribbonsbg.framer.website/","target":"_blank"}}]}]},{"type":"customHeading","content":[{"type":"text","text":"Great For"}],"attrs":{"level":2}},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Hero sections"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Portfolio websites"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Creative agencies"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Design studios"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Product landing pages"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Experimental websites"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Editorial layouts"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Fashion and art websites"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Personal portfolios"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Background decoration"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Minimalist websites"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Motion-focused designs"}]}]}]},{"type":"customHeading","content":[{"type":"text","text":"Features"}],"attrs":{"level":2}},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"6 handcrafted animated ribbon paths"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Adjustable number of visible ribbons"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Individual ribbon colors"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Multi-color gradients"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Gradient angle controls"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Position controls"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Rotation controls"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Individual ribbon scaling"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Adjustable stroke width"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Rounded or sharp line caps"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"On-load animation"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"In-view animation"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Scroll-driven drawing animation"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Scroll animation range controls"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Scroll staggering"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Reverse scroll animation"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Animation duration"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Start delay"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Animation stagger"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Multiple easing options"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Play-once option"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Configurable in-view threshold"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Optional animated grain texture"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Adjustable grain amount"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Adjustable grain size"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Custom background color"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Reduced-motion support"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Static-renderer support"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Responsive Framer layout support"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Lightweight SVG-based rendering"}]}]}]},{"type":"customHeading","attrs":{"level":2}},{"type":"customHeading","content":[{"type":"text","text":"Support"}],"attrs":{"level":2}},{"type":"paragraph","content":[{"type":"text","text":"Need help customizing the component or integrating it into your Framer project?"}]},{"type":"paragraph","content":[{"type":"text","text":"X:","marks":[{"type":"bold"}]},{"type":"text","text":" "},{"type":"text","text":"https://x.com/karimsaif0","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"https://x.com/karimsaif0","target":"_blank"}}]},{"type":"text","text":" "}]},{"type":"paragraph","content":[{"type":"text","text":"Email:","marks":[{"type":"bold"}]},{"type":"text","text":" "},{"type":"text","text":"karimsaif010@gmail.com","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"mailto:karimsaif010@gmail.com","target":"_blank"}}]}]},{"type":"paragraph","content":[{"type":"text","text":"I’m happy to help with setup, customization, and troubleshooting."}]}]},"introduction":"lightweight decorative background","slug":"animated-ribbons-bg","author":{"framerUserId":"cdbd7ebc-86d4-4b64-baea-421f236c7c35","name":"Karim Saif","slug":"karim-saif","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/38316/JKMR4LgEt-1ogBJEJjcXu0BLVSwyn9DCkQ64JbBx","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/cdbd7ebc-86d4-4b64-baea-421f236c7c35/01a0c403-a35f-7162-a166-812416c6c555.png","metadata":{"tint":{"h":240,"s":53,"l":70},"width":1187,"height":782}}],"post":null,"createdAt":"2026-09-21T12:50:07.517Z","updatedAt":"2026-09-21T12:50:07.517Z","publishedAt":"2026-09-21T12:50:07.514Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":"https://re.chujiqiqi.com/m/AnimatedRibbons-N2bf1Z.js@fwl31M0qV83ltvWS3lPH","previewUrl":"https://animatedribbonsbg.framer.website/","price":null,"paymentUrl":null,"workshop":false,"categories":[{"id":"1a3a0eb3-698e-461a-bf42-2502a7ed43e0","name":"Backgrounds","slug":"backgrounds"}],"lastSaveId":"fwl31M0qV83ltvWS3lPH","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":9,"liked":false},"comments":{"count":2},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-09-21T12:50:08.202Z","updatedAt":"2026-09-21T12:50:08.202Z"},{"id":"01a0bea6-5471-70fa-b822-27b25f17e004","title":null,"body":"

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.

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"What if your Framer background behaved like liquid metal?"}]},{"type":"paragraph","content":[{"type":"text","text":"I built "},{"type":"text","text":"Ferrofluid Background","marks":[{"type":"bold"}]},{"type":"text","text":", a procedural WebGL component that creates a magnetic ferrofluid surface with:"}]},{"type":"paragraph","content":[{"type":"emoji","attrs":{"name":"magnet","emoji":"🧲"}},{"type":"text","text":" Dynamic magnetic spikes "}]},{"type":"paragraph","content":[{"type":"text","text":"🖱 Cursor interaction "}]},{"type":"paragraph","content":[{"type":"text","text":"✨ Metallic reflections "}]},{"type":"paragraph","content":[{"type":"emoji","attrs":{"name":"ocean","emoji":"🌊"}},{"type":"text","text":" Fluid motion "}]},{"type":"paragraph","content":[{"type":"emoji","attrs":{"name":"art","emoji":"🎨"}},{"type":"text","text":" Multiple visual presets "}]},{"type":"paragraph","content":[{"type":"text","text":"⚡ Performance-conscious rendering "}]},{"type":"paragraph","content":[{"type":"emoji","attrs":{"name":"iphone","emoji":"📱"}},{"type":"text","text":" Responsive WebGL rendering"}]},{"type":"paragraph","content":[{"type":"text","text":"Designed to work directly inside Framer with everything exposed through Property Controls."}]}]},"author":{"framerUserId":"cdbd7ebc-86d4-4b64-baea-421f236c7c35","name":"Karim Saif","slug":"karim-saif","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/38316/JKMR4LgEt-1ogBJEJjcXu0BLVSwyn9DCkQ64JbBx","followed":false,"followsYou":false},"media":[],"resources":[{"id":"30EQ4VDpHMsRPX0pRLRw","resolved":true,"title":"Ferrofluid BG","body":"$64","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"A cinematic, interactive WebGL ferrofluid effect for Framer."}]},{"type":"paragraph","content":[{"type":"text","text":"Ferrofluid Background transforms your website into a living metallic surface inspired by ferrofluid — sharp magnetic spikes, liquid-like motion, glossy reflections, and dynamic cursor interaction combine to create a futuristic visual backdrop."}]},{"type":"paragraph","content":[{"type":"text","text":"Built with WebGL and GLSL, it renders the effect directly on the GPU without external assets or video files. Use it as a full-screen background, hero visual, or atmospheric layer behind your typography and UI."}]},{"type":"customHeading","content":[{"type":"text","text":"Preview"}],"attrs":{"level":2}},{"type":"paragraph","content":[{"type":"text","text":"https://ferrofluidbackground.framer.website/","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"https://ferrofluidbackground.framer.website/","target":"_blank"}}]}]},{"type":"customHeading","content":[{"type":"text","text":"Great For"}],"attrs":{"level":1}},{"type":"paragraph","content":[{"type":"text","text":"Ferrofluid Background works especially well for:"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"emoji","attrs":{"name":"rocket","emoji":"🚀"}},{"type":"text","text":" SaaS and technology websites"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"emoji","attrs":{"name":"robot","emoji":"🤖"}},{"type":"text","text":" AI and futuristic landing pages"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"emoji","attrs":{"name":"art","emoji":"🎨"}},{"type":"text","text":" Creative portfolios"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"emoji","attrs":{"name":"artist","emoji":"🧑‍🎨"}},{"type":"text","text":" Designer and developer portfolios"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"emoji","attrs":{"name":"gem","emoji":"💎"}},{"type":"text","text":" Premium product websites"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"🖥 Hero sections"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"emoji","attrs":{"name":"milky_way","emoji":"🌌"}},{"type":"text","text":" Dark-mode websites"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"emoji","attrs":{"name":"test_tube","emoji":"🧪"}},{"type":"text","text":" Experimental and generative websites"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"🎮 Gaming and interactive experiences"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"🖼 Full-screen visual backgrounds"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"emoji","attrs":{"name":"mirror_ball","emoji":"🪩"}},{"type":"text","text":" Creative agency websites"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"✨ Art-directed landing pages"}]}]}]},{"type":"customHeading","attrs":{"level":1}},{"type":"paragraph","content":[{"type":"text","text":"Insert → Customize → Publish.","marks":[{"type":"bold"}]}]},{"type":"customHeading","content":[{"type":"text","text":"Support"}],"attrs":{"level":1}},{"type":"paragraph","content":[{"type":"text","text":"Need help using Ferrofluid Background, found a bug, or have an idea for an improvement?"}]},{"type":"paragraph","content":[{"type":"text","text":"Feel free to reach out."}]},{"type":"paragraph","content":[{"type":"text","text":"Email:","marks":[{"type":"bold"}]},{"type":"text","text":" "},{"type":"text","text":"karimsaif010@gmail.com","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"mailto:karimsaif010@gmail.com","target":"_blank"}}]},{"type":"text","text":" "}]},{"type":"paragraph","content":[{"type":"text","text":"X:","marks":[{"type":"bold"}]},{"type":"text","text":" @karimsaif0"}]},{"type":"paragraph","content":[{"type":"text","text":"I'm always happy to help with questions, feedback, and feature requests."}]}]},"introduction":"living metallic surface","slug":"ferrofluid-bg","author":{"framerUserId":"cdbd7ebc-86d4-4b64-baea-421f236c7c35","name":"Karim Saif","slug":"karim-saif","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/38316/JKMR4LgEt-1ogBJEJjcXu0BLVSwyn9DCkQ64JbBx","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/cdbd7ebc-86d4-4b64-baea-421f236c7c35/01a0bea5-c3d0-70b4-b479-7aebc47b8311.png","metadata":{"tint":{"h":0,"s":0,"l":9},"width":1171,"height":786}}],"post":null,"createdAt":"2026-09-20T11:49:26.052Z","updatedAt":"2026-09-20T11:49:26.052Z","publishedAt":"2026-09-20T11:49:26.050Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://ferrofluidbackground.framer.website/","price":"6","paymentUrl":"https://karimsaif.lemonsqueezy.com/checkout/buy/2dd23b51-cf0c-407f-bb93-4083929ed8e2","workshop":false,"categories":[{"id":"1a3a0eb3-698e-461a-bf42-2502a7ed43e0","name":"Backgrounds","slug":"backgrounds"}],"lastSaveId":"1FaCAPuKItwqAsBCHi6i","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":9,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-09-20T11:49:26.770Z","updatedAt":"2026-09-20T11:49:26.770Z"}],"pagination":{"next":"MDFhMGJlYTYtNTQ3MS03MGZhLWI4MjItMjdiMjVmMTdlMDA0","previous":null},"totalCount":"$undefined","feedSession":"$undefined"}]}},"children":"$L65"}]