Skip to content

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

At a glance

Duration
22 weeks
Team size
3 people
Engagement
New build
Project type
Web application
Industry
Media & Entertainment

The situation

The challenge

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.

What we did

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.

The calls that mattered

  • 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.

What changed

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.

Services used

  • 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

What we would do differently

Every project has one of these. Publishing it is the point — a case study with no regrets in it is marketing, not evidence.

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.

Services used

More work

Ready to start?

Start a project like thisWork