فيرا

استوديو فيرا — تقنية إبداعية

فيرا

نصنع تجارب ويب غامرة بتوجيه فني — ونصنع المحرّك الذي يجعلها ممكنة.

آبعلي، أول أعمالناتعرّف إلى المحرّك

ليس منشئ مواقع

ليس منشئ مواقع.وليس قالبًا.بل محرّك لمواقعتتحرّك.

يتولّى فيرا الأجزاء الصعبة والقابلة لإعادة الاستخدام في التطوير الإبداعي — الزمن والحركة والتمرير والحروف والضوء — ويترك التوجيه الفني كاملًا للمشروع نفسه.

المحرّك

كل ما يتحرّك، على حلقة واحدة.

نواة فيرا محرّك مكتوب بلغة TypeScript بلا أي اعتماديات وقت التشغيل. كل عرض أدناه هو المحرّك نفسه يعمل في هذه الصفحة.

  1. ٠١

    حلقة إطارات واحدة

    الإدخال والتمرير والتخطيط والحركة والعرض تجري في مراحل مرتّبة داخل requestAnimationFrame واحد. تتوقّف حين تغادر الصفحة، وتصمد إن تعطّل أحد المؤثرات.

  2. ٠٢

    حركة بقوانين الفيزياء

    خطوط زمنية يمكن التنقّل فيها لتصميم الحركة، ونوابض تحليلية تبقى دقيقة على ٣٠ هرتز أو ٢٤٠ هرتز.

  3. ٠٣

    التمرير كقصّة

    التمرير الأصلي للمتصفّح، أكثر نعومة — العناصر اللاصقة ولوحة المفاتيح والبحث في الصفحة وقارئات الشاشة كلها تظلّ تعمل. والمشاهد تحوّل الموضع إلى تقدّم.

  4. ٠٤

    كل خطّ، كل اتجاه

    حرّك العربية حرفًا حرفًا وتبقى الحروف متّصلة. والنص الذي يمزج العربية بالإنجليزية يحافظ على ترتيبه.

  5. ٠٥

    متكيّف من الأساس

    يقيس المحرّك أزمنة الإطارات الفعلية ويضبط الجودة وكثافة البكسلات بحسب الجهاز الذي بين يديك.

  6. ٠٦

    WebGL حيث يلزم

    طبقة اختيارية لـ three.js على الحلقة نفسها: كاميرا بمقياس البكسل، وأجسام مثبّتة على تخطيط الصفحة، ونصوص HTML حقيقية تُنسخ إلى خامات.

    افتح التجربة

جديد الإصدار ٠٫٢

  1. ٠١horizontal()

    طرق أكثر للحركة.

    كل لوح في هذا الصف هو الإصدار الجديد قيد العمل — والصف نفسه كذلك: مرّر إلى الأسفل فيتحرّك جانبيًا.

    في الصفحتين العربية والفارسية يتّجه الصف نحو اليمين لتصل الألواح بترتيب القراءة، من اليمين إلى اليسار؛ وفي الإنجليزية والتركية بالعكس.

  2. ٠٢kashida()

    ٠

    الكشيدة، مدّ الخطّاط

    تمتدّ الكلمات حيث يمدّها الخطّاط: بعد السين والشين أولًا، ثم على آخر اتصال — لا داخل «لا» أبدًا، ولا عبر محرف منع الوصل.

  3. ٠٣draggable()
    ٠١رمي
    ٠٢التقاط
    ٠٣مقاومة
    ٠٤استقرار
    ٠٥خطوة
    ٠٦سكون

    ارمِها

    قصور ذاتي، وحوافّ تقاوم، ونقاط استقرار تحافظ على سرعة الرمية. ومفاتيح الأسهم تنقل بطاقة واحدة في كل مرة.

  4. ٠٤flip()

    تخطيطات تسافر

    غيّر التخطيط كما تشاء؛ ينزلق كل عنصر من حيث كان إلى حيث يستقرّ.

  5. ٠٥magnetic() · tilt()
    شاهد الشيفرة

    أشياء تميل نحوك

    أزرار مغناطيسية وبطاقات تميل، على نوابض. تتوقّف على الشاشات اللمسية وفي وضع تقليل الحركة.

  6. ٠٦scrambleText()

    فكّ الرموز

    يخرج النص من ضجيج حروف خطّه ثم يستقرّ: العربية ترتعش بحروف عربية وتبقى متّصلة.

  7. ٠٧@veyra/core/glsl

    ضجيج وضوء

    ضجيج قابل للتكرار من بذرة لحركة عضوية، ولبنات GLSL جاهزة — ضجيج وحقول مسافة وألوان OKLab — لمظلِّلات مثل هذا.

الأعمال

العمل ٠٠١

آبعلي

«خنکی صدا دارد.» — للانتعاش صوت.

تصوّر لحملة فارسية من اليمين إلى اليسار لـ«دوغ آبعلي»، مشروب اللبن الغازي في زجاجة. للانتعاش صوت — وفتح زجاجة آبعلي باردة حفنة من الأصوات: الفتّاحة وهي تنتزع الغطاء المعدني، والغاز وهو يفلت، والرشفات الأولى، وتنهيدة الارتياح. يمدّ الفيلم هذه الأصوات على امتداد التمرير: زجاجة أُعيد بناؤها من صور الزجاجة الحقيقية، وغطاء يقفز ويرتطم بالأرض، ورغوة تفيض فتصير ثلجًا على الجبال المحيطة بآبعلي، وسفرة تمتلئ طبقًا بعد طبق.

اللغة
الفارسية، من اليمين إلى اليسار
بُني بـ
نواة فيرا و three.js
الصور
كلها تُولَّد حيًّا — بلا صور فوتوغرافية ولا ملفات نماذج
الصوت
مُركَّب بالشيفرة، يعمل من البداية
افتح التجربةالشيفرة المصدرية

تصوّر مستقل وغير رسمي، لا صلة له بالشركة المصنّعة لـ«دوغ آبعلي».

العمل ٠٠٢

ديوركس

“Annoying, isn’t it?” — مزعج، أليس كذلك؟

تصوّر لحملة إنجليزية لـ«ديوركس إنفيزيبل» في انعدام الجاذبية. يبدأ ببكاء رضيع، ثم تأتي النكتة. أكياس من الرقائق المعدنية تطفو ويصطدم بعضها ببعض؛ يُفتح أحدها فتنفرد الحلقة غشاءً رقيقًا لامعًا تنفخه كالبالون — المعيار الدولي ١٨ لترًا، وتقول ديوركس إن الواقي العادي يحتمل نحو ٤٠ لترًا. أفلِته فيدور في الصفحة، يخرج من طرف ويعود من الآخر مرتدًّا عن العناوين؛ أو اربطه فيرافقك إلى اختبار الماء وسماءٍ ملأى بالبالونات.

اللغة
الإنجليزية، من اليسار إلى اليمين
بُني بـ
نواة فيرا و three.js، بلا صور فوتوغرافية ولا ملفات نماذج
الفيزياء
أكياس تتصادم، وبالون يرتدّ عن عناوين الصفحة نفسها
الصوت
تسجيلات طبيعية، يستأذن قبل أن يُسمعك شيئًا
افتح التجربةالشيفرة المصدرية

تصوّر مستقل وغير رسمي، لم تطلبه Reckitt ولا ديوركس، ولا صلة له بهما.

الاستوديو

استوديو، ومحرّك، والعمل الذي بينهما.

  1. ٠١

    الاستوديو

    يصنع تجارب للعلامات التجارية والحكايات — حملات، وإطلاقات منتجات، وعوالم يمكن التمرير عبرها.

  2. ٠٢

    المحرّك

    هو ما يبقى. يعيد كل مشروع أفضل أفكاره إلى نواة فيرا، علنًا وبمصدر مفتوح.

  3. ٠٣

    الأعمال

    هي البرهان: أعمال علنية تأخذ المحرّك إلى حيث لم يذهب من قبل.

كيف نبني

مفتوح المصدر

ابدأ بمسرح.

نواة فيرا مرخّصة بموجب MIT. اقرأ الدليل، وشغّل الأمثلة، وابنِ شيئًا يتحرّك.

نواة فيرا على GitHubاقرأ الدليل
import {
  createStage,
  horizontal,
  scenePresets,
  splitText,
} from '@veyra/core'

const stage = createStage()        // one loop, smooth native scroll
const title = splitText('h1', { type: 'chars' })

stage.scene('#story', {
  ...scenePresets.pinned,          // pinned with CSS sticky
  timeline: stage.timeline().fromTo(
    title.chars,
    { y: '1em', opacity: 0 },
    { y: '0em', opacity: 1 },
    { stagger: 0.03 },
  ),
})

// Sideways, in reading order (rightward in Persian)
stage.use(horizontal('#gallery', { snap: true }))

اطلب مشروعك

لديك ما تُطلقه؟ لنجعله يتحرّك.

نصمّم تجارب ويب بتوجيه فني ونبنيها على فيرا: مواقع الحملات، وإطلاق المنتجات، وحكايات تُروى بالتمرير — بالعربية أو الفارسية أو الإنجليزية أو التركية. أخبرنا بما تصنعه.

  • مواقع الحملات
  • إطلاق المنتجات
  • حكايات تُروى بالتمرير
  • العربية والفارسية تُصمَّمان، لا تُعكَسان
راسلنا علىitsmetti@proton.me