Karim Saif

Perspective Text Scroll 3D

Create immersive, 3D scroll-driven typography experiences with customizable perspective tilts, spring physics, and dynamic bottom fade overlays.

Great for

Hero Sections & Launch Pages: Capture immediate user attention with high-impact intro text.

Manifestos & Storytelling: Guide readers through key company messages, product philosophies, or article introductions.

Agency Portfolios: Add interactive design flair to project case studies and splash screens.

Feature Highlights: Show off core product benefits in dynamic sticky-scroll sections.

Stop using static images for modern website backgrounds. 🛑

Introducing Gradient Noise Background for Framer ✦

Create gorgeous mesh gradients, custom grain noise, and glassmorphic atmospheres directly inside your canvas in seconds.

✨ 15+ curated presets

🎨 AI Studio & Color Shuffler

🎛 Full grain, blend mode & seed control

⚡️ 1-click apply to any layer

Try it now in the Framer Marketplace! 👇

Scroll Choreography is an advanced scroll-driven gallery component built with Framer Motion. Smoothly transition media cards through custom timeline phases—moving from initial spatial layouts into an immersive full-screen hero section with customizable typography, spring physics, and motion blur.

Cars Logo Demo

Display globally recognized automotive brand logos in your projects with clean, high-resolution vector assets designed for seamless layout integration.

What do you think??

Stop using static images for modern website backgrounds. 🛑

Introducing Gradient Noise Background for Framer ✦

Create gorgeous mesh gradients, custom grain noise, and glassmorphic atmospheres directly inside your canvas in seconds.

✨ 15+ curated presets

🎨 AI Studio & Color Shuffler

🎛 Full grain, blend mode & seed control

⚡️ 1-click apply to any layer

Try it now in the Framer Marketplace! 👇

I need a coffee, Anybody need a coffee.

Add playful, hand-drawn personality to your UI with customizable vector speech bubbles, thought clouds, accent brackets, and callout elements.

Build interactive media carousels with 6 custom transition effects, continuous autoplay, flexible padding layouts, and hardware-accelerated Swiper.js physics.

Create responsive media galleries with dynamic GSAP spring physics, mouse velocity inertia tracking, interactive tilt-rotation, and custom link mapping.

Create interactive typography that dynamically distorts font weight, width, italic slant, and opacity as the mouse moves across screen.

Create dynamic, physics-driven image cursor trails with GSAP gravity simulations, custom bounce effects, and mobile-friendly performance optimization.

A sleek, minimal collection of precision line-art chart icons designed for data dashboards, financial tools, and modern web interfaces.

Did you check this Cursor Trail Component?

Silky, fluid WebGL wave animations with custom shading, preset themes, and built-in performance optimization.

Zoom Text Tunnel (Infinite Text Passage)

Create immersive, infinitely zooming kinetic typography loops with precise timing and full canvas controls.

Reactive Lines

Bring fluid, dynamic canvas motion and interactive wave patterns to your Framer websites. Created by Karim Saif, Reactive Lines renders continuous, mathematical vector curves that deform, react, and flow in real time based on user cursor movement, touch input, and idle state behaviors.

🎨 Customization Options

All properties are directly configurable through Framer’s Property Panel:

Geometry & Layout: Adjust line count, stroke width, curve depth, wave orientation, and line spacing distribution curves.

Motion & Dynamics: Fine-tune spring physics, cursor response radius, interaction strength, and idle orbit speed.

Visual Effects: Select blend modes, stroke colors, noise intensity, and toggle directional or radial edge vignette fading.

Mobile & Touch: Select touch interaction behavior (Follow Touch, Auto-Orbit, or Fixed Center) and toggle idle detection timers.

Droplets Component for Framer

The Droplets component delivers a realistic, high-performance WebGL-powered rain-on-glass visual effect for Framer projects. Designed with interactivity and fluid animations in mind, it creates modern, atmospheric overlays that distort background content with natural refraction, realistic condensation, and pointer interaction.

US States Vector Silhouette Pack

his asset set offers clean, scalable vector outlines built for interactive web maps, infographics, travel platforms, and regional UI dashboards.

🎨 Design Features

Resolution Independent: Pure vector shapes that scale infinitely without quality loss or raster pixelation.

Customizable Styling: Easily adjust fill colors, stroke overlays, hover interactions, or opacity levels in Framer, Figma, or CSS.

Modular Layout: Each state is crafted as an independent vector asset for flexible grid visual displays or standalone interactive map elements.

Food & Allergen Vector Icon Set

A clean, minimalist vector icon pack designed for modern UI/UX design, dietary labeling, restaurant menus, and packaging. Created by Karim Saif, this collection features precise vector line icons covering ingredients, major food allergens, seafood, produce, and culinary categories.

🎨 Design Features

Resolution Independent: Fully scalable vector paths designed to maintain clarity across all screen densities.

Consistent Stroke Weight: Crafted with uniform line thickness to seamlessly fit modern app design systems and UI dashboards.

Versatile Application: Ideal for light or dark backgrounds, custom color overlays, and interactive hover states.

⚡ Responsive & Accessible Architecture

Auto-Scaling Canvas: Utilizes ResizeObserver for dynamic scale adjustments across desktop, tablet, and mobile layouts.

Keyboard Navigation & ARIA Compliance: Fully accessible lightbox triggering with keyboard inputs (Enter, Space, Escape to close) and ARIA roles.

🎨 Customization Options

All properties are directly configurable through Framer’s Property Panel:

Row Mechanics: Configure direction (Left / Right), gap spacing, arc curvature depth (0% to 100%), and vertical row separation (Row Gap).

Speed & Scroll Multiplier: Set base ticker pace and adjust scroll speed multipliers to make the ticker react to page scrolling.

Card Dimensions & Radii: Adjust card width, height, fit (Cover / Contain), object focal points (Focus Y), and responsive corner rounding.

Hover Controls: Enable or disable pause-on-hover, set hover scale zoom factors, and apply micro-rotations.

Image Filters: Adjust Grayscale (0%–100%), Brightness, Contrast, and Saturation settings on all images simultaneously.

Lightbox Settings: Toggle full-screen previews, select backdrop blur intensity, customize overlay backdrop color/opacity, set transition animation style, and toggle close buttons or background click dismissal.

Borders, Shadows & Fade Masks: Customize border width, border color, shadow blur, vertical offset, shadow color, and edge fade mask intensity.