KERBSIDE's says “Drop 1 is selling”: the price large, a stock bar running down, the tickets left and the ladder of releases above it. A six-second 9:16 loop. The numbers are yours to type: PopCraft does not know your stock.
PRESALE
OPENS!
A presale website people can actually visit, a ticket app you can tap through, a line-up that announces itself and a countdown whose seconds tick. Here is a whole festival presale made in PopCraft, with the ticket selling left to the people who do that.
The Blue Hour mobile ticket presented from its Ticket screen: the pass in a wallet with the poster art, the holder, the gate and a QR block. A tap on the pass moves to the presale code screen with Smart animate; It shows the code, when the queue and the presale open, and what the code buys.
PRESALE!
THE PROJECT
Blue Hour goes on presale in March
Say you run Blue Hour, a four-night city jazz and soul festival: the Tramworks hall, the Quay Gardens by the water, a Late Room until four in the morning and eleven clubs in the old town. (It is made up. It is one of the six festivals our presale templates are drawn for.) The plan: people register for a presale code by Sunday 14 March, codes go out on the 16th, the presale opens Thursday 18 March at ten, and whatever is left goes on general sale on the 26th.
That plan needs a website, a sign-up, a line-up announcement, a countdown, a story for each price release, a reel, ads, an email and a mock-up of the ticket people will carry. Usually that is a web agency, a motion designer, a social freelancer and a lot of exported PNGs named final_v7_REAL. Here it is one suite of files with the same art in all of them.
6
festival suites, one per genre
10
pieces in each suite
4
breakpoints on the presale site
0
payments we take. Ever.
PICK YOUR WRISTBAND
Six festivals, ready to rename
Each one comes with a mobile ticket, a presale web page, a line-up post, a countdown story, a tier story, a reel, a display ad set and an email header, all in its own art.
KILOVOLTElectronic. Main stage at night, lasers and a pulsing arch1
Pippin HillFamily camping. A site map with a Big Top and a big wheel that turns2
Barley MoonIndie & folk. A sun-bleached poster of fields, bell tents and barley3
Salt & VineFood & wine. A market stall under a striped awning and bulbs4
Blue HourJazz & soul. A club poster with a trumpet, a record and a skyline5
KERBSIDEHip-hop & street. A fly poster with tape, a speaker stack and a boombox6
STEP ONE
The ticket app, as a prototype
Start with what the fan holds in their hand. The Festival presale mobile ticket is two phone screens. The first is the pass in a wallet: the poster art as its header, the holder, the four-night pass, Tramworks door 2, a QR block and a note to turn the brightness up. Tap the pass and the second screen slides in: Your presale code, when the queue and the presale open, what the code buys and who is on the bill.
Press Present and it plays like an app, on iPhone, with Android copies of both screens in the same file. It is a prototype, made to show your team or your ticketing partner what you want. It is not an app in a store, and the QR is a drawn pattern, not a ticket anyone can scan.
The Blue Hour mobile ticket presented from its Ticket screen: the pass in a wallet with the poster art, the holder, the gate and a QR block. A tap on the pass moves to the presale code screen with Smart animate; It shows the code, when the queue and the presale open, and what the code buys.
STEP TWO
The presale site, published
The Festival presale page is a real website. Blue Hour's hero is a club poster on midnight blue: the name in a big serif, a countdown, the sign-up field, and a trumpet whose valves work beside a turning record and a skyline whose windows come on. Under it: the presale in four steps, the price releases as ticket stubs with a tear line, the bill by stage, what a pass opens, travel and stay, questions, partners and the legal lines.
Click Publish, type an address, and it is online, laid out again for laptop, tablet and phone. The clip shows KILOVOLT, the electronic one, going live. When the first release sells out, change its stub to Sold out and publish again.
The electronic weekend festival presale page template, signed in. Publish in the top bar opens the Publish dialog; the address kilovolt-weekend is typed and Publish puts Version 1 live. The published site is then opened on its own, as a visitor sees it: the KILOVOLT hero, the line-up and the presale countdown.
WHERE THE MONEY GOES
Who does what in a presale
We want to be very clear about this, because a presale is people's money. PopCraft makes everything around the sale. Your ticketing provider makes the sale.
| THE JOB | WHO DOES IT | WHAT IT IS |
|---|---|---|
| Presale website | PopCraft, published | A real site at its own address |
| Sign-up for a presale code | PopCraft form + your database | Emails kept in Neon or Supabase |
| Sending the codes | Your mailing tool or ticket provider | PopCraft does not send them |
| Ticket app | PopCraft prototype | Tap-through mock-up, not a store app |
| Waiting room, checkout, payment | Your ticketing provider | Linked from your Buy buttons |
| Scannable ticket at the gate | Your ticketing provider | The template's QR is drawn, not real |
| Line-up, countdown, tiers, reel, ads | PopCraft motion files | Exported as video or GIF |
| Presale email header | PopCraft, as a GIF | Sent by your mailing tool |
STEP THREE
Collect the sign-ups
The sign-up in the hero looks finished, but as the template ships it is drawn: a box with placeholder words and a button. Make it real in two minutes. Select the frame around it and set its Form control to Form; the field becomes a Text field named email and marked required; the button becomes a Button. Point the form's After sending at a thank-you screen if you like.
Then, in the Publish dialog, attach a Neon or Supabase database. Every registration lands there, newest first, and you can read them in Submissions. Turning that list into presale codes, and emailing them, is a job for your mailing tool or your ticketing provider's presale feature. We give you a tidy list, not a code generator.
The coming-soon page, published, with its email sign-up marked as a form and a Neon account connected. In the Publish dialog, under Database, New Neon database is clicked: a project named after the site is made in the Neon account and its database attached, and it is listed. Three visitors then sign up on the site (sent by the recording, as the site sends them). Submissions is clicked and a table shows the three, newest first, with when each was sent and its email.
The website template on the canvas. From the ⋯ menu, Web preview docks the page beside the canvas as a real website. The screen picker goes to another of the site's pages, and the width picker narrows the window to a phone's, where the page reflows.
STEP FOUR
Announce the line-up
The line-up post is the moment people decide whether to register. Blue Hour's headliners arrive one after another in the biggest type, then the second line, then the small names, while the trumpet throws rings of sound and the skyline lights up. It is square, with portrait and story cuts in the same file.
The names are ordinary text. When an act pulls out (one always does), retype the line and export again. The Festival lineup reveal music template does the same job for a festival that wants a plainer look.
The Blue Hour line-up post in Animate, zoomed on its square frame. Space plays it: the trumpet's bell throws rings of sound, the record turns and the skyline's windows come on while the headliners arrive one after another, then the second line and the small names.
STEP FIVE
Count it down
The countdown story is for the last week. KILOVOLT's is the main stage at night: an arch of pulsing rings, sweeping lasers, haze and the crowd, “the presale opens in” on big tiles, the presale date and the field to sign up. A six-second loop, 9:16 with square and 4:5 cuts.
A truthful note: the tiles show the days, hours and minutes you type, and the seconds tick on a loop. It is not a live clock. Post a fresh export each day, with the new numbers, and it does the job.
The KILOVOLT countdown story in Animate, zoomed on its 9:16 frame. Space plays its six-second loop: light rings pulse over the main stage, lasers sweep, and the presale countdown tiles tick their seconds above the date and the sign-up field.
THE REST OF THE SUITE
Tiers, a reel, ads and an email
THE REEL
DROP!Sixteen seconds. The name lands on the first beat, the headliners cut in on the beat, the countdown ticks and the ask pops on. Export it as an MP4 with its music.
DISPLAY ADS
CLICK!1200 × 628 and 1200 × 1200, with 4:5 and LinkedIn cuts: the scene, the name, the headliners, the presale date and a sign-up button, on a six-second loop.
EMAIL HEADER
PING!600 × 300, a seamless six-second GIF. The name, dates, presale date and button are all on the first frame, for the inboxes that never play a GIF.
A logo reveal in Animate. The download button in the transport bar opens Export animation. MP4 shows frame rate, range, resolution and quality with a summary of the size; GIF switches to palette, dither and loop settings; Lottie lists what the file can carry. The frame rate is set to 120 fps for MP4.
The Love you more card in its Doodle theme, in Animate. The export button in the transport bar opens Export animation; GIF is picked as the format, showing its shared palette, dither and loop forever settings and the summary of the size, frame count and estimated file size.
THE OLD WAY
A web agency, a motion freelancer and a spreadsheet
| THE OLD WAY | IN POPCRAFT |
|---|---|
| A web agency for the presale site | The presale page template, published from the file |
| A form tool bolted onto the site | The sign-up becomes a form, kept in your own database |
| Screenshots of the ticket app in a deck | A tap-through prototype on iPhone and Android |
| A motion freelancer per announcement | Line-up, countdown, tiers and reel in the same art |
| Ads resized by hand | One ad set with four cuts |
| A ticketing provider for the sale | Still a ticketing provider for the sale, linked from your buttons |
FROM ZERO
Your presale in six moves
- 1
Pick your festival
Click New file and search festival presale. Pick the genre closest to yours; each has the same ten pieces. - 2
Rename and re-brand
Apply a brand kit: the festival name, colours, fonts and logo are slots the files share. Then rewrite the dates, tiers and bill, which are plain text. - 3
Wire the sign-up
In the Design panel's Web section, make the sign-up a Form, the field a Text field, the button a Button. See Forms. - 4
Publish with a database
Click Publish, choose an address, and attach a Neon or Supabase database so sign-ups are kept. See Integrations. - 5
Link to your tickets
When the sale opens, give the buttons a Link to your ticketing provider's page and Publish again. - 6
Ship the socials
Export the reel, line-up, countdown and tier stories as video, the email header as a GIF, the ads as images. See Motion studio.
GATES OPEN
Tap the ticket yourself
In PopCraft, click New file, search for festival presale, and open the mobile ticket for the festival you like. Select the Ticket screen, press Present and tap the pass. Then open the presale page and click Publish.
ASKED & ANSWERED
Questions, answered
Does PopCraft sell tickets or take payments?
No. PopCraft has no checkout, no payments, no waiting room and no ticket inventory. It designs and publishes the presale site, prototypes the ticket app, and makes the line-up, countdown, ads and emails. The buying happens with your ticketing provider, which you link to from your buttons.
Is the ticket app something I can put in the App Store?
No. It is a prototype: two phone screens (the pass in a wallet and the presale code), in iPhone and Android sizes, wired so a tap on the pass opens the code. Use it to show your team, sponsors or ticketing partner how it should feel. The QR on the pass is a drawn pattern and does not scan.
Is the presale website real?
Yes. Publish puts it online at its own address, laid out for desktop, laptop, tablet and phone, with its animation. You can publish new versions, roll back, take it offline, or send it to your own GitHub or Vercel.
Does the sign-up form work?
Once you mark the field and button as form controls and attach a Neon or Supabase database when you publish, every sign-up is kept in that database and you can read the submissions. As the template ships the sign-up is drawn, not wired. PopCraft does not email presale codes.
Is the countdown live?
No. The countdown tiles show the days, hours and minutes you type, and the seconds tick in a loop. It does not count down to a real date by itself, so update the numbers when you publish or export again.
Can one festival use another genre's look?
Yes. All six suites are built from the same parts with different art, so the tiers, steps and sections line up. Open the one whose picture you like and rewrite it for your festival.
THE MANUAL, FOR THE DETAILS
PRESALE! YOUR TURN.
A ticket app prototype, a presale site, the lineup and the countdown. Free to start, in your browser or on your Mac.