Lattice: AI image studio template
Generate, keep, sell.
For generative image and video tools: a prompt hero over a photo, a live generation demo, a filterable masonry of outputs, credit packs, a social wall and a limited-time offer.
About the Lattice template
Lattice sells a generative image or video tool. A prompt hero sits over a photo, a prompt lab rewrites rough ideas, a masonry gallery shows community work, and credit packs replace subscriptions, followed by a social wall and a launch-week offer.
Generate, keep, sell. It is a complete ai image studio landing page for React and Tailwind CSS 4, assembled from 9 Charcoal UI sections.
Who Lattice is for
- AI image and video generators.
- Prompt tools and creative AI apps.
- Stock and asset generators.
- Creative APIs sold in credits.
What is inside
9 sections, top to bottom:
- Navbar Floating: A glass pill that hides on scroll down, with a gliding hover highlight and a mobile sheet.
- Hero Landscape: A full-bleed dusk landscape behind an AI prompt: a beam lights the box while it thinks, a liquid-metal send button and a thinking orb.
- Features AI Demo: Try-it-now block: visitors pick a prompt and watch the product stream its answer.
- Gallery Masonry: Photo gallery with tag filters over a masonry grid and a dialog for the full-size image.
- Pricing Credits: Credit packs for AI products with bonus credits and a live readout of what each pack buys.
- Testimonials Tweets: Masonry wall of social posts that fades out at the bottom into a read-more button.
- FAQ Chat: FAQ as a support chat: tap a question and a teammate types the answer back.
- CTA Countdown: Limited-time offer band with a promo code, a live countdown and a shimmering button.
- Footer Minimal: One quiet row: brand, a few links and the year.
How it is built
Credit packs, prompts, gallery photos and the countdown offer are props. Every section is a separate Charcoal UI section, so you can reorder, remove or restyle any of them, and the accent colour is one CSS variable on the page wrapper.
Install Lattice
npx shadcn@latest add @charcoal/latticeTemplates are part of Charcoal UI Pro. One seat covers all 100 templates, 107 sections and 300 Pro components. The command installs the page and every section and component it uses, so it runs the moment it lands.
Frequently asked questions
- Can I use Lattice for a client site?
- Yes. A Pro seat covers unlimited personal and commercial projects, client work included.
- Is Lattice a Next.js template?
- It is a React 19 page that works in Next.js (App Router or Pages Router), Vite, Remix and Astro. Drop it into a route and it renders.
Sections in this template
- Navbar Floating: A glass pill that hides on scroll down, with a gliding hover highlight and a mobile sheet.
- Hero Landscape: A full-bleed dusk landscape behind an AI prompt: a beam lights the box while it thinks, a liquid-metal send button and a thinking orb.
- Features AI Demo: Try-it-now block: visitors pick a prompt and watch the product stream its answer.
- Gallery Masonry: Photo gallery with tag filters over a masonry grid and a dialog for the full-size image.
- Pricing Credits: Credit packs for AI products with bonus credits and a live readout of what each pack buys.
- Testimonials Tweets: Masonry wall of social posts that fades out at the bottom into a read-more button.
- FAQ Chat: FAQ as a support chat: tap a question and a teammate types the answer back.
- CTA Countdown: Limited-time offer band with a promo code, a live countdown and a shimmering button.
- Footer Minimal: One quiet row: brand, a few links and the year.