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

پرامپت :

Build a "Number Counter" interaction (شمارندهٔ عددی). Digit bumps and overshoots on every increment. Motion spec: spring(280, 18). Prefer a real spring (or the closest cubic-bezier) so it stays interruptible and settles without jitter. Animate only transform and opacity, keep it keyboard accessible, and honour prefers-reduced-motion. Return plain HTML, CSS and vanilla JS with no dependencies.

صفحه کامپوننت های کد کلاد :
codecloude.ir/cc_ui_lab

💬💬📷 Codecloude.ir | تلگــرام 🍃🧡

🔥یه ابزار خیلی تمیز برای دانلود محتوا از سایت‌های مختلف ( یوتیوب ، اینستا ، تیک تاک ، ایکس و … )

لینک ویدیو یا محتوا رو از سایت‌هایی مثل YouTube، TikTok، Instagram یا Reddit بهش میدی و فایل رو مستقیم تحویل می‌گیری؛ بدون تبلیغ، Tracker یا صفحه‌های عجیب‌وغریب. خود پروژه هم متن‌بازه و سورسش روی GitHub منتشر شده.

نکته خوبش اینه که فقط یه سایت دانلود نیست؛ API و مستندات Self-host هم داره، یعنی اگه بخوای می‌تونی نسخه خودت رو هم روی سرور بالا بیاری.

سایت: ‏https://cobalt.tools
‏GitHub: ‏https://github.com/imputnet/cobalt


💬💬📷 Codecloude.ir | تلگــرام 🍃🧡

⚠️🔥یه روز دیگه و یه معرفی داغ دیگه ✌🏻🙂‍↔️ جایگزین متن‌باز برای CapCut هم اومد

یه ویرایشگر ویدیوی رایگان و متن‌باز برای وب، دسکتاپ و موبایل که الان حدود ۹۱ هزار ستاره روی GitHub گرفته.

چیزی که OpenCut رو جالب می‌کنه اینه که تیمش فقط دنبال ساخت یه Video Editor ساده نیست؛ نسخه جدید رو از صفر با معماری جدید دارن بازنویسی می‌کنن و توی Roadmapش چیزایی مثل اینا هست:

• تایم‌لاین و ویرایش چندلایه
• معماری Plugin-first
• یک کدبیس مشترک برای وب، دسکتاپ و موبایل
• MCP Server برای Agentهای هوش مصنوعی
• Headless Mode برای اتوماسیون و Batch Rendering
• Scripting مستقیم داخل Editor
• Editor API برای توسعه ابزارهای اختصاصی

فعلاً یه نکته مهم داره:

نسخه جدید هنوز در حال بازنویسیه و خود تیم میگه برای استفاده روزمره، نسخه Classic فعلاً انتخاب آماده‌تریه. نسخه جدید هم روی new.opencut.app توسعه داده میشه تا بعداً جای نسخه فعلی رو بگیره.

از اون طرف پروژه با MIT License منتشر شده؛ یعنی برای توسعه، شخصی‌سازی و ساخت ابزارهای اختصاصی روی اون دستت خیلی بازه.

سایت:
https://opencut.app

نسخه جدید:
https://new.opencut.app

گیت‌هاب:
https://github.com/OpenCut-app/OpenCut

💬💬📷 Codecloude.ir | تلگــرام 🍃🧡

⚠️دیپسیک هم وارد بازی شد ✌🏻🙂‍↔️

دیپسیک محیط Agentic متن‌بازش رو معرفی کرد که می‌تونه برای کارهای روزمره، کدنویسی، تحقیق، تحلیل فایل‌ها و ساخت Workflowهای اختصاصی استفاده بشه. خود DeepSeek هم Harness رو در Public Preview جهانی منتشر کرده و سورسش روی GitHub در دسترسه.

الان نسخه Desktop برای macOS و Windows منتشر شده و کاربران Linux هم می‌تونن از پکیج npm اجراش کنن.

برای اجرای نسخه وب هم کافیه Node.js داشته باشی و بزنی:

npx 
@deepseek
-ai/dsh web

بعد رابط وب به‌صورت پیش‌فرض روی:

http://127.0.0.1:3080

بالا میاد.

⚠️ فقط یه نکته مهم: پروژه هنوز در مرحله Developer/Public Previewـه و خود تیم گفته ممکنه تغییرات Breaking داشته باشه، پس فعلاً برای پروژه‌های حساس بهتره با احتیاط تستش کنید.

سایت رسمی:
deepseek.com/harness

گیت‌هاب:
github.com/deepseek-ai/de
epseek-harness

💬💬📷 Codecloude.ir | تلگــرام 🍃🧡

اگر طراح سایتید و دنبال هیرو های پریمیوم میگردید این سایت داستانه شماس 🧑🏻‍🩰 ولی خب این یکی رایگان نیست ( ساخت هیرو هم با Sonnet 5.5 و Astra 6.1 حدود ۱ دقیقه زمان میبره )

سایت : sceneai.art ( قبلا هم معرفیش کرده بودم و الان اپدیت شده )

💬💬📷 Codecloude.ir | تلگــرام 🍃🧡

ابزاری که فقط کافیه Repo پروژه‌ رو بهش بدی؛ خودش رنگ‌ها، فونت‌ها، لوگو و اسکرین‌شات‌ها رو برمیداره و برات ویدیوی معرفی می‌سازه

با Claude Code وصل میشه؛ بعد هم می‌تونی با زبان طبیعی همون ویدیو رو ادیت کنی، بدون اینکه درگیر تایم‌لاین‌های شلوغ بشی

لینک آموزش :
https://x.com/codecloude/status/2106290427179700715?s=20

💬💬📷 Codecloude.ir | تلگــرام 🍃🧡

اگه می‌خوای UI پروژه‌ت خیلی گرون‌تر از چیزی که واقعاً هزینه کردی به نظر بیاد، این ۶ تا رو ذخیره کن

Toolcraft : toolcraft.sh
PinUI : pinui.xyz
Solace Ui : solaceui.com
EasyUI : easyui.site
Pace UI : paceui.com
Feral Ui : feralui.dev

خیلی از این کامپوننت‌ها و استایل‌ها رو می‌تونی مستقیم بندازی جلوی Claude Code، Cursor یا Codex و بگی مشابهش رو داخل پروژه‌ت پیاده کنه

ابزارهای UI، منابع طراحی و چیزای کاربردی‌تر رو تو کانال تلگرام کد کلاد می‌ذارم 👇

💬💬📷 Codecloude.ir | تلگــرام 🍃🧡

یه هیرو خفن برای کسانی که سایت فروش لباس دارن ( این هیرو ایده اش روی سایت Malimao پیاده شده )

1.میله و لباس‌ها: عکس هر لباس باید PNG یا WebP با پس‌زمینه شفاف باشه (حذف بک‌گراند). میله هم یه خط ساده با CSS یا SVG هست و لباس‌ها با flex کنار هم روی اون چیده می‌شن.

2.هاور: با transform: translateY(-10px) scale(1.15) و transition نرم، لباس زیر موس بزرگ‌تر میشه. اسم محصول هم پایین عوض میشه. اگه حس آویزون‌بودن می‌خوای، transform-origin: top center بذار و یه انیمیشن چرخش کوچیک (rotate(±3deg)) اضافه کن. برای حرکت فنری‌تر می‌تونی از GSAP یا Framer Motion استفاده کنی.

3.کلیک و Quick View: یه مودال تمام‌صفحه باز میشه که پشتش backdrop-filter: blur(20px) داره (لباس‌های بقیه محو دیده می‌شن). داخلش لباس بزرگ، اسم، و دکمه‌های «جلو/پشت» هست که فقط بین دو عکس سوئیچ می‌کنن. برای انتقال نرم از حالت کوچیک به بزرگ، layoutId در Framer Motion یا GSAP Flip عالیه.

4.مارکی پایین: یه نوار نارنجی با متن در حال حرکت بی‌نهایت (
@keyframes
با translateX(-50%) روی محتوای دو‌بار تکرارشده).

5.صفحه محصول: بعد از «Add to cart» یا کلیک روی محصول، به صفحه معمولی ووکامرس/محصول میره

ابزارهای UI، منابع طراحی و چیزای کاربردی‌تر رو تو کانال تلگرام کد کلاد می‌ذارم 👇

💬💬📷 Codecloude.ir | تلگــرام 🍃🧡

این پرامپت نهایی نیست و برای اینکه خروجی شبیه به نمونه ویدیویی بشه باید لباس ها در ابعاد با کیفیت و بدون پس زمینه ( Transparent ) باشه و بر اساس سایت خودتون باید کد رو ویرایش نمایید

💬💬📷 Codecloude.ir | تلگــرام 🍃🧡

8 تا سایتی که خیلی میتونه توی طراحی سایت یا اپ بهتون کمک کنه :

• ساخت گرادیانت حرفه‌ای
gradienttool.com
• آزمایشگاه گرادیانت و بک‌گراند
backgrounds.supply/gradient-lab
• ساخت انیمیشن‌های آماده
animos.app/editor
• ساخت Cutting Mat و پترن‌های شبکه‌ای
cutting-mat-generator.vercel.app
• بازی با تایپوگرافی و فاصله حروف
spacetypegenerator.com
• ساخت Shapeهای خاص و متفاوت
bookofshapes.com
• پترن‌های آماده برای بک‌گراند و UI
tabbied.com/patterns
• ساخت Dot Pattern و تکسچر نقطه‌ای
dotforge.vercel.app

اینارو بیشتر برای وقتایی نگه دارید که حس می‌کنید طرحتون زیادی تمیز، امن و قابل‌پیش‌بینی شده؛ خیلی وقت‌ها فقط یه Texture، Shape یا Gradient درست می‌تونه کل حس کار رو عوض کنه.

💬💬📷 Codecloude.ir | تلگــرام 🍃🧡

حالا AI Agent شما می‌تونه تقریباً کل اینترنت رو بخونه، بدون اینکه هزینه API بدید.

* نیازی به API پولی نداره.
* Login و Cookieها روی سیستم خودت باقی می‌مونن.
* اگر یک روش دسترسی بلاک بشه، خودش سراغ روش جایگزین میره.
* نصبش ظاهراً خیلی ساده‌ست و با دادن یک لینک/دستور به Agent انجام میشه

پروژه در گیت هاب :
github.com/Panniantong/Ag
ent-Reach

آموزش ها و پرامپت ها و ترفند های هوش مصنوعی در کانال ما 👇🏻:

💬💬📷 Codecloude.ir | تلگــرام 🍃🧡

این ویدیوی هوش مصنوعی واقعاً یه شاهکاره 🔥
با Seedance 2.5 ساخته شده.
پرامپت: ⬇️

آموزش ها و پرامپت ها و ترفند های هوش مصنوعی در کانال ما 👇🏻:

💬💬📷 Codecloude.ir | تلگــرام 🍃🧡

آموزش ها و پرامپت ها و ترفند های هوش مصنوعی در کانال ما 👇🏻:

💬💬📷 Codecloude.ir | تلگــرام 🍃🧡

✅سایت OnePrompt ؛ یه مجموعه بزرگ از پرامپت‌های آماده برای ساخت محتوای بصری با AI داره،

مثل: تصاویر و ویژوال‌های حرفه‌ای
موکاپ تبلیغات
تصویرسازی بک‌گراند
ایده‌های طراحی

آدرس سایت : http://onepromptdesign.com

💬💬📷 Codecloude.ir | تلگــرام 🍃🧡

M3E Canvas یه ابزار رایگان و Open Source که داخل مرورگر صفحه‌های Material 3 رو می‌سازی، به هم وصلشون می‌کنی، Flow رو تست می‌کنی و آخرش خودش یه Prompt آماده می‌ده که می‌تونی مستقیم بدی به Claude Code، Codex، Gemini CLI یا Cursor تا برات پیاده‌سازی کنه.

GitHub:
github.com/lnkiai/m3e-canvas

Demo:
lnkiai.github.io/m3e-canvas

💬💬📷 Codecloude.ir | تلگــرام 🍃🧡

یه Cheat Sheet خیلی کاربردی برای توضیح انیمیشن‌های اسکرول به Claude / Codex

Scroll-triggered → وقتی به یک نقطه از صفحه می‌رسی، انیمیشن اجرا بشه.

Scroll-linked → پیشرفت انیمیشن مستقیم به مقدار اسکرول وصل باشه.

Parallax → لایه‌ها با سرعت‌های مختلف حرکت کنن و حس عمق بدن.

Sticky → یک بخش هنگام اسکرول برای مدتی ثابت بمونه.

Scroll Snap → اسکرول روی هر سکشن یا آیتم قفل بشه.

Horizontal Scroll → اسکرول عمودی باعث حرکت افقی محتوا بشه.

💬💬📷 Codecloude.ir | تلگــرام 🍃🧡

۳۰ منبع برای ایده گرفتن در طراحی سایت/UI

scrolltide.co — مجموعه پرامپت‌های کامل برای ساخت سایت؛ ادعا می‌کنه 600+ پرامپت آماده + سورس قابل ویرایش داره و با Claude Code/Cursor/v0 کار می‌کنه.

minimal.gallery — سایت‌های مینیمال و High-end.

godly.website — نمونه سایت‌های خیلی خاص و خلاقانه.

awwwards.com — سایت‌های برنده جوایز طراحی.

landing.love — لندینگ‌پیج‌هایی با انیمیشن خوب.

land-book.com — گالری لندینگ‌پیج.

styles.refero.design — بیش از 2000 استایل واقعی محصول، تایپوگرافی و UI.

component.gallery — نمونه کامپوننت از Design Systemهای معروف.

navbar.gallery — ایده برای Navbar/Header.
footer.design — ایده Footer.

cta.gallery — CTA، فرم، Popup و Buttonهایی که برای Conversion طراحی شدن.

supahero.io — مجموعه Hero Section.

pricingpages.design — نمونه Pricing Page.

404s.design — ایده برای صفحه 404.

appshot.gallery — اسکرین‌شات واقعی اپ‌های موبایل.

ui.shadcn.com — کامپوننت‌های معروف Shadcn.

ui.aceternity.com — بیش از 200 کامپوننت انیمیشنی React/Tailwind.

magicui.design — 150+ کامپوننت و افکت انیمیشنی

motion-primitives.com — Interaction و Motionهای پیشرفته.

21st.dev — مارکت کامپوننت که حتی می‌تونه از طریق MCP به Agent وصل بشه.

uiable.com — کامپوننت‌های بیشتر برای اکوسیستم Shadcn.

uiverse.io — UI Componentهای Open Source.

kinetics.colorion.co — بیش از 150 Motion Effect همراه React Code و Prompt.

text-effects.colorion.co — افکت‌های متنی CSS.

glass.samasante.com — کامپوننت‌های Glass / Refraction.

animejs.com — کتابخانه سبک برای Animation در وب.

threejs.org — معروف‌ترین ابزار 3D برای Web.

designmd.ai — Design Systemهایی که به Markdown تبدیل شدن تا AI Agent بتونه بخونتشون.

vibeprompts.dev — پرامپت‌های آماده برای Dashboard و Landing Page.

kage.design — نمونه UI واقعی که به Prompt تبدیل شده.

💬💬📷 Codecloude.ir | تلگــرام 🍃🧡

کنترل کامپیوتر با هوش مصنوعی، با مصرف ۸۵٪ توکن کمتر!

پروژه متن‌باز Zero Use Computer به ایجنت‌های هوش مصنوعی اجازه می‌ده مستقیماً با دسکتاپ کار کنن؛ بدون اسکرین‌شات‌های مداوم!

🧠 چطور کار می‌کنه؟

به‌جای تحلیل مداوم تصاویر، ساختار دسترس‌پذیری برنامه رو می‌خونه؛ یعنی اطلاعات دکمه‌ها، منوها و عناصر رابط کاربری رو استخراج می‌کنه. در صورت نیاز هم اسکرین‌شات می‌گیره.

📊 نتایج یک آزمایش:
• توکن: 6,800 → 46,000
• اسکرین‌شات: 2 → 27
• زمان خواندن صفحه: 5,6 → 17 میلی‌ثانیه
• زمان اجرا: 5,2 → 5,7 ثانیه

⚙️ ویژگی‌ها:

- نوشته‌شده با Rust، حجم حدود ۱۲ مگابایت
- سازگار با Claude Code، Codex و Cursor از طریق MCP
- پشتیبانی از ویندوز، لینوکس و مک
- توقف اضطراری و جلوگیری از کلیک تکراری
- رایگان و متن‌باز با مجوز Apache 2.0

📌 این نتایج مربوط به یک آزمایش مشخصه. تست‌های لینوکس موفق بودن؛ ویندوز و مک هنوز نیاز به تست واقعی دارن.

🔗 گیت‌هاب:
https://github.com/mhrsdev/zero-use-computer

💬💬📷 Codecloude.ir | تلگــرام 🍃🧡

🔥یکم خلاقیت و توجه باعث میشه شما بتونید یه همچین انیمیشنی بسازید

نمونه با ترکیب GPT Image 2.5 + Seedance 2.5 ساخته شده؛ از طراحی کاراکتر تا یک سکانس ۳۰ ثانیه‌ای با شات‌بندی، حرکت دوربین، فیزیک، صدا و داستان. پرامپت کامل هر دو مرحله رو هم براتون آماده کردم

این انیمیشن با سایت https://vidfield.ai/dashboard ساخته شده

💬💬📷 Codecloude.ir | تلگــرام 🍃🧡

💬💬📷 Codecloude.ir | تلگــرام 🍃🧡