Documentation
How to work with Templify Digital
How the library works, what you get in each category, and how to take a layer into whatever you're building.
What is Templify Digital?
Templify Digital lets you build an immersive website with AI — instead of the generic one you get by default. You start from a layer that already has the craft in it, then prompt it into your own version.
Ask an AI for a website and you get the average of everything it's seen: a centred hero, three feature cards, a flat gradient. That's not the model failing — it's the model with nothing strong to work from.
A layer is that foundation — a finished piece of design (motion, depth, atmosphere) handed to the AI as context, so it builds on craft that's already there instead of inventing the hard parts.
Grab a layer, copy or download its prompt, and prompt exactly the way you always do — change the copy, swap the palette, make it about your business.
When to use it
When you want a site that stands out, and you'd rather direct an AI than start from a blank design file.
How does Templify Digital work?
Three steps: copy a prompt from a layer, paste it into your AI, and extend what it builds. The AI does the execution; the prompt does the directing.
Copy a layer's prompt, paste it into the AI tool you already work in, and it generates the layer as a single self-contained HTML file — the page, motion and all. That file is your starting point.
To move it into another technology, hand the file to an AI and tell it which stack to rebuild it in. Nothing about the result is locked to us.
To skip the generation step, Full Stack subscribers can download the source files instead — the actual code we built the layer from. Which format you get depends on the category.
When to use it
Start here if you've never used a layer before — it's the shortest path from the library to a page on screen.
Prompts vs. source files — what's the difference?
A prompt is instructions your AI runs to recreate a layer as a single self-contained HTML file. A source file is the actual code we built the layer from, downloaded directly. Prompts are stack-agnostic; source is ready to run.
A prompt is portable. The AI outputs one self-contained HTML file that assumes nothing about your framework, build step, or folder structure — give it to any AI with “recreate this following my project conventions” and it ports cleanly.
A source file is direct. No generation step, nothing to interpret — you get exactly what you saw in the preview. Templates and sections ship as Next.js; 3D scenes and many backgrounds stay as self-contained HTML.
Reach for a prompt when you want the layer in a stack we don't ship, or you'll reshape it heavily anyway. Reach for a source file when you want the result as designed, ready to run.
When to use it
Read this before your first layer. Which mode you pick determines every step that follows.
Which AI model do you build against?
Every prompt is written and validated against a top-tier Claude Opus model. Prompts work in other models, but Opus holds the design and motion language most faithfully.
We test every prompt against Opus and don't publish until the output is recognisably the same page as the layer.
Other models will still run these prompts, and most produce something good. What weaker models lose first is the motion timing, the depth and layering, the restraint — you keep the structure and lose the craft.
If the output doesn't match the preview, check the model before anything else. A wrong or outdated model is behind most mismatches.
When to use it
Check this if your output looks structurally right but flat, or if the animation feels off compared to the preview.
Templates — full sites and heroes
Templates are complete pages — either a standalone hero or a full landing page. As a prompt you get a single self-contained HTML file; as a source file you get a Next.js project.
A template is the whole thing: layout, motion, type, and the atmosphere that holds them together. Some are heroes for a page you already have; others are full landing pages you can ship once the copy is yours.
As a prompt, your AI rebuilds it as one self-contained HTML file — everything inline, nothing to install. As a source file you get a Next.js project, because templates carry a lot of motion and benefit from server rendering.
Some templates still need optimisation for mobile performance and load speed. Next.js covers most of it out of the box — content ships in the initial HTML so crawlers index it without running animation code.
When to use it
When you need a whole page or a finished hero — a launch site, a product landing page, a portfolio front.
3D scenes
3D scenes are reusable Three.js scenes — particle fields, shaders, animated geometry. Both the prompt and the source file produce a single self-contained HTML file, so a scene drops into any stack.
A 3D scene isn't a page — it's a component you drop into one you're already building: behind a hero, as a section backdrop, as an interactive centrepiece.
It's the one category where the prompt and the source file give you the same thing: a single self-contained HTML file. There's no Next.js version on purpose — wrapping a drop-in scene in a framework hurts more than it helps.
The file carries its own Three.js setup, render loop, and shaders. Lift the parts you need, or point your AI at the file and tell it to port the scene into your structure.
When to use it
When a section needs depth or atmosphere that flat CSS can't reach — a 3D hero for a SaaS landing page, an interactive backdrop behind a pricing table.
Sections
Sections are individual immersive blocks — sliders, FAQs, forms, feature rows. As a prompt you get a single self-contained HTML file; as a source file you get Next.js.
Sections are for pages you've already started. One part falls flat — the FAQ accordion, the testimonial slider, the contact form — and a section replaces just that part, without rebuilding the page around it.
As a prompt, it arrives like everything else: one self-contained HTML file you can view straight away and port anywhere.
Sections are meant to be composed, so they're written to be pulled apart. Take the interaction and leave the styling, or keep the layout and rewrite the copy.
When to use it
When the page exists and one block of it needs to be better — not when you're starting from nothing.
Backgrounds
Backgrounds are atmospheric layers — video loops, gradient fields, subtle motion — meant to sit behind your content without fighting it.
Use a background when the layout is already solid but the page still feels flat. It adds depth without redesigning the whole composition.
As a prompt, you get a self-contained HTML snippet or page that demonstrates the effect. As source, you get the assets and markup ready to drop behind a hero or section.
Keep text contrast high. A background should support the brand, not compete with the headline.
When to use it
When you need atmosphere behind existing copy and UI — not a full page rewrite.
Why one HTML file?
A single self-contained HTML file is the most portable starting point an AI can produce — no install, no framework assumptions, no broken imports.
You can open it in a browser immediately, screenshot it, or hand it to another model with a clear “rebuild this in my stack” instruction.
Frameworks are great for shipping. They're a poor first artefact for AI transfer, because the model has to invent your folder structure, package versions, and conventions before it can even show the design.
Start with HTML. Port once you like what you see.
When to use it
Whenever you're using the prompt path — especially if your final stack isn't Next.js.
Why Next.js for source files?
Templates and sections are heavily animated, and heavy animation is exactly what usually breaks SEO. Next.js gives us server-side rendering and bundle separation, so the page stays immersive for people and readable for crawlers.
Content ships in the initial HTML. Motion libraries load as client islands. That keeps Lighthouse and indexing healthier than a pure client-rendered spectacle.
Next.js is also the stack most vibe-coding tools already speak fluently — so Full Stack downloads drop into the workflows people already use.
If you don't want Next.js, use the prompt path and rebuild. The design isn't locked to the framework.
When to use it
When you want the preview as designed, with production structure already solved.
Why 3D isn't Next.js
3D scenes are drop-in atmosphere, not full pages. Shipping them as one HTML file keeps them reusable across stacks without fighting App Router conventions.
A scene already owns its canvas, renderer, and loop. Forcing that into a framework package often creates hydration noise and harder reuse.
Keep the HTML file, embed the canvas where you need it, or ask your AI to extract the scene into a component for your stack.
When to use it
Whenever you're embedding a 3D layer into an existing site.
SEO & performance
Immersive doesn't have to mean uncrawlable. Source templates are structured so primary content is present without waiting on animation code.
Prefer Next.js source for launch sites that need indexing. Use prompts when you'll rebuild into a stack that already has your SEO setup.
On mobile, trim particle counts and autoplaying video. The craft should survive; the heaviest effects can scale down.
Always keep real headings, real copy, and real links in the document — motion is enhancement, not the content.
When to use it
Before you ship a marketing page that needs to rank or convert on slower devices.
Copy a prompt
Open a layer, copy the prompt, paste it into your AI tool, and generate the HTML starting point.
Use the same model family the prompt was tuned for when you can. Then ask for brand changes: name, palette, copy, imagery.
If the first pass is close but not right, iterate on the generated HTML — don't restart from a blank chat. The layer already did the hard directing.
When you're happy, either ship the HTML or move to Rebuild in your stack.
When to use it
Your first time with any layer — this is the default path.
Rebuild in your stack
Take the generated HTML file and ask your AI to recreate it using your framework, folder structure, and conventions.
Be specific: “Rebuild this in Astro with Tailwind, keep the motion timing, put components under src/components.”
Attach the HTML as context. The model should preserve composition and atmosphere while matching your project rules.
This is how prompts stay stack-agnostic without forcing everyone onto Next.js.
When to use it
After you have a generated HTML file you like, and your production stack isn't the Full Stack download format.
Drop in a Next.js source
Full Stack subscribers download the source and run it like any other Next.js app — or merge the routes into an existing project.
Install dependencies, run the dev server, then swap copy and assets. The structure is already production-shaped.
When merging into a monorepo, keep the motion and section components intact first; restyle after the page renders correctly.
If you only need one section, lift that route or component rather than adopting the whole starter.
When to use it
When you want the preview as designed, with minimal AI reinterpretation.
Reuse a 3D scene
Open the self-contained HTML, confirm the scene in a browser, then embed or port the canvas into your page.
For a quick insert, iframe the file or paste the canvas markup into a hero wrapper.
For a cleaner integration, ask your AI to extract the Three.js setup into a component and mount it only on the client.
Respect performance: pause rendering when offscreen, and offer a static poster on low-power devices.
When to use it
When you need depth behind content you already trust.
Add a video background
Use a background layer's video loop behind a hero or section, then keep typography readable.
Mute and loop by default. Provide a still fallback for reduced-motion preferences.
Grade contrast so headlines stay crisp — dark overlays are usually required.
Compress aggressively. Atmosphere shouldn't cost your Largest Contentful Paint.
When to use it
When a static gradient isn't enough atmosphere, but you don't need a full 3D scene.
Plans & access
Unlimited unlocks the prompt library. Full Stack adds downloadable source for templates and sections.
Both plans are built for commercial use of premium layers. Weekly releases keep the library moving.
If you're prototyping across stacks, Unlimited is enough. If you want to ship the preview with less reinterpretation, choose Full Stack.
Accounts and checkout are rolling out — email hello@templify.digital if you need access sooner.
When to use it
When you're ready to unlock prompts or source downloads across the library.
FAQ & troubleshooting
Quick answers for the issues people hit most often on the first build.
Check the model first. Prompts are tuned for a strong model (Claude Opus-class). Weaker models keep structure but drop motion timing, depth, and restraint. Switch model before rewriting the prompt.
Still stuck? Compare plans or email hello@templify.digital.