About this template
Talent Collective gives an agency or studio a finished first screen and the numbers that produced it. The palette runs gray #BAB8B5 underneath, and the type is Geist. Delivery is React and Tailwind CSS, captured at 1904x1080 so the frame is fixed before any code is written. Motion comes down to 700ms transitions and a looping video bed. Treat it as the brief for an agency or studio landing page that has to hold up under a rebuild, not just a first look.
Designed for
- This landing page serves founders who need one screen of proof that agency copy can carry 6.5s of looping video.
- People who brief a model on a landing page will use the 9,583-character prompt as the starting point.
- Made for content leads rewriting a landing page whose headline has to stay as long as Talent Collective's.
What's included
- Top row, one action. A short run of links and a single action sit over the landing page, held at 40px spacing steps and 700ms transitions so the bar never competes with the composition behind it. The bar sits over the 1904x1080 composition without a background of its own, so the media runs edge to edge underneath it.
- Labels under the figures. The figures are set in Geist at a size closer to the headline than to the body copy. Figures are set at one weight, so the row does not rank its own statistics.
- Columns, not a link dump. Links are grouped into columns with the wordmark in its own block, which keeps a long footer readable instead of turning it into a list. Type sizes step down from the column headings to the links, so the hierarchy survives a dense footer. Group links; do not dump them.
- One row, no drawers. Focus and hover states are specified for each link rather than inherited from the browser. Test the bar over your own media before giving it a background.
Motion & interaction
State changes, timed
State changes are specified at 700ms, so the feedback on the controls is a designed value rather than a browser default. The same duration is reused across controls, which keeps the interactions feeling like one system. One duration per behaviour.
The loop does the ambient work
The background clip runs 6.5s at 1904x1080 on an endless loop, muted and inline, so the page keeps moving while the reader's attention is on the copy. No scroll library is required, because the only ambient motion is the media itself. Because it is muted, the loop can run under the copy without competing for sound or focus. Shoot or export at 1904x1080 or wider.
How Talent Collective sequences the first read
Attention is directed rather than left to chance. The sequence runs navigation, the headline, the stats row, the feature list and the footer, and each stop is sized against 40px spacing steps and 700ms transitions so nothing arrives out of order. A agency reader gets the offer before the options.
Making the landing page yours
Change the copy and the media first, the colour second, the layout last. The 1904x1080 frame and the Geist scale are what hold the page together, so substitute around them rather than through them. If a new element does not help explain the offer or the next action, it belongs below the fold.
How the landing page reflows
You cannot fix a narrow screen by shrinking it. This brief handles the change in the type and the navigation instead: the scale is fluid rather than stepped. Width changes the measurements, not the reading path.
Frequently asked questions
Is the Talent Collective prompt a finished spec or a starting point?
It is a build brief rather than a mood description: it names the composition at 1904x1080, the spacing and the motion values. Nothing in it treats the rendered image as the source of truth.
How much of Talent Collective depends on React and Tailwind CSS?
Talent Collective 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.
How should I handle the Talent Collective media in a client build?
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 1904x1080.
