🚀 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.
🚀 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.
