Trail Mix and a Rescue Fund

Two people filled out my free demo form this week. One runs Nomad Mix, a trail mix company here in Portland. The other is starting the Secular Rescue Fund, an emergency fund for East African immigrants working abroad. I built each of them a full website before either of them paid anything. Here’s what went into both.

Nomad Mix

Nomad Mix makes savory trail mix with local makers, and every blend is named after a Pacific Northwest landscape: Meadow, Tidepool, Forest, Dune and Harvest. They already had a Square Online store, great bags with a color for each blend, and a photo of every blend in a bowl. I loved the brand, so I wanted to do something creative with it and keep the message the same.

I wanted the site to feel like trail mix. Every piece of trail mix you see on it is real. I cut fifty little clusters out of their bowl photos, ten from each blend, and when the homepage loads they pour in and pile up along the bottom of the screen. Move your mouse through the pile and it stirs.

Scrolling down is a hike. Each blend gets a stop in the landscape it’s named after, with a little trail map down the side that fills in as you go. When you reach a stop, that blend drops into its bowl and its bag slides in next to it.

At the bottom you can build your own handful. Pour in whichever blends you want, then shake it. On a phone you can shake the phone. The pieces bounce and settle on their own because they run on a small physics library called Matter.js, and each piece’s size is measured from the photo it was cut from, so they stack the way they look.

The order buttons all go to their Square store, so nothing changes about how they take orders.

Secular Rescue Fund

The Secular Rescue Fund is brand new. It’s for Ugandan and other East African immigrants living and working around the world. Members pay a monthly membership, and when one of them has an emergency far from home, the fund helps with things like medical care, getting home when they’re stranded, support for their family and help after a disaster. There was no website yet, so the founder sent me their written introduction to the fund and a site they liked from a similar group.

The homepage is the earth at night, made from NASA’s Black Marble photo. As you scroll, it follows the lights from East Africa to the places members have gone for work: Riyadh, Dubai and Doha, then London and Stockholm, then Washington, Toronto and Portland. Each city lights up as you get to it.

The rest is what the fund needs to actually run. People can join on their own or as a family and pay for their membership online. There’s a form for asking for help, and members get their own area with their receipts, who’s on their membership and the requests they’ve sent. I also redrew their logo so it stays sharp at any size.

Making the map scroll smoothly

My first version of the map moved one huge photo of the earth around with CSS, and scrolling felt heavy. Now the page draws only the part of the map you can see onto a canvas, fresh on every frame. In my test that went from 320 frames in five seconds to 899, and it scrolls smoothly now.

You can try both: Nomad Mix and the Secular Rescue Fund.