mahnoor·fatima

computational creative direction

AURORA

Perlin-noise identity for an ambient wellness company

WEATHER Move to warp the field

SEED 0X5226 DRIFTING

AURORA

Volume VI — An ambient wellness company

Computational Creative Direction — Perlin Noise

The research question

What if a brand behaved according to one computational law — the smooth, coherent randomness that makes clouds look like clouds and the aurora move like silk?

AURORA designs atmospheres for rest: generative light and sound environments for sleep, focus, and recovery. Its identity cannot have edges — nothing about calm is hard. So AURORA is built entirely from noise fields: continuous, drifting gradients that never repeat and never jump. The brand doesn’t have a logo so much as a weather, and that weather is always slowly changing.

The computational principle

The engine is Perlin noise (Ken Perlin, 1983) — the algorithm that gave computer graphics coherent randomness. Unlike white noise, which is chaotic point-to-point, Perlin noise is smooth: nearby values are related, so it produces the organic continuity of clouds, terrain, smoke, and the northern lights. Sampled across space and time it yields flow fields — invisible currents that everything in the identity drifts along.

The behavior engine

One 3D noise field (x, y, and time) drives the gradients, the motion, and the type. Every pixel asks the field which way to flow and how bright to be.

// Perlin/simplex-style value noise + flow field — the AURORA engine
class Aurora {
  constructor(seed = 1) {
    this.p = new Uint8Array(512);
    const perm = [...Array(256).keys()];
    let s = seed;
    for (let i = 255; i > 0; i--) {                 // seeded shuffle
      s = (s * 16807) % 2147483647;
      const j = s % (i + 1);
      [perm[i], perm[j]] = [perm[j], perm[i]];
    }
    for (let i = 0; i < 512; i++) this.p[i] = perm[i & 255];
  }

  fade(t) { return t * t * t * (t * (t * 6 - 15) + 10); }
  lerp(a, b, t) { return a + t * (b - a); }
  grad(h, x, y) {
    const u = (h & 1) ? -x : x, v = (h & 2) ? -y : y;
    return u + v;
  }

  // 2D coherent noise in [-1, 1]
  noise(x, y) {
    const X = Math.floor(x) & 255, Y = Math.floor(y) & 255;
    x -= Math.floor(x); y -= Math.floor(y);
    const u = this.fade(x), v = this.fade(y), p = this.p;
    const aa = p[p[X] + Y], ab = p[p[X] + Y + 1];
    const ba = p[p[X + 1] + Y], bb = p[p[X + 1] + Y + 1];
    return this.lerp(
      this.lerp(this.grad(aa, x, y),     this.grad(ba, x - 1, y),     u),
      this.lerp(this.grad(ab, x, y - 1), this.grad(bb, x - 1, y - 1), u),
      v);
  }

  // direction of flow at a point and time — the current everything drifts on
  flow(x, y, t, scale = 0.003) {
    const angle = this.noise(x * scale, y * scale + t * 0.1) * Math.PI * 2;
    return { x: Math.cos(angle), y: Math.sin(angle) };
  }
}

scale sets the weather: low values give vast, slow, aurora-like sheets; high values give fine, misty turbulence. It’s AURORA’s single master dial.

The visual language

Every AURORA surface is a gradient in motion — luminous veils sampled from the noise field, layered and additive, drifting along the flow. There are no lines, no hard shapes, no fixed compositions; there is only a field, and the field is always different because time is one of its inputs. The look is closest to a long-exposure of the sky: banded, soft, quietly alive.

Living typography

Letters are cut from the field. Each glyph is a mask through which the drifting noise shows, so type is never a flat fill — it’s a window onto weather. Push the flow strength up and the letters smear along the currents into aurora-like streaks; pull it down and they settle into legible, softly glowing forms. Type has a calm level rather than a weight.

Motion rules

  • Everything drifts. No element is ever static; each samples the flow field and moves with it.
  • Breath pacing. The field’s time input is tuned to a 4-7-8 breathing rhythm, so the whole identity inhales and exhales at a rate designed to slow yours.
  • Sound couples to light. In-product audio amplitude modulates noise scale — louder passages ripple the field, quiet ones smooth it.
  • Circadian tint. The palette shifts across the day, cool and dim toward sleep, warmer and brighter toward focus.

Interactive website

The homepage is a single slow-moving sky. Scrolling doesn’t advance pages — it changes altitude through the noise field, revealing new bands of the same continuous weather. Because time drives the field, the site is never the same on two visits, and it rewards simply leaving it open: the atmosphere keeps evolving whether or not you interact.

Physical applications

  • Product displays: the ambient-light devices themselves render the field, so the brand and the product are the same glowing surface.
  • Retail & spa environments: wall-scale projections of the noise field, paced to the room’s soundscape.
  • Packaging: lenticular and thermochromic prints that shift like the field as you tilt or warm them.
  • Sleep-app UI: every screen is a quiet sample of the same weather, so the app feels like one continuous atmosphere.

The brand system

Guidelines specify atmospheric states rather than fixed assets: named weathers (Still, Drift, Veil, Cirrus, Aurora) each defining noise scale, flow strength, palette, and legibility. “On-brand” means the field is running at a weather suited to context — onboarding runs Still (calm, legible); a hero moment runs Aurora (expansive, streaked).

Color: dusk violet, glacier blue, pale green, rose quartz, ink night. Field height maps to hue, the palette drifting warm-to-cool with the circadian clock.

Open-source behavioral library

Shipped as aurora.js, an eight-verb API over the field:

const sky = new Aurora(canvas);

sky.Drift(speed);         // advance the field's time input
sky.Veil(opacity);        // layer a translucent band of the field
sky.Ripple(point, force); // inject a local disturbance (sound, touch)
sky.Smooth(amount);       // lower noise scale — calmer, broader weather
sky.Turbulence(amount);   // raise it — finer, more active mist
sky.Streak(direction);    // stretch the field along the flow — aurora sheets
sky.Tint(timeOfDay);      // shift the palette on the circadian curve
sky.Settle();             // ease flow strength to near-zero — resting state

Reflection

AURORA was a study in motion so slow it reads as stillness. The temptation with a beautiful noise field is to make it perform; the discipline was to make it barely move, to trust that coherence — not incident — is what feels calm. Tying the field’s tempo to a breathing pattern turned an aesthetic choice into a functional one: the identity isn’t just calming to look at, it paces you.

The lasting idea: for a brand whose product is a state of mind, the identity should induce the state, not depict it. AURORA doesn’t illustrate calm — it runs at the speed of calm, and asks you to match it.