About this template
Portfolio Cosmic solves the portfolio page problem for a 3D, game or entertainment brand with a single captured brief. The page's own headline reads “Designing seamless digital interactions by focusing on the unique nuances which bring systems to life”, and the composition is built around those exact words. The palette is black #000000 underneath, white #D1DAD8 for the type and blue #4E85BF carrying the accents, set in Inter. Delivery is React and Tailwind CSS, captured at 800x562 so the frame is fixed before any code is written. The page keeps its motion to 2700ms transitions. Use it as the reference when you are building a 3D, game or entertainment brand portfolio page and want a finished composition instead of a starting point.
Designed for
- Teams building a 3D, game or entertainment brand portfolio page who want the measured detail (a fixed 13px display size and 300vh sections) rather than a screenshot to copy.
- Made for a solo founder shipping one portfolio page for a 3D, game or entertainment brand and no design system behind them.
- People who brief a model on a portfolio page will use the 8,253-character prompt as the starting point.
What's included
- Navigation held to one row. The row spends its contrast in one place: the #4E85BF action, with the wordmark and the links held back on the ink colour. The links are set below the wordmark in size, and the #4E85BF action is the only element in the bar with any weight.
- Sizes fixed in the brief. Sizes are quoted rather than inherited: a fixed 13px display size, 300vh sections, 13px spacing steps and 2700ms transitions. Swap the face or the copy and those relationships still hold. A rebuild that hits those numbers looks like the reference without further tuning. Keep the values that look arbitrary.
- A grid, not a text run. The grid is the structure: panels of the same size, set in Inter, arranged so the eye moves across rather than down. The grid collapses to one column without changing the panel order. Let the panel count follow the copy.
- Links collapse at one width. The bar sits over the 800x562 composition without a background of its own, so the media runs edge to edge underneath it.
Motion & interaction
Durations from the brief
State changes are specified at 2700ms, so the feedback on the controls is a designed value rather than a browser default. The durations are short enough that feedback reads as a response rather than as an animation. One duration per behaviour.
Continuous horizontal motion
The horizontal strip is the loudest element after the headline: continuous motion, #4E85BF on the active item, and it never asks the reader to interact. The active item is marked with #4E85BF rather than with a size change.
What to change first in Portfolio Cosmic
Start with the promise, not the decoration. Rewrite “Designing seamless digital interactions by focusing on the unique nuances which bring systems to life” as one sentence that names what you do, then set it in Inter at the display size the brief uses. Replace blue #4E85BF with your own accent and check it against black #000000 before you touch anything else. Rewrite the display line before you touch the colour.
What moves in Portfolio Cosmic
Motion is limited to 2700ms transitions, parallax layers and a sticky element. Nothing in the portfolio page animates for longer than the brief allows. Nothing animates for its own sake in this portfolio page.
Why the 3D brief holds
Most 3D pages fail by adding: more sections, more gradients, more claims. Portfolio Cosmic goes the other way. The page says it out loud: “Designing seamless digital interactions by focusing on the unique nuances which bring systems to life”. The composition stays on black #000000 with blue #4E85BF for actions, which is enough to look deliberate. Portfolio Cosmic states the offer once and lets the composition repeat it rather than adding a second claim.
Frequently asked questions
How long is the prompt behind Portfolio Cosmic?
It is a build brief rather than a mood description: it names the composition at 800x562, the spacing and the motion values. Nothing in it treats the rendered image as the source of truth.
Why does the entry name React and Tailwind CSS at all?
Portfolio Cosmic 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.
Can I ship a page rebuilt from Portfolio Cosmic without crediting it?
The brief is a description, not a licence to redistribute someone else's assets. Keep the structure and the numbers, replace the media and the brand marks, and credit the source if a client asks where the layout came from. The reference was captured at 800x562.
