The Showcase

The page, section by section

1. 01

   Hero backdrop

   Silk Field

   Slow liquid light behind the name gives the page a mood without a stock photo; the glass lens drifts on its own on phones.

2. 02

   Signature

   Flourish Name

   The first name draws itself with a swash when it comes into view: a personal mark, not a logo.

3. 03

   Calls to action

   Tidefill

   Two buttons that fill with liquid on hover; the ink label appears exactly where the fill is, so the hover reads as an invitation.

4. 04

   Selected work

   Specimen Card

   Each project is catalogued like a museum object, with its mark, a catalogue number and a tag for role, year and scope.

5. 05

   Case note

   Lenticular Card

   Before and after on one card: tilt it and the redesign argues for itself.

6. 06

   Kind words

   Halo Frame

   One client quote inside a frame with light travelling its edge; one is enough.

7. 07

   Contact

   Caustic Pool

   The page ends underwater: caustic light behind the invitation, so the last screen feels like a place, not a form.

Paste it into Claude, Cursor or ChatGPT with the component files, and ask for your own version: your name, your work, your product. It names each component and where to copy it from.

# Build brief: The Showcase

A second portfolio, for visual work: a living backdrop, a signature, and projects catalogued like objects.
For: Brand, product and visual designers whose work should be looked at before it is read about.

## Direction
- Violet night: #0c0816 ground, cream text (#efe8dc), lilac (#c8b9ea) as the only accent. Two moving backgrounds, never more: silk at the top, water at the bottom.
- The name is signed, not typeset. After that, one editorial serif (Instrument Serif) for headings and a plain sans for reading.
- Calls to action fill like a glass being poured, and there are only two of them: see the work, start a project.
- Every project gets a year, a role and a scope. Show one before-and-after argument in depth instead of twelve thumbnails.


## Page map
1. Hero backdrop: Silk Field. Slow liquid light behind the name gives the page a mood without a stock photo; the glass lens drifts on its own on phones.
2. Signature: Flourish Name. The first name draws itself with a swash when it comes into view: a personal mark, not a logo.
3. Calls to action: Tidefill. Two buttons that fill with liquid on hover; the ink label appears exactly where the fill is, so the hover reads as an invitation.
4. Selected work: Specimen Card. Each project is catalogued like a museum object, with its mark, a catalogue number and a tag for role, year and scope.
5. Case note: Lenticular Card. Before and after on one card: tilt it and the redesign argues for itself.
6. Kind words: Halo Frame. One client quote inside a frame with light travelling its edge; one is enough.
7. Contact: Caustic Pool. The page ends underwater: caustic light behind the invitation, so the last screen feels like a place, not a form.

## Components
Copy each component's files from its page (Code tab) into your project before you start, and use them as given: change props and content, not internals.
- Silk Field: https://tryvitrine.dev/components/silk-field (Domain-warped light that pours like liquid silk, with an optional glass lens that refracts the flow under your cursor.)
- Flourish Name: https://tryvitrine.dev/components/flourish-name (A name in italic serif that signs itself: a calligraphic swash draws under it with a thick-thin stroke, then the ink dot lands.)
- Tidefill: https://tryvitrine.dev/components/tidefill-button (A pill that fills like a tide: liquid rises from the bottom with a rolling wave, revealing the ink-coloured label exactly where it reaches.)
- Specimen Card: https://tryvitrine.dev/components/specimen-card (An object mounted under glass: hover lifts the pane with a sweep of reflection and swings out a paper catalogue tag.)
- Lenticular Card: https://tryvitrine.dev/components/lenticular-card (Two images interleaved behind ribbed plastic, like a lenticular print — tilt it and the stripes hand over from one to the other.)
- Halo Frame: https://tryvitrine.dev/components/halo-frame (A hairline frame with a comet of light endlessly orbiting its edge — pure CSS, driven by an animated @property angle.)
- Caustic Pool: https://tryvitrine.dev/components/caustic-pool (Light refracted through moving water onto the floor of a dark pool — a web of filaments, split faintly into colour.)

## Build
- Next.js (App Router), TypeScript, Tailwind CSS. No extra UI libraries.
- Write real content for this site: real names, dates, numbers and sentences. No lorem ipsum, no "Feature one".
- Compose the sections in the order of the page map. Keep each component's own spacing; add page rhythm with consistent section padding.
- Mobile first: every section must work at 375px wide without horizontal scrolling.
- Respect prefers-reduced-motion everywhere; every Vitrine component already does.

## Before you ship
- Run `/template-tells` (https://tryvitrine.dev/workshop/skills/template-tells) on everything you wrote yourself: copy, sections, styles.
- Run `/responsive-audit` (https://tryvitrine.dev/workshop/skills/responsive-audit) at 375, 768 and 1280.
- Run `/accessibility-pass` (https://tryvitrine.dev/workshop/skills/accessibility-pass).
- Run `/performance-pass` (https://tryvitrine.dev/workshop/skills/performance-pass) on a production build.
- Run `/technical-seo-audit` (https://tryvitrine.dev/workshop/skills/technical-seo-audit) and `/seo-auditor` (https://tryvitrine.dev/workshop/skills/seo-auditor) before launch.

Direction

• Violet night: #0c0816 ground, cream text (#efe8dc), lilac (#c8b9ea) as the only accent. Two moving backgrounds, never more: silk at the top, water at the bottom.
• The name is signed, not typeset. After that, one editorial serif (Instrument Serif) for headings and a plain sans for reading.
• Calls to action fill like a glass being poured, and there are only two of them: see the work, start a project.
• Every project gets a year, a role and a scope. Show one before-and-after argument in depth instead of twelve thumbnails.