ANIMATIX WALKTHROUGH · PRODUCT MOTION & DEPTH

Kinetic Typography & Spatial Depth

  • 3 interactive stages
  • WebGPU 60 FPS vector canvas
  • Split-Text Baseline masks
  • 2.5D Glass Hardware blur

Beyond technical diagrams, Animatix brings high-end editorial motion design to declarative code. Watch words emerge from sharp baseline masks, text blend through linear vector gradients, and UI panels tilt in 2.5D space over real-time GPU frosted glass.

Fig 00 // The Complete Kinetic & Glass Studio
pkg-slim · 1.6MB 60 FPS WEBGPU
Complete Suite · Editorial Design

Kinetic Lab Overview

A composite showcase demonstrating editorial split-text emergence, multi-stop vector gradients, and floating frosted glass cards with live hardware blur and rotational yaw/pitch inertia.

scene.amx ↗
Typography: Word & Char Splitting Shaders: WGSL Dual-Pass Gaussian Blur Projection: 2.5D Angular Tilt
01
Baseline Clipping

Glyphs emerge upward from their container boundary with zero layout shift.

02
Frosted Refraction

Real-time GPU backdrop sampling creates realistic glassmorphism depth.

03
Harmonic Ambience

Secondary breathing lighting washes dynamically follow motion centroid curves.

Fig 01 // Split-Text Baseline Emergence & Gradients
pkg-slim · 1.6MB 60 FPS WEBGPU
Stage 01 · Typographic Mechanics

Split-Text Baseline Masks & Gradients

In traditional web CSS, masking text requires DOM duplication and manual overflow clips. Animatix makes split-text reveals declarative: specify reveal-in by: word with an offset_y to smoothly emerge from the typographic baseline.

typography.amx ↗
Mask Mode: by: word Gradient: Linear 90° Amber to Coral Layout: Zero displacement flow
Fig 02 // 2.5D Spatial Perspective & Backdrop Blur
pkg-slim · 1.6MB 60 FPS WEBGPU
Stage 02 · Physical Depth

2.5D Perspective Tilt & Frosted Glass

Tactile interfaces demand depth. The Glass scope reads the rasterized frame behind it and applies a hardware-accelerated dual-pass blur, while 2.5D rotation properties (rotate_x, rotate_y) provide physical tactile presence.

glass.amx ↗
Blur Radius: 24px analytical Pitch/Yaw: ±15° harmonic angular sweep Shadow: 40px soft elevation