A design is a script against the Kit: brand, styles, components, stacks, cues.
TEMPLATES
GALORE!
Over 1,400 real starting points, from a SaaS pricing page to a birthday GIF. Every one is an editable file, and every one was written as code you can read, copy and remix. No lorem ipsum. Not one.
On Home, New then File opens the new file gallery. Social is picked in the rail, the Announcement template is chosen with Use Announcement, and it opens in the editor. The headline is double-clicked, selected with Command-A and retyped as Doors open Friday.
POP!
WHY SO MANY
A blank page is a terrible place to start
Nobody likes the blinking cursor on an empty canvas, least of all at eleven at night before a launch. So we built a shelf. Not a few dozen pretty thumbnails that fall apart when you touch them: real files, with real copy, wired prototypes, brand variables under every colour and motion that is already timed.
And because we write every template as code, we can hold every single one to the same bar. Contrast, type sizes, safe areas, responsive layouts, brand swaps. The checks run over the whole shelf, every time.
1,400+
official templates
12
SaaS looks, Dark to Maximal
119
websites and web pages
0
lorem ipsums
THE SHELF
What is on it, counted
Straight from the gallery's index. Yes, we made 660 GIF cards. We regret nothing.
Text-message GIF cards
660
Motion: reels, promos, trailers, Lottie
334
Websites and web pages
119
Social posts and ad sets
101
Emails
72
Comics
33
Print: cards, flyers, posters, résumés…
27
App screens and prototypes
23
Boards
15
Game UI
11
Presentations
10
Storefronts
9
FIND IT
Search like you mean it
New file opens the gallery. Type saas pricing and you get the SaaS pricing pages in their different looks. Pick the Terminal one, click Use, and it is a file: three plans, a comparison table and the questions, set on a character grid.
Searching works on sizes too, so "story" finds both the 1080×1920 canvas and every template made for it.
On Home, New then File opens the new file gallery. Social is picked in the rail, the Announcement template is chosen with Use Announcement, and it opens in the editor. The headline is double-clicked, selected with Command-A and retyped as Doors open Friday.
FOR FOUNDERS
A whole launch, in twelve looks
The SaaS set is everything a product launch needs: landing and pricing pages, a waitlist, a sign-up page with a live preview, a changelog, a comparison page, security and integrations pages, a case study, launch films, product-screen videos, Lottie UI loops, app store screenshots, lifecycle emails from "day one" to "payment failed", and social posts to shout about it.
Then we made many of the pieces again in twelve everyday looks, so no two founders have to share one.
Dark
Editorial
Brutalist
> terminal_
Pastel
Swiss
Bento
Glass
Sketch
> data_
Maximal
Gradient
IT PLAYS
Motion already timed
Here is the Maximal SaaS landing page, in the web preview. It plays its entrance the way a visitor will see it. The cues were timed when the template was written, and the motion check made sure every one plays on its curve.
Happy with it? Publish it and it is a website, or export it to Next.js.
The new file gallery, searched for “music video”: the music-video templates are listed, each with its own track. Synthwave tunnel visualizer is picked and opened, and Space plays it with its music: the neon tunnel pulses with the bass.
EVERY FORMAT
Not just websites
Home, signed in. Brightside Studio is picked in the sidebar, then New and File open the gallery, whose owner picker says the file will be made in Brightside Studio. Social is picked in the rail, showing its sizes and templates; whatever is used next is made in the team.
The Payment success Lottie template in Animate. Space plays it: the card flips and the tick draws on. The export button in the transport bar opens Export animation, where Lottie is picked as the format.
The new file gallery, searched for “slideshow”: the photo slideshows are listed (wedding, travel, birthday, baby’s first year and more). Baby’s first year slideshow is picked and opened, and Space plays its first scene with the music.
The newsletter email template with its page selected. The web export is opened and Email HTML is picked; Export downloads one HTML file made of nested tables with inline styles, with a picture for each part a table cannot say. Opened in a browser on its own, the file shows the newsletter as a mail client would.
FROM ZERO
Template to shipped in five moves
- 1
New file
On Home, click New, then File. The gallery opens on every kind of file: pick one in the rail. - 2
Search it
Type what you need: "saas pricing", "lottie", "story", "black friday". Results are templates and sizes together. - 3
Use it
Pick a template and click Use. It opens as an ordinary file: every layer, style, component and keyframe is yours. - 4
Make it yours
Swap the words and pictures. Apply your brand kit and the colours and fonts follow, because every fill sits on a brand variable. - 5
Ship it
Publish a site, export a video or a GIF, send an email, print a PDF. Each template is ready for where it is going.
DESIGN AS CODE
Every template is a source file
We wrote the whole shelf with the Kit, in TypeScript. @popcraft/kit ships every official source, every module they are made with, the build and every check. The popcraft CLI runs the pipeline.
$ npm i @popcraft/kit && npm i -D @popcraft/cli puppeteer
$ npx popcraft template list saas pricing page # best matches first
$ npx popcraft template new templates/our-pricing.ts \
--from web-saas-style-terminal-pricing # the official source, as yours
$ npx popcraft template check # build it, run every check
$ npx popcraft template look templates/our-pricing.ts # every size, four moments, two brand kits
$ POPCRAFT_TOKEN=pop_… npx popcraft template publish # up to your accountA terminal in a project with @popcraft/kit installed. popcraft template list saas pricing page lists the SaaS pricing pages in each look, best matches first; popcraft template new templates/our-pricing.ts --from web-saas-style-terminal-pricing copies the official source as a file of your own, and its first lines are shown: the Kit's imports and the template's plans.
A launch post, signed in. The Agent rail button opens the agent panel. The headline is selected, and a request is typed in words — type the headline on letter by letter, then pop the badge in half a second later — ready to send. Manage lists the skills it can pull in, Motion design among them.
THE BAR
Checks every official template passes
These are the same checks PopCraft's own test suites run, and the same ones popcraft template check runs on yours. A few of them:
✓
Brand colour roles, text styles, components, auto layout, prototypes wired
practiceBrand colour roles, text styles, components, auto layout, prototypes wired
✓
AA for every text against what is really painted under it
contrastAA for every text against what is really painted under it
✓
Type above its kind's floor
text-sizeType above its kind's floor
✓
Words clear of TikTok, Reels and Shorts buttons
safe-areaWords clear of TikTok, Reels and Shorts buttons
✓
Rated timelines, cues on their curves, loops that close
motionRated timelines, cues on their curves, loops that close
✓
Every text holds its lines, measured with real type
layoutEvery text holds its lines, measured with real type
✓
A web page changes on a tablet and a phone
responsiveA web page changes on a tablet and a phone
✓
Re-skinned by a light and a dark brand kit, it still holds AA
brandRe-skinned by a light and a dark brand kit, it still holds AA
✓
Everything can be changed with the editor's own controls
editabilityEverything can be changed with the editor's own controls
ROBOTS WELCOME
Made for agents, too
An AI coding agent in a terminal can make designs as good as the gallery's, because it can work the same way the gallery was made. Our guide for agents spells out the loop: write the design as a script, build it, render it, look at the pictures, fix what is wrong, and go round at least three times. It needs the popcraft CLI and nothing else.
LOOK
HMM!Render every size at rest and at chosen moments, then judge the PNGs like an art director.
HAND OVER
YOURS!Push it as a cloud file or open it in the desktop app. A person can edit every layer after.
THE OLD WAY
Template sites vs. a template shelf
| THE OLD WAY | IN POPCRAFT |
|---|---|
| Buy a template, get a flat picture | Get a file with styles, components and wired prototypes |
| Placeholder copy everywhere | Real words for a real product, ready to swap |
| Recolour by hand, break contrast | Apply a brand kit; contrast is checked |
| One size, good luck with the rest | Every size, responsive web, safe areas for video |
| A black box | The source, in TypeScript, to read and remix |
Want a running start? getpopcraft/examples has twenty-five templates set up as a ready project: clone it, npm install, npm run check.
ASKED & ANSWERED
Questions, answered
How many templates are there?
Over 1,400 official ones, counted from the gallery's own index: about 660 text-message GIF cards, 334 motion pieces, 119 web pages, 101 social posts, 72 emails, 33 comics and more, plus nine whole storefronts. The number goes up as we ship.
What is in the SaaS set?
What a product launch needs: landing and pricing pages, waitlist, sign-up, changelog, comparison, security, integrations and case study pages, launch films, product-screen videos, Lottie UI loops, app store screenshots, lifecycle emails and social posts. Many of them come in twelve everyday looks, from Dark and Terminal to Pastel and Maximal.
Are they really editable?
Yes. A template opens as a normal file. Every official template passes an editability check that everything it uses can be changed with the editor's own controls, and a brand check that a light and a dark brand kit can re-skin it.
What does "built as code" mean for me?
Every official template is a TypeScript source written with the Kit. @popcraft/kit ships all of them, and popcraft template new --from copies one as your own file. You can read exactly how a template is put together and remix it in code.
Can I make my own templates?
Yes. Write a source with @popcraft/kit, then popcraft template check runs the same checks the official ones pass, template look renders every size and moment for review, and template publish uploads it to your account.
Can an AI agent make them?
Yes, and the docs have a guide written for one: write the design as a script, build it, render it, look at the pictures, fix what is wrong, and repeat. It needs the popcraft command line and nothing else.
THE MANUAL, FOR THE DETAILS
POP! YOUR TURN.
Hundreds of real, editable starting points, built as code. Free to start, in your browser or on your Mac.