Built with Framer
Custom Interactive Components for Framer
Harsh Upadhyay
Custom Interactive Components for Framer
Designed & Built to Help Creators Add Motion, Interaction, and Personality
Introduction
Hey this is Harsh and I build custom components for the Framer community to help designers and founders bring advanced interactions into their projects. Each component is made to solve a real design need: better engagement, smoother interactions, and visuals that leave an impression.
All components are fully responsive, customizable, and plug-and-play inside Framer. They are used across portfolios, landing pages, agency sites, and creative experiments by designers around the world.
Component Library
01. DrawFrame (Paid)
DrawFrame
Turn any section of a website into an interactive drawing space.
Users can draw, paint, erase, and export visuals directly on the page—great for creative campaigns, interactive landing pages, or playful portfolio moments.
Why I built it:
To introduce creativity and interaction in a way that makes the user part of the experience.
Key Features:
Interactive drawing with multiple brush styles
Export as PNG or JPG
Customizable backgrounds, stroke size, and color modes
Fully responsive with no-code controls
Use cases: workshops, artist portfolios, product reveals, education.
02. ImageHoverEffect (Paid)
A complete animation pack that transforms static images into dynamic visuals.
Includes six hover effects such as Liquid Melt, RGB Split, Buttery Smooth, and Zoom Blur.
Why I built it:
Hover interactions add depth and personality. This component gives designers full control without needing complex motion code.
Key Features:
6 built-in effects with intensity and speed control
Adjustable shadows, radius, and easing
Perfect for hero sections, galleries, and previews
Use cases: modern landing pages, fashion sites, product galleries.
03. Image Motion Trail (Paid)
Add fluid motion trails that follow the cursor.
A storytelling component that creates immersive movement as users navigate the site.
Why I built it:
Web experiences are remembered when they feel alive. This brings cinematic motion into simple layouts.
Key Features:
8 motion trail styles
Frequency, speed, and visibility controls
Works with multiple images and design themes
Use cases: creative portfolios, agencies, storytelling sites.
04. Ripple Component (Free)
Ripplele
Realistic water ripple interaction using WebGL.
Creates subtle or intense water effects on images for immersive hero headers or galleries.
Why I built it:
To add environmental motion that feels natural and calming.
Key Features:
Adjustable ripple intensity and size
Hover or click to activate
Works with CMS images
Fully responsive and lightweight
Use cases: nature brands, luxury sites, product showcases.
05. Border Tracking Component (Paid)
Border
Hover-based glow that follows the cursor around the element.
It highlights interactive cards or images by responding to user proximity.
Why I built it:
To guide user attention without overwhelming the interface.
Key Features:
Interactive cursor tracking
Proximity glow control
Fits any layout or container
Fully adjustable intensity and colors
Use cases: project cards, CTAs, interactive previews.
06. Hover Glitch Image (Free)
Add cyberpunk-style distortion effects on hover.
Perfect for bold brands and experimental designs.
Why I built it:
To bring a futuristic visual language into Framer, with full creative control.
Key Features:
Adjustable glitch intensity
Customizable speed and distortion style
Works with any image
Use cases: tech websites, music artists, creative agencies.
07. RetroPixelButton (Free)
A nostalgic call-to-action button inspired by retro interfaces.
Combines pixel-styled visuals with modern interactions.
Why I built it:
Retro and futuristic elements are trending, but hard to build from scratch. This makes it accessible to everyone.
Key Features:
Hover transitions and animated states
Light and dark mode support
Fully editable text and links
Use cases: landing pages, game launches, portfolio CTAs.
08. Real-Time Clock (Free)
Clock
Displays live time for any timezone, fully customizable.
Why I built it:
To help designers add dynamic elements for brands that operate globally or want personality in their header.
Key Features:
Toggle 12/24-hour formats
Style fonts, colors, and size
Optionally show seconds
Use cases: agency headers, dashboards, global product sites.
Final Words
All of these components are built with one goal:
to make advanced interaction design accessible for everyone in Framer
I will continue expanding this library to help designers build richer, more expressive websites faster and with more control.
About Me: harsh.works
Like this project
Posted Oct 21, 2025
A collection of custom interactive components built for Framer designed to add motion, depth, and modern interactions without code.
Likes
3
Views
3
