Usual 2 Unusual — the observer effect built into an interface

We built a design concept on superposition from quantum mechanics — and it took off on Behance.

Clickbaity enough, I know. Getting into a Behance gallery doesn't actually give you anything but traffic. Yet over the years whole schools of “case-crafting” have grown around the platform, along with endless theories on how to earn that badge. The jury members themselves write in their blogs: a project shouldn't just be beautiful and modern — it needs a story. Ours went like this.

Client and problem

A German artist with Ukrainian roots — Irina Mitaenko — came to us for a new portfolio site. Interestingly, Irina is a trained physicist, and art is her way of metaphorically expressing the beauty of mathematics and physics. Remember that fact — it'll come into play.

Her previous site was built on Tilda and had plenty of problems. The main one: artworks come in all formats, and template galleries aren't flexible enough — previews simply cropped parts of the paintings.

That’s like Warhol losing a good chunk of his soup to technical constraints.

In general — how you look at art shapes how you understand it. We took the project because the client gave us creative freedom and room to experiment. Her only request: convey the manifesto.

Without a viewer, there is no art.

First steps

Finding a concept isn’t a “sit down and do it” kind of task. Usually the whole team hops on a call and we brainstorm together. This time was no different: after going through the options, we got hooked on the thought of how much modern art depends on the viewer.

My team usually prototypes complex interfaces — an artist portfolio was a first for us. So naturally we went hunting for references. After reviewing 30+ portfolio sites of artists, artisans and art directors, we set the rules for the future site:

• artworks must not hide behind frames or interface elements;
• the site’s visuals must not distract — they stay neutral;
• finding collections and artworks must be easy;
• the concept is built around the artist’s manifesto.

That thought became the foundation — and we found the visual language in physics.

The double-slit experiment

Imagine a device shooting particles — electrons or photons — through a screen with two slits. Behind it, a second screen records where they land. If you shoot without measuring which slit they pass through, you don’t get two bands like from little balls — you get an interference pattern: the particles behave like interacting waves. Thomas Young’s experiments in 1801 proved the wave theory of light exactly this way.

But put in a detector to “peek” at which slit each particle takes — and the magic disappears. The particles behave like separate balls, only two stripes show on the screen, no interference. When we don’t observe, particles seem to exist in superposition — passing through both slits at once, like waves. When we do observe, they “commit” and pick a definite path.

In short, it’s a quantum-mechanics thriller.

The key point: the outcome depends on us — whether we observe or not.

It rhymes perfectly with the manifesto “without a viewer, there is no art”. And with a physicist for a client — you couldn’t ask for a better match.

Visual concept

We conveyed the idea with a hover effect: while the user isn’t interacting with the content, five columns of moving “particles” drift in the background. The moment the cursor touches a painting, the particles line up into two rows.

And the five lines of “particles” from the interference pattern became the basis of the site’s grid. The grid is what positions the important elements on screen — so the concept merged with a technical feature, and it turned out great.

The home screen

We debated the first screen for a long time. A photo of the main collection? A selection of recent works? Both felt unfair: the works are wildly different — experiments in different techniques — and judging the artist by whatever image came first would be wrong.

That’s how the idea of showing everything at once was born. The home page is a canvas laid out with all the significant collections, and the viewer chooses where to look. There’s no scrolling — it simply isn’t needed. Just buttons in the corners of the screen: full portfolio, about the artist, contacts.

And the long-running argument about which background looks better ended with handing the choice to the viewer — light and dark themes are switchable.

Custom code

This project demanded extra work with code. We don’t shy away from unique web experiments, but Irina’s site was a new kind of challenge: if you’ve invented a double-slit experiment for a website, you have to build it. We pride ourselves on taking a project from concept to a live page, so we defined the “atom” behavior rules precisely:

• there are two states: Focused and Relaxed;
• Focused activates when the cursor is on an artwork — the atoms gather into two columns;
• regardless of state, the atoms are always moving — never static.

We first looked at Particles.js — easy to implement, but as an off-the-shelf solution it lacked the flexibility for our first two rules. So we moved to GSAP (using Rajat Kapoor’s code from Made in Webflow as our base), split particle generation into columns, styled the atoms our way and tied the motion to the cursor. Surprisingly, the final step turned out to be the easiest — we built the hover-in/hover-out animation right in Webflow, and it looked exactly as intended.

The mobile version

The client specifically asked for the site to work properly on mobile. That meant a few extra steps: the home page mouse-move animation (the canvas follows the cursor) works perfectly on desktop but glitched horribly on mobile. So we brought in interact.js and built a similar touch interaction:

• drag-and-drop with smooth stopping;
• boundary constraints that keep the canvas from being dragged off screen;
• velocity-based motion — a realistic, natural interaction.

Bonus: for artwork pages we integrated Swiper.js instead of Webflow’s standard slider — it lacked customization and never felt smooth. With Swiper everything looks polished.

Portfolio

Irina’s works are collections from different periods and styles. It was important to structure them so viewers could easily find their thing. By default the works are shown visually — you choose with your eyes. But there’s also a tab sorted by title with previews: handy when you learned about a work from an article or catalogue where only the name is given.

The collections themselves are shown in a slider — many paintings are non-standard sizes, so a template grid doesn’t suit them.

Why we took this on at all

In her manifesto Irina says that for her, art is about finding the unusual in the ordinary and the ordinary in the unusual. Hence the site’s name. And that’s exactly why we took the project: to experiment, to look for unusual solutions to ordinary problems — the thing sometimes missing from routine interface design, where 90% of the patterns were invented before you. We had fun, stretched our arms and made a cool site.

The result

A happy client, an Honorable Mention on Awwwards and an Interaction feature on Behance — 784 appreciations and 7,637 views. Most importantly — a live site where no artwork hides behind a frame anymore: usual2unusual.com.