// Index — 25 pages

01 Work

02 Writing

03 Me

// Lab — 7 pieces // in-house, not client work

Lab

In-house pieces from the studio's lab, never client work: type, interactive Rive and films made in Blender. Each one loops here with notes on how we built it.

The lab on alterra.studio
  1. L-01960 × 540

    Brand · type // Rive · film

    Alterra Primary

    A type family drawn out of our wordmark, on the five-band grid hidden in the logo.

    1. The logo's cap height splits into five equal bands. Every stem that meets a top bar stops one band short, and that cut became the signature.
    2. We traced A, L, T, E and R from the logo, then wrote the rest of the alphabet, three weights and a text companion to the same rules.
    3. The film is five Rive layers. The word rises as a mesa out of our contour map, the camera only pushes and tracks, and the clockwork sound is synthesised to the picture.

    ● Alterra Studio

  2. L-02960 × 540

    Brand // Rive · film

    Then & Theory T

    The Then & Theory logo constructed on its own grid, told as a short film.

    1. The diagonals sit on a real 27° system and the stem is exactly four grid modules, so every guide passes through an anchor.
    2. Rails, arcs and measurements draw in, the contour traces itself, then the fill sweeps down and the guides fall away.
    3. Each layer is its own Rive instance on a 3D plane for the camera moves, and the pen plays a note at every anchor.

    ● Then & Theory

  3. L-03960 × 540

    Blender · film

    Stay, in Blender

    Our Rive date picker rebuilt as a CG short, wiping from clay to final light.

    1. We rebuilt the Rive UI in Blender at one artboard pixel to one millimetre and rendered it in Cycles on our own GPU.
    2. The selection is a jelly that fuses between keys, pours into Reserve and sends out a shockwave ring when the stay is booked.
    3. Sound effects are layered over a score, each cue matched to what is on screen.

    ● Alterra Studio

  4. L-04960 × 600

    Rive · interaction

    Inkwell

    A signature card where the name writes itself and one button walks from Sign to Signed.

    1. One button morphs through Sign document, Signing and Confirm to a mint check, while a chip flips from Pending to Signed.
    2. The copperplate signature starts as a single-stroke script font, resampled and smoothed so the pen moves like a hand.
    3. A soft pad plays under it with a bell on every baseline dip, so the signature plays a tune.

    ● Alterra Studio

  5. L-05960 × 540

    Rive · interaction

    Stay

    A keycap date picker where the stay grows key by key, one note per night.

    1. Graphite keycaps on black, with the selected range as a porcelain capsule.
    2. Rive owns every motion through data-bound rows. The page owns the date logic and the sound.
    3. This cut films the live page with a CSS 3D camera.

    ● Alterra Studio

  6. L-06720 × 864

    Rive · interaction

    Pocket

    A sticker-style profile menu with an avatar who reacts to every row.

    1. Milo, the avatar, reacts row by row, earns a crown on Go Pro, falls asleep on sign-out and wakes when you click.
    2. Day and night themes swap with a circular reveal.
    3. We synthesised 21 sound cues for it, including a pentatonic marimba tick for each row.

    ● Alterra Studio

  7. L-07720 × 720

    Rive · interaction

    Lumi

    Our first Rive character: an axolotl that follows the pointer and naps when you leave.

    1. Eyes, face and gills track the pointer through data binding and converters.
    2. Hover makes Lumi happy, a click gets a boop, and eight seconds alone brings a yawn, then sleep.

    ● Alterra Studio

See the full lab on alterra.studio

// Work with me

Building something?

We're taking on a few more funded startups at Alterra Studio this quarter. Projects start at $10k.

Book a call hello@ryanhofmann.com