levita

Levita is a modern library for adding interactive 3D tilt and parallax effects to web elements. It provides a performant alternative to traditional animation loops by leveraging CSS custom properties for GPU-accelerated rendering, resulting in smooth animations with minimal JavaScript overhead.

Key Features

• CSS-Driven Performance — Uses CSS custom properties and the GPU compositor instead of a requestAnimationFrame loop, ensuring high performance even with high-polling-rate input devices.
• Accelerometer Support — Automatically detects and handles gyroscope permissions, with transparent support for iOS and Android devices.
• Multi-Layer Parallax — Enables depth layering through a simple data-levita-offset attribute on child elements.
• Framework Agnostic — Offers official, lightweight wrappers for React, Vue, Svelte, and Angular, while remaining compatible with vanilla JavaScript.
• Ultra-Lightweight — Core engine is only about 2KB gzipped, with minimal bundle sizes for framework-specific wrappers.
• Styling Flexibility — Works seamlessly with any CSS framework or vanilla CSS, providing full control over visual presentation.

Philosophy

Levita prioritizes performance and developer experience by offloading animation work to the GPU and providing a simple, declarative API. It is designed to be lightweight, framework-first, and easy to integrate into any modern web project.