Portfolio

Spider Web

A portfolio as a website that is a web: a three.js 3D scene — a procedural web of threads with physics, wind and tears, dew drops, dust and haze, moon rays, bloom and grain. Works hang as cocoons on the threads and are listed on the left: hover lights the cocoon, click opens a card. The cursor pulls threads, “Respin” weaves a new one, flies fly, perch and get caught.

What you can change

  • sites — the works: title, url (the Open button), description and note in the card; as many cocoons as works
  • title, subtitle, caption — the heading, caption and list heading on the left
  • palette — moonlight, nightshade, ember, absinthe, aurora, vapor, gilded, crimson, sakura, silver: key, rim light, dew, dust, haze, streaks

A link for your AI agent: preview, code and instructions.

Preview

1440pxHost theme

Use it with AI

  1. 1. Copy the link.
  2. 2. Write to your agent in your own words and drop the link into the sentence.
  3. 3. The agent opens the link and installs the component from the registry.
AI
1Pick it here

put this on the home page as the hero:

https://vibeui.ru/c/folio-002?lang=en&theme=dark

2Paste into the chat
3Get it in your project

Not sure where to paste it? Step-by-step guide

Show the full instructions

What the link says, spelled out. Use it when your agent cannot open links — paste this text instead.

Loading…

For developers

The install command lives in the “Component source” block below — a signed link that stays valid for 24 hours.

Technical notes

One file, "use client", the three dependency (WebGL2, not WebGPU — for Safari/Firefox). The web: buildWeb(seed, n) with mulberry32 — a frame of 8 jittered corners, moorings to pinned far anchors, 30 radials with crossing nodes pre-inserted, two hub loops, a free zone, 16 spiral rings with geometric growth, 4 dangling scraps, cocoons (heavy nodes wrapped to the crossing and neighbours). Physics: Verlet in typed arrays — 2 substeps × 8 spring iterations by thread type (stiffness, slack, tear threshold, a budget of 4 tears), bends across a node, gravity, wind (breeze + gusts + flutter), "shape memory" towards the woven position (otherwise the web crumples), cursor grab with stickiness and tearing on a yank. Camera: fov 46, four weighted shots (the web lies flat, only the camera tilts), ±3°/±2° jitter, sway, ×1.3 pull-back in portrait; damped OrbitControls — dragging empty space rotates, the wheel zooms only with Ctrl/⌘ or when the block is taller than 80% of the window (otherwise the wheel scrolls the page), grabbing a thread disables the orbit. Thread light: three point lights with 1/(d²·0.5+1) falloff — key (−1.3, 1, 1.15) ×3.1, rim (1.7, −0.45, −1.9) ×1.4 and a wandering light on a sine path ×0.8; Kajiya–Kay sheen shininess 75, diffuse 0.09, shimmer along the arc, dew beads sin(arc·340)^16 by thread stickiness (spiral 1, hub 0.18, frame 0.05), thickness variation, exp(−d·0.09) falloff, a 1.15–1.7 visibility pool from the centre (moorings fade towards the anchors). Rendering: threads as two-triangle ribbons with pixel width (never thinner than 1.1px), additive; a light shaft from the moon and a pool of light below — visible when zoomed out; dew — 240 points on spiral nodes; dust — 520 points in the volume, drifting with the wind; cocoons — an InstancedMesh of faceted ellipsoids (a bumped icosahedron) with a silk shader; flies — a body of spheres, red eyes, 6 legs as lines, wings with iridescence and two smeared copies (48 Hz beat); AI: saccades, hovering, excursions, perching with grooming, startle from the cursor, getting caught (struggles, jerks the nodes, breaks free or leaves after 12 s). Post: scene into HalfFloat → UnrealBloomPass (0.5/0.55/0.12 at half res) → light at 0.4 res (36-sample dithered moon rays, anamorphic streaks on two axes, halation) → final (chromatic aberration, grade, grain, vignette, ACES, sRGB). 60 fps with a DPR cap of 1.25; after 40 slow frames — DPR 1, half the ray samples, rendering every other frame. Paused outside the viewport and on a hidden tab. Reduced motion: no wind, no flies, static grain. The panel, list and card are HTML over the canvas; the card follows the cocoon and stays within the edges. Without WebGL — a text fallback.

Tags

  • portfolio
  • spider web
  • three.js
  • webgl
  • 3d
  • physics
  • particles
  • bloom
  • interactive
  • hero
  • dark
Component source

The same file your agent installs. Here in case you would rather copy it by hand.

Loading…