ANIMATION SYSTEM

MOTION

Obsidian animations are purposeful and restrained. Every motion serves to reinforce the cyberpunk terminal aesthetic — no gratuitous movement, only intentional feedback.

RuneDecode

Runic character scramble that reveals text left-to-right — the signature Obsidian text reveal

OBSIDIAN

Float

Gentle vertical oscillation — used for logos and hero elements

O

Ping Slow

Pulsing ring effect — used for logo pulse rings and status indicators

FadeUp

Entry animation — element rises from below with opacity fade. Used for staggered list items.

A
B
C
D

TypeIn

Terminal typing effect — each line slides in from left with opacity. Stagger with animationDelay.

Cursor Blink

Terminal cursor — step-end timing for authentic blinking block

obsidian@intercept:~$
> READY

Border Beam

Rotating conic gradient border — premium card accent

BORDER BEAM ACTIVE
4s rotation cycle

Bounty Glow

Pulsing text shadow — used for emphasis on important headings

OBSIDIAN

Stagger In

Cascading entrance — each element fades up with increasing delay

TIMING GUIDELINES

DURATIONS
Micro interactions0.15 - 0.25s
Transitions0.3 - 0.5s
Entrance animations0.5 - 0.8s
Ambient loops2 - 4s
EASING
Defaultease
Entrancecubic-bezier(0.16, 1, 0.3, 1)
Hover liftcubic-bezier(0.25, 0.46, 0.45, 0.94)
Blink/cursorstep-end