# Literal Labs brand motion

LL-DS / 09 MOTION V1.0 · APR 2026

CRT · GLITCH · TELETYPE REDUCED-MOTION SAFE

\[ 05:14:22 \] MOTION SYSTEM · LITERAL LABS REGISTERED · ® LL-DS-MOT

# Motion,  
_mechanical._

**120 / 240 / 480** · MS TOKENS  
**EASE-STD** · EASING: cubic-bezier(.2,0,0,1)  
Durations / Easings / Effects

® LL-DS SERIAL · 7536U-141-784 · CYCLE 0421 OP·2 V1.0

MOTION IS A REWARD, NOT A GARNISH PREFERS-REDUCED-MOTION RESPECTED ALWAYS REF: LL-DS-MOT

Styles & durations

#### Durations motion-01

Four tokens cover everything.

TOKENMSUSE

\--dur-fast120Hover / tap feedback

\--dur-base240Default transition

\--dur-slow480Page-level reveal

\--dur-crt900Teletype / boot sequence

#### Easings motion-02

Standard + stepped for industrial flavour.

##### STANDARD .2,0,0,1

Default

##### LINEAR —

Progress only

##### STEPS-6 CRT

Teletype

##### BREAK overshoot

Rare accent

#### Reveal · stagger motion-03

Each item offsets by 150 ms.

01 · IMPORT

02 · ANNOTATE

03 · TRAIN

04 · DEPLOY

#### Shuffle text motion-04

Characters scramble through random chars before settling · 45ms steps · 55ms stagger per character · as used on homepage CTAs.

[Book a demo](#) [Deploy model](#) [Read the docs](#)

Hover to trigger · chars: ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789#@!

#### Teletype motion-05

steps(40) over 2 s · used for boot sequences. Click to replay.

\> INITIALISING LBN PIPELINE · 0421-OP2 \> TARGET — CORTEX-M4 · 96KB · 84MHz \> COMPILING C SDK · EMBEDDING WEIGHTS \> SYSTEM RUNNING AT 99.98% EFFICIENCY

#### Glitch image motion-06

Stacked image copies with `clip-path` slices · 3.5s cycle · as used in the footer banner.

![Literal Labs footer banner](https://www.literal-labs.ai/images/footer-banner.svg) ![](https://www.literal-labs.ai/images/footer-banner.svg) ![](https://www.literal-labs.ai/images/footer-banner.svg) ![](https://www.literal-labs.ai/images/footer-banner.svg) ![](https://www.literal-labs.ai/images/footer-banner.svg)

4 offset copies · each a different clip-path slice · hero moments only

#### Glitch text motion-07

Layered copies clipped with `clip-path` · as used in the footer banner.

LITERAL LABS LITERAL LABS LITERAL LABS LITERAL LABS LITERAL LABS

Multi-layer offset · 3.5s cycle · hero moments only

#### CRT image hover motion-08

Scanline overlay + colour-grade filter on hover · as used on team portraits.

Hover me

On hover:  
Scanline grid appears  
RGB fringe overlay  
sepia + hue-rotate filter  
opacity flicker at 0.15s

#### CRT sweep motion-09

System nominal.

\> \[ 05:14:22 \] LOADING CONTROL MODEL · LBN 0421-OP2

\> \[ 05:14:24 \] FEEDBACK LOOP ONLINE · KINEMATIC BALANCED

\> \[ 05:14:26 \] FORCE CALIBRATION NOMINAL

\> \[ 05:14:29 \] TASK SCHEDULE RECEIVED / EXECUTING

\> \[ 05:14:33 \] SYSTEM RUNNING AT 99.98% EFFICIENCY

Scanline overlay via `repeating-linear-gradient` · vignette via `radial-gradient` · sweep is a translucent bar animated top→bottom · used subtly on team portraits on hover.

Laws of motion

01 — CHOREOGRAPHY

### Motion is a reward, not a garnish.

If a screen moves, something changed. No idle animation. No decorative drift.

02 — FEEL

### Mechanical, not bouncy.

Default to the standard curve. Steps for teletype. Overshoot is reserved for one place per product.

03 — SPEED

### Fast enough to feel decisive.

Most transitions sit at 120 or 240 ms. If it needs longer, it needs content to justify it.

04 — REDUCED-MOTION

### Everything collapses gracefully.

Respect `prefers-reduced-motion`. Glitch, sweep and stagger disable; state changes remain instant.

[Illustration](https://www.literal-labs.ai/about/brand-guide-illustration.html)

[Spacing](https://www.literal-labs.ai/about/brand-guide-spacing.html)