Sitewright

Templates

Whole screens to start from: dashboards, pages and a brand board. They answer their own width, so the full-screen view can be squeezed to a tablet or a phone. Not components: choose them with effects.templates or --templates.

BoardUI-style Overview

A shop dashboard built from the BoardUI-style components with six working views: an overview (period switch, four KPI cards with info tips, revenue and orders charts against last year, recent customers), a customers table with sort, filters, selection and edit, reports with CSV export, a notification inbox shared with the bell, support and settings forms. The sidebar collapses to a rail and the layout follows its container.

DashboardsOpen full screen

Use it for. Shop, SaaS or subscription admin home: revenue, orders, customers, notifications.

"effects": { "templates": ["boardui-overview"] }

Bento board

A share-ready brand board in a bento grid: statement, key number, logo, type sample, colour swatches, an abstract picture drawn from the brand colours, tone words, a slice of UI and a quote; reflows from four columns to one with its container.

BrandOpen full screen

Use it for. Pitch decks, case studies and portfolio shots for the brand the site was generated for; an About or Brand page; a launch post image.

"effects": { "templates": ["bento-board"] }

Analytics

Web analytics with six real views: overview, sortable pages with per-page trend and referrers, channels and UTM campaigns with compare, audience with cohort retention, goals with funnels and a validated goal form, and site settings.

DashboardsOpen full screen

Use it for. Site or product analytics, marketing reports, any traffic or usage overview.

"effects": { "templates": ["analytics-dashboard"] }

AI assistant

A conversation next to the answer, plus a Results library of saved analyses and a Tables schema browser: ask in plain words and get a chart, table, summary and query, then save, rename, pin and revisit it.

DashboardsOpen full screen

Use it for. Analytics copilots, internal data tools, reporting assistants.

"effects": { "templates": ["assistant-dashboard"] }

Finance

A business banking app with five working views: an overview, accounts with balance history and statements, a full transactions ledger (filters, date range, bulk categorise and export, detail drawer, approvals), bills with a calendar, pay now, schedule and autopay, and insights (stacked spend by category, top merchants, detected subscriptions, unusual-spend alerts, savings goals).

DashboardsOpen full screen

Use it for. Banking, bookkeeping, budgeting, subscription revenue.

"effects": { "templates": ["finance-dashboard"] }

Support inbox

A support workspace: a three-pane inbox, a searchable customer table with customer pages, reports (response times, volume, heatmap, CSAT, SLA breaches), a help center with an article reader, and settings for canned replies, SLA, routing and alerts.

DashboardsOpen full screen

Use it for. Customer support, messaging, shared mailboxes.

"effects": { "templates": ["inbox-dashboard"] }

Operations

A workshop operations console with seven working views: overview, orders with a detail drawer and start/ready/ship actions, a production station board with block and crew actions, inventory with a purchase order builder, suppliers with price history, reports with a period selector, and validated settings.

DashboardsOpen full screen

Use it for. Manufacturing, warehouses, logistics, ERP back offices.

"effects": { "templates": ["operations-dashboard"] }

Projects

Team work in one place: an overview with burndown, a full-height kanban with swimlanes, WIP limits and a task drawer, a Gantt timeline with dependencies, and a per-person weekly workload heatmap you can rebalance.

DashboardsOpen full screen

Use it for. Project and sprint management, agency and team tools.

"effects": { "templates": ["project-dashboard"] }

Sales pipeline

A CRM with six real views: the pipeline board (drag and keyboard moves), a deals table with bulk actions and a detail drawer, accounts with contacts and timeline, an activity feed with a log form, reports (forecast by month, leaderboard, funnel, win and loss) and validated pipeline settings.

DashboardsOpen full screen

Use it for. CRM, account management, lead tracking.

"effects": { "templates": ["sales-dashboard"] }

Night temple hero

Cinematic full-bleed landing page for a lantern-lit mountain retreat: a monumental night temple scene (parallax ridges, mist, rain, a lit pagoda, a pointer-carried lantern that really lights the title), two lines of widely tracked display type, one call to action, then a scroll-linked night-to-dawn journey with a split-flap clock, rooms with a validated booking dialog, rituals and a letters form.

PagesOpen full screen

Use it for. travel, hospitality or event landing page with an atmospheric night hero

"effects": { "templates": ["hero-night-temple"] }

Living green hero

A botanical landing page whose first screen is one object: a glass terrarium with a miniature moss forest inside (refracting rim, condensation, running drops, chrome base) centred between a split serif headline, with hairline callouts, drifting spores, pointer parallax and a liquid-metal CTA. Below: a scroll-revealed story, a filterable and sortable bento shelf with a working basket and checkout, a self-drawing vine timeline and a newsletter form.

PagesOpen full screen

Use it for. organic product, skincare, wellness or garden brand landing page whose hero is one hero object

"effects": { "templates": ["hero-living-green"] }

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.

PagesOpen full screen

Use it for. publisher, bookshop, magazine or editorial landing page

"effects": { "templates": ["hero-book-showcase"] }

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.

PagesOpen full screen

Use it for. illustrator, artist or designer portfolio; any personal site that should feel handmade

"effects": { "templates": ["hero-paper-sketchbook"] }

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.

PagesOpen full screen

Use it for. studio, product or tool-maker portfolio; any catalogue of a handful of items

"effects": { "templates": ["hero-bookshelf"] }

Art marketplace page

Landing page with nav and cart, layered art-frame hero, filterable artwork grid with likes and hover zoom, artist spotlight, categories, newsletter and footer.

PagesOpen full screen

Use it for. shop or portfolio landing page

"effects": { "templates": ["art-marketplace-page"] }

Restaurant landing page

Hero with a rotating plate and steam, working menu tabs, validated reservation form with confirmation, opening hours and a reviews carousel.

PagesOpen full screen

Use it for. restaurant, cafe or venue landing page

"effects": { "templates": ["restaurant-landing-page"] }

Wind 404 page

An illustrated landscape 404 where the headline letters bend away from the pointer on springs, with gentle automatic gusts on touch, a home button and search suggestions.

PagesOpen full screen

Use it for. 404 / not found page

"effects": { "templates": ["wind-404-page"] }

Lamp login

A login form under a hanging lamp: pull the cord button to switch the light on and reveal a light cone; the form with validation and submit state works either way.

PagesOpen full screen

Use it for. sign-in page, connect page

"effects": { "templates": ["lamp-login"] }