codecloude.ir
// SPRING-DRIVEN UI LAB

حرکتی که وزن دارد.

کتابخانهٔ زندهٔ کامپوننت برای فروشگاه آنلاینداشبورد مدیریتیصفحهٔ فروداپلیکیشن موبایلسایت شرکتیپنل کاربری

این صفحه دربارهٔ چیست؟

این صفحه یک آزمایشگاه رابط کاربری است: ۳۷۷ کامپوننت و میکروانیمیشن با فیزیک فنر، از دکمه و فرم و نمودار تا داشبورد، قالب‌های ویترین سه‌بعدی و بلوک‌های کامل صفحه. هر کدام را همین‌جا امتحان می‌کنی، کد خام HTML · CSS · JS و یک پرامپت آمادهٔ هوش مصنوعی‌اش را برمی‌داری و در سایت یا اپ خودت می‌گذاری.

  1. ۱امتحان کن
  2. ۲کد را کپی کن
  3. ۳پرامپت بگیر
۳۷۷کامپوننت
۱۳دسته
بدونوابستگی
RTLسازگار

تعامل و ورودی

دکمه‌ها، کشیدن، فرم‌ها و کنترل‌هایی که زیر دست و انگشت وزن دارند.

51 / 204

بازخورد و وضعیت

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

51 / 204

سطح و حرکت

نور، عمق، شیشه و ماده؛ سطح‌هایی که زنده به نظر می‌رسند.

51 / 204

نمودارها

خط، میله، دونات و ده‌ها نمودار دیگر که داده را با حرکتِ فنری نشان می‌دهند.

19 / 204

بلوک‌های کامل

صفحه‌ها و کارت‌های آماده؛ گلوب، سانکی، تایم‌دایال، کالندر و ... همه با فیزیک فنر و داده‌ی زنده.

14 / 204

دکمه و ناوبری

دکمه‌ها، منوها، تب‌ها، پاپ‌اور و شیت؛ همه با فنر، فوکوس درست و حالت‌های کامل.

18 / 237

میکرو‌تعامل‌های تازه

کشیدن، هاور، لمس و فشار؛ جزئیات کوچکی که به رابط جان می‌دهند: امضا، رفرش، جزیرهٔ پویا، آپلود و بیشتر.

0 / 237

فرم و ورودی‌های تخصصی جدید

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

0 / 377

منو، پوشش و لایه جدید

منوی کاربر، دیالوگ، دراور، شیت، کارت هاور و ناوبرهایی که شکلشان را عوض می‌کنند.

0 / 377

داده و محتوا جدید

جدول، درخت، JSON، کد، تایم‌لاین، کاروسل و کارت‌هایی که داده را زنده نشان می‌دهند.

0 / 377

افکت متن جدید

نمایش، تبدیل و درخشش متن؛ از ماسک و اسلات تا ترمینال تایپی.

0 / 377

بلوک‌های صفحه و داشبورد جدید

داشبورد شاخص‌ها، فرم ثبت‌نام، قیمت‌گذاری، سبد خرید، هدر، FAQ و بلوک‌های کامل صفحه.

0 / 377

قالب‌های ویترین سه‌بعدی جدید

۶۴ قالب ویترین تصویر با لایهٔ سه‌بعدی: کره، تونل، حلقه، کاور فلو، شبکه، ایزومتریک، پاک‌کن و پشته؛ بکشید تا خودتان بچرخانید.

0 / 377
چیزی پیدا نشدعبارت دیگری را امتحان کن یا فیلترها را از سمت منو پاک کن.
// HOW IT WORKS

دو عدد،
نه یک مدت‌زمان.

easing معمولی فقط می‌گوید «در ۳۰۰ میلی‌ثانیه برو آن‌طرف». فنر می‌گوید «با این سختی و این میرایی حرکت کن». اگر وسط راه کاربر نظرش را عوض کند، فنر از همان سرعت فعلی ادامه می‌دهد و پرش نمی‌بینی. در CSS خالص هم این حس را با cubic-bezier نزدیک می‌کنیم.

F = −k·(x − target) − c·v
stiffness (k) سرعت کشش به مقصد
damping (c) چقدر نوسان بماند
mass (m) سنگینی جسم
ζ = c / (2·√(k·m))
ζ 0.67overshoot 0%settle 0.3sunderdamped
// ABOUT THIS LIBRARY

ساخته‌شده برای کپی‌پیست.

هر تعامل مستقل است؛ نه وابستگی سنگین دارد، نه فریم‌ورک خاصی لازم است. فقط transform و opacity را حرکت می‌دهیم تا روی GPU بماند و چیدمان صفحه به هم نریزد.

01 · CODE

HTML + CSS + JS آماده

روی دکمهٔ </> هر کارت بزن؛ کد در پاپ‌آپ باز می‌شود و با یک کلیک کپی می‌شود.

02 · PROMPT

پرامپت برای Vibe Coding

به‌جای «قشنگش کن»، اسم تکنیک و پارامتر فنر را به ایجنت بده تا همان حس را بسازد.

03 · ACCESSIBLE

احترام به کاهش حرکت

اگر دستگاه روی «کاهش حرکت» باشد، انیمیشن‌ها خودکار آرام می‌شوند و کنترل‌ها با کیبورد هم قابل‌استفاده‌اند.