ویرا

استودیو ویرا — فناوری خلاق

ویرا

تجربه‌های تعاملی و هنری برای وب می‌سازیم — و موتوری که ساختنشان را ممکن می‌کند.

آبعلی، نخستین نمونه‌کارآشنایی با موتور

سایت‌ساز نیست

سایت‌ساز نیست.قالب نیست.موتوری است برای وب‌سایت‌هاییکه حرکت دارند.

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

موتور

هرچه حرکت می‌کند، روی یک حلقه.

هستهٔ ویرا موتوری است با تایپ‌اسکریپت و بدون هیچ وابستگی در زمان اجرا. هر نمونهٔ زیر، همین موتور است که در این صفحه کار می‌کند.

  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 منتشر شده. راهنما را بخوانید، نمونه‌ها را اجرا کنید و چیزی بسازید که حرکت دارد.

هستهٔ ویرا در گیت‌هابخواندنِ راهنما
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