About this template
Rare Gallery keeps its decision trail: the brief that produced this portfolio page runs 4,964 characters. “A carefully curated collection beyond compare” is the line the layout is built to carry. The palette runs deep lime #222518 underneath, and the type is Instrument Serif. Delivery is React and Tailwind CSS, captured at 1920x1414 so the frame is fixed before any code is written. The brief spends its motion budget on 400ms transitions, cubic-bezier(0.16, 1, 0.3, 1) and a looping video bed. Start from the captured brief, then edit the portfolio page rather than rebuilding it from scratch.
Designed for
- Product marketers who need the portfolio page to still read with 6.9s of looping video behind the copy.
- Made for a solo founder shipping one portfolio page for an agency or studio and no design system behind them.
- Made for content leads rewriting a portfolio page whose headline has to stay as long as Rare Gallery's.
What's included
- A navigation bar that gets out of the way. 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 1920x1414 composition without a background of its own, so the media runs edge to edge underneath it.
- Measured, not eyeballed. The brief states its sizes at capture (64px spacing steps, 400ms transitions and cubic-bezier(0.16, 1, 0.3, 1) easing), so a rebuild can be verified instead of approximated. There is no invented intermediate value between the named ones; the measurement list is the whole system. Port the values with the layout.
- Badge above the fold. One badge, one message: the pill sits above the headline in Instrument Serif at the smallest step, and nothing else competes for that slot. There is one announcement only, which is what makes the badge feel like news. Remove it when the news is old.
- One field, one action. There is one decision to make here: fill the form or leave. Everything else on the screen supports that decision. The action sits directly under the last field, so the decision is never more than a glance away. One column, one action.
Motion & interaction
Ambient motion without a scroll library
Ambient movement comes from the 6.9s 1920x1414 loop rather than from scroll effects, which keeps the page calm and the type readable. The clip is muted and inline, so the first frame is available without an interaction.
Hover where it means something
Feedback is limited to hover states on the buttons and links rather than on every card, so the rest of the layout is a fixed composition. Press states are specified as well as hover, so a tap gives the same confirmation as a click.
Making the portfolio page yours
One line, one font, one accent: those three substitutions change the design most. 64px spacing steps, 400ms transitions and cubic-bezier(0.16, 1, 0.3, 1) easing are the values that should not move. Rewrite the display line before you touch the colour.
What moves in Rare Gallery
Motion here is a set of decisions, not a library: 400ms transitions, a 6.9s media loop and hover and press states, and nothing animates on scroll. The result is a page that feels authored: short durations, one entrance, and state changes that confirm an action rather than decorate it. Nothing animates for its own sake in this portfolio page.
How Rare Gallery sequences the first read
Read the first screen in one pass and the offer is already clear. navigation, the headline, the announcement badge, the form and the background clip arrive in sequence, separated by 64px spacing steps and 400ms transitions rather than by decorative dividers. A agency reader gets the offer before the options.
Frequently asked questions
What does the brief behind Rare Gallery actually contain?
It is a build brief rather than a mood description: it names the composition at 1920x1414, the spacing and the motion values. Nothing in it treats the rendered image as the source of truth.
Do I need React and Tailwind CSS to rebuild Rare Gallery?
Rare Gallery 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 use Rare Gallery in a client project?
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 1920x1414.
