1. Tilt and parallax: 3D-looking, mostly CSS
The lightest kind. Project cards tilt toward the cursor, layers of an image move at different speeds, or a hero image shifts slightly as you scroll. These are done with CSS transforms (perspective, rotateX, rotateY, translateZ) and a few lines of JavaScript that follow the pointer or the scroll position.
They add depth without loading any 3D library, and they run well on almost any device. The limit is that nothing is really 3D: there are no models and no camera, only flat layers moved in space. Use them to make a grid of work feel more alive, not as the main idea of the site.
2. Scroll-driven 3D: a scene that moves as you read
A 3D object or scene stays on screen and turns, opens or changes as the visitor scrolls, while text sections pass by. Product launch pages use this a lot. It is usually built with Three.js or React Three Fiber for the scene and an animation library such as GSAP with its ScrollTrigger plugin to tie the camera or the model to the scroll position.
It tells a story in order, which suits case studies. It costs more: a 3D library, at least one model, and careful tuning so the motion stays smooth while the page scrolls. Scroll-jacking, where the page stops scrolling normally, is the most common way these sites frustrate people.
3. A WebGL hero: one 3D scene at the top
A single interactive scene in the first screen: a shape that reacts to the mouse, particles, a model of something you made, a shader that ripples. Below it, the rest of the portfolio is a normal page. Tools range from Spline, where you design the scene visually and embed it, to Three.js or React Three Fiber in code, with models made in Blender.
This is the best balance for many people. It makes a strong first impression and leaves the work itself easy to read. The risk is the first screen loading slowly, which is exactly where visitors decide whether to stay, so the scene should load after the text and have a still image as a fallback.
4. An explorable world: the portfolio is the space
The whole portfolio is a 3D place: a room, an island, a town or a game. Visitors move around and find projects as objects. The best-known examples, such as Bruno Simon’s portfolio where you drive a small car around a world, took their makers weeks of work with Three.js and Blender, and a lot of skill.
Nothing is more memorable, and nothing costs more to build or to keep up to date. It also has the biggest risks: long loading, work hidden behind exploration and poor results on weak phones. A world works best when there is also a plain way in, such as a menu or a normal page with the same projects.
The tools, and what each asks of you
Three.js is the most used JavaScript library for 3D in the browser; it handles the renderer, camera, lights, materials and model loading on top of WebGL. React Three Fiber lets you write a Three.js scene as React components, which fits sites already built with React or Next.js. Spline is a visual editor for 3D scenes that exports an embed, quick to start with but heavier and less flexible than hand-written code. Blender is where most custom models are made and textured before being exported, usually as glTF or GLB files.
Building any of the bigger effects yourself means learning at least one of these, plus how to compress models and textures. If your goal is a portfolio rather than learning 3D, a tool that gives you the 3D part ready-made saves most of that time.
Rules that keep a 3D portfolio fast
Whatever kind of effect you choose, the same habits decide whether the site feels quick or heavy:
- Keep your name, introduction and project descriptions as real HTML text, not text drawn inside the scene, so search engines, screen readers and translation tools can read them.
- Load the 3D after the page: show the text first, then load the library and models when the scene is about to be seen or when someone taps to open it.
- Compress models (glTF with Draco or Meshopt) and textures (KTX2 or WebP), and keep polygon counts low.
- Lower the quality on weaker devices: smaller render size, fewer shadows, a lower frame rate when nothing moves.
- Respect prefers-reduced-motion and offer a still image or a plain version for people who turn motion off.
- Have a fallback when WebGL is not available, and never make the 3D the only route to your work or contact details.
Where Perlink fits
Perlink gives you the explorable kind without code. Your portfolio is a normal page that loads fast and that search engines can read, and the same page is a 3D room visitors can walk around: your photos in picture frames on the walls, links on a laptop or a neon sign, a desk, shelves and lamps, on one of 11 lands, by day or night.
The room only loads when it is opened, or first if you choose room-first, and it adjusts its quality to the device, using WebGL or WebGPU where the browser has it. You arrange everything in a visual editor, and you can record a vertical video tour of the room for social media.