Animation

This Chrome DevTools extension makes CSS animations triggered by scrolling easier to debug: a minimap locates the scroller, element, and subject, while colored markers show activation and active ranges. Values can be edited live; the tool supports ScrollTimeline, ViewTimeline, and elements using position: sticky.

Two limitations come from Chrome: relative units such as 90vh are reduced to computed pixel values, and elements inside an iframe are not supported. The extension fills a gap in DevTools while built-in support remains a possible future improvement.

React Aria v1.22.0 introduces the Sheet component, a swipeable overlay leveraging native browser scroll gestures for smooth, touch-friendly transitions—well suited for mobile trays and notifications. This release also brings Turbopack support for locale optimization, improved handling of interactive widgets like the virtual keyboard, and various fixes for collections, ComboBox, and forms.

This documentation lists over 190 ready-to-use visual components for integrating WebGPU effects into React, Vue, Svelte, Solid, and plain JavaScript. The components span a wide range: textures, shapes, materials, filters, distortions, transitions, blurs, adjustments, and interactive effects, each with a concrete description of its rendering and parameters. A resource to quickly enrich an interface with advanced visual effects without writing low-level shaders.

Prompt Motion is a gallery of motion videos accompanied by the prompts and skills used to create them with Claude Opus 5.5. Examples can be browsed by type, from product UI and charts to kinetic typography and particles, then adapted to a project as a starting point for AI-assisted motion design.

Transitions Pro offers more than 43 production-ready transitions for React, TypeScript, and Next.js apps. Copyable examples come with agent skills and tools for creating or reviewing motion, helping teams build a consistent interaction system instead of isolated animations.

OriginKit offers a gallery of animated web components to copy or use in Framer. Previews showcase CSS and WebGL effects, with part of the collection available for free.

This skill turns Emil Kowalski’s motion and interface-craft guidance into instructions an agent can use. It focuses on transitions, states, and details that make interactions clearer.

Animata offers animated components to copy into React or Next.js applications using Tailwind CSS. Its open-source format lets teams inspect and adapt the code to their interface.

This playground demonstrates React modal-sheet options such as snap points, scrolling, fullscreen, and keyboard handling. It also includes accessibility and reduced-motion examples.

Shader Gradient lets you tune animated gradients and use them in Framer, Figma, or React. Its interface makes shader parameters easier to explore visually.

Unicorn Icons offers animated icons that can be customized in the browser and exported as Rive or Lottie. The listed targets include React, iOS, and Android.

The library exposes Intersection Observer through React hooks and components. It reuses compatible observers and provides mocks for testing lazy loading and scroll animations.

EvilCharts provides chart components built on Recharts or Apache ECharts with shadcn. Examples make animations and data presentation easier to customize.

Animate UI distributes React components built with TypeScript, Tailwind CSS and Motion. Components can be installed through the shadcn CLI and customized within a project.

Anime.js combines animation, timelines, springs and scroll observation in one API. Composition tools let developers tune properties and synchronize multiple effects.

This repository collects React component libraries and design systems with animation capabilities. It provides a starting point for comparing their approaches and demos.