عشرة مواقع، عشرة اتجاهات عشرة مواقع، عشرة اتجاهات

كيف صُنعت

• بلا خطوة بناء

  كل واحد من العشرة ثلاثة ملفات: index.html وstyles.css وscript.js. لا مُجمِّع حزم، ولا مُحوِّل، ولا node_modules.

  • HTML
  • CSS
  • Vanilla JS
• الرموز أولًا

  هوية كل موقع تسكن في كتلة :root — اللون والخط ونصف القطر والتخفيف. غيّر ثماني قيم يتبدّل مزاج الصفحة كلها.

  • Custom properties
  • clamp()
  • Fluid type
• حركة لها مكابح

  العشرة كلها تضع حركتها خلف prefers-reduced-motion، وعدد منها خلف (pointer: fine) أيضًا. الحركة تحسين، وليست المحتوى أبدًا.

  • matchMedia
  • IntersectionObserver
  • rAF
• إتاحة عن قصد

  كل طبقة علوية تأخذ التركيز وتمسك به وتعيده عند Escape — وكل أكورديون لا يفعل ذلك عن عمد. عشرة نماذج، وعشر مناطق حيّة، وفحص axe-core نظيف عبر المواقع العشرة.

  • ARIA
  • إدارة التركيز
  • لوحة المفاتيح
• واجهات مرسومة يدويًا

  لوحة تحكّم Signalform وحلقات تقدّم Brightloop ولغة NEONFRAME البصرية بأكملها كلها SVG مضمّن وCSS. ثلاثة من العشرة تخرج من دون أي صورة فوتوغرافية.

  • Inline SVG
  • pathLength
  • clip-path
• عشرة أصوات، لا صوت واحد

  طباعة تحريرية، وفخامة عريقة، وهدوء إسكندنافي، وبساطة جذرية، ووحشية جديدة، وسينمائي، ونباتي، ودقة داكنة، وسايبربانك، وإشراق متفائل.

  • توجيه فني
  • مزاوجة الخطوط
  • لوحة الألوان