УРОК 18
Арсенал веб-эффектов
18.1Стек, который мы используем
REACT · NEXT · TAILWIND · SHADCN · MOTION · GSAP · THREE
terminal · web-fx-lab
cd ~/Desktop/"МОИ САЙТЫ"/CPN_TOOLBOX/web-fx-lab # уже установлено: react next bootstrap d3 @angular/core antd @mui/material tailwindcss storybook shadcn # three animejs pixi.js fullpage.js motion @react-three/fiber lottie-web gsap particles.js npx shadcn@latest init npx shadcn@latest add "https://magicui.design/r/marquee"
React Bits (51K★) и Magic UI (23K★) раздают компоненты как исходный код: копируете в проект и правите под бренд, без зависимости от чужого пакета.
18.2Vibe Lab V4: 10 новых демо
TYPED · MARQUEE · PARTICLES · CONFETTI · GLOBE · SHADER · ROUGH · LOADERS · SPOTLIGHT · AGENT
Каждый эффект собран на чистом HTML, CSS и JS по мотивам топовых репозиториев. Код открывается кнопкой «Код».
18.3Топ-50 фронтенд-библиотек
ЗВЁЗДЫ НА НОЯБРЬ 2026
| # | Репозиторий | ★ | Что делает |
|---|---|---|---|
| 1 | react/react | 252.3k | The library for web and native user interfaces. |
| 2 | twbs/bootstrap | 175.0k | The most popular HTML, CSS, and JavaScript framework for developing responsive, mobile first projects on the w |
| 3 | vercel/next.js | 143.3k | The React Framework |
| 4 | shadcn-ui/ui | 127.5k | Composable, accessible components with thoughtful defaults. Build your own component library with code you can |
| 5 | d3/d3 | 113.8k | Bring data to life with SVG, Canvas and HTML. :bar_chart::chart_with_upwards_trend::tada: |
| 6 | angular/angular | 101.4k | Deliver web apps with confidence 🚀 |
| 7 | ant-design/ant-design | 100.1k | An enterprise-class UI design language and React UI library |
| 8 | mui/material-ui | 99.3k | Material UI: Comprehensive React component library that implements Google's Material Design. Free forever. |
| 9 | tailwindlabs/tailwindcss | 98.4k | A utility-first CSS framework for rapid UI development. |
| 10 | storybookjs/storybook | 91.4k | Storybook is the industry standard workshop for building, documenting, and testing UI components in isolation |
| 11 | sveltejs/svelte | 88.6k | web development for the rest of us |
| 12 | vitejs/vite | 83.8k | Next generation frontend tooling. It's fast! |
| 13 | animate-css/animate.css | 82.9k | 🍿 A cross-browser library of CSS animations. As easy to use as an easy thing. |
| 14 | FortAwesome/Font-Awesome | 77.0k | The iconic SVG, font, and CSS toolkit |
| 15 | chartjs/Chart.js | 67.7k | Simple HTML5 Charts using the <canvas> tag |
| 16 | apache/echarts | 67.6k | Apache ECharts is a powerful, interactive charting and data visualization library for browser |
| 17 | withastro/astro | 63.8k | The web framework for content-driven websites. |
| 18 | nuxt/nuxt | 61.0k | The full-stack Vue framework. |
| 19 | pmndrs/zustand | 58.9k | 🐻 Bear necessities for state management in React |
| 20 | remix-run/react-router | 56.6k | Declarative routing for React |
| 21 | vuejs/core | 54.8k | 🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web. |
| 22 | ionic-team/ionic-framework | 52.7k | A powerful cross-platform UI toolkit for building native-quality iOS, Android, and Progressive Web Apps with H |
| 23 | DavidHDev/react-bits | 51.4k | The largest open-source library of animated, interactive, and customizable React & Next.js components for buil |
| 24 | TanStack/query | 50.5k | 🤖 Powerful asynchronous state management, server-state utilities and data fetching for the web. TS/JS, React Q |
| 25 | jgthms/bulma | 50.0k | Modern CSS framework based on Flexbox |
| 26 | bigskysoftware/htmx | 49.6k | </> htmx - high power tools for HTML |
| 27 | react-hook-form/react-hook-form | 44.9k | 📋 React Hooks for form state management and validation (Web + React Native) |
| 28 | saadeghi/daisyui | 42.7k | 🌼 🌼 🌼 🌼 🌼 The most popular, free and open-source Tailwind CSS component library |
| 29 | nolimits4web/swiper | 41.9k | Most modern mobile touch slider with hardware accelerated transitions |
| 30 | chakra-ui/chakra-ui | 40.7k | Chakra UI is a component system for building SaaS products with speed ⚡️ |
| 31 | preactjs/preact | 38.9k | ⚛️ Fast 3kB React alternative with the same modern API. Components & Virtual DOM. |
| 32 | solidjs/solid | 36.3k | A declarative, efficient, and flexible JavaScript library for building user interfaces. |
| 33 | motiondivision/motion | 34.9k | A modern animation library for React and JavaScript |
| 34 | floating-ui/floating-ui | 32.7k | A JavaScript library to position floating elements and create interactions for them. |
| 35 | alpinejs/alpine | 32.0k | A rugged, minimal framework for composing JavaScript behavior in your markup. |
| 36 | mantinedev/mantine | 31.9k | A fully featured React components library |
| 37 | heroui-inc/heroui | 31.1k | 🚀 Beautiful, fast and modern React UI library. (Previously NextUI) |
| 38 | greensock/GSAP | 30.2k | GSAP (GreenSock Animation Platform), a JavaScript animation library for the modern web |
| 39 | tailwindlabs/headlessui | 28.8k | Completely unstyled, fully accessible UI components, designed to integrate beautifully with Tailwind CSS. |
| 40 | recharts/recharts | 27.6k | Redefined chart library built with React and D3 |
| 41 | lucide-icons/lucide | 25.6k | Beautiful & consistent icon toolkit made by the community. Lucide is an open-source icon library that provides |
| 42 | magicuidesign/magicui | 23.1k | UI Library for Design Engineers. Animated components and effects you can copy and paste into your apps. Free. |
| 43 | tabler/tabler-icons | 22.5k | A set of over 6200 free MIT-licensed high-quality SVG icons for you to use in your web projects. |
| 44 | QwikDev/qwik | 22.0k | Instant-loading web apps, without effort |
| 45 | rsms/inter | 20.0k | The Inter font family |
| 46 | radix-ui/primitives | 19.4k | Radix Primitives is an open-source UI component library for building high-quality, accessible design systems a |
| 47 | clauderic/dnd-kit | 17.7k | The modern toolkit for building drag and drop interfaces |
| 48 | formkit/auto-animate | 13.9k | A zero-config, drop-in animation utility that adds smooth transitions to your web app. You can use it with Rea |
| 49 | emilkowalski/sonner | 13.1k | An opinionated toast component for React. |
| 50 | dip/cmdk | 13.0k | Fast, unstyled command menu React component. |
18.4Топ-50 визуальных эффектов и виджетов
ЗВЁЗДЫ НА НОЯБРЬ 2026
| # | Репозиторий | ★ | Что делает |
|---|---|---|---|
| 1 | mrdoob/three.js | 117.8k | JavaScript 3D Library. |
| 2 | juliangarnier/anime | 74.3k | JavaScript animation engine |
| 3 | DavidHDev/react-bits | 51.4k | The largest open-source library of animated, interactive, and customizable React & Next.js components for buil |
| 4 | pixijs/pixijs | 48.6k | The HTML5 Creation Engine: Create beautiful digital content with the fastest, most flexible 2D WebGL renderer. |
| 5 | alvarotrigo/fullPage.js | 35.3k | fullPage plugin by Alvaro Trigo. Create full screen pages fast and simple |
| 6 | motiondivision/motion | 34.9k | A modern animation library for React and JavaScript |
| 7 | pmndrs/react-three-fiber | 33.5k | 🇨🇭 A React renderer for Three.js |
| 8 | airbnb/lottie-web | 32.3k | Render After Effects animations natively on Web, Android and iOS, and React Native. http://airbnb.io/lottie/ |
| 9 | greensock/GSAP | 30.2k | GSAP (GreenSock Animation Platform), a JavaScript animation library for the modern web |
| 10 | VincentGarreau/particles.js | 30.1k | A lightweight JavaScript library for creating particles |
| 11 | IanLunn/Hover | 29.4k | A collection of CSS3 powered hover effects to be applied to links, buttons, logos, SVG, featured images and so |
| 12 | pmndrs/react-spring | 29.2k | ✌️ A spring physics based React animation library |
| 13 | michalsnik/aos | 28.0k | Animate on scroll library |
| 14 | BabylonJS/Babylon.js | 26.3k | Babylon.js is a powerful, beautiful, simple, and open game and rendering engine packed into a friendly JavaScr |
| 15 | processing/p5.js | 24.3k | p5.js is a client-side JS platform that empowers artists, designers, students, and anyone to learn to code and |
| 16 | magicuidesign/magicui | 23.1k | UI Library for Design Engineers. Animated components and effects you can copy and paste into your apps. Free. |
| 17 | jlmakes/scrollreveal | 22.4k | Animate elements as they scroll into view. |
| 18 | rough-stuff/rough | 21.3k | Create graphics with a hand-drawn, sketchy, appearance |
| 19 | tobiasahlin/SpinKit | 19.3k | A collection of loading indicators animated with CSS |
| 20 | mojs/mojs | 18.8k | The motion graphics toolbelt for the web |
| 21 | liabru/matter-js | 18.6k | a 2D rigid body physics engine for the web ▲● ■ |
| 22 | darkroomengineering/lenis | 17.1k | Smooth scroll as it should be |
| 23 | wagerfield/parallax | 16.5k | Parallax Engine that reacts to the orientation of a smart device |
| 24 | mattboldt/typed.js | 16.2k | A JavaScript Typing Animation Library |
| 25 | Experience-Monks/math-as-code | 15.4k | a cheat-sheet for mathematical notation in code form |
| 26 | uiverse-io/galaxy | 14.9k | The largest Open-Source UI Library! Community-made and free to use. Made with either CSS or Tailwind. |
| 27 | formkit/auto-animate | 13.9k | A zero-config, drop-in animation utility that adds smooth transitions to your web app. You can use it with Rea |
| 28 | barbajs/barba | 12.9k | Create badass, fluid and smooth transitions between your website’s pages |
| 29 | theatre-js/theatre | 12.9k | Motion design editor for the web |
| 30 | catdad/canvas-confetti | 12.8k | 🎉 performant confetti animation in the browser |
| 31 | metafizzy/zdog | 10.6k | Flat, round, designer-friendly pseudo-3D engine for canvas & SVG |
| 32 | pmndrs/drei | 10.1k | 🥉 useful helpers for react-three-fiber |
| 33 | rough-stuff/rough-notation | 9.7k | Create and animate hand-drawn annotations on a web page |
| 34 | pmndrs/use-gesture | 9.6k | 👇Bread n butter utility for component-tied mouse/touch gestures in React and Vanilla Javascript. |
| 35 | tsparticles/tsparticles | 9.0k | tsParticles - Easily create highly customizable JavaScript particles effects, confetti explosions and firework |
| 36 | locomotivemtl/locomotive-scroll | 8.9k | 🛤 Detection of elements in viewport & smooth scrolling with parallax. |
| 37 | miniMAC/magic | 8.5k | CSS3 Animations with special effects |
| 38 | tengbao/vanta | 7.3k | Animated 3D backgrounds for your website |
| 39 | dixonandmoe/rellax | 7.1k | Lightweight, vanilla javascript parallax library |
| 40 | ibelick/motion-primitives | 6.9k | UI kit to make beautiful, animated interfaces, faster. Customizable. Open Source. |
| 41 | vasturiano/3d-force-graph | 6.5k | 3D force-directed graph component using ThreeJS/WebGL |
| 42 | css-doodle/css-doodle | 6.0k | A web component for visual art and creative coding |
| 43 | shuding/cobe | 6.0k | 5KB WebGL globe lib. |
| 44 | sarcadass/granim.js | 5.2k | Create fluid and interactive gradient animations with this small javascript library. |
| 45 | oframe/ogl | 4.7k | Minimal WebGL Library |
| 46 | hustcc/canvas-nest.js | 4.3k | :cancer: Interactive Particle / Nest System With JavaScript and Canvas, no jQuery. |
| 47 | micku7zu/vanilla-tilt.js | 4.0k | A smooth 3D tilt javascript library. |
| 48 | nolimits4web/atropos | 3.6k | Stunning touch-friendly 3D parallax hover effects |
| 49 | vasturiano/globe.gl | 3.2k | UI component for Globe Data Visualization using ThreeJS/WebGL |
| 50 | ruucm/shadergradient | 3.0k | Create beautiful moving gradients on Framer, Figma and React |