smaranalva

00 // the frame

A site you
look through.

How smaranalva.com was made: one mark as the architecture, two colours, three typefaces, and a lot of small decisions about motion. Scroll, drag, poke at it.

The mark is the architecture

01 // geometry

The 2023 SMAL mark is a box with two notches joined by a slope, turned on itself. Written as a few numbers, the same shape is the logo, a frame around the whole screen, or anything between. Move it.

before it, there was a square: SM over AL, in a box. It signs off the about page.

Paper and window

02 // layout

One rule does the layout. The work lives in the window; everything that isn't the work (the name, the menu, the brands, the contact) lives on the paper, tucked into the notches. Drag the corner and watch the paper keep its things.

smaranalvawork · photos · abouthello@smaranalva.com

Three faces, three jobs

03 // type
display · Helvetica Now Display, set in Inter on the web

Films, motion, 3D.

text · DM Sans

The work speaks first. Words are short, and they say what a thing is, who it was for, and one true detail.

mono · Disket Mono, caps only by design

012 // since 2014 // mangalore → everywhere

tight tracking on the display (−4.5%), loose on the mono, nothing in between. type here; it's live.

Two colours

04 // palette

everything else is one of these at an opacity. the colour comes from the work. click to copy.

Nothing moves without a reason

05 // motion

Things arrive fast and settle slow. The mark opens because you scrolled; the window draws in a breath when you change pages; a tile plays when you're near it. One curve does most of it.

arrive · cubic-bezier(.2, .8, .2, 1)
travel · cubic-bezier(.65, 0, .35, 1)
what we didn't use · linear

Every film introduces itself

06 // media
  1. 500+finished pieces, catalogued off six drives
  2. 5moments scored for detail; the liveliest becomes the poster
  3. 6 sa seamless loop, silent, cut from that moment
  4. −16LUFS, every film, so nothing jumps when you swipe
  5. 1voice at a time: any film with sound pauses the rest
Mangalore Oktoberfest · the 6 s loop

Small things you can hold

07 // interaction

pull the tab ←

the reels drawer: pulled in from the edge, never in the way

cfw@market: ~
the art side, as a terminal session: it types itself out
The parts nobody sees
08 // craft
Take it apart
09 // kit
export function framePath({ x0, y0, x1, y1, nh, a, b, r, s }) {
  const w = x1 - x0, yT = y0 + nh, yB = y1 - nh;
  const xa = x0 + w * a, xb = x0 + w * b, xc = x1 - w * a, xd = x1 - w * b;
  const dx = xb - xa, L = Math.hypot(dx, nh), ux = dx / L, uy = nh / L, S = Math.min(s, dx * .3, nh * .45);
  const f = (n) => Math.round(n * 10) / 10;
  return `M${f(x0)},${f(yT + r)}Q${f(x0)},${f(yT)} ${f(x0 + r)},${f(yT)}L${f(xa - S)},${f(yT)}Q${f(xa)},${f(yT)} ${f(xa + S * ux)},${f(yT - S * uy)}` +
    `L${f(xb - S * ux)},${f(y0 + S * uy)}Q${f(xb)},${f(y0)} ${f(xb + S)},${f(y0)}L${f(x1 - r)},${f(y0)}Q${f(x1)},${f(y0)} ${f(x1)},${f(y0 + r)}` +
    `L${f(x1)},${f(yB - r)}Q${f(x1)},${f(yB)} ${f(x1 - r)},${f(yB)}L${f(xc + S)},${f(yB)}Q${f(xc)},${f(yB)} ${f(xc - S * ux)},${f(yB + S * uy)}` +
    `L${f(xd + S * ux)},${f(y1 - S * uy)}Q${f(xd)},${f(y1)} ${f(xd - S)},${f(y1)}L${f(x0 + r)},${f(y1)}Q${f(x0)},${f(y1)} ${f(x0)},${f(y1 - r)}Z`;
}