Karim Saif

Your CTA button just got a pixel upgrade.

Meet Pixel CTA Button, a retro-inspired @framer component with a dynamic pixel perimeter that comes alive on hover.

6 interactive presets.

5 customizable accent colors.

Smooth, performance-focused animations.

Random Jitter. Pixel Burst. Pixel Wave. Pixel Chase. And more.

Make your CTAs feel less static.

Make them impossible to ignore.

Grab it

Trying in @Framer

Inspired by @ Apple iPhone Duo concept experimenting with the interaction, motion, and that seamless split-screen feel.

Just testing ideas. More soon.

Created by @Karim Saif

Most image carousels feel predictable.

So I built one that treats images like a 3D object.

Introducing DNA Carousel for Framer 🧬

Instead of simply sliding images from left to right, each image travels along an opposing DNA-inspired helix.

You can customize:

• 3D depth

• Perspective

• Curve & helix spread

• Rotation & tilt

• Blur & RGB split

• Inertia & snapping

• Autoplay

• Shadows

• Image radius

• Drag interaction

It's designed for creative portfolios, photography, fashion, agencies, editorial websites, and experimental landing pages.

Preview → https://dnacarousel.framer.website/

I wanted to make typography feel less static.

So I built Disco Shadow 🪩, an interactive RGB typography effect for Framer.

The idea is simple:

Move your cursor and the RGB channels separate based on your movement velocity.

🔴 Red moves against the direction 🟢 Green shifts perpendicular 🔵 Blue follows the movement

Then everything smoothly settles back when you stop.

The component includes:

• Native Framer Font controls

• Custom RGB colors

• Cursor velocity

• Smooth inertia

• Adjustable separation

• Velocity-driven glow

• Reduced-motion support

• Responsive canvas rendering

• Viewport-aware performance optimization

• No external dependencies

It works especially well for hero sections, portfolios, experimental websites, music, fashion, and creative agencies.

🎥 Try the live preview:

What if your typography could react to your cursor? 👀

Meet Shadow Doppelgänger, a cursor-reactive text effect for Framer that brings movement, inertia, blur, stretch, and skew to your typography.

🚀 Paddle Z is trending in @Framer 's Sports section! 🎾

My second template has made it into the Trending Sports section, and I couldn’t have done it without your support. ❤

Thank you to everyone who checked it out, shared it, liked it, and supported my work.

Paddle Z just took #4 in Trending Sports 🏆

If you’re curious, check it out 👇

More experiments coming. ⚡

I wanted to make typography feel like it had momentum.

So I built Velocity Shadow, a new interactive Framer component where the shadow responds to your cursor velocity.

Move slowly and the shadow stays subtle.

Move quickly and it stretches in the direction of your movement.

Stop moving and the shadow smoothly loses its momentum.

It comes with 6 preset, Classic, Soft, Chromatic, Electric, Neon, and Ink, plus a Custom mode with detailed controls for velocity, smoothing, blur, opacity, layers, distance, and direction.

I also focused on making it practical for real Framer projects, with reduced-motion support, static-renderer support, viewport-aware animation, and direct DOM animation.

Try it here:

Velocity Shadow Preview

I wanted to make a typography component that feels more like motion graphics than a traditional marquee.

So I built Chromatic Marquee for Framer.

Instead of simply moving text from on chromaticmarqueeshader.framer.website effect.

You can control:

→ Red, Green & Blue colors

→ Chromatic offset

→ Depth

→ Blur

→ Intensity

→ Animation style

→ Animation speed

→ Animation amount

→ Marquee speed

→ Direction

→ Typography

→ Spacing

→ Background

It also comes with 5 ready-to-use presets:

Classic RGB · Cyber · Neon · Subtle · Glitch

The goal was simple: make something that designers Chromatic Marquee, while still having enough controls to make it their own.

Most marquees just move text from left to right.

I wanted to make typography feel alive.

So I built Wave Marquee Shader for Framer , an animated marquee that combines continuous scrolling with organic wave deformation to create a fluid, dynamic typography effect.

You can customize the text, typography, speed, wave size, frequency, viscosity, distortion, glow, direction, and more.

Built for creative websites, portfolios, hero sections, and experimental digital experiences.

Try it

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?