PRO

Procedural Computer Page

A full-bleed WebGL2 studio homepage whose entire background is a single raymarched fragment shader. Three tumbling 3D rings, each an analytic ellipse SDF resolved with a twelve-step Newton refinement, are smooth-unioned with a pointer-tracked crosshair and drawn twice per frame: a crisp flat line pass and a normal-shaded emboss pass, cross-faded live by pressing B. The rings orbit on a fixed fifteen second loop, the wheel injects decaying rotational velocity, the pointer is lerped toward the crosshair with exponential smoothing, and toggling dark mode inverts the grey palette. Fixed wordmark, blurred intro card, contact button, and social nav sit over the canvas. Pure WebGL2, no dependencies; keyboard shortcuts for theme (T), contact (C), and emboss (B).

Page
Install
npx shadcn@latest add https://ui.aryank.space/r/procedural-computer-page.json

Installs from ui.aryank.space. To add it by hand, copy the files in Usage below, or register the @compronents namespace via the docs.

Files

API
PropTypeDefaultDescription
wordmarkstring"BLANK"Fixed top-left wordmark over the canvas.
introstringStudio introParagraph rendered in the blurred backdrop card.
contactEmailstring"[email protected]"Address opened by the Contact button and the C shortcut.
linksProceduralComputerPageLink[]Three BLANK linksBottom-right social navigation as { label, href } pairs.
defaultDarkbooleanfalseStart with the inverted (dark) palette; press T to toggle.
Customize
wordmarktext

Fixed top-left studio mark.

introtextarea

Copy inside the blurred glass card.

linkslinks

Bottom-right social nav.

Dependencies
None.