← workaholic-solutions.vercel.app WORKAHOLIC LAB — TEKNISK DEMO
RENDER— FPS
Workaholic Lab — teknisk demonstration

Vi jobbar i fler dimensioner än de flesta ser.

Det här är inte en produkt. Det är råkod — WebGL, GLSL-shaders och GPU-partiklar skrivna från grunden, för att visa var taket faktiskt ligger.

SCROLLA — 0D → 4D
§0–1D · SIGNAL

En vågform är bara en dimension som rör sig.

Allt vi bygger — appar, sensorer, portaler — börjar som ett flöde av värden över tid. Det här är ett genererat, levande signalflöde, ingen inspelning. Flytta muspekaren i höjdled över scenen för att ändra frekvens och amplitud i realtid.

SHADER: canvas2d_oscilloscope · CH1 · CH2 MUSHÖJD STYR FREKVENS/AMPLITUD
§2D · FÄLT

Två dimensioner räcker för att något ska kännas levande.

Varje prick följer ett brusfält som förändras kontinuerligt — ren matematik (fraktalt värde-brus), ingen förinspelad animation. För muspekaren över ytan så böjer sig fältet runt den, som en virvel.

SHADER: fbm_flow_field · JS/Canvas2D MUSEN BÖJER FÄLTET
§3D · VOLYM

I tre dimensioner blir punkter till rum.

9 000 partiklar renderas direkt på GPU:n via en egen GLSL-shader, var och en med sin egen bana och fas. Rör muspekaren genom molnet — partiklarna känner av var du är i rummet och trycks undan i realtid.

SHADER: gpu_point_cloud.glsl · Three.js/WebGL RÖR DIG GENOM MOLNET
§4D · TID

Den fjärde dimensionen är den du styr med handen.

Tryck ner och dra i sidled för att snurra klustret. Dra uppåt eller nedåt för att veckla ut/förstora eller vika ihop/förminska det — det stannar exakt där du släpper, och nästa dragning fortsätter därifrån.

SHADER: drag_explode.three · MeshNormalMaterial TRYCK OCH DRA
§STACK

Vad du faktiskt tittar på

Allt på den här sidan går att läsa i källkoden — inga stockvideos, inga Lottie-filer, ingen förrenderad animation.

Rå WebGL + GLSLRaymarchad SDF-scen i heroet — geometrin finns inte som mesh, den beräknas per pixel varje bildruta.
Canvas2D · signalSyntetiserat vågformssignal i realtid, ingen ljudfil eller video.
Canvas2D · fBM-brusFraktalt värde-brus driver ett strömningsfält med hundratals partiklar.
Three.js + GLSLGPU-punktmoln (upp till 9 000 punkter), anpassad vertex/fragment-shader, additiv blending.
Pointer-dragRotation, uppveckling och skala styrs direkt av muspekaren/fingret — ingen animationsbibliotek, bara pointer-events och interpolation varje bildruta.