Karim Saif

I turned a simple button into a magnetic liquid-metal interaction. 🧲

Introducing Ferrofluid Spike Button, my latest interactive component for Framer.

Inspired by how ferrofluid reacts to magnetic fields, I wanted to explore how a familiar UI element could feel more physical, expressive, and alive.

The result is a glossy liquid-metal button that responds to cursor movement by growing and bending organic spikes.

What's inside?

✦ Cursor-reactive magnetic spikes

✦ Four customizable spike styles

✦ Spring-based motion and damping

✦ Metallic reflections and animated droplets

✦ Custom cursor and autoplay controls

✦ Framer property controls for easy customization

✦ Reduced-motion and static-rendering support

Designed for creative portfolios, futuristic landing pages, experimental interfaces, and standout calls to action.

It's a small UI element, but an opportunity to make an interaction feel memorable.

Built with 💛 by @Karim Saif

What do you think, would you use a ferrofluid button in a real project?

#Framer #UIDesign #UXDesign #InteractionDesign #CreativeCoding #WebDesign

I wanted to make a button that feels alive. So I built one. 🧪

Introducing Venom Button, an experimental interactive component for Framer.

Instead of a traditional hover animation, the button reacts like a living liquid surface.

Move your cursor and watch elastic tendrils stretch, connect, and break apart. Glossy highlights, fluid physics, and organic motion turn a simple call-to-action into an interactive experience.

What's inside?

✦ WebGL-powered liquid rendering

✦ Elastic tendrils and fluid connections

✦ Interactive cursor effects

✦ Customizable colors, typography, and motion

✦ Autoplay and reduced-motion support

✦ Native Framer property controls

Built for designers who want to add something unexpected to their websites.

Perfect for creative portfolios, experimental landing pages, and interactive hero sections.

💛 Made with Framer by @Karim Saif

Would you use this as a CTA or as a hero interaction?

#Framer #WebGL #CreativeCoding #InteractionDesign #UIDesign #MotionDesign

A background shouldn't just sit there. It should react. 🌀

Just built Vector Field Background, a new interactive component for Framer.

The idea is simple: turn a static grid of lines into a living, flowing system.

Each stroke follows an evolving vector field. Move your cursor, and the lines bend into a smooth vortex around it.

What's inside:

↗️ Organic, continuously flowing vector animations

🌀 Interactive cursor vortex with adjustable strength

🎛️ 12 customizable Framer controls

🎨 Full control over colors, spacing, and stroke styles

⚡ Adaptive rendering and offscreen animation pausing

♿ Reduced-motion accessibility support

📱 Responsive across screen sizes

Built with Canvas 2D, designed for creative portfolios, SaaS landing pages, experimental websites, and interactive hero sections.

The goal was to create something visually expressive while keeping it practical for real websites.

Would you use this as a hero background or across an entire page?

Made with 💛 by @Karim Saif

What if your @Framer

hero could literally catch fire?

Built a GPU-powered WebGL fire background with procedural flames, sparks, mouse interaction, and customizable intensity.

Made for landing pages, portfolios, and experimental sites.

This one gets HOT.

Made with 💛 by @Karim Saif

What if a background could turn currency symbols into an interactive landscape? 💸

Introducing Currency Sky Background, my latest Framer component.

Instead of using traditional particles or gradients, I wanted to explore something different: a procedural terrain built entirely from currency glyphs.

The result is a flowing, topographic visual that responds to cursor movement and brings an expressive layer of interaction to any website.

What's inside:

✦ Animated currency-based terrain

✦ Interactive cursor distortion with adjustable radius and strength

✦ Multiple glyph presets, including $, €, £, ¥, and ₿

✦ Custom colors, typography, terrain density, and contour settings

✦ Responsive Canvas 2D rendering with performance controls

✦ Reduced-motion and static-rendering support

Perfect for fintech products, crypto platforms, SaaS landing pages, creative portfolios, and experimental hero sections.

Built with Framer. Designed for creative freedom.

Would you use this as a hero background or across an entire landing page?

Gooey text transitions for Framer

I just released Gooey Text, smooth liquid-like text transformations with:

→ Morph

→ Slide X

→ Slide Y

→ Hover interactions

→ Loop animation

→ Custom fonts + typography

→ Adjustable goo strength

Drop it into your next Framer project and make your typography feel alive.

0$ Free

A simple quarter-circle. Endless possibilities. 🌀

I've been exploring how basic geometric shapes can turn into expressive, interactive experiences.

My latest Framer component is Truchet Weave Background — an animated geometric system where quarter-circle tiles rotate, reconnect, and form continuously evolving patterns.

What makes it interesting?

✦ Five unique wave presets

✦ Interactive cursor-driven rotations

✦ Customizable colors, tile size, and stroke width

✦ Adjustable animation speed and cursor behavior

✦ Responsive Canvas rendering

✦ Reduced-motion and performance-conscious design

The idea was to create something that feels like generative art but is practical enough to use in real websites.

Perfect for creative portfolios, agency websites, experimental landing pages, and interactive hero sections.

Built for Framer. Made with 💛 by @Karim Saif

Would you use something like this in a website?

#Framer #CreativeCoding #InteractionDesign #WebDesign #GenerativeArt

A website background doesn't have to be static.

I just created Glyph Blocks Background, an interactive animated grid component for Framer.

The idea was simple: turn a background into an experience.

Instead of a traditional static pattern, the component creates an evolving grid of geometric glyphs, drifting formations, and jumping blocks.

The interesting part? The grid responds to your cursor.

Move your pointer and nearby glyphs are attracted toward it, then smoothly spring back into place.

What's inside:

✳️ Procedural geometric glyph animations

🧲 Interactive cursor attraction

◼️ Dynamic jumping blocks

🎨 Five color presets + custom colors

🎛️ 14 customizable Framer controls

⚡ Responsive rendering and reduced-motion support

Built for creative portfolios, technology websites, experimental landing pages, and anyone looking to add personality to their designs.

Made with 💛 by @Karim Saif

What do you think of this interaction?

#Framer #UIDesign #CreativeCoding #WebDesign #InteractionDesign #ProductDesign

✨ Turning a simple grid into an interactive experience.

Introducing Sparkle Grid Background, my latest animated component for Framer.

The idea was simple: What if a grid felt alive?

Tiny dots emerge, grow into circles, and transform into four-point sparkles. As you move your cursor, nearby cells respond with beautiful bursts of light.

What makes it special?

✦ Organic, continuously drifting sparkle clusters

✦ Smooth dot-to-circle-to-sparkle transitions

✦ Interactive cursor effects

✦ Five ready-to-use color presets

✦ Fully customizable through Framer

✦ Responsive and performance-conscious rendering

✦ Reduced-motion support

Perfect for creative portfolios, AI products, SaaS landing pages, and interactive hero sections.

Built with React, Canvas 2D, and Framer.

Made with 💛 by @Karim Saif

#Framer #FramerComponents #InteractionDesign #CreativeCoding #WebDesign #UIDesign

Hundreds of arrows. One letter at a time. ↗️

I just built a new interactive Framer component called Arrow Letter Background.

The idea was simple: What if typography could emerge from a field of directional arrows?

Instead of displaying static letters, the component uses a grid of arrows that gradually transforms into pixel-style characters through diagonal sweep animations.

Move your cursor across the grid, and the arrows react to your movement.

✨ What's inside:

Animated typography using a 5×7 pixel font

Smooth directional transitions

Interactive cursor-responsive arrows

Custom colors, grid density, and animation speed

Responsive layout and Framer property controls

Reduced-motion and static-rendering support

Built with React, TypeScript, and Canvas 2D.

Another exploration of how small interactions can turn a simple background into something memorable.

Would you use this in a hero section or as a full-page background?

#Framer #UIDesign #CreativeCoding #MotionDesign #WebDesign

What if your website background reacted to every move of your cursor? 🌀

I just built Op Art Stripes, a new interactive background component for Framer.

Inspired by optical art, this component transforms simple vertical stripes into a flowing, immersive visual experience.

Move your cursor across the background, and the stripes bend, stretch, and magnify around it.

✨ What makes it special?

→ Hypnotic wave animations

→ Interactive cursor magnification

→ 5 ready-to-use color presets

→ Fully customizable motion and distortion

→ Responsive and performance-conscious

→ Reduced-motion and static-rendering support

Perfect for creative portfolios, experimental landing pages, digital agencies, and bold brand experiences.

My goal was to create something visually striking without sacrificing usability or performance.

Built with 💛 by @Karim Saif .

What do you think of this interaction? Would you use it in a website?

#Framer #InteractionDesign #CreativeCoding #WebDesign #UIDesign

🌍 What if a world map could feel alive?

I built Pixel World Map, a new animated component for Framer that transforms a stylized world map into a glowing visualization of global activity.

Instead of a static map, individual pixels light up, subtle square ripples expand, and the map moves smoothly across geographic regions.

✨ What’s inside:

🌎 9 geographic views, including a custom area

📍 City presets and custom coordinates

✨ Animated activity pings and expanding ripples

🎨 4 color presets with full customization

⚡ Adjustable scrolling, zoom, and animation speed

🖥️ Responsive Canvas rendering with reduced-motion support

Designed for SaaS landing pages, AI products, global connectivity websites, technology dashboards, and creative portfolios.

Everything can be customized directly inside Framer.

Made with 💛 by @Karim Saif .

#Framer #FramerComponents #WebDesign #CreativeCoding #UIDesign #InteractionDesign

What if a simple cursor interaction could turn into an entire interactive experience? 🌀

Introducing Multiplayer Orbit, my latest interactive component built for Framer.

The idea was simple: take a collection of colorful cursors, arrange them into a 3D-inspired sphere, and make the entire experience respond naturally to human interaction.

Here's what makes it interesting:

🌀 3D-Inspired Orbit — Cursors rotate together in a spherical formation.

🧲 Magnetic Interaction — Move your pointer and watch nearby cursors react with spring-based physics.

👆 Drag & Momentum — Grab the orbit, spin it, and let it settle naturally.

✨ Depth & Motion — Depth-of-field blur, breathing rings, and smooth rotational movement.

🎨 Fully Customizable — Adjust colors, cursor names, size, animation speed, and interaction behavior directly inside Framer.

The component is designed for creative agencies, startup landing pages, communities, and anyone who wants to make their website feel more interactive.

My favorite part is how something as familiar as a cursor can become the centerpiece of an entire visual experience.

Made with 💛 by @Karim Saif .

What do you think of this interaction?

#Framer #ProductDesign #InteractionDesign #CreativeCoding #WebDesign

What if moving your cursor could turn a website into an interactive gallery? 👀

I built Image Trail Effects, a new interactive component for Framer.

Instead of a traditional image hover interaction, this component creates animated image trails that respond to cursor movement.

It includes 6 different reveal effects:

🔥 Flame — Rotating image reveals

🪟 Venetian — Animated horizontal strips

🎭 Curtain — Sliding vertical reveals

⬡ Hexagon — Geometric image transitions

💧 Liquid — Organic circular reveals

✨ Zoom Split — Fragmented grid animations

What you can customize:

→ Your own image collection

→ Image size and cursor sensitivity

→ Animation speed, timing, and stagger

→ Background colors and corner radius

→ Image limits for performance

Built with reduced-motion support, static previews, and Framer property controls.

Perfect for creative portfolios, photography websites, agencies, and interactive landing pages.

I'd love to know: Which of the six effects is your favorite?

Made with 💛 by @Karim Saif

#Framer #ProductDesign #InteractionDesign #WebDesign #CreativeCoding

What if your cursor had its own gravitational field? 🌀

I built Cursor Vortex, a new interactive particle component for Framer that turns simple cursor movement into a miniature black-hole experience.

Particles orbit, swirl, and react to your movement in real time.

But the interesting part?

Press and hold to charge the vortex. Release to send particles flying.

✨ What makes it special:

→ Interactive gravitational particle physics

→ Customizable attraction, swirl, and turbulence

→ Four particle styles: Glyphs, Pixels, Dots, and Mixed

→ Six color options, including fully custom colors

→ Glowing black-hole core and dynamic trails

→ Idle animations and reduced-motion support

→ Customizable directly inside Framer

Designed for creative portfolios, futuristic landing pages, and interactive digital experiences.

Built with 💛 by @Karim Saif .

Would you use this interaction on your next Framer project?

#Framer #InteractionDesign #CreativeCoding #WebDesign #UIDesign

What if your images could actually respond to the way people move? 👀

I built Bend Image, an interactive WebGL-powered component for Framer that makes static visuals feel alive.

Instead of simply hovering over an image, visitors can move it, bend it, and experience a smooth elastic response driven by cursor velocity.

What makes it interesting?

✦ Real-time WebGL image deformation

✦ Smooth cursor-following interactions

✦ Velocity-based bending and elastic recovery

✦ Adjustable motion, strength, and responsiveness

✦ Responsive sizing and performance-conscious rendering

✦ Fully customizable through Framer's properties panel

Designed for portfolios, creative agencies, photography galleries, and landing pages that want to stand out.

The goal was simple: make an ordinary image feel like something you can interact with.

Built with 💛 by @Karim Saif .

What do you think of this interaction?

I turned a procedural WebGL sky into a customizable Framer component. ☁️

Cloud Sky generates layered cloud formations in real time, with atmospheric sunlight, cirrus detail, smooth wind movement, and pointer-driven parallax.

The interesting part is that it isn't a looping video or a collection of cloud images, the atmosphere is generated directly by the shader.

I also built it with real-world Framer usage in mind: responsive rendering, static-renderer support, reduced motion, off-screen pausing, adaptive rendering performance, and controls for customizing the entire atmosphere without touching code.

A small experiment in making websites feel a little less static. 🌤️

I just built a new interactive component for Framer: Checker Blocks.

It turns a simple two-color grid into a constantly evolving composition of solid blocks, rings, dots, and checkerboards.

The grid changes rhythmically through crisp glitch transitions, while moving the cursor across it causes individual blocks to transform.

It includes 5 ready-made presets, custom colors, adjustable grid density, animation controls, pointer interaction, seeded compositions, responsive Canvas rendering, reduced-motion support, and a fully customizable mode.

A small experiment inspired by poster design, geometric systems, and interactive web graphics.

Your website is printing wrong.

On purpose.

Introducing Misprint Background for Framer, an interactive procedural effect inspired by misregistered ink, risograph printing, halftone dithering, and imperfect color separation.

Move your cursor and watch the ink layers slip apart.

Built with presets, full color customization, responsive rendering, and Framer-ready performance.

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 .