react-three-fiber

Это threejs для React в web и react-native.
Скорее всего, если вы видели действительно классную 3D-анимацию на сайте, вероятно, она была построена на three.js - react-three-fiber даёт вам возможность подключиться к React при создании 3D-сцен. Также стоит изучить Next.js + Tailwind.

👉 @fullstack_libs

Gallery

В этой реализации автор использует SCSS переменные, разметку создает при помощи grid. Сложные формы для элементов реализованы при помощи CSS clip-path.

👉 @fullstack_libs

Mobile Menu

В этой реализации интересна логика перемещения выбранной области. С помощью JS автор определяет в какую сторону и на какое расстояние должна перемещаться область.

👉 @fullstack_libs

Like Overflow

Лайк, сделанный на React и анимированный с помощью библиотеки GSAP.

👉 @fullstack_libs

react-dates

Эта библиотека от air-bnb предоставляет настраиваемые одинарные и двойные date-пикеры для React.

👉 @fullstack_libs

Mapbox Map

Карта, созданная с помощью API maptiler. Автор также добавил svg картинки, которые анимирует библиотекой popmotion.

👉 @fullstack_libs

league/csv

Отличная библиотека для работы с файлами в формате CSV, не привязанная к фреймворкам. Имеет простое и понятное API, позволяет как читать так и писать CSV файлы.

Устанавливается одной командой composer require league/csv и не требует дополнительной настройки.

👉 @fullstack_libs

react-dnd

Набор утилит, которые позволяют создавать сложные интерфейсы с перетаскиванием, сохраняя при этом отвязывание компонентов.

Отличительные особенности:
1. идеально подходит для таких приложений, как Trello и Storify, где перетаскивание отвечает за передачу данных между различными частями приложения;
2. построен поверх Drag&DropHTML5;

👉 @fullstack_libs

Premonish

Библиотека JavaScript, которая анализирует движение курсора и предсказывает, с каким элементом пользователь будет взаимодействовать дальше. Это позволяет применить на сайте интересные триггеры анимации и помогает выделить некоторые призывы к действию.

👉 @fullstack_libs

Overlay Scrollbars

Плагин JavaScript, который скрывает собственные полосы прокрутки, заменяя их версиями с индивидуальным стилем.

👉 @fullstack_libs

Final Form

Библиотека для создания красивых и доступных форм. Позволяет точно контролировать, какие элементы формы получают уведомления об изменениях состояния формы. 

Функции:
1. Совместима со всеми веб-фреймворками;
2. Полноценная и расширяемая реализация;
3. Автономность.

👉 @fullstack_libs

Kaleidoscope

Сделан на VueJS. Автор реализовал изменение формы элементов с помощью математических вычислений, которые зависят от положения курсора мыши.

👉 @fullstack_libs

Snap svg

Библиотека JavaScript, которая позволяет создавать и анимировать векторную графику в современных браузерах. Можно загружать код SVG асинхронно и запрашивать части, которые нужны, для превращения SVG файлов в спрайты.

👉 @fullstack_libs

Штрих-код

Сделан из множества HTML элементов li, которым автор задаёт разную ширину, а также добавлен анимированный считывающий лазер.

👉 @fullstack_libs

Crazy Rumble type effect 

При реализации использованы css анимации и JavaScript для определения цвета летящих букв, и их положения.
Кликните по «бумаге», чтобы взять ее в фокус, и начните вводить свой текст.

👉 @fullstack_libs

Simple CARD hover effect

Выполнена на CSS. С помощью псевдокласса :hover и свойства transform автор двигает изображения.

👉 @fullstack_libs

Трансформация логотипа

Выполнена как svg изображение, свойство которого изменяются и анимируются на JS.

👉 @fullstack_libs

wifimouse

Сервис, который позволяет превратить свой телефон в беспроводную мышь, клавиатуру, удаленный рабочий стол, трекпад и многое другое.

👉 @fullstack_libs

Screen size map

Карта размеров экрана сравнивает размеры области просмотра в пикселях, не зависящих от устройства, для планирования гибких и гибких макетов для создания великолепных UX / UI в цифровых продуктах.

👉 @fullstack_libs

CSS to JS

Сервис, позволяющий преобразовывать CSS в JS.

👉 @fullstack_libs