Eyas Majeed
All work

Baseerah website

An awareness site that uses addictive design tricks on you, then shows you how.

Role
Technical lead
Context
Baseerah initiative
Stack
HTML, CSS, JavaScript, Cloudflare Pages
Links
Visit the site

I led the website end to end: the structure, the engineering decisions, testing and deployment.

The idea

Baseerah (بصيرة, “insight”) is a student initiative about mindful phone use. Its slogan: نحو عقلٍ واعٍ, “toward a conscious mind”.

Telling people that apps are designed to hook them rarely changes anything. So the site does it to them. As you scroll, it uses the same hooks it warns about: fake notifications, a reward button and endless scrolling. At the end, it asks whether you noticed you fell into the same trap while reading.

Design

The site has 12 sections. Its colors move from dark to light as you scroll, like the path of recovery. It’s Arabic, fully right to left and mobile first, with designed light and dark modes.

The first screen of the Baseerah site: a dark page with a glowing brain and floating notification badges.The last screen of the Baseerah site: a light page asking whether you noticed you fell into the trap.
The first screen and the last. The page moves from dark to light as you scroll.

Engineering

  • One self-contained HTML file, deployed on Cloudflare Pages.
  • Animations run on requestAnimationFrame.
  • Heavy animations switch off on low-end devices (deviceMemory ≤ 4 or hardwareConcurrency ≤ 4).
  • WCAG AA contrast in both modes.