component
Liquid Glass Switch
By Syed Saboor
Details
- Syed SaboorAuthor
- componentType
- $5.00Price
- 2025-10-24Published
- 2025-10-24Updated
- 2025-10-18Added
- ButtonsCategories
Summary
Bring Apple-inspired Liquid Glass interface from iOS 26 to your Framer projects with this premium toggle switch component.
Description
Bring Apple-inspired Liquid Glass interface from iOS 26 to your Framer projects with this premium toggle switch component. Featuring authentic glass morphism effects with dynamic refraction, 3D perspective animations, and multi-layered lighting that perfectly mimics real glass materials. Key Features: Authentic Liquid Glass Effect - Precise recreation of Apple-inspired iOS 26 design language with translucent aesthetics and realistic glass physics 3D Perspective Animation - Dynamic rotation and scaling effects during toggle transitions with smooth 0.7s cubic-bezier easing for buttery-smooth interactions Chromatic Aberration - Subtle displacement mapping and color separation for realistic glass refraction effects that mimic real-world light behavior Advanced Color Control - Customize both on/off states with dual gradient controls (start and end colors) plus independent dot color customization with full alpha support Interactive States - Smooth hover and toggle animations with specular highlights, backdrop filter effects, and dynamic glass morphing Event Handler Support - Built-in onToggle callback for seamless integration with your Framer interactions, logic, and state management Performance Optimized - Lightweight SVG filters with GPU-accelerated animations running at smooth 60fps with scoped CSS to prevent style conflicts Apple-Inspired Lighting - Multi-directional highlights and curved reflections matching Apple-inspired design principles with authentic specular effects Perfect for modern dashboards, settings panels, preference controls, form interfaces, and any design requiring Apple-inspired translucent aesthetics. The component features dynamic glass morphing with realistic light refraction that adapts beautifully to any background, maintaining visual excellence in both light and dark themes. Component Controls: What's Included: Complete code component ready for Framer with no external dependencies or additional setup required Comprehensive property controls for easy customization through Framer's visual interface Dual gradient color controls for both on and off states with 8 total color customization options Event handler for toggle state changes with full callback support Performance-optimized with scoped CSS and unique filter IDs to prevent conflicts in complex projects Transform your designs with the same liquid glass effect that defines Apple-inspired interface language. Simply drop into your Framer project and customize to match your brand identity - no coding knowledge required.
Rank history
Daily rank per list, from the first snapshot — lower is better.
- All · #6150