🚀 Built a Professional QR Code Generator in Framer.

I’ve just finished building a fully customizable QR Code Generator with a focus on clean UI, smooth interactions, and practical export options.

Live on: QR Code Generator

✨ Features:

• Generate QR codes from valid URLs

• Custom QR & background colors

• HEX color input

• Adjustable QR roundness

• Adjustable QR padding / quiet zone

• 720 / 1080 / 1440px resolution

• PNG, JPEG & SVG export

• Custom download filename with automatic extension

• Share generated QR codes

• Responsive design

• Smooth loading and interaction animations

The entire experience is built in Framer with custom code.

The goal was to make a simple utility feel more like a polished product rather than just another QR generator.

Would love to hear your feedback! 👀

New version of My Elevation is live with more details & redesigned Compass.

Elevation — Real-Time GPS Utility

Elevation is a real-time GPS utility component built for Framer, combining elevation, location data, unit conversion, animated numerical feedback, and a functional compass in one responsive interface.

Live on: My Elevation

FEATURES

• Real-time elevation above sea level

• Latitude & longitude

• Horizontal & altitude accuracy

• Meters ↔ Feet unit toggle

• Apple-inspired rolling/odometer number animation

• Animated transitions when switching between meters and feet

• Functional device compass with heading & cardinal direction

• Elevation trend & history visualization

• Live GPS updates

• Configurable GPS accuracy and update interval

• Responsive layout for mobile, tablet & desktop

• Reduced-motion support

• Browser permission handling

• Extensive Framer property controls

The component is designed around real browser GPS and device-orientation APIs while maintaining a minimal, monochrome interface inspired by the visual language of my other FramerDevv projects.

Built with React, JavaScript, Geolocation API, Device Orientation API, CSS animations, and Framer Code Components.

Built and developed by FramerDevv.

#Framer #FramerCommunity #FramerCode #CodeComponent #GPS #Compass #React #WebDevelopment

🚀 New Framer Component: Screen Lock Controller

Ever had a website where the screen going to sleep ruins the experience?

I built Screen Lock Controller — a Framer component that keeps the device screen awake while your experience is active.

Live on: https://framerdevv.framer.website/riedoo

✨ Features

• 🔒 Screen Wake Lock API integration • 📱 Keep the screen awake during interactions • 🔄 Automatic wake-lock re-acquisition when the page becomes visible again • 🖥 Optional Portrait / Landscape orientation locking • ⚡ Interaction or automatic activation modes • 📊 Live Screen & Orientation status indicators • 🎨 Fully customizable colors, glass effect & blur • 🔤 Custom typography controls • 📐 Compact mode for smaller layouts • ♿ Accessible controls with ARIA support • 🧩 Framer Property Controls • 🛡 Static-renderer compatible for Framer

It uses native browser capabilities rather than simulating screen activity, making it useful for experiences such as dashboards, kiosks, navigation tools, presentations, timers, monitoring interfaces, and other always-on experiences.

Built from scratch for Framer with a focus on reliability, responsiveness and clean integration.

Made by FramerDevv. ⚡

#Framer #FramerComponent #FramerDev #WebDevelopment #NoCode #WebDesign #Frontend

🚀 Introducing Leveler — by FramerDevv

I’m excited to launch Leveler, a real-time digital level component for Framer that uses your device’s motion and orientation sensors to turn a compatible phone or tablet into an interactive leveling tool.

✨ Features

🔵 3 Level Modes

• Bubble — classic circular level

• Horizontal — horizontal leveling

• Vertical — vertical / plumb mode

📐 Live Measurements

• Pitch

• Roll

• Angle

• Live sensor status

• Dynamic level detection

🎯 Calibration

Calibrate the current device position as the new zero point and reset it anytime.

📍 Reference Mode

Set the current angle as a reference and measure changes relative to it.

🔒 Hold Mode

Freeze the current reading for easier measurement and inspection.

📳 Haptic Feedback

Get a short vibration when the device reaches the configured level tolerance on supported devices.

🎨 Fully Customizable

Customize colors, bubble size, tolerance, animation speed, typography, padding, blur, borders, backgrounds, mode buttons and more directly through Framer Property Controls.

📱 Responsive

Automatically adapts to different component sizes and screen layouts.

🍎 iOS Permission Handling

Handles motion-sensor permission requirements on supported iOS devices.

⚡ Framer-Ready

Includes static-renderer handling so the component provides a stable preview inside the Framer canvas while sensor functionality runs on supported devices.

Leveler is built for interactive websites, measurement tools, product experiences, construction/DIY projects, architecture, portfolios, and experimental sensor-based interfaces.

Built with React + DeviceOrientation API, with sensor smoothing and level detection for a stable experience.

Built my first-ever SaaS website for my mentor in FRAMER, where I’m currently training as a Full-Stack Developer. 🚀

🚀 Just launched my new Digital Level component for Framer!

Turn any device into an interactive spirit level with 3 modes: Bubble, Horizontal & Vertical — powered by real-time device orientation data.

Visit Here: LEVELER

✨ Features:

• Calibration + saved settings

• Reference Mode

• Hold current reading

• Haptic feedback when perfectly level

• Smooth 60 FPS motion

• iOS permission handling

• 30+ customization controls

• Accessibility + keyboard support

• Static fallback for Framer

• Zero external dependencies

Built for construction, DIY tools, product demos, and interactive experiences.

What feature should I add next? 👇

Leveler by FramerDevv comming soon...📈

Creating this Leveler web app in Framer using Device's own sensor.

How's the UI ?

It's 4 AM in the morning. Didn't sleep. Living my Dreams.

- Again create a custom code component.

Another one custom code component.

Noice analyzer (dB Meter).

I’ve built an EV Ownership Calculator as a custom Framer Code Component! ⚡🚗

It helps users compare the real cost of owning an EV vs. a traditional petrol/diesel vehicle — including purchase price, running costs, electricity and fuel expenses, annual savings, break-even distance, break-even time, and long-term ownership costs.

It supports multiple currencies, 2-wheelers and 4-wheelers, customizable inputs, interactive charts, and persistent user settings.

Try it here: EV Saving Calculator

(This component is not created with Framer Agent)

Trust me guys, you NEED to visit my website on your phone 📱👀

The experience is completely different on mobile — especially the animations, interactions, Haptic feedback and overall feel. I’ve spent a lot of time optimizing the experience, and honestly, it feels so much better when you experience it on a phone.

I created those all buttons with custom codes.

So yeah… open it on your phone and let me know what you think! 🔥

(Note* Remove your phone from silent mode & keep it into vibration or Ring mode to experience haptics)

Visit: Haptics

How about this Blur post ?

Someone asked me, "What is the biggest custom code component that you ever built ?"

My answer is, "CANVAS" 🚀

That Contains:

- All type of stylus support

- Pressure sensitive

- Undo/Redo

- Eraser

- Laser

- Select option

- HEX CODE Color pallet

- Shapes

- Export option

- Delete all button

- Size slider for Pen & Eraser

- Full screen mode

Bro! Let me just save my code atleast 🥲

Working on a new custom code component 👀

Final output of Twitter cards as a FRAMER Component⚡⚡

- Blue tick

- Golden tick

- Company's Badge and many more features...

(Note* All comments are fake)

My current Framer setup 🚀

This is my little workspace where ideas turn into actual projects. I use Framer for everything from designing websites and creating responsive layouts to experimenting with custom code components and interactive experiences.

I usually work on my laptop while using my tablet as an additional screen for previewing and testing my projects. The sticky notes on the wall keep track of ideas, tasks, and projects that I want to build or improve.

A lot of my recent work—from Canvas and interactive components to new website experiments—has been created right here. Still learning, still experimenting, and always building something new. 💻🔥