Prism: AI creative app landing page template for Next.js.

$39one-time payment

Buy PrismLive demo

Checkout opens soon.

Next.js 15
Tailwind CSS v4
TypeScript
10 sections
Dark
No API keys
Updated Oct 8, 2026

Live demo

The Prism landing page template on desktop, from the hero to the footer

Overview

A premium launch page for AI creative apps and consumer tools, built around original artwork and an interactive workspace. Three complete themes, two hero compositions and independent sections make it easy to adapt to your own product.

Made for: AI image and avatar apps, Photo and video tools, Design utilities and consumer apps
Highlights: Graphite, Paper and Studio themes with two hero layouts
Filterable artwork gallery with prompt-to-workspace dialogs
Colour comparison, canvas crops and real example image exports
Modular sections, typed content config and original artwork
The look: Graphite and violet, white and cobalt, or warm stone and coral. Manrope display type, Geist interface type, a custom prism mark, fine borders and layered product surfaces. Six original artworks bring colour to a restrained interface.

Sections

01
Navigation
Anchor navigation, a mobile menu and a working workspace action.
02
Hero
Split or centered composition with a React workspace, editable prompts and example presets.
03
Explore
Six original artworks with category filters, prompt dialogs and a working copy action.
04
Product
Keyboard-accessible Create, Refine and Export tabs, a live colour comparison and real cropped image downloads.
05
Capabilities
An asymmetrical bento with visual styles, saved ideas, aspect ratios and a colour control.
06
Workflow
Three connected steps from idea to finished visual.
07
Creator stories
Three editable sample quotes, labeled as illustrative content.
08
Pricing
Three plans with monthly and yearly billing and accurate plan summary dialogs.
09
FAQ
Native disclosures with clear answers about the interactive demonstration.
10
Closing and footer
An artwork-backed closing action, footer navigation and theme/layout preview controls.

Remove a section by deleting its line in app/page.tsx, or move the line to reorder.

Built with

Its motion comes from free components in our library, shipped in components/hairline/ so you can use them anywhere else on the page too.

Make it yours

Every word, link and price lives in site.config.ts. TypeScript flags a missing or misspelled field, so you can’t quietly break a section.

Where to change each part of Prism
To change	Edit
Brand, copy, links, artwork records, plans and FAQ	site.config.ts
Complete palettes	styles/themes.css
Default theme, hero layout and preview controls	site.config.ts → appearance
Fonts and metadata	app/layout.tsx
Section order	app/page.tsx
Product interactions and visuals	components/product/
Original artwork	public/images/

Run it

$ npm install$ npm run dev

Node.js 20.9 or newer. No environment variables.

Before you go live

Set appUrl and each plan’s href in site.config.ts to connect your real product and checkout. Replace the fictional brand, creator stories, prices and FAQ. The workspace previews existing images; connect your own generation service for live AI. Set appearance.showControls to false to remove the template preview controls.

Specifications

Framework: Next.js 15 (App Router), React 19
Language: TypeScript
Styling: Tailwind CSS v4 with design tokens and component styles
Fonts: Manrope, Geist, Geist Mono, self-hosted with next/font
Dependencies: next, react, react-dom, lucide-react
Images: Six original WebP artworks, each with a smaller thumbnail. Included demo imagery with documented prompts and provenance.
API keys and environment variables: None
Node.js: 20.9 or newer
Colour scheme: Dark
Responsive: Desktop, tablet and phone
Accessibility: Skip link, visible focus, keyboard navigation, reduced motion
Deploys to: Vercel, Netlify, Cloudflare Pages or any Node host
Codebase: 39 source files, about 5,800 lines
Last updated: Oct 8, 2026

License

One license, no tiers. The full text ships as LICENSE.md in the download.

You can

Use it for your own products
Use it for any number of client projects
Change the code and design however you like
Deploy the result commercially

You can’t

Resell or share the files as a template, theme or UI kit
Publish the source as a template in a public repository

Questions

What do I get when I buy Prism?

The complete Prism project as a download: the Next.js app, its config file, a README with setup and customisation notes, and the license. The download link arrives right after checkout.

Can I use Prism for client projects?

Yes. One purchase covers your own products and any number of client projects, and you can change the code however you like. What you can’t do is resell or share the template files themselves as a template or UI kit.

Do I need API keys, a database or a backend?

No. It runs with npm install and npm run dev and deploys to Vercel, Netlify or Cloudflare Pages without any environment variables.

What should I change before I launch?

Set appUrl and each plan’s href in site.config.ts to connect your real product and checkout. Replace the fictional brand, creator stories, prices and FAQ. The workspace previews existing images; connect your own generation service for live AI. Set appearance.showControls to false to remove the template preview controls.

Do I need to know Next.js?

Basic React helps, but most changes are text edits in site.config.ts. The README walks through colours, fonts and section order.

How do updates work?

Updates to Prism are free. When a new version ships, download it again from the link in your order email.

Can I get a refund?

Yes. If Prism isn’t right for you, reply to your receipt within 14 days and you get your money back.

Should I buy all-access instead?

If you’ll use more than two templates, yes. All-access is $99 for all 17 templates, including Prism and every template added later. Three single templates would cost $117.