Sitewright

Bookshelf studio hero

A studio portfolio whose first screen is a lit room: a full-width oak shelf of seven CSS 3D books with a pooled spotlight (daylight library or lamp-lit study), drag, arrow keys or a magnifying dock to pull one forward and show its cover, a detail strip with working actions, a stacking method section, catalogue dialog, journal accordion and a validated booking form.

What it is for

studio, product or tool-maker portfolio; any catalogue of a handful of items

Add it to a site

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

Files

  • components/fx/tpl/HeroBookshelf.tsx
  • components/fx/tpl/_hbs-data.tsx
  • components/fx/tpl/_hbs-shelf.tsx
  • components/fx/tpl/_ha-kit.tsx
  • components/fx/tpl/_dash.tsx
  • components/fx/tpl/_shared.tsx
  • components/fx/tpl/../ui/LightRays.tsx
  • components/fx/tpl/../ui/_bg-a.tsx
  • components/fx/tpl/../ui/_t2.ts
  • components/fx/tpl/../ui/Dock.tsx
  • components/fx/tpl/../ui/_menus-kit.tsx
  • components/fx/tpl/../ui/ScrollStack.tsx
  • components/fx/tpl/../ui/_galleries-data.tsx
  • components/fx/tpl/../ui/_galleries-hooks.ts
  • tpl-hero-bookshelf.css styles
  • ui-light-rays.css styles
  • ui-dock.css styles
  • ui-menus-stage.css styles
  • ui-scroll-stack.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.