Sitewright

Paper sketchbook hero

An illustrator's portfolio where the open sketchbook is the page: two grained paper pages on a desk lit by window light by day and a lamp at night, a title set into the left page, drawn plates that ink in, a page corner that curls under the pointer and turns by drag, a brass loupe that follows the pointer over the drawings, navigation as index tabs, plus a glass-lens loupe section, a filterable commissions index, a rates dialog and a validated contact form.

What it is for

illustrator, artist or designer portfolio; any personal site that should feel handmade

Add it to a site

1 · site.json
"effects": { "templates": ["hero-paper-sketchbook"] }
or on the command line
node ~/.claude/skills/sitewright/scripts/scaffold.mjs --config site.json --out ./my-site --templates hero-paper-sketchbook
2 · import it
import HeroPaperSketchbook from '@/components/fx/tpl/HeroPaperSketchbook';

Files

  • components/fx/tpl/HeroPaperSketchbook.tsx
  • components/fx/tpl/_hps-art.tsx
  • components/fx/tpl/_hps-book.tsx
  • components/fx/tpl/_hps-lens.tsx
  • components/fx/tpl/_hps-desk.tsx
  • components/fx/tpl/_hps-loupe.tsx
  • components/fx/tpl/_hps-work.tsx
  • components/fx/tpl/_hps-contact.tsx
  • components/fx/tpl/_dash.tsx
  • components/fx/tpl/_shared.tsx
  • components/fx/tpl/../ui/StickerPeel.tsx
  • components/fx/tpl/../ui/_motion-a.tsx
  • components/fx/tpl/../ui/_t2.ts
  • components/fx/tpl/../ui/TextCursor.tsx
  • components/fx/tpl/../ui/_text-b.ts
  • components/fx/tpl/../ui/FluidGlass.tsx
  • components/fx/tpl/../ui/_inputs-lensmap.ts
  • components/fx/tpl/../ui/_inputs-ui.ts
  • components/fx/tpl/../ui/ScrollReveal.tsx
  • tpl-hero-paper-sketchbook.css styles
  • ui-sticker-peel.css styles
  • ui-text-cursor.css styles
  • ui-fluid-glass.css styles
  • ui-scroll-reveal.css styles

About it

Original to Sitewright. MIT licensed. Demo data is fictional and deterministic. Every control on the page works, so try it before you take it.

It answers its own width rather than the screen's, so the tablet and phone buttons show the real responsive behaviour. Templates are not components: they are chosen with templates, not components.