Сайтодел | GitHub, Верстка, Сайты, Вайбкодинг

🐙 Phaser – фреймворк с открытым исходным кодом для создания браузерных игр. Визуализация основана на Canvas и WebGL, а рендеринг – на Pixi.js.

Сайтодел | #репозиторий #github

💾 Seamless SVG Text – изображение в формате SVG, которое движется по кругу. Здесь сделан плавный переход между правой и левой частями окружности.

Сайтодел | #сниппет #css

💾 CSS Single Element Goey Spinner – лоадер из "жидких" капель, которые перетекают друг в друга по направлению движения. Лучше всего будет выглядеть на белом фоне.

Сайтодел | #сниппет #css

💾 Services Section – карточки с выдвигающимся фоном и композицией из четырех картинок-сегментов. В активном состоянии цвет текста становится ярче.

Сайтодел | #сниппет #css

🖥 Health Analytics App – дизайн для мобильного приложения с аналитикой здоровья. Основные черты – выдержанный стиль, насыщенные холодные тона, контрасты и отсутствие скругленных углов.

Сайтодел | #макет #figma

💾 Text Circle Animation – круг со словами, который можно вращать курсором. При быстром движении буквы "разлетаются" в стороны.

Сайтодел | #сниппет #css

💾 Deconstructed Cards – два варианта карточек с эффектом зума и подвижным фоном. Текст в активном режиме становится ярче, а графика – заметнее.

Сайтодел | #сниппет #css

💾 Metal Gear Radar States – уведомления в стиле ретро-дисплеев. Для создания атмосферы используется зернистый фон, пиксельный шрифт и приглушенные цвета.

Сайтодел | #сниппет #css

💾 3D Realistic Bee – лендинг с 3D-анимацией пчелы и 3D-иллюстрациями на заднем плане. Текст находится "между" этими двумя слоями.

Сайтодел | #сниппет #css

🎨 Цветовая палитра макета "Fitstreak"

HEX | RGB
#D6E0E2 | rgb(214, 224, 226)
#D5FF5F | rgb(213, 255, 95)
#4E6075 | rgb(78, 96, 117)

⚠️ Цвет копируется одним кликом!

Сайтодел | #палитра

💾 Circular Animations – девять современных минималистичных лоадеров. Фигуры состоят из одинаковых белых кружков, которые могут менять размер и прозрачность.

Сайтодел | #сниппет #css

🐙 Text Behind Image – полезный инструмент для создания текста на заднем плане фотографии. Проект имеет открытый исходный код.

Сайтодел | #репозиторий #github

🐙 Text Behind Image – полезный инструмент для создания текста на заднем плане фотографии. Проект имеет открытый исходный код.

Сайтодел | #репозиторий #github

🖥 Glass Flowers 3D Assets – набор PNG-изображений стеклянных цветов. Есть три варианта картинок: золотые, сине-розовые (с фильтром) и черно-белые.

Сайтодел | #макет #figma

💾 Design Wormhole – карточка с трехмерным вращением и эффектом стекла. Внизу – непрерывная анимация с исчезающим предметом.

Сайтодел | #сниппет #css

🎨 Цветовая палитра макета "Interior Design Website"

HEX | RGB
#CED4D2 | rgb(206,212,210)
#FFD476 | rgb(255,212,118)
#2C8879 | rgb(44,136,121)

⚠️ Цвет копируется одним кликом!

Сайтодел | #палитра

✍️ Orbitron – геометрический шрифт без засечек с футуристическим дизайном. Он подходит для постеров, заголовков и обложек книг. Пример шрифта есть в дизайне "Virtual Reality Landing Page Concept"

Сайтодел | #шрифт

🐙 PeerTube – видеохостинг с открытым исходным кодом, созданный на Typescript. Его главное отличие от других платформ – децентрализованное хранение данных.

Сайтодел | #репозиторий #github

💾 GSAP Grid – сетка из анимированных SVG-изображений в ретро-стиле. Можно использовать в качестве иллюстраций для сайтов.

Сайтодел | #сниппет #css

💾 Dot Clock Preloader – часы, у которых стрелка формируется из маленьких квадратов. Когда все элементы собраны, часы снова распадаются на пунктирную окружность.

Сайтодел | #сниппет #css