Lab

Experiments, prototypes and playful code from our team. Small things we build to try out ideas, sharpen our craft and have a bit of fun — all running live in your browser, written in plain JavaScript and Canvas with no libraries.

Experiments05
Built withVanilla JS · Canvas 2D
Try it withMouse, touch or keyboard
Start playing

Experiments

Live demos / 05
exp/01 — lab-type.js

Particle typography

Type any word, in English or Arabic, and a cloud of particles assembles into it.

Animated canvas: small white and red particles fly in and settle into the shape of the word in the text field. Moving the pointer over them pushes them away, then they spring back.

  • Canvas 2D
  • Spring physics
  • Pointer Events
  • Arabic + Latin

Try type a word, then move your cursor or finger through it

exp/02 — lab-flow.js

Flow field

Particles drift through an animated noise field and leave brand-red trails behind.

Animated canvas: thin red and white lines stream across a dark background, following smooth, slowly changing currents. Clicking starts a new random field.

  • Simplex noise
  • Canvas 2D
  • Particles

Try move or drag to stir the current, tap or click to reseed

exp/03 — lab-palette.js

Brand palette generator

Generate a harmonious five-colour palette, lock the colours you like and check their WCAG contrast.

Five colour swatches. Each shows its HEX code (click to copy), its contrast ratio against white and black with a WCAG AA badge, and a lock button that keeps the colour when you generate a new palette.

  • HSL
  • WCAG 2.2
  • Clipboard API

Try press Space or Generate, click or tap a code to copy it

exp/04 — lab-grid.js

Kinetic grid

A field of points on springs that bends around your cursor like a magnet.

Animated canvas: an even grid of small dots joined by faint lines. Near the pointer the dots are pushed aside and turn red, then wobble back into place. Clicking sends a ring-shaped wave through the grid.

  • Spring physics
  • Canvas 2D
  • Pointer Events

Try hover or drag, tap or click for a shockwave

exp/05 — lab-book.js
  1. 1Trip
  2. 2Date
  3. 3Guests
  4. 4Summary
Demo
Choose a trip

Booking flow prototype

A bilingual day-trip booking flow — trip, date, guests, summary — prototyped for tour operators.

  • UX prototype
  • RTL
  • Intl API
  • ARIA

Try click through the steps — nothing is actually booked

Under the hood

The same care goes into the products we ship: fast to load, light on the battery and usable by everyone.

  • Each experiment loads its code only when you scroll to it.
  • Animations pause when they leave the screen or the tab is in the background.
  • With “reduce motion” turned on in your system, you get a still frame instead.
  • Real buttons and inputs that work with a keyboard, in English and Arabic.

Want something like this in your product?

Get a quote WhatsApp