Search Results for "depth-violet"

Atropos is a lightweight, open-source JavaScript library designed to add visually striking 3D parallax and hover effects to webpage elements — giving a sense of depth and interactivity when users hover or touch elements (cards, images, UI components). It works not only with vanilla JavaScript, but also provides integrations or support for modern frameworks (React, Vue, Web Components, etc.), making it easy to incorporate into a variety of web projects. Because Atropos is very small (just ~2 KB minified + gzipped) and has zero dependencies, it's ideal for performance-conscious applications and does not bloat bundle size. ...

...It uses a deliberate color choice, edge-to-edge imagery, and large-scale typography. The general layout resembles sheets of paper following multiple different layers so that the depth and order are obvious. The navigation stays mainly on the left and the actions on the right. This new design has elements that have been the result of research regarding ink and paper and the way objects and materials interact in real life. The result is a beautiful and consistent set of elements that can get you started with your next project.

Effeckt.css is a showcase and toolkit of high-performance UI transitions and animations for the web. It catalogs common interaction patterns—button states, list reveals, modals, off-canvas menus, and page transitions—implemented with CSS transforms and opacity for smooth, GPU-friendly motion. The project focuses on practical details such as using compositing-friendly properties, keeping DOM structures lean, and providing hooks so JavaScript can toggle classes without micromanaging animation...

...Where no gyroscope or motion detection hardware is available, the position of the cursor is used instead. parallax.js reacts to the orientation of your smart device, offsetting layers depending on their depth within a scene. If you don't have a smart device, no worries, if no gyroscope or motion detection hardware is available, parallax.js uses the position of your cursor instead. Most configuration settings can be declared either as data-value attribute of the scene element, or property of the configuration object. The programmatic approach will take priority over the data-value attributes set in the HTML. ...