About this template
Before rebuilding a hero section for a 3D, game or entertainment brand, read 3D Collectible Hero: the composition and the specification behind it are both here. The palette runs muted green #85CC92 underneath and red #F4845F carrying the accents, and the type is Anton. Delivery is React and Tailwind CSS — one page, no plugin, no build tooling between you and the design. The page keeps its motion to 650ms transitions and cubic-bezier(0.4,0,0.2,1). It is most useful when the 3D & Games hero section has to survive a copy change without a redesign.
Designed for
- This hero section serves teams who have to justify a 640x470 frame to someone who was not in the kickoff.
- Made for agencies that bill by the round and want a fixed 22px display size and 100vh sections agreed before the first one.
- Made for a solo founder shipping one hero section for a 3D, game or entertainment brand and no design system behind them.
What's included
- Navigation without a background. Wordmark, links and the #F4845F action share one baseline, which is what keeps a thin row from looking accidental. The links are set below the wordmark in size, and the #F4845F action is the only element in the bar with any weight.
- Measured, not eyeballed. Sizes are quoted rather than inherited: a fixed 22px display size, 100vh sections, 200px spacing steps and 650ms transitions. Swap the face or the copy and those relationships still hold. Every value can be checked against the captured prompt, which is what makes a rebuild verifiable rather than approximate.
- Structure in one screen. The hero section is built so the copy lands before anything else: the type carries the hierarchy, the 640x470 frame holds the composition, and the supporting values stay quiet. The page is one composition at 640x470, which is why it holds together when the copy changes.
- The bar shares the page grid. Give the wordmark no more room than its type needs. The reference was captured at 640x470.
Motion & interaction
State changes, timed
Motion is measured in milliseconds here: 650ms using cubic-bezier(0.4,0,0.2,1). That is the whole animation budget, and it is spent on state changes rather than on a scroll timeline. One value is reused across the controls, so their timing cannot drift apart.
Texture instead of flat fill
A grain layer sits over muted green #85CC92, so large flat areas read as material rather than as plain fill. The grain is subtle enough that it never competes with the type.
What moves in 3D Collectible Hero
Motion is a short list rather than a system. The brief names 650ms transitions, hover and press states and a grain overlay, and the rest of the page stays still. Nothing animates for its own sake in this hero section.
What this hero section gets right
If your first screen currently explains three things, this is the version that explains one. navigation, the stats row and the feature list are staged in reading order, with a fixed 22px display size and 100vh sections setting the rhythm. 3D Collectible Hero states the offer once and lets the composition repeat it rather than adding a second claim.
How the hero section reflows
The brief describes what changes at each width (the scale is fluid rather than stepped and the section is held at 100vh), which means the mobile version is a decision rather than a squeeze. Contrast is held on the #F4845F accent over the media, and the video is muted and inline. The reflow keeps the action reachable at every width.
Frequently asked questions
How long is the prompt behind 3D Collectible Hero?
The captured brief runs 5,347 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 Collectible Hero brief the same as the prompt I would write?
Everything quoted on the page comes from the captured 5,347-character brief rather than from a description written afterwards. That is why the numbers and the prose agree.
Do I need React and Tailwind CSS to rebuild 3D Collectible Hero?
3D Collectible Hero 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.
