Lab / Experiments, in public

Try it.

Everything on this page is built here, from scratch, with no animation library. Poke it, drag it, break it. This is the room where technique gets proven instead of claimed.

01 / Six voices
02 / Type lab
03 / Motion lab
04 / Colour
05 / Cursors

01 / Six voices

Most studios tell you they can design in any direction.

Hover a word. Not a swatch, not a mood board—this whole page changes lettering, colour, spacing, corners and timing in front of you. Click one to keep it. It stays while you're in the Lab.

Six complete design systems, one set of markup. Nothing reloads.

02 / Type lab

Type changes everything.

One business. One layout. One set of words. Eight typographic systems. The company below does not change—only who you think it is.

Arroyo & Vance PracticePeopleContact

Private client advisory · Santa Fe & Denver

We look after what took a lifetime to build.

Four generations of family capital, held to a standard we would apply to our own.

Arrange an introduction

ElegantBodoni Moda / Archivo 300

Since 1994 · Three counties

We take on the jobs nobody else will touch.

Eleven crews. One number to call.

Quiet Loud Quiet

03 / Motion lab

Motion isn't decoration.

Animation earns its place when it explains something, directs attention, or makes an interface feel physical. Eight examples, each labelled with what it is actually for.

Magnetic buttons

Try it

The button leans toward the cursor before you reach it. Reduces mis-clicks and, more importantly, makes the interface feel alive.

Masked text reveal

Try it

Lines rise out of an invisible edge as they enter the viewport. Used once per section, it reads as craft. Used everywhere, it reads as a template.

Parallax depth

Try it

Foreground, midground and background moving at different rates. Three layers, one scroll.

Image distortion

Try it

A canvas re-slices the photograph and bends it around the cursor. No shader, no library.

Scroll storytelling

Try it

A layout assembles itself piece by piece as you scroll through it. Good for process, product and proof.

Page transitions

Try it

Navigation morphs instead of blanking. The whole site behaves like one continuous surface.

3D / real-time render

Try it

A shaded object, rotating in real time, that answers the cursor. Rendered from scratch in canvas.

Micro-interactions

Try it

Toggles, icons, counters and confirmations. The small stuff nobody notices until it is missing.

04 / Colour

The high desert, sampled.

The studio palette comes off the ground in northern New Mexico—volcanic rock, bone, weathered stone, chrome, and the orange you only see for about eleven minutes a day. Hover for the value. Click to copy it.

05 / Cursors

The pointer should know where it is.

A single custom cursor everywhere is a gimmick. A cursor that changes to tell you what is possible is an interface. Move across the six panels below—on a mouse or trackpad, the label changes each time.

A projectview

An imagedrag

A filmplay

A typefacetry

A colour#d94f1e

A horned toadpoke

Touch devices get their pointer left alone, and anyone who asks for reduced motion gets the system cursor back.

Now put it somewhere it does some good.

Build your version in the Showroom