nerix.ai brand · motion · version 1 · 18 October 2026

How nerix moves

Light runs down the slash; the letter holds. One set of curves drives the loader in the product, the transitions between its screens and every piece of film, so a promo and the product move alike. Everything below is played live by the same engine that renders the videos.

01 · Principles

Five rules

Ice moves, Ink holds. Loops belong to the slash, the colour of everything AI does. Stems, text and layout settle and stay.
Travel on the mark's own lines. Light runs in the slash's pen direction; things that slide follow the 11.9° lean. Nothing spins, bounces or wobbles.
Fast in, soft landing. Arrivals ease out; departures accelerate away and take about 70% of the time, because people wait for what arrives, not for what leaves.
The gap stays. Moving parts approach the slash and stop at the gap. Ink and Ice never touch, in a still or mid motion.
Meaning survives reduced motion. When a person asks for less motion, nothing travels; the loader breathes instead, so "working" is still said.

02 · Loader

The streak

Light runs down the slash, lands, drains, with a dimmer afterglow behind it. Four kinds, each with one job. The slash under the light stays faintly visible, so the N reads at every moment.

Progress

62%

A known fraction fills the slash from the top, easing to each new value.

Sizes

At 24 px and below the loader uses the small geometry: heavier stems and a wider gap. On the Ink tile it is the app's own avatar.

The streak bar and writing text

Writing · Searching your library

The same light as a hairline, for route loads and work without a percentage; it runs toward the reading end and mirrors in Arabic script. Words that are being produced carry a soft light passing over them.

// React (apps/web, apps/ui, apps/console)
import { NerixLoader, StreakBar } from "@/components/brand/nerix-loader";
<NerixLoader />                                   // streak, 32 px
<NerixLoader kind="intro" className="size-14" />  // boot screens
<NerixLoader kind="write" tile small decorative /> // the avatar while an answer starts
<NerixLoader kind="progress" value={0.4} />
<StreakBar className="absolute inset-x-0 top-0" />

// Plain HTML: motion/loader.svg, or the markup from motion/loader.js with nerix-motion.css

03 · Transitions

Arrive softly, leave quickly

Screens arrive with a short rise and fade while the chrome around them holds. Things that float rise a few pixels and settle; panels slide from their edge. Every duration and curve is a token in nerix-motion.css, shared by the three apps.

Token	Value	Curve	Use

Try it: switch screens (each one loads for a moment under the streak bar, then arrives), open the dialog and the drawer, and close them again.

04 · Film

Pieces for promos

A sting to open, an end card to close, title cards and lower thirds in between, and transitions on the slash's angle. Every piece comes in 16:9, 9:16 and 1:1, on Night or Paper, silent: nerix films are narrated, never scored.

0.00 s

05 · Files

Use it

For code

The loader and transitions ship in the apps as nerix-motion.css and the NerixLoader component. For pages without React, an animated SVG loader works anywhere an image does.

nerix-motion.css loader.svg loader-tile.svg loader-on-dark.svg

For film

MP4 (H.264, 60 fps) for every editor and site. Overlays (lower third, wipes, light pass) come with transparency as WebM; the full pack adds lossless QuickTime Animation MOVs with transparency for Premiere, Resolve and Final Cut. All silent. Custom titles and names: node brand/motion/render.mjs title --lines "…|…".

Piece	Files
bumper	16:9 night MP4 39 KB16:9 paper MP4 39 KB1:1 night MP4 35 KB1:1 paper MP4 35 KB9:16 night MP4 49 KB9:16 paper MP4 48 KB
endcard	16:9 night MP4 301 KB16:9 paper MP4 302 KB1:1 night MP4 250 KB1:1 paper MP4 244 KB9:16 night MP4 299 KB9:16 paper MP4 298 KB
loader	16:9 night MP4 64 KB16:9 paper MP4 64 KB1:1 night MP4 58 KB1:1 paper MP4 56 KB
lowerThird	16:9 night WEBM alpha 99 KB16:9 paper WEBM alpha 102 KB9:16 night WEBM alpha 107 KB9:16 paper WEBM alpha 111 KB
pass	16:9 night WEBM alpha 99 KB16:9 paper WEBM alpha 96 KB1:1 night WEBM alpha 78 KB1:1 paper WEBM alpha 84 KB9:16 night WEBM alpha 112 KB9:16 paper WEBM alpha 119 KB
sting	16:9 night MP4 117 KB16:9 paper MP4 113 KB1:1 night MP4 106 KB1:1 paper MP4 103 KB9:16 night MP4 124 KB9:16 paper MP4 125 KB
title	16:9 night MP4 105 KB16:9 paper MP4 100 KB1:1 night MP4 84 KB1:1 paper MP4 81 KB9:16 night MP4 102 KB9:16 paper MP4 94 KB
tools	16:9 night MP4 133 KB16:9 paper MP4 134 KB1:1 night MP4 144 KB1:1 paper MP4 146 KB9:16 night MP4 174 KB9:16 paper MP4 177 KB
wipe	16:9 ice WEBM alpha 137 KB16:9 night WEBM alpha 125 KB16:9 paper WEBM alpha 145 KB1:1 ice WEBM alpha 105 KB1:1 night WEBM alpha 96 KB1:1 paper WEBM alpha 111 KB9:16 ice WEBM alpha 156 KB9:16 night WEBM alpha 151 KB9:16 paper WEBM alpha 166 KB