Tác giả tạo bộ thành phần & mẫu thiết kế **Next.js** miễn phí, tập trung vào hiệu quả công việc. Bao gồm: mẫu giao diện hoàn chỉnh, khối động, thành phần động (nút, preloader). Sử dụng: **Next.js**, **Tailwind CSS**, **Framer Motion**, **GSAP**. Mời góp ý để cải thiện. #Nextjs #TailwindCSS #FramerMotion #GSAP #MSS #ThiếtKếWeb #CSS #JS #FreeTool
https://www.reddit.com/r/SideProject/comments/1po0u2l/i_built_a_set_of_free_nextjs_components_and/
December is here with the holidays charm. Find the last chapters of this project following the link:
https://www.ivanmoreno.art/portraits/dec/01/
or
https://www.ivanmoreno.art/portraits/dec/10/
#threejs #gsap #nodejs #netart #webdevelopment #interactiveart #stoicism #dailystoic
10 Cool CodePen Demos from November 2025: Cards, whimsical components, shaders, directional aware icons, CSS art, prototypes and experiments with new web features... and more!
https://alvaromontoro.com/10-cool-codepen-demos/2025/11/
Анимированный UI: как улучшить взаимодействие с пользователем
Анимация пользовательского интерфейса прошла долгий путь за последнее десятилетие, они превратились в универсальный цифровой язык, который люди узнают и понимают. Эти микровзаимодействия позволяют дизайнерам общаться с пользователями посредством движения и анимации, предоставляя им рекомендации, контекст и создавая захватывающий пользовательский опыт. В продакшене анимация всегда балансирует между выразительностью и производительностью. Чем сложнее сцена, тем выше нагрузка на процессор, особенно на мобильных устройствах. Поэтому важно оптимизировать: использовать GPU-дружественные свойства (transform, opacity), избегать тяжёлых reflow, а для сложных эффектов — применять библиотеку, которая работает с отложенным рендерингом, например Framer Motion или GSAP. Это не только повышает плавность, но и снижает энергопотребление, что прямо влияет на опыт пользователя. Когда команда проектирует систему анимаций, важно фиксировать принципы в дизайн-системе. Это помогает избежать хаоса и гарантирует согласованность между продуктами. Хорошая практика — описывать длительность, кривые ускорения и паттерны движения как переменные, чтобы и дизайнеры, и разработчики говорили на одном языке. Например, motion-tokens, где заданы типовые параметры переходов: fast-out-slow-in, linear-out-slow-in и т.д. На зрелом уровне анимация становится не надстройкой, а частью архитектуры интерфейса. Она помогает продукту чувствоваться цельным, обеспечивает предсказуемость и ритм, а главное — создаёт ощущение «живого» цифрового опыта. Привет, я Максим, frontend-разработчик в компании SimbirSoft, в этой статье расскажу, как сделать полезный для пользователя UI.
https://habr.com/ru/companies/simbirsoft/articles/974772/
#UI #css #javascript #reactjs #transitions #keyframes #web_animations_api #gsap #framer_motion #lottie
November's last chapters are here. You can find them following the link:
https://www.ivanmoreno.art/portraits/nov/20/
or
https://www.ivanmoreno.art/portraits/nov/30/
#threejs #gsap #nodejs #netart #webdevelopment #interactiveart #stoicism #dailystoic
November's second round chapters are here. You can find them following the link:
https://www.ivanmoreno.art/portraits/nov/10/
or
https://www.ivanmoreno.art/portraits/nov/20/
#threejs #gsap #nodejs #netart #webdevelopment #interactiveart #stoicism #dailystoic
Tìm kiếm nhà phát triển muốn xây dựng dự án lớn (Hợp tác mở - Không tiền, chỉ tầm nhìn)
Tìm kiếm dev xây dựng website hội nghị toàn cầu về AI, 10k+ người tham dự, diễn giả toàn cầu
Công nghệ: MERN, Tailwind CSS, Framer Motion/GSAP
#HợpTácMở #XâyDựngDựÁnLớn #PhátTriểnWeb #AI #ToànCầu #MERN #TailwindCSS #FramerMotion #GSAP #OpenCollaboration #BigProject #WebDevelopment #AI #Global #Volunteer #Contribute
https://www.reddit.com/r/SideProject/comments/1p0lcsk/looking_for_devs_who_want_to_build_so
November's first chapters are here. You can find them following the link:
https://www.ivanmoreno.art/portraits/nov/01/
or
https://www.ivanmoreno.art/portraits/nov/10/
#threejs #gsap #nodejs #netart #webdevelopment #interactiveart #stoicism #dailystoic
End of October chapters. You can find them following the link:
https://www.ivanmoreno.art/portraits/oct/20/
or
https://www.ivanmoreno.art/portraits/oct/31/
#threejs #gsap #nodejs #netart #webdevelopment #interactiveart #stoicism #dailystoic
Pour ses 20 ans, @symfony nous a sollicités pour créer une page immersive retraçant 2 décennies d’innovation. Découvrez sur notre blog le détail de la conception de cette page, réalisée avec #GSAP, Twig ou encore #TailwindCSS). Longue vie à Symfony ! https://les-tilleuls.coop/blog/un-site-anniversaire-pour-celebrer-les-20-ans-de-symfony
Middle of October chapters. You can find them following the link:
https://www.ivanmoreno.art/portraits/oct/10/
or
https://www.ivanmoreno.art/portraits/oct/20/
#threejs #gsap #nodejs #netart #webdevelopment #interactiveart #stoicism #dailystoic
Loading Cube
Master a key technique for creating stylish, isometric 3D components and effects often used for gamification or interactive landing pages! The demo shows how easily #GSAP manages complex transformations (position, rotation) of 3D objects, making their behavior lively and physically accurate.
How to Animate WebGL Shaders With GSAP: Ripples, Reveals, and Dynamic Blur Effects, by @codrops:
Adding to Cart Animation with GSAP, Tweakpane, and CSS
Jhey Tompkins demonstrates how to build a responsive checkmark burst animation without excessive #JS, using #CSS Transitions for the core and #GSAP for dynamic parameter control (speed, color, style). Perfect for boosting #UX!
The new season is already starting. Welcome to October chapters. You can find them following the link:
https://www.ivanmoreno.art/portraits/oct/01/
or
https://www.ivanmoreno.art/portraits/oct/10/
#threejs #gsap #nodejs #netart #webdevelopment #interactiveart #stoicism #dailystoic
A stunning fullscreen slider where the scroll animation is built on #GSAP, using the clip-path technique for a captivating image transition.
https://freefrontend.com/javascript-sliders/
https://codepen.io/haptichash/pen/XJbrvYa
A 3D matrix that reacts to the cursor! This demo showcases advanced use of #GSAP Draggable and pure math to calculate UV coordinates and cursor distance to each cell. Perfect for learning how to create highly interactive 3D effects without heavy frameworks.
https://freefrontend.com/draggable-js/
https://codepen.io/jh3y/pen/eYwPzQZ
September is over, but it is warmer than previous ones. You can find the last chapters of the month following the link:
https://www.ivanmoreno.art/portraits/sep/20/
or
https://www.ivanmoreno.art/portraits/sep/30/
#threejs #gsap #nodejs #netart #webdevelopment #interactiveart #stoicism #dailystoic
GSAP Listen Animation für deine Webseite (Webdesign Idee mit HTML, CSS und Javascript)
GSAP Vertikale Scroll Animation Idee für deine Webseite (HTML, CSS & Javascript)
