← Back to Index

ActiveTheory

Immersive 3D · WebGL Experiences

60fps
Target Frame Rate
WebGL
Rendering Engine
Immersion

Design Philosophy

Active Theory 代表了高端数字体验设计的极致追求。核心理念是"沉浸优先"——通过 WebGL、Three.js 等技术创造超越屏幕的 3D 交互体验。深色背景搭配紫色/青色光晕,营造未来感和科技感。每一个像素都为沉浸感服务。

Design Tokens

Dark Theme

#0a0a0a
#111113
#1a1a1e
#2a2a30

Accent Colors

#8b5cf6
#a78bfa
#22d3ee

Typography

Inter — Clean & Modern

Weights: 300-700

Spacing

4 / 8 / 16 / 24 / 32 / 48 / 64 / 96

3D Effects

FRONT
BACK
LEFT
RIGHT
TOP
BOTTOM
/* 3D Transform Setup */ .scene-3d { perspective: 1000px; transform-style: preserve-3d; } .object-3d { transform: rotateX(-20deg) rotateY(0); animation: rotate3d 6s linear infinite; }

CSS Implementation

/* Immersive Card */ .immersive-card { background: var(--at-gray); border: 1px solid rgba(255,255,255,0.06); position: relative; overflow: hidden; } .immersive-card::before { content: ''; position: absolute; inset: 0; background: radial-gradient( ellipse at 30% 50%, rgba(139, 92, 246, 0.15) 0%, transparent 50% ); }

Key Insights