Folio

Field notes

An editorial portfolio on warm paper: a giant name whose letters stretch and swell on a variable-font wave, a reel wiping between posters, and a broken grid that scatters the name as you scroll. No images, no canvas.

• Variable fonts
• Scroll-driven
• Portfolio
• Light theme

Folio is a portfolio for a designer, studio, or art director who wants the name to do the talking. It fills the screen in two broken-grid lines, and every letter rides a wave through the width and weight axes of the variable font Anybody, so the name breathes while each line keeps nearly the same width. A small reel in the corner wipes from one project poster to the next.

Scroll and the letters scatter off the page, then a Selected Work grid reveals each project through a rising mask, followed by an about line and a contact footer with the email set huge. Every poster is drawn in SVG, so there are no image files to supply, and swapping one for a real photo is a single line. Visitors who prefer reduced motion get the name at rest and no scatter.

How it's built

• The letters stretch and swell, but each line barely changes width. Every letter rides a sine wave through the variable font’s wdth axis, and the wave spans exactly one cycle per line, so wide letters and narrow letters cancel out.
• Seamless reel: at t = 0 the last poster is fully shown and the first starts its clip-path wipe, so a 10 s loop closes with no cut.
• No images at all: every project poster is about 20 lines of SVG, so the whole portfolio rebuilds byte-for-byte from one prompt.
• useId() for SVG defs: the same poster in two places with a shared gradient id makes one borrow the other’s.

Inside the prompt

Every file below is written out in full, so your agent creates the project exactly — no guessing, no missing pieces.

folio-editorial/
├─ .gitignore
├─ index.html
├─ package.json
├─ tsconfig.json
├─ vite.config.ts
└─ src/
   ├─ App.tsx
   ├─ index.css
   ├─ main.tsx
   ├─ vite-env.d.ts
   ├─ components/
   │  ├─ Hero.tsx
   │  ├─ KineticName.tsx
   │  ├─ ProjectArt.tsx
   │  ├─ Reel.tsx
   │  └─ WorkGrid.tsx
   └─ lib/
      ├─ loop.ts
      └─ work.ts

Recut it

• Change the name, and split it across two linessrc/lib/work.ts → NAME
• Edit the projects, their colors, and poster stylessrc/lib/work.ts → PROJECTS
• Show real work instead of the SVG posterssrc/components/ProjectArt.tsx → ProjectArt
• Tune how far the letters stretch and swellsrc/components/KineticName.tsx → Letter
• Rearrange the broken gridsrc/components/WorkGrid.tsx → LAYOUT
• Swap paper, ink, and accent colorssrc/index.css → --color-accent