Documentation · version 1.0.0

Manifold documentation

Manifold is 40 complete website demos in one download. Each demo is a self-contained Next.js 16 project: App Router, React 19, TypeScript, content in MDX and JSON, one hand-written stylesheet. There is no CMS and no database; this page is everything you need to go from the zip to a live site.

Getting started

1. Unzip the download. You get one folder, manifold-nextjs/.
2. Open manifold-nextjs/index.html in a browser. That is this package's showcase: filter the 40 demos by industry, search them, and open any demo in a new tab. Because a demo folder is a source project rather than a folder of pages, the cards open the hosted preview of each demo — the static export of the very project in the folder.
3. Pick the demo closest to your brief and copy its folder (for example demo-architecture/) somewhere on its own. That copy is your project.
4. In a terminal, with Node 20 or newer installed:

   cd demo-architecture
   npm install
   npm run dev

   The site is at http://localhost:3000. Edit a page, a component or a content file and the browser refreshes.

Package structure

manifold-nextjs/
├── index.html               showcase landing (this package's front page)
├── documentation.html       this page
├── changelog.html           package version history
├── licenses.html            template licence, fonts, image sources
├── README.txt
├── assets/                  the landing page's own css/js/fonts/images
├── demo-architecture/       one complete Next.js project
│   ├── package.json         scripts: dev, build, start, typecheck
│   ├── README.md · CHANGELOG.md · LICENSE.md · documentation/
│   ├── src/app/             one folder per route, page.tsx in each
│   ├── src/components/      header, footer, sections, client components
│   ├── src/content/         blog/*.mdx · projects/*.mdx · *.json
│   ├── src/lib/             content loaders, metadata helper
│   └── public/assets/
│       ├── css/styles.css   reset → framework → design → components
│       ├── fonts/           self-hosted WOFF2 + fonts.css
│       ├── images/
│       └── videos/          only where the design uses video
└── demo-…/                  40 demos in all

Demo folders share nothing with each other and nothing with the landing page: no workspace, no shared node_modules, no common package. Moving, renaming or deleting a demo folder cannot break another demo. Deleting the landing page and the root assets/ is fine once you have chosen a demo.

Choosing a demo

Demos are named after the industry they were designed for; the brand shown inside a demo is fictional. "Shop" means the demo ships a working cart and checkout flow. "Templates" is the number of distinct page.tsx files; "Pages" is how many static pages they render.

Editing a demo

Content

Blog posts, projects, services, products and the like are files in src/content/: MDX with frontmatter for anything with a body of prose, JSON for lists and page copy. Add a file and the listing page, the detail page and the related items update on their own; the loaders in src/lib/ read the folder at build time. Page-level copy that is not a collection is in the page itself, src/app/<route>/page.tsx, as plain JSX text.

Header and footer

Both are components in src/components/layout/, rendered once per page by the pages that use them. A navigation change is one edit.

Page titles and social meta

Every demo's root layout (src/app/layout.tsx) sets a title template, "Manifold – … Demo · %s", so the demos are easy to tell apart in browser tabs; each page supplies only its own part ("About", a post's title). Replace the template with your own site name before launch. Descriptions, Open Graph and Twitter cards go through the same Metadata API, in the page's metadata export or its generateMetadata.

Colours, type and spacing

Every colour, font family, type size, spacing step and radius is a CSS custom property declared once near the top of the demo's public/assets/css/styles.css, in the design section's :root block. Change a value there and it changes everywhere it is used. The demo's style-guide route shows every token rendered, which is the fastest way to see what a change does.

The stylesheet is organised in four labelled sections: the reset, the framework layer (grid, containers, utilities), the design (tokens and page styles) and the hand-written components (navigation, sliders, accordions, forms). There is no utility framework and no CSS-in-JS; class names in the JSX are the stylesheet's own.

Images and video

Images live in the demo's public/assets/images/, one file per picture, capped at 1600 px on the long edge as WebP or AVIF, and are referenced from the JSX and the content files by their public path (/assets/images/…). Replace a picture by replacing the file, or point the src at your own; a 1200–1600 px WebP at quality 80 is a good target. The demos use plain <img> elements, so a srcSet can be added where you want phone-sized alternatives; the Portfolio demo uses next/image and takes its sizes from the component.

Where a demo uses background video it ships one MP4 (H.264, muted, looped, 1280 px) plus a poster image. Replace both together.

Client components

Pages are Server Components: the browser gets markup, not a framework. The few things that move — navigation, tabs, accordions, sliders, scroll reveals, counters, forms and the cart — are client components in src/components/, marked "use client", and nothing else hydrates. The stylesheet owns every value (what moves, how far, how long); the components only decide when. Motion respects prefers-reduced-motion and re-runs on client navigation, so a route change looks like a page load.

Deploying

npm run build prerenders every route to static HTML; npm run start serves the build. Push the demo folder to a Git repository and connect it to Vercel, Netlify, Cloudflare or AWS Amplify and the host builds it the same way, or run the build on any Node 20 host. For a plain web server add output: "export" to next.config.ts and upload the out/ folder — that is exactly how the hosted preview of this package was made. No server-side data fetching, no environment variables, no database.

Forms are static markup. Point each form at your form handler (Netlify Forms, Formspree, Basin, your own route) or wire it to your CRM; the demos validate on the client and show success states, but nothing is sent until you connect a backend. The same applies to checkout in the shop demos: the cart, totals and flow are complete, and the payment step is where you connect your provider.

Fonts and licences

Every demo self-hosts its fonts as WOFF2 in public/assets/fonts/ with an @font-face map; no page makes a request to Google Fonts or any CDN. All shipped fonts are under the SIL Open Font License or an equivalent redistributable licence. The package's licences page lists the families per demo, and each demo's LICENSE.md lists its fonts, image and icon sources and npm packages with their licences.

Support

Questions about setup, customisation or deployment are answered by the developer who wrote the code. Email contact@kaziehsan.com with the demo name and, if it helps, the page and a screenshot.