Live demo: https://vignette.omnium.tools

Vignette is a website template for branding and design studios that work in hospitality, built in React with TypeScript. It also fits creative agencies, photographers and interior studios. You get two versions of the same site in one download: Next.js (App Router, static export) and plain React with Vite and React Router. Both look and move the same and build to a fast static site.

One idea runs through the site: everything grows from a point. The home page opens on the studio's name on paper, with photos hidden around it; they open as the cursor passes over them, lean in depth towards it and fade away. Selected work is a zoom where every next project grows out of its own point on the screen. Further down, an archive of hidden photos opens in circles under the cursor. On phones and tablets the middle of the screen does the job. Every page comes in the same way: the title's letters grow out of a point, the header drops in, and an iris cursor opens over the photos.

Two versions, pick yours:

Next.js 16: App Router, TypeScript, static export, deploy to Vercel in one click

React 19 + Vite + React Router: every page prerendered to real HTML, works with Lovable, Bolt and other Vite-based builders

Pages (12):

Home: the name with hidden photos, selected work zoom, the studio, services, clients, the archive, call to action

Work: all projects with a filter by service

Six project pages in two layouts: a wide photo with a gallery, or the text standing still while photos pass

Services: four groups with photos and lists, questions

Studio: story, how we work in four steps, team, recognition

Contact (form with the place, what you need and budget), 404

Built for developers:

All text in JSON files: edit the content without touching the pages, a page is made for every project

No Tailwind: plain CSS with design tokens

SEO built in: real HTML for every page, titles, descriptions, canonical links, sharing previews, sitemap and robots

Fonts self-hosted, no requests to other servers

Notes for AI assistants (Cursor, Claude, Copilot) in AGENTS

Clean page effects that start and stop with each page, smooth scrolling (Lenis) on mouse screens, respects reduce motion

Contact form with its own checks and choice chips (works with Formspree, Basin, Getform)

Fully responsive from 320 px

Included:

Next.js project and React (Vite) project, TypeScript

Favicon, made for Vignette

A README for each version: install, edit, deploy to Vercel, Netlify or Cloudflare Pages

Images: the photos in the live preview are for demonstration only and are not included. The download contains grey placeholder images of the same sizes; photo sources are listed in the licences file.

Fonts: Gloock, Onest and Ubuntu Sans Mono (SIL Open Font License). Libraries: React, Next.js, Vite, React Router, Lenis (MIT).

Questions or problems: support@omnium.tools