Karim Saif

I built Thread Marquee for Framer, a procedural typography component that reconstructs text using hundreds of tiny thread segments.

It comes with:

→ Infinite marquee motion

→ Framer Font picker

→ Organic wave + distortion

→ Text-only hover physics

→ Adjustable thread density & length

→ Glow + custom colors

→ Low / Medium / High quality

→ Reduced-motion support

→ Viewport-aware performance

The interesting part: the hover interaction only reacts to the actual text, not the entire component.

Built for designers who want typography to feel more physical, tactile, and alive.

What if a background could feel like fabric?

I built Thread Mode, a procedural woven textile background for Framer where hundreds of threads subtly breathe, bend, and react to your cursor.

No video. No image texture. No Three.js. No external dependencies.

Just Canvas 2D + procedural motion.

It includes:

🧵 Organic woven thread movement

🖱 Interactive cursor deformation

✨ Original, Linen, Silk & other presets

🎛 Fully customizable density, thickness, brightness & distortion

⚡ Responsive rendering + quality controls

♿ Reduced-motion support

📐 Built for Framer's responsive layouts

I wanted to create something that feels physical and tactile, rather than another generic animated background.

Try it here:

https://threadmodeshaderbackground.framer.website/

What if your website had its own gravitational field? 🌀

I just built Gravity Field Shader — an interactive WebGL background for Framer where the entire space reacts to your movement.

🌀 Curved gravitational field lines

✨ Flowing procedural particles

🖱 Cursor-based attraction

🕳 Click-triggered black-hole distortion

🎯 Up to 3 gravitational attractors

🎨 7 color presets + custom gradients

⚡ Adjustable quality & performance controls

Instead of using a static gradient or image as a background, I wanted to create something that actually responds to the visitor.

Move your cursor → bend the field. Click → create a gravitational pulse. Change the settings → completely change the atmosphere.

Built with React + WebGL2 for Framer.

🔗 Live preview: https://gravityfieldshaderbg.framer.website/

What if glass could actually feel alive? 🫧

I just built Liquid Glass, a procedural WebGL component for Framer that turns a simple section into a living glass surface.

No images. No external textures. No external dependencies.

Just real-time WebGL creating:

→ Dynamic refraction

→ Liquid distortion

→ Cursor lens interaction

→ Ripple effects

→ Moving light

→ Blur & diffusion

→ Chromatic aberration

→ Multiple color presets

The goal was simple: create a glass effect that doesn't just look like glass , but behaves like a living material.

Built for Framer designers who want to push beyond static gradients and bring more depth and interaction into their websites.

What if a topographic map could feel alive? 🗺

I just built Living Prizma a procedural WebGL terrain effect for Framer.

The contour lines continuously morph, the cursor creates a gravity well, and every click sends a wave through the terrain.

No images. No textures. Just WebGL, procedural noise, and interaction.

Built for designers who want to push Framer beyond static layouts and create websites that actually respond to the user.

🎨 Multiple color presets

🖱 Cursor interaction

💥 Click waves

🌊 Animated terrain

⚡ Performance controls

📱 Responsive WebGL rendering

Not a 3D model.

Not a video.

Not a particle system.

Just a shader creating digital fabric in real time. 🧵✨

Customization

Everything is controlled directly from Framer's property panel.

Motion

Speed — Control the movement speed

Zoom — Adjust the scale of the fabric

Animate — Enable or disable continuous animation

Fabric

Tension — Control how tightly the surface bends

Folds — Adjust wrinkles and fabric deformation

Warp — Add organic procedural distortion

Lighting

Gloss — Control the intensity of glossy highlights

Intensity — Adjust the overall brightness

Interaction

Choose between:

None

Cursor

Ripple

Cursor + Ripple

You can also control:

Cursor Force

Ripple Radius

Ripple Strength

Colors

Start with one of the built-in palettes:

Aurora

Ocean

Violet

Ember

Cyber

Mono

Or select Custom and define your own:

Color A

Color B

Color C

Background

Performance

Choose between:

Low

Medium

High

The component also includes responsive rendering, device-pixel-ratio protection, viewport-aware rendering, resize handling, WebGL context recovery, and a static renderer fallback.

I built a WebGL background for Framer that actually reacts to you. 👀

I wanted something more than another static gradient.

So I built Gradient Karim Background — an interactive WebGL component for Framer with:

✨ 6 curated color presets

🖱 Cursor-follow interaction

💫 Click ripples

🌊 Organic animated distortion

🎛 Full Framer controls

📱 Responsive rendering

♿ Reduced-motion support

⚡ Viewport-aware WebGL rendering

You can drop it into a Framer project, customize it from the property panel, and instantly give your hero section a more immersive feel.

Try it here: Gradient Karim Background

I built this as part of my exploration of design + code + creative WebGL.

Would you use something like this in your next Framer project?

What if a button didn’t have to look… like a button? 👀

I just built a new Cutout Button component for Framer featuring dynamic edge-burst cutouts, staggered hover animations, subtle scale interaction, and reduced-motion support.

Instead of relying on a simple hover color change, the button physically reacts to interaction.

You can customize the colors, cutout sizes, number of cutouts, animation timing, typography, spacing, and more directly inside Framer.

Perfect for designers who want their CTAs to feel a little more alive. ⚡

Built with React + Framer.

Your CTA buttons shouldn't just sit there.

I built a Wiggle + Magnetic Button for Framer that makes your CTAs feel alive.

🧲 Magnetic cursor interaction

〰 Smooth wiggle animation

⚡ GSAP-powered motion

🎛 3 interaction modes

♿ Reduced-motion support

⌨ Accessibility-friendly controls

🎨 Fully customizable from Framer

Choose Magnetic, Wiggle, or combine both for a more playful interaction.

I also made a live preview so you can see it in action 👇

🔗 https://wigglemagneticbutton.framer.website/

Built for designers who want to add more personality without adding more code.

Your CTA button doesn't have to be boring. 👾

I just built a new Pixel CTA Button for Framer, a retro-inspired interactive button with 6 different pixel hover effects.

⚡ Pixel Burst

〰 Pixel Wave

💫 Pixel Pulse

👾 Pixel Chase

✨ Pixel Blink

🎲 Random Jitter

And it's not just about looking cool.

I built it with a performance-first approach using direct DOM animation + requestAnimationFrame, deterministic rendering, keyboard focus support, and prefers-reduced-motion handling.

Everything is customizable directly from Framer — colors, animation style, intensity, label, links, and more.

Sometimes, one small interaction is enough to make a website feel completely different.

Would you use this on your next Framer project?

I just built a fire effect that runs entirely on the GPU 🔥

I created Fire Background WebGL, a Framer Code Component built with WebGL shaders , no external animation library required.

You can control the:

🔥 Fire intensity

📏 Height & width

✨ Sparks

⚡ Animation speed

🖱 Mouse interaction

🎨 Background

But the part I'm most proud of isn't just the visual.

I designed it to be viewport-aware, so the animation pauses when the component isn't visible, reducing unnecessary rendering on longer Framer pages.

Built for designers who want high-impact visuals without sacrificing control or performance.

Would you use something like this on your next Framer site?

WebGL lights that feel alive. ✨

I just built Jello Lights for Framer — a fluid, interactive shader with customizable color, glow, intensity, zoom, animation, and mouse interaction.

Built for those hero sections that need a little more ✨

Customize

Make the effect fit your brand and design system directly from the Framer properties panel.

Adjust:

Animation

Animate

Speed

Visuals

Pattern

Color Shift

Intensity

Glow

Zoom

Background

Interaction

Interactive

Mouse Influence

Performance

Rendering Quality

Accessibility

ARIA Label

No shader editing is required — customize the experience visually inside Framer.

Performance

Jello Lights is built with performance in mind. Rendering is GPU-accelerated through WebGL2, automatically pauses when the component leaves the viewport, and provides quality controls so you can balance visual fidelity and performance.

For the best experience, use the High quality setting on modern devices and reduce the quality when using multiple WebGL components on the same page.

Your Framer background doesn't have to be static. 🌊

Meet Reflective Fabric Tiles Shaders, animated WebGL visuals with presets, custom colors, distortion, mouse interaction, blend modes & performance controls.

Built for Framer. Made for beautiful websites.

Just made a new Framer component for turning boring headlines into something a little more alive.

✨ Looping Words

Smooth GSAP transitions

🎯 Dynamic word selector

🌫 Soft fade effect

⚡ Performance-friendly looping

🎨 Fully customizable in Framer

Perfect for hero sections, portfolios, SaaS, and creative websites.

What would you use it for?

I built a Streaming Text component for Framer ✨

Character-by-character text animation with:

→ Adjustable streaming speed

→ Skip & Replay

→ Loop mode

→ Animated cursor

→ Reduced-motion support

→ Static renderer support

→ Full typography customization

Perfect for AI interfaces, SaaS products, dashboards, and landing pages.

Turn ordinary text into a character-by-character interaction.

✨ 6 animation styles

⚡ 3 stagger directions

🎨 Custom colors & typography

🌀 Blur + Zoom effects ⌨ Keyboard focus support

♿ Accessibility-aware 🎛 Fully customizable Property Controls

Built for buttons, navigation, hero sections, portfolios, and modern landing pages.

Turn any image into an interactive oil painting in Framer.

Meet Oil Paint Canvas a WebGL-powered component with realistic canvas texture, brush bristles, paint relief, grain, gloss, halftone, and interactive cursor painting.

Drop it in.

Customize it.

Make your visuals feel alive.

What happens when you turn a normal image into living ASCII? 👀

I built Asciify — an interactive WebGL component for Framer that transforms images and layers into responsive ASCII visuals.

🖼 Image + Component modes 🔤 ASCII / Blocks / Binary 🖱 Interactive cursor lens ✨ Glow + chromatic aberration ⚡ WebGL2 rendering 🎛 Fully customizable

Grab it Now

What if you could pick up a moment from a website?

I built Interactive Collectible Stamp for Framer — a physical-feeling image interaction with 3 modes:

🧩 Collect

📸 Capture

✂ Split

Move it. Click it. Capture it. Collect it.

No more boring static images.

Three Interaction Types

01 — Collectible

The original stamp follows the cursor with spring-based movement and subtle rotation. Clicking creates a duplicate of the current visual crop and sends it toward a collection tray.

The collected stamps remain visible as a growing archive, with configurable maximum items, tray position, spacing, size, offsets, flight duration, rotation variation, and shadow. The collection can either stop when full or replace the oldest item.

This mode works especially well for:

Memory walls

Travel experiences

Photography portfolios

Interactive galleries

Storytelling

Personal websites

Collect-and-explore experiences

02 — Moment Capture

Moment Capture turns the stamp into a visual camera.

When clicked, the component freezes the image crop beneath the stamp and moves the stamp toward the center of the composition. A background cutout can appear in the original location, while an optional background fade adds additional focus to the captured moment.

The animation can be customized with:

Travel duration

Center rotation

Center scale

Center shadow

Cutout color

Background fade

Reset-on-leave behavior

These controls are exposed specifically for Moment Capture in Framer.

03 — Split Capture

Split Capture creates a more cinematic interaction.

When activated, the background is divided at the stamp's current position. The component determines which side should disappear and moves the captured stamp toward the center while maintaining the original image crop.

You can choose whether the hidden side is determined automatically, opposite to the stamp position, or explicitly set to the left or right.

Pixel Skyline Footer

Turn your website footer into an interactive pixel-art experience with Pixel Skyline Footer , a playful Tetris-inspired footer where falling blocks interact with a procedural pixel skyline.

Features

🎮 Interactive Tetris Gameplay — Control falling tetromino pieces directly inside your footer.

🏙 Procedural Pixel Skyline — A dynamic skyline is generated across the entire footer.

🧱 Skyline Collision Physics — Make the skyline behave as a physical obstacle for falling pieces.

🧩 7 Tetromino Shapes — Includes O, I, L, J, S, Z, and T pieces with multiple rotation states.

🔄 Piece Rotation — Rotate pieces with keyboard controls or the on-screen button.

⬅ Movement Controls — Move pieces left and right with keyboard or touch-friendly controls.

⬇ Quick Drop — Use the down arrow or spacebar to instantly advance the piece.

🏆 Score System — Earn points as pieces settle and receive bonus points for completed rows.

✨ Line Clearing — Completed player rows can be cleared automatically.

🎨 Customizable Colors — Adjust the background, skyline, controls, and icon/text colors.

⚙ Adjustable Grid — Control the number of columns and rows to change the pixel density.

⏱ Adjustable Fall Speed — Fine-tune gameplay from slow and relaxed to fast-paced.

🎛 Custom Controls — Toggle the visual control dock on or off.

⌨ Keyboard Support — Arrow keys, spacebar, and Escape provide intuitive desktop controls.

📱 Responsive Layout — Controls adapt for smaller screen sizes.

♿ Accessibility Support — Includes ARIA labels, focus states, button labels, and live score updates.

⚡ RequestAnimationFrame Game Loop — Uses an efficient animation loop with proper cleanup.

🧊 Framer Static Renderer Safe — Interactive gameplay is disabled during static rendering.

🏗 Separated Skyline & Game Layers — The visual skyline and game physics remain independent for reliable gameplay.

🔧 Framer Property Controls — Customize the component directly from the Framer properties panel.

Grab it now