با یه دستور، تمام کامپوننت‌های سایتت رو میتونی انیمیشنی کنی

نسخه Animate UI 2.0 رسماً منتشر شد؛ یه کتابخونه متن‌باز که می‌تونه طراحی سایت‌های React رو چند سطح حرفه‌ای‌تر کنه!

قابلیت‌های جدید:

انیمیشن آماده برای دکمه‌ها، منوها، دیالوگ‌ها و کامپوننت‌های UI
تبدیل کامپوننت‌های shadcn/ui به نسخه انیمیشنی با یک دستور
پشتیبانی از Radix UI، Base UI و React Aria
دارای AI Skill برای Claude Code، Cursor و Codex
امکان ساخت و بررسی انیمیشن‌ها با یه دستور متنی :

animate-ui.com


💎 @Htmlcss_channels  | #HTML #css #JavaScript

سایت SmoothUI مجموعه‌ای از کامپوننت‌های انیمیشنی برای React و Tailwind داره که می‌تونید باهاشون بدون دردسر زیاد، جلوه‌های جذابی به رابط کاربریتون اضافه کنید.

نمونه‌هاش رو ببینید؛ بعضی‌هاشون می‌تونن دقیقاً همون چیزی باشن که برای پروژه‌تون کم داشتید.

🔗 https://smoothui.dev/


💎 @Htmlcss_channels  | #HTML #css #JavaScript

👈 این ۱۵ سایت رو بشناس، سطح طراحی‌هات چند پله بالاتر می‌ره!

از طراحی سایت‌های مدرن و انیمیشن‌های خفن گرفته تا کامپوننت‌های آماده و ایده‌های UI/UX؛ این منابع می‌تونن ساعت‌ها توی وقتت صرفه‌جویی کنن!

🎨 ۱۵ منبع جذاب برای طراح‌ها و برنامه‌نویس‌ها:

https://modulify.ai/templates — قالب‌های آماده سایت
https://motionin.design — انیمیشن و موشن‌دیزاین
https://landdding.com — تکنیک‌های طراحی بصری
https://wonderlist.design — طرح‌های حرفه‌ای Figma
https://iconly.design — مجموعه آیکن‌های کاربردی
https://scrolltide.co — ایده‌های انیمیشن اسکرول
https://land-book.com — الهام طراحی سایت
https://godly.website — نمونه سایت‌های خلاقانه
https://supahero.io — ایده طراحی لندینگ‌پیج
https://footer.design — طراحی فوترهای جذاب
https://60fps.design — انیمیشن رابط کاربری موبایل
https://cta.gallery — ایده‌های دکمه و CTA
https://grainient.supply — گرادینت‌های متحرک
https://backgrounds.supply — پس‌زمینه‌های آماده
https://on.design — ابزار و فضای طراحی



💎 @Htmlcss_channels  | #HTML #css #JavaScript

این ابزار open source برای طراحی سایت، خروجی‌های تکراری AI رو کمتر می‌کنه؛ از فونت و رنگ تا چیدمان.
https://github.com/pbakaus/impeccable



💎 @Htmlcss_channels  | #HTML #css #JavaScript

آیکون‌ست رایگان برای طراح‌ها

🔹 Lucide — مینیمال
https://lucide.dev

🔹 Heroicons — ست Tailwind
https://heroicons.com

🔹 Phosphor — ۶ وزن مختلف
https://phosphoricons.com

🔹 Tabler — ۶۰۰۰+ آیکون
https://tabler.io/icons



💎 @Htmlcss_channels  | #HTML #css #JavaScript

🤯 یه خبر فوق‌العاده برای طراح‌ها! دیگه لازم نیست برای هر لوگو ساعت‌ها درگیر تبدیل عکس به وکتور بشی، مدل جدید Ideogram Vector اومده تا طراحی با هوش مصنوعی رو یه مرحله جلوتر ببره!

فقط توضیح می‌دی چه طرحی می‌خوای و به‌جای یه عکس معمولی، فایل SVG قابل ویرایش تحویل می‌گیری!

چه کارهایی می‌تونی باهاش انجام بدی؟

🔸 ساخت لوگو و آیکن با پرامپت
🔸 تبدیل عکس‌های PNG و JPG به وکتور
🔸 طراحی استیکر، لیبل و تایپوگرافی
🔸 تغییر رنگ و ویرایش اجزای طرح
🔸 بزرگ‌کردن طرح بدون افت کیفیت

ماجرا اینه که خروجی رو می‌تونی داخل Figma یا Illustrator باز کنی و روی جزئیاتش کار کنی!

این مدل حالا از طریق Blyth AI هم در دسترسه.
https://blyth.ai/image-generator?model=ideogram-text-to-vector

💎 @Htmlcss_channels  | #HTML #css #JavaScript

بعضی کتابخونه‌های UI واقعاً یه چیز دیگه‌ان؛ Lightswind یکی از اون‌هاست ✨

مجموعه‌ای از کامپوننت‌های خیلی خفن برای React و Next.js؛ از افکت‌های سه‌بعدی و بک‌گراندهای متحرک تا انیمیشن‌های تعاملی که همون نگاه اول توجه رو جلب می‌کنن.

حتماً دموهاش رو ببینید:
https://lightswind.com


💎 @Htmlcss_channels  | #HTML #css #JavaScript

📌 راهنمای بهینه‌سازی کارایی فرانت‌اند

اگر در حال ساخت سایت هستی، سه چیز مهم است: ریسپانسیو بودن، سرعت و کارایی — و راه‌های زیادی برای رسیدن به آن‌ها وجود دارد.

این آموزش به همین موضوع می پردازد
آنچه در این آموزش یاد میگیرید:
• رندر سمت سرور (SSR)
• استفاده از CDN
• کش (caching)
• فشرده‌سازی فایل‌ها
• بهینه‌سازی تصاویر
• و موارد بیشتر

🔗 https://www.freecodecamp.org/news/the-front-end-performance-optimization-handbook/


#WebDevelopment #Frontend #Coding

💎 @Htmlcss_channels  | #HTML #css #JavaScript

این ابزار یه جورایی مرز بین طراحی و ساخت UI رو برمی‌داره؛. به‌جای اینکه فقط با کد یا ابزارهای معمول طراحی کار کنی، خود رابط رو روی Canvas می‌سازی و باهاش تعامل می‌کنی.

https://canvasui.dev/


💎 @Htmlcss_channels  | #HTML #css #JavaScript

📌 معرفی ابزار LinkSwift

یه ابزار جاوااسکریپت که لینک دانلود مستقیم فایل‌ها رو از هشت سرویس ابری چینی درمیاره — از جمله Baidu Netdisk، Aliyun Drive و Quark.


🔗 https://github.com/hmjz100/LinkSwift

سرویس‌های ابری چینی (مثل بیدو نت‌دیسک) معمولاً به‌جای لینک مستقیم، صفحهٔ دانلود با کلیک‌سی‌جی و رمز می‌دن. این پروژه اون رمز رو خودش رد می‌کنه و لینک دانلود مستقیم و سریع رو تحویل می‌ده — بدون نیاز به نصب افزونه یا کپی‌کردن دستی توکن.

کاربردش: دانلود فایل از این سرویس‌ها رو خودکار و تمیز می‌کنه، مخصوصاً برای فایل‌های بزرگ.

#هوش_مصنوعی #جاوااسکریپت

💎 @Htmlcss_channels  | #HTML #css #JavaScript

یه ایده تو ذهنته، ولی نمی‌دونی کارش رو به کی بسپری؟

🚀 همه چی خدمات
از طراحی سایت و ربات تلگرام تا نرم‌افزار، سرور و ویدیو، کارت رو از ایده تا تحویل شفاف جلو می‌بریم.

🤝 پرداخت مرحله‌ای؛ اگه وسط کار منصرف شدی، بقیه‌ی پولت برمی‌گرده.

👇 عضو شو و ایده‌ت رو بگو
@Hamechi_Khadamat