FIELD NOTES / 001 — BISKIN LAB

00 · OPENING SEQUENCE

Everything I learned this week, compressed into one page.

STACKVanilla · HTML · CSS · JS

DEPSZero

RUNTIMEDouble-click, done

SOURCES4 sites · 1 repo · 13k★

↓ SCROLL ↓

01 · NUMBER FLOW / TABULAR NUMS

Live counters that don't jitter.

Sites studied

Patterns extracted

GitHub stars (pascal)

CSS vars used here

0tokens

SOURCE — @number-flow/react · string-tune palette FONT-VARIANT-NUMERIC: TABULAR-NUMS

02 · SCROLL PROGRESS AS CSS VAR

Drive animation with math, not keyframes.

A rAF loop writes --p (0 → 1) to each tracked element as it passes through the viewport. The element expresses rotation, scale, and hue as pure CSS math on that single variable. No GSAP. No ScrollTrigger.

.shape {
  --p: 0;
  transform:
    rotate(calc(var(--p) * 720deg))
    scale(calc(0.3 + var(--p) * 0.9));
  filter: hue-rotate(calc(var(--p) * 360deg));
}

SOURCE — string-tune.fiddle.digital rAF · IntersectionObserver · 0 DEPS

03 · INERTIA / DRAG / MOMENTUM

Drag it. Let it keep going.

← CLICK & DRAG → VELOCITY-DECAYED MOMENTUM 8 CARDS

SOURCE — smooothy.federic.ooo POINTER EVENTS · rAF DECAY · CLAMP

04 · PARTICLE FIELD / MOUSE REPEL

800 particles. One attractor.

[:: IDLE ::] 60 FPS

SOURCE — particles.casberry.in (simplified) 2D CANVAS · VELOCITY · FRICTION

05 · MAGNETIC HOVER / POINTER PULL

Click me. Try.

SOURCE — classic motion (smooothy cursor + bouncy) DELTA × 0.35 · SPRING RELEASE

06 · SPRING / BOUNCY / DATA-MODULE

Hover each letter.

DISASSEMBLE

SOURCE — smooothy data-module="bouncy" CUBIC-BEZIER(0.34, 1.56, 0.64, 1)

08 · EXPLODED VIEW / TECH DISASSEMBLE

Every component. Pulled apart.

SPECIMEN 001 DRIVE_X · NVMe M.2 REV A.4

[:: COMPONENT MANIFEST — 08 PARTS ::]

01Housing · TopAl 7075 · 1.8mm

02Thermal Pad12 W/m·K

03EMI ShieldNickel · 0.15mm

04NAND Memory3D TLC · 2TB

05ControllerPhison E26 · 8ch

06PCB Substrate4-layer · FR-4

07ConnectorM.2 · PCIe 5.0

08Housing · BottomAl 7075 · 1.8mm

EXPLODE SCROLL ↓

SOURCE — iFixit teardowns · Apple product explosions · Dieter Rams CSS 3D TRANSFORM · SCROLL-LINKED Z-OFFSET · STICKY STAGE

07 · CHROMATIC ABERRATION / DITHER

Hover. Signal lost.

[SIGNAL. FOUND.] [SIGNAL. FOUND.] [SIGNAL. FOUND.]

SOURCE — astrodither.robertborghesi.is RGB CHANNEL SPLIT · MIX-BLEND-MODE: SCREEN