About this template
Read Pixel Grid Hover as a portfolio page spec: the values were written down before the page was built. “Brand Strategy & Product Design” is the line the layout is built to carry. Colour is limited to white #EBEBEB underneath and black #1A1819 for the type, set in DM Sans. The entry names the stack that produced the page (React and Tailwind CSS) rather than hiding it. The motion budget is 0.7s transitions and cubic-bezier(0.22,1,0.36,1). Treat it as the brief for an agency or studio portfolio page that has to hold up under a rebuild, not just a first look.
Designed for
- This portfolio page is built for agencies that need the 640x472 frame to survive three rounds of client edits.
- Start from type from 12px to 14px and 12px spacing steps and let the palette follow, because the spacing is what makes this portfolio page read.
- People who brief a model on a portfolio page will use the 8,672-character prompt as the starting point.
What's included
- Sizes fixed in the brief. The brief names the numbers: type from 12px to 14px, 12px spacing steps, 0.7s transitions and cubic-bezier(0.22,1,0.36,1) easing. That is why the composition holds together, because there is no invented spacing step between the type and the frame. The smallest and largest values in that list set the range the composition works in.
- A pill for the one thing that is new. One badge, one message: the pill sits above the headline in DM Sans at the smallest step, and nothing else competes for that slot. It is positioned so the headline keeps the centre of the composition.
- Cards do the structuring. Where a run of copy would go, this page puts a set of panels, which is what keeps the portfolio page scannable. The accent inside the grid marks one element at most, so panels do not compete with each other. Space the panels; do not outline them. The reference was captured at 640x472.
- Values you can check. Spacing is quoted the same way (type from 12px to 14px, 12px spacing steps, 0.7s transitions and cubic-bezier(0.22,1,0.36,1) easing), not as a scale that grows on its own.
Motion & interaction
The page answers the scroll
Parallax is the page's single scroll behaviour, so the effect has a defined place in the composition. The effect is decorative: turn it off and the hierarchy still works.
Feedback on the controls
The page answers only where it can be acted on: hover states on the buttons and links rather than on every card. The interactive states do not move layout, so nothing jumps under the pointer. Do not animate layout on hover.
How the portfolio page reflows
Responsive here means the scale changes and the sequence does not. the type is clamped between 12px and 14px, and the reading order stays where the brief put it. The narrow layout is a decision rather than a squeeze, and the hierarchy survives it.
Why the agency brief holds
A stock hero and this portfolio page use the same parts. Here they are ordered by the announcement badge, the stats row, the card grid and the footer and measured with type from 12px to 14px, 12px spacing steps, 0.7s transitions and cubic-bezier(0.22,1,0.36,1) easing, so the screen reads as a sequence rather than a container. Pixel Grid Hover states the offer once and lets the composition repeat it rather than adding a second claim.
Reading Pixel Grid Hover as a spec
8,672 characters of brief produce a full specification. The load-bearing part is short: type from 12px to 14px, 12px spacing steps, 0.7s transitions and cubic-bezier(0.22,1,0.36,1) easing. Nothing in this portfolio page depends on a default.
Frequently asked questions
Is the Pixel Grid Hover prompt a finished spec or a starting point?
The captured brief runs 8,672 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.
Why does the entry name React and Tailwind CSS at all?
Pixel Grid Hover 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 keep the Pixel Grid Hover transitions and change the timings?
Entrances and state changes are in the 0.7s range on cubic-bezier(0.22,1,0.36,1). They are driven by state changes rather than a scroll library, and they never hold up the copy.
