CSS @property · 3D Orbit
Kinetic Brand Core
Multi-axis vector rings driven by typed @property angles and GPU rotate3d transforms.
GPU // 60FPS
ZERO-LAYOUT MOTION
Motion Graphics Engineered for Mobile Glass.
Silky transform-only choreography, spring physics, and vector motion systems that stay locked at 60fps on every pocket screen.
60 fps
Composited Target
< 35 KB
Runtime Footprint
0 px
Layout Reflow
01 // Interactive Specimens
Swipeable Motion Scenes
Tap a reel or swipe the canvas below. Every vector ring, glass card, and arc is pure GPU math — zero video files, zero frame drops.
02 // Architecture
Why It Never Lags
Built around four hard engineering rules so low-end and flagship phones render identical motion quality.
Interactive Lab
Tap-to-Launch Spring Physics
Real physics retarget mid-flight when you tap rapidly — CSS keyframes jump, springs blend.
Tap anywhere inside
Color Space
OKLCH Pipeline
Interpolates through perceptual lightness so gradients never hit muddy grey midpoints.
Hardware Mask
Clip-Path Reveal
Mask transitions without DOM wrappers or layout reflow. Click Replay to watch the iris sweep.
60 FPS LOCKED
Performance Budget
GPU Layer Discipline
03 // Workflow
Three-Beat Delivery
From storyboard keyframes to a compressed, touch-tested production bundle.
-
01
Choreograph & Gate
Every animation passes the frequency test: hero storytelling shines, high-frequency controls stay crisp under 220ms.
-
02
GPU-Only Compilation
Curves, gradients, and SVGs compile down to composited
translate3d,scale,opacity, andclip-path. -
03
Mobile Touch Verification
Tested on narrow portrait screens with reduced-motion parity, safe-area padding, and instant tap response.