FORM / FUNCTION —
HIỆN THỰC HÓA THỦ CÔNG SỐ
Form / Function biến tư liệu thiết kế công nghiệp thành một ấn phẩm số có chiều sâu và cảm giác vật liệu rõ nét. Đồ họa tạo trực tiếp trong trình duyệt tái hiện giấy, bê tông và bản vẽ CAD mà không cần tải những tệp hình ảnh nặng.

Bế Tắc Legacy vs. Luận Điểm Kiến Trúc
Payload Scan 52MB & Plugin Mô Phỏng Lật Trang 25fps
Lưu trữ trước cố tạo xúc giác vật lý bằng vũ lực: ảnh spread 4K không nén và plugin page-curl gắn DOM stutter mỗi cử chỉ scroll, phá hủy chính ảo giác vật liệu nó theo đuổi.
Tổng Hợp GLSL Không Raster & Typography Biến Kinetic
Mọi texture bề mặt — sợi giấy rag, cốt liệu bê tông thô, lướt specular foil — được tính toán học trên GPU thời gian thực. Typography phản hồi momentum scroll qua trục font biến bound.
BỐN HỆ THỐNG CON NỀN TẢNG
Grain Simplex Thủ Tục
Fragment shader GLSL 60 dòng tổng hợp phân tán sợi giấy rag vật lý và lướt specular foil trực tiếp trên GPU — không texture ảnh nào được tải.
Trục Biến Kinetic
Trục `wght`, `wdth`, và `slnt` ràng buộc với momentum scroll qua vòng nội suy rAF với decay mũ — chữ nén và giãn hữu cơ theo nhịp đọc.
Khóa Override Font Metric
Descriptor `ascent-override`, `descent-override`, và `size-adjust` cân bằng stack fallback với web type, loại bỏ mọi render jump khi font hydrate.
CAD Vector Isometric
Floorplate kiến trúc render thành path vector isometric sắc nét qua chiếu ma trận, xuất được sang tọa độ SVG — chi tiết blueprint xúc giác ở độ phân giải vô hạn.
XÚC GIÁC IN VẬT LÝ GẶP HIỆU NĂNG WEB DETERMINISTIC
Hầu hết xuất bản web cố bắt chước sách vật lý bằng cách tải 50MB ảnh scan nặng và plugin lật trang mô phỏng stutter ở 25fps. Mục tiêu của chúng tôi radical: đạt xúc giác vật lý chân thực, grain giấy tactile và blueprint kiến trúc hoàn toàn trong GLSL thời gian thực mà không một texture ảnh.
Thay vì tải ảnh nền giấy seamless 4K, một fragment shader GLSL tùy chỉnh 60 dòng tổng hợp grain và phân tán sợi giấy rag vật lý bằng toán học trực tiếp trên GPU ở 120 FPS.
Trục font biến (`wght`, `wdth`, `slnt`) ràng buộc động với momentum scroll người dùng qua nội suy `requestAnimationFrame` hiệu năng cao. Chữ nén và giãn hữu cơ theo ánh mắt người đọc.
Override font metric tùy chỉnh (`ascent-override`, `descent-override`, `size-adjust`) cân bằng hoàn hảo font hệ thống fallback với web type, loại bỏ hoàn toàn render jump khi font hydrate.
// Procedural GLSL Fragment Shader: Micro-tactile Paper & Concrete Normal Map
precision highp float;
uniform vec2 u_resolution;
uniform float u_time;
uniform vec2 u_mouse;
uniform float u_scroll_velocity;
// Simplex 2D noise generator for microscopic paper grain
vec3 mod289(vec3 x) { return x - floor(x * (1.0 / 289.0)) * 289.0; }
vec2 mod289(vec2 x) { return x - floor(x * (1.0 / 289.0)) * 289.0; }
vec3 permute(vec3 x) { return mod289(((x*34.0)+1.0)*x); }
float snoise(vec2 v) {
const vec4 C = vec4(0.211324865405187, 0.366025403784439,
-0.577350269189626, 0.024390243902439);
vec2 i = floor(v + dot(v, C.yy));
vec2 x0 = v - i + dot(i, C.xx);
vec2 i1 = (x0.x > x0.y) ? vec2(1.0, 0.0) : vec2(0.0, 1.0);
vec4 x12 = x0.xyxy + C.xxzz;
x12.xy -= i1;
i = mod289(i);
vec3 p = permute(permute(i.y + vec3(0.0, i1.y, 1.0)) + i.x + vec3(0.0, i1.x, 1.0));
vec3 m = max(0.5 - vec3(dot(x0,x0), dot(x12.xy,x12.xy), dot(x12.zw,x12.zw)), 0.0);
m = m*m ; m = m*m ;
vec3 x = 2.0 * fract(p * C.www) - 1.0;
vec3 h = abs(x) - 0.5;
vec3 ox = floor(x + 0.5);
vec3 a0 = x - ox;
m *= 1.79284291400159 - 0.85373472095314 * (a0*a0 + h*h);
vec3 g;
g.x = a0.x * x0.x + h.x * x0.y;
g.yz = a0.yz * x12.xz + h.yz * x12.yw;
return 130.0 * dot(m, g);
}
void main() {
vec2 uv = gl_FragCoord.xy / u_resolution.xy;
// Optical page curvature driven by fluid velocity
float bend = sin(uv.x * 3.14159) * (u_scroll_velocity * 0.04);
uv.y += bend;
// Micro-tactile fiber grain pass (Zero raster textures downloaded)
float grain = snoise(uv * 1280.0) * 0.038;
vec3 paperBase = vec3(0.941, 0.933, 0.925) - grain;
// Specular light sweep across printed foil typography
vec2 lightPos = u_mouse / u_resolution.xy;
float dist = length(uv - lightPos);
float specular = pow(max(1.0 - dist * 1.8, 0.0), 32.0) * 0.22;
gl_FragColor = vec4(paperBase + specular, 1.0);
}SPECIMEN TYPOGRAPHIC & XÚC GIÁC

CODEX VẬT LÝ SANG CANVAS SỐ
Spread tương tác minh họa trọng lượng font biến dịch động khi người đọc kéo qua ranh giới trang, mô phỏng lực cản xúc giác của giấy cotton archival Đức nặng.

CHỦ NGHĨA HỢP LÝ THỤY SĨ & KINETIC BERLIN
Mọi phân cấp typographic được dẫn xuất từ chủ nghĩa hiện đại Thụy Sĩ thập niên 1950 và sổ tay in Bauhaus đầu kỳ, đưa vào đời qua pipeline compute GPU hiện đại mà không hy sinh accessibility.
Xác Minh Hiệu Năng Định Lượng
| CHỈ SỐ KIỂM TOÁN | LƯU TRỮ RASTER LEGACY | THEMEIMPACT PROCEDURAL ENGINE | DELTA // LỢI ÍCH RÒNG |
|---|---|---|---|
| Truyền Raster Asset / Spread | 52 MB (Scan 4K) | 0 KB (Thủ Tục) | BĂNG THÔNG -100% |
| Frame Rate Scroll Trung Bình | 24.7 fps (Stutter) | 120 fps (Khóa) | +386% MƯỢT |
| Cumulative Layout Shift | 0.410 | 0.000 | 100% KHÔNG SHIFT |
| First Contentful Paint | 3.10 s | 0.60 s | FCP GIẢM -80.6% |
| Dwell Phiên Trung Bình | 1.3 phút | 4.8 phút | +269% TƯƠNG TÁC |
| Ghi Nhận Ngành | Không | Awwwards SOTD + FWA | 2 GIẢI TOÀN CẦU |
“Họ không mô phỏng giấy — họ tổng hợp nó. FORM/FUNCTION giờ đọc như codex in và chuyển động như máy. Người đọc của chúng tôi nghiêng người về phía màn hình.”
TẠO MỘT SPREAD SỐ UY QUYỀN.
Nâng tầm thương hiệu hoặc portfolio tổ chức của bạn với shader bespoke, hệ thống kinetic type linh hoạt và layout shift bằng không theo toán học.