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).
npx shadcn@latest add https://ui.aryank.space/r/procedural-computer-page.jsonInstalls from ui.aryank.space. To add it by hand, copy the files in Usage below, or register the @compronents namespace via the docs.
| Prop | Type | Default | Description |
|---|---|---|---|
| wordmark | string | "BLANK" | Fixed top-left wordmark over the canvas. |
| intro | string | Studio intro | Paragraph rendered in the blurred backdrop card. |
| contactEmail | string | "[email protected]" | Address opened by the Contact button and the C shortcut. |
| links | ProceduralComputerPageLink[] | Three BLANK links | Bottom-right social navigation as { label, href } pairs. |
| defaultDark | boolean | false | Start with the inverted (dark) palette; press T to toggle. |
wordmarktextFixed top-left studio mark.
introtextareaCopy inside the blurred glass card.
linkslinksBottom-right social nav.