Sitewright

Book showcase hero

Editorial publisher landing page on a 12-column grid: an enormous serif headline crosses a tall CSS-3D book (cover, spine, page block, slow turn, pointer tilt) and is cut along its real silhouette, small-caps facts, a lede, one action, a marquee of review quotes, a keyboard tab list of six covers with a 3D detail panel, excerpt and reading-list dialogs, a canvas-poster player with seek, speed, captions and a clickable transcript, and a validated newsletter.

What it is for

publisher, bookshop, magazine or editorial landing page

Add it to a site

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

Files

  • components/fx/tpl/HeroBookShowcase.tsx
  • components/fx/tpl/_ha-kit.tsx
  • components/fx/tpl/_ha-books.tsx
  • components/fx/tpl/_ha-poster.tsx
  • components/fx/tpl/_hbs-book3d.tsx
  • components/fx/tpl/_dash.tsx
  • components/fx/tpl/../ui/LogoLoop.tsx
  • components/fx/tpl/../ui/_motion-a.tsx
  • components/fx/tpl/../ui/_t2.ts
  • components/fx/tpl/../ui/ScrollFloat.tsx
  • components/fx/tpl/../ui/_text-b.ts
  • components/fx/tpl/../ui/VariableProximity.tsx
  • components/fx/tpl/../ui/_text-c.ts
  • tpl-heroes-a.css styles
  • tpl-hero-book-showcase.css styles
  • ui-logo-loop.css styles
  • ui-scroll-float.css styles
  • ui-variable-proximity.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.