مواد پر جائیں

This Is Strange · Entertainment

Generative art at 60fps on a three-year-old phone

An immersive storytelling platform where every visitor gets a unique, shareable, deterministic artwork — and where the whole thing still holds 60fps on hardware that has no business running it.

2M+page views in six months

ایک نظر میں

مدت
22 ہفتے
ٹیم کا حجم
3 افراد
معاہدے کی نوعیت
نئی تعمیر
پروجیکٹ کی قسم
ویب ایپلیکیشن
شعبہ
میڈیا اور تفریح

کن چیزوں سے بنا

صورتحال

مسئلہ

Generative complexity in a browser is easy to make beautiful on a workstation and impossible to ship. This had to hold 60fps from high-end laptops down to older Android handsets on 3G, while still giving each visitor something visually unique enough to be worth sharing.

ہم نے کیا کیا

Determinism first — the same session always produces the same artwork, which is what makes sharing possible at all — then quality scaling underneath it so the same scene degrades rather than breaks.

وہ فیصلے جو اہم تھے

  • Seeded noise, so sharing actually works

    Simplex noise seeded by session ID: identical input, identical output, every time. Without determinism a 'share your artwork' link shows the recipient something different, which quietly destroys the mechanic.

  • Adaptive quality with a CSS floor

    Particle counts and shader complexity scale to device capability, and unsupported devices fall through to CSS-only rendering rather than a blank canvas. Zero WebGL crashes in production came from assuming failure at the bottom of the range.

  • State in the URL, under 1KB

    Story choices and generative parameters compress into the URL hash, so sharing needs no server round trip at all. Longer states fall back to server storage behind a short code.

کیا بدلا

page views
2M+page views
organic social shares
50K+organic social shares
average session
4.2 minaverage session
LCP
1.2sLCP
  • 2M+ — first six months
  • 1.2s — with CLS 0 and FID 8ms

2M+ page views and 50K+ organic shares in six months, 4.2-minute average sessions, Core Web Vitals of LCP 1.2s / CLS 0 / FID 8ms, and no WebGL crashes in production.

استعمال شدہ خدمات

  • Three.js generative engine with seeded determinism
  • Adaptive quality scaling and CSS-only fallback path
  • GSAP timeline system driven by JSON narrative data
  • URL-compressed share state with CDN delivery

ہم کیا مختلف کرتے

ہر منصوبے میں ایسی ایک بات ہوتی ہے۔ اسے شائع کرنا ہی اصل نکتہ ہے — جس کیس اسٹڈی میں کوئی پچھتاوا نہ ہو وہ ثبوت نہیں، تشہیر ہے۔

Performance and artistry are not opposites, they are collaborators. The constraint — this has to run on a cheap phone — is what forced the elegant version of every effect. Given the range of devices again, we would set the performance floor before designing anything, not after.

استعمال شدہ خدمات

مزید کام

شروع کرنے کے لیے تیار ہیں؟

ایسا ہی منصوبہ شروع کریںکام