About this template
This is the portfolio page from 3D Portfolio, published with the brief that produced it rather than as a screenshot. “Jack — 3D Creator” is the line the layout is built to carry. The whole page is built on black #0C0C0C underneath and white #D7E2EA for the type. Delivery is React and Tailwind CSS — one page, no plugin, no build tooling between you and the design. Motion is confined to 200ms transitions and a looping video bed. This reference is for a 3D, game or entertainment brand that wants the first screen settled before the build starts.
Designed for
- Quote a 1472x1080 frame in the handoff note so the next build does not have to re-derive it from the page.
- If the motion has to be dropped, the portfolio page still reads, with 85vh sections and 160px spacing steps doing the hierarchy work.
- Product teams writing their own Portfolio copy who need every line to keep the length the display type was sized for.
What's included
- Links before the action. The bar overlays the portfolio page instead of pushing it down, so the composition keeps the full height of the first screen. The bar sits over the 1472x1080 composition without a background of its own, so the media runs edge to edge underneath it. One action per bar.
- The spacing steps are quoted. The layout is solved against fixed values (85vh sections, 160px spacing steps and 200ms transitions), which is what keeps the first screen composed at any width. Spacing is quoted in the same units as the type, so the two can be compared directly. Keep the named values when you port the page.
- Badge above the fold. The badge is the only element allowed above the headline, which is what makes it read as an announcement instead of chrome. There is one announcement only, which is what makes the badge feel like news. One badge, one message.
- Numbers on the baseline. A compact stats strip carries the claims that would otherwise need a paragraph, which keeps the portfolio page from turning into a feature list. The label step is quoted in the brief, so it stays below the figures after a substitution.
Motion & interaction
Timings in milliseconds
Motion is measured in milliseconds here: 200ms. That is the whole animation budget, and it is spent on state changes rather than on a scroll timeline. If the easing changes, the duration has to be revisited with it. The timings are part of the design, not a finishing pass.
The canvas is the visual
Runtime rendering is the design decision here (a 3D transform on the main element), and the layout is built to leave it room. The render is the last element to be ready, so the page has to work in the state before it loads.
What to change first in 3D Portfolio
One line, one font, one accent: those three substitutions change the design most. 85vh sections, 160px spacing steps and 200ms transitions are the values that should not move. The subject is the part that should change.
The numbers behind the portfolio page
Type is the first number: 85vh sections and 160px spacing steps. The spacing follows from it, and everything else on the page is positioned against those two values. Nothing in this portfolio page depends on a default.
How the portfolio page reflows
The cost of a fluid scale is less control over exact sizes. What you get is a display line that stays proportionate, which is why a clamp between 120px and 160px is in the brief. The mobile version is a decision, not a fallback.
Frequently asked questions
What does the brief behind 3D Portfolio actually contain?
The captured brief runs 13,877 characters and covers the frame, the type scale, the palette and the transitions. Copying it gives you that text, and sending it to Studio stages the same request with the page already described.
Is the 3D Portfolio brief the same as the prompt I would write?
Everything quoted on the page comes from the captured 13,877-character brief rather than from a description written afterwards. That is why the numbers and the prose agree.
Why does the entry name React and Tailwind CSS at all?
3D Portfolio was built in React and Tailwind CSS, and the entry says so for provenance. The brief describes positions, sizes and timings, so it rebuilds in any framework that can set type and place elements.
