Open-source alternatives to Vanilla Tilt.js

Locomotive Scroll is a JavaScript library and toolkit for managing DOM scroll interactions, featuring a smooth scroll motion controller and a parallax scrolling engine. It provides a system for implementing fluid scrolling and tracking element visibility within the viewport. The library creates depth and motion by moving elements at different speeds relative to the scroll position. It includes a viewport visibility tracker used to initiate visual transitions and animations when specific elements enter the browser viewport. The toolkit covers programmatic scroll control, dynamic element regis

This is a React animation library providing a collection of components for creating choreographed motion, complex transitions, and SVG morphing. It functions as a motion design specification and a UI component animation wrapper system used to apply 3D transforms, Bezier curves, and entry-exit transitions to interface elements. The project includes a scroll-driven animation suite for synchronizing UI movements and parallax effects with the viewport position, as well as an SVG motion framework for animating paths, drawing lines incrementally, and interpolating coordinates for shape morphing. I

Stellar.js is a JavaScript parallax library and scroll-based motion framework used to coordinate DOM element positioning and CSS transforms. It functions as a positioning tool that calculates real-time coordinate shifts for background images and foreground items based on scroll triggers. The library utilizes a CSS transform animation engine to ensure movement is hardware-accelerated on both mobile and desktop browsers. It creates depth effects by applying different movement speeds to elements relative to the natural scroll rate. The framework covers a range of motion capabilities, including

React Scroll Parallax is a component library and JavaScript animation tool for creating scroll-driven visual effects and layered depth in web applications. It supplies shared scroll metrics and controller access down the component tree through context providers, applying hardware-accelerated style changes such as translation, rotation, and opacity to animate elements. The system tracks element positions relative to viewport boundaries to calculate continuous scroll ratios while batching calculations to sync with browser refresh rates and automatically recomputing layouts during dynamic content

Cool-kitten is a web framework designed for building responsive layouts that incorporate multi-speed parallax scrolling effects and automated asset optimization. At its core, the project functions as a scroll-driven animation engine that synchronizes DOM element transformations with user scroll coordinates using custom easing functions. The framework integrates a fluid grid layout system alongside multi-speed layered parallax capabilities, enabling background elements to move at different relative speeds than foreground content to produce visual depth. Additionally, it includes build-time ass

uillayouts is a comprehensive design system consisting of interactive components, responsive templates, motion-enhanced UI kits, and advanced visual effect toolkits. It provides a collection of accessible React UI components and pre-designed layout sections for landing pages. The project is distinguished by a specialized visual effects library and motion-driven components. It features high-performance graphical enhancements such as glassmorphism, mesh gradients, noise overlays, and SVG masking, alongside interactive elements that utilize physics-based animations and cursor-tracking effects.

vue-bits is a Vue component library and animated UI kit providing a collection of pre-built interface elements and text effects. It functions as a source-code distribution system for adding motion and interactivity to web pages. The project includes a command line installer that enables the targeted extraction of specific component source code directly into a local project directory. This CLI-driven approach allows for the integration of UI elements without relying on traditional package installation. The library covers animated UI development and frontend component management, using prop-dr

snabbt.js is a JavaScript motion framework and CSS transform animation library used to create high-performance animations for DOM elements. It functions as a 3D CSS animation engine and a matrix-based geometry toolkit for calculating precise translations, rotations, scales, and skews. The framework provides a user-driven animation controller that allows animation progress to be tied to manual user input rather than standard time-based playback. It enables the simulation of depth and perspective by animating HTML elements into three-dimensional shapes. The system covers motion orchestration t

Animate UI is an animated UI component library and motion-enhanced design system. It provides a collection of pre-animated interface elements and layout primitives used to build interactive web user interfaces. The library is integrated with the Model Context Protocol, making it an MCP compatible component set that allows AI coding tools to automatically discover and implement its components. It also functions as an accessibility-aware animation framework that respects system-level reduced motion settings. The system covers a broad range of interactive visual effects, including animated typo

animateplus is a lightweight JavaScript animation library designed for creating high-performance 60 FPS visual transitions and numeric interpolations for website elements. It functions as a promise-based animation engine, using async await patterns to sequence complex motion timelines and timing delays. The library includes a motion blur simulator that applies directional speed blur along the X and Y axes to mimic high velocity. It also provides a numeric interpolation tool to transition colors and graphic properties between states. The system manages high-performance element control, allowi

This project is a curated collection of galleries and component libraries that demonstrate pure CSS visual effects, 3D transforms, animation patterns, and layout solutions. It serves as a visual catalog of interactive UI elements and graphics built exclusively with HTML and CSS. The collection distinguishes itself by implementing complex interactivity, such as state management and animation triggers, using only CSS pseudo-classes and keyframes without any JavaScript. It also features a system for generative art and algorithmic patterns, as well as spatial 3D constructions using perspective an

Flukit is a suite of functional toolkits for Flutter, providing animation wrappers, layout debugging tools, scroll interaction kits, and a library of reusable UI components and visual utilities. The project distinguishes itself through a dedicated layout debugging tool for inspecting parent constraints and capturing system logs directly within the interface. It also provides specialized animation wrappers for rotating, scaling, and sliding child components and a scroll interaction kit that includes pull-to-refresh mechanisms, carousel swipers, and flexible sliver headers. The library covers

move.js is a JavaScript motion engine and CSS3 animation framework designed to animate DOM elements. It functions as a DOM animation library that changes visual element properties and colors over time. The library serves as a CSS bezier easing controller, using cubic-bezier curves to manage animation acceleration and deceleration. It enables sequential motion design, allowing multiple visual steps to execute in a specific order. The framework covers the animation of element properties such as position, rotation, scale, skew, and colors. It provides capabilities for UI component transitions a

cursor-effects is a JavaScript library and effect engine designed to implement physics-based cursor trails and floating visual effects in web browsers. It provides a framework for adding interactive graphical overlays that follow the user pointer. The system specializes in spawning particle trails, physics-based floating emojis, and pointer-tracking text strings. These animations utilize spring-based physics simulations to create organic reactions and dispersal patterns as the cursor moves. The library manages the entire lifecycle of visual elements, from coordinate-based pointer tracking an

This project is a CSS collectible card framework and holographic effect library designed to create interactive trading card faces. It provides a system for rendering complex artwork and card components entirely through CSS stylesheets without the use of external image assets. The framework specializes in simulating physical materials such as iridescent shimmers, metallic glares, and holographic foils. It utilizes blend modes and gradients to produce specialized surface finishes, including glitter and galaxy patterns, which react dynamically to the user's cursor position. The system further i

bounce.js is a JavaScript library and programmatic wrapper for generating and applying CSS3 keyframe animations and 3D transformations. It provides a tool for creating complex animation sequences without the need to write manual stylesheet rules. The library allows for the creation of animations by chaining scale, rotation, translation, and skew transformations. These generated sequences can be saved under unique names for reuse across multiple elements. The system manages the animation lifecycle through callback functions that trigger when a visual sequence completes. It also includes a com

Motion Primitives is an animated UI kit and React animation component library designed as a web motion framework. It provides a collection of pre-built, customizable visual components used to implement complex interface animations and transitions within a browser environment. The library focuses on animated user interface design and frontend visual polish. It enables the development of interactive web components and rapid UI prototyping by providing reusable primitives that handle motion effects without requiring custom logic from scratch. The framework integrates Framer Motion for physics-b

Animate Components is a motion framework that provides a collection of declarative primitives for managing visual transitions and animation sequences within web applications. It functions as a component-based library designed to standardize motion behavior, ensuring that interface elements move and transition consistently across different parts of a project. The library distinguishes itself through a framework-neutral architecture that bridges animation logic with various component models. By utilizing a declarative interface, it allows developers to compose complex motion patterns and synchr

Ramjet is a JavaScript animation engine and DOM element morphing library. It functions as a transition utility that animates movements and dimensions between different HTML elements to create visual shifts between interface states. The library specializes in cross-tree element morphing, which allows it to animate the position and dimensions of one element to match another regardless of their relative location in the document hierarchy. It achieves this by calculating visual offsets and utilizing a customizable cloning mechanism to create temporary visual proxies. The system manages organic m

This project is a comprehensive CSS animation tutorial and a structured frontend animation course. It serves as a web motion learning resource designed to teach the implementation of visual transitions and animations within a browser. The resource provides a guide to CSS 3D animation, covering the rendering of three-dimensional scenes and depth. It includes instructions on motion design, ranging from scroll-triggered animations and sprite sheet animation to the creation of complex web interface animations. The material covers core capabilities such as manipulating element geometry, controlli

This project is a Tailwind CSS landing page template and responsive marketing website kit. It serves as a React frontend starter providing a set of pre-designed marketing layouts and components for rapid website development. The kit includes an animated UI component library featuring scroll-triggered transitions and dynamic visual effects. It provides themed page templates and design source files for creating marketing sites, professional portfolios, community portals, admin dashboards, and technical documentation sites. The codebase covers a broad range of interface capabilities, including

RESideMenu is an iOS side menu component and user interface framework element used to implement the side-drawer navigation pattern on Apple mobile devices. It provides a sliding side panel that organizes top-level application sections and navigation links. The component specifically implements a parallax navigation menu, which shifts content layers at different speeds to create a sense of depth during transitions. This allows for the creation of a sliding menu that moves content visually when controllers are opened from either side of the screen. The system manages the interface through gest

This project is a pure CSS UI library and collection of reusable button components. It provides interactive interface elements that utilize native browser capabilities and hardware-accelerated transforms to deliver visual feedback without the use of JavaScript. The library distinguishes itself through the use of compositor-driven transforms and geometric clip-path masking. These techniques allow for high-performance visual effects, such as coordinate-based shape morphing and the creation of non-rectangular, slanted button designs. The component set covers a variety of animated interactions,

vrtk is a virtual reality interaction framework and locomotion system designed to build consistent 3D object interactions and user interfaces across different hardware. It provides a hardware-agnostic movement model that decouples player navigation logic from specific controller inputs to ensure cross-platform compatibility. The project includes a spatial UI kit for rendering 2D and 3D interactive menus and physical controls specifically for head-mounted displays. It utilizes an event-driven input layer to translate physical pointer and touch data into virtual object events and actions. The

Rellax is a dependency-free vanilla JavaScript library and frontend utility used to create parallax web design effects. It functions as a scroll-based animation tool that moves page elements at different speeds to produce a sense of depth and layered motion. The library supports both vertical and horizontal parallax tracking for panoramic layouts and allows for motion speed control. It includes breakpoint-aware speed mapping to adjust movement based on screen width and provides viewport centering to position elements relative to the center of the screen. Beyond basic motion, the tool manages

React Parallax is a React animation component library that creates multi-speed scrolling background depth effects. It computes relative scroll positions within viewports to translate raw page offsets into normalized animation progress values, applying hardware-accelerated translation and scaling styles to DOM nodes for smooth visual movement. The library supports rendering background images and arbitrary visual elements that shift positions at different speeds relative to foreground content. It provides dynamic Gaussian blur filter transitions that interpolate based on current scroll velocity

Portfolio is a frontend developer portfolio template designed for software engineers to present professional experience, featured software projects, and interactive web applications. It constructs user interfaces using modular components and utility-based styling, rendering visual elements through declarative composition and client-side state management. The project incorporates hardware-accelerated WebGL rendering for interactive three-dimensional graphics and card hover effects, alongside a scroll-driven animation engine that triggers motion effects and visual transitions tied to the viewpo