Marta Barandiy · Brand system

Motion

Things here move like silk: they take a moment to start, travel with weight, and settle. Nothing jiggles for attention.

Move your pointer: a red thread follows itReduced motion respected everywhere

Three principles

Fabric, not bounce.

Default curve is silk: slow in, slow out. The spring is only for a press that releases. No elastic, no wobble.

One orchestrated moment.

Each screen gets one entrance that tells the story: the tape that comes loose on the home page, a thread across a result. Everything else simply appears. We don't fade up every section.

Answer the person.

Motion is a reply: you hover, the thread pulls tight; you choose, a knot ties; you scroll fast, the hem ripples. If nothing changed, nothing moves.

Easing: how things travel

Four curves, and nothing else. Press a card to send the ball along its curve. The numbers under each one are the exact values for Figma, After Effects or a developer.

Durations

Four steps. Small things are fast; things that travel far take longer. Over a second is reserved for the orchestrated moment.

140 mshover
260 mspress, colour
520 msshape, tab stitch
900 msreveal, pill bars

Touch it

Try each one. Under it: what the movement means, how long it takes and how it travels.

Thread draw

Any line in the brand (the thread, the monogram, a chart line) draws itself once when it comes into view. 1600 ms, silk curve. It never loops.

Tap anywhere here.

Knot burst

A decision gets tied: a small red knot where you tapped. 700 ms, quick start and soft landing. Comes with every red decision button.

Scroll speed, right now

Scroll this page fast, then slow. The hem below ripples with your speed and settles when you stop. Hem cards and hem edges between sections respond the same way.

Hem ripple

The faster you scroll, the deeper the ripple, from flat to full. It settles back to flat soon after you stop.

Come closer

Magnetic

The button leans up to 10 px towards the pointer. Mouse and trackpad only; for the main action, once per view.

Result cardTilts with your pointer.

Tilt

A gentle 3D tilt, at most 8°, that follows the pointer. For things you keep: a result card, a poster you can download.

Move the pointer anywhere on this page.

Cursor thread

A soft red thread with a little gravity trails the pointer and fades when you stop. Desktop only.

12editions of Brussels Ukraïna Review, 2019–2024.
Sample A90
Sample B55
Sample C30

Count-up and pill bars

Numbers count up once, 1400 ms, fast at first and slowing into the final value. Bars grow when seen, 900 ms. The final number is always there for screen readers and for anyone who misses the animation.

Step 1 of 5

Progress knots

Each step ties a knot in red. 520 ms, silk curve.

Reduced motion: same story, no travel

If someone asks their device for less motion, every effect becomes a simple state change.

Turn each card to see what happens instead.

Hover me
Open the fold

With reduced motion, it opens without the turn of the plus.

Check every design with your device’s “reduce motion” setting switched on, not only with this toggle.