Food Truck Template

Quick Start

1. Unzip and open index.html in a browser, or upload the folder to any static host. There is no build step.
2. Replace the seven tickets in the This week section with your own pitches (see below). The hero chip, the week's dates, the map pins and the footer's today marker update from them.
3. Swap assets/img/van.webp for your own van and the dish-*.webp cut-outs for your food.
4. Repaint the four colour tokens at the top of assets/style.css.

Using It With Your Own Design

Everything is plain HTML, CSS and one script. Each section is a self-contained block in index.html with its own initialiser in assets/script.js, and every initialiser returns early when its markup is missing, so you can delete the menu, catering, the sticker wall or the map and the rest keeps working.

The behaviour hooks are data- attributes (data-tickets, data-board, data-guests, data-wall and so on); class names are only for styling. To restyle, change the tokens first, then the section rules in style.css. Fonts are Lilita One (display), Yellowtail (script, used three times) and Gantari (body), self-hosted from assets/fonts/ with only the weights used (see Fonts below).

Files

This week: the schedule

Each <li class="ticket-day"> is one day:

Code snippet omitted: it ships with the download.

• data-day is the weekday, 0 Sunday to 6 Saturday. Keep the tickets in Monday-to-Sunday order.
• data-open / data-close are 24-hour times. The visible hours text is yours to write.
• data-lnglat is longitude then latitude. Find it by right-clicking a spot on openstreetmap.org and choosing "Show address". Put the pin on the street itself, not a building roof.
• The time zone is set by TIME_ZONE at the top of script.js (Europe/London here), so a visitor abroad still sees your local opening state.
• Preview any moment with ?now=2026-10-22T18:30 in the URL.

Picking a ticket fills the pitch card, the Directions link (to OpenStreetMap directions) and the map. Today is picked on load. Days already gone this week show dashed and say "been". To drop the little van on the strip, delete the strip__road and strip__van SVGs.

Without JavaScript the strip is a plain grid of seven tickets with every address and note, and the map area is a link to OpenStreetMap.

The map

MapLibre GL with OpenFreeMap tiles (OpenStreetMap data; no key or account, commercial use allowed). The library and its stylesheet are loaded only when the section approaches, from the URLs on the data-map element; data-map-style sets the style (positron here; liberty and bright also work). The style is tinted towards the page colours on load; change the three colours in buildMap or remove that block to keep the original style. Wheel and one-finger touch keep scrolling the page, and the OpenStreetMap attribution must stay (it starts folded to its info button).

Menu: the hatch board

Each <li class="dish"> has data-diet (space-separated tags: v, vg, gf, hot) and data-dish, which names its cut-out in the wrapper stage (<figure data-plate="...">). Add a dish by adding both. The filter chips use the same tags; add a chip with a new data-diet-filter and tag your dishes with it. Sides take data-diet too. Hovering a row with a mouse previews its dish; clicking or Enter picks it.

Catering

The quote panel reads its bands from data-rates on .quote__out: a list of {"max": guests, "rate": pounds per head}, the first band whose max fits wins, and data-minimum is the minimum spend. PER_TRAY (guests per tray) and MAX_SHOWN (trays drawn before a "+N" label) are at the top of initCatering. The slider and the form's Guests field stay in step.

The enquiry and newsletter forms are front-end only. They validate and show a thank-you line. To send them, set each form's action to Formspree, Netlify Forms or your own endpoint and remove the e.preventDefault() in initForms.

Seen at

Stickers are <button data-sticker> whose centre is placed with --x, --y (percentages of the wall) and --r (tilt); --mx and --my set their places on phones. On desktop the three colour cells each hold a sticker; on phones those cells are hidden and the stickers sit over the photographs. They drag within the wall and move with the arrow keys (Shift for bigger steps). Grid cells are plain divs or framed photos; change the grid areas in .seen__wall to rearrange.

Palette

Four core tokens in :root: --butter (ground), --paper (tickets and cards), --cobalt (ink and the hatch board), --pink (the awning, the catering block, the picked ticket). --pink-deep, --cobalt-deep, --ink-on-pink, --sky and --blush are deeper or paler versions of them. The measured contrast pairs are in the :root comment; pink is a fill, never small text on butter or cobalt. The awnings recolour per section through --awn-a, --awn-b and --awn-rail.

Photography

All images are bundled WebP derivatives baked for this template; no hot-linked images.

• Cut-outs (van.webp, dish-*.webp) were made by assets/img-src/build-cutouts.mjs from the masters in assets/img-src/: each dish is keyed against its plain ground, the van's paint is keyed by colour, and only the painted body is recoloured from red to pink, with a fictional number plate. Run it from the repo root with bun effects/food-truck-template/assets/img-src/build-cutouts.mjs. To use your own, any background-removal tool works: save a transparent WebP or PNG under the same name and keep the width/height attributes in step.
• Framed photographs are listed in assets/img-manifest.json with their source and crop; regenerate with bun scripts/build-template-assets.ts food-truck-template.
• The van decal is the SVG mark, positioned on the door with --decal-x and --decal-y in .van-decal.

Image credits (Pexels licence)

Pexels photos are free to use and modify under the Pexels licence; they may not be sold unaltered. Replace them with your own photography before launch.

Fonts

All three faces are self-hosted latin WOFF2 files in assets/fonts/, declared with @font-face at the top of style.css (font-display: swap). Lilita One and Gantari, the two faces above the fold, are preloaded in <head>.

To swap a face, replace its file and @font-face rule, update the --font-* token and the preload links, and keep its licence file beside it.

Accessibility

• The week is a radiogroup: arrow keys, Home and End move the pick and focus together.
• Dishes and dietary chips are buttons with aria-pressed; the picked dish's ticket and the pitch card are live regions.
• Stickers are buttons that move with the arrow keys.
• Visible focus rings throughout; in-page links move focus to their section.
• The awning, mark, map pins and small van are decorative and hidden from assistive technology; the same information is in the text.
• Reduced motion skips the intro, tearing, map flights, tray drops and the marquee but keeps every control working. Lenis is not started.
• With the GSAP CDN blocked or JavaScript off, every section is readable as plain content.

Dependencies

• GSAP 3.15.0 core, ScrollTrigger, Draggable and MotionPathPlugin (jsDelivr). Works with GSAP 3.12+.
• Lenis 1.3.17 (unpkg), optional. Remove its <script> tag, or add data-smooth="off" to <html>, or ?smooth=off to the URL.
• MapLibre GL 4.7.1 (unpkg), loaded on demand, and OpenFreeMap tiles.
• Fonts: Lilita One, Yellowtail and Gantari, self-hosted in assets/fonts/.

Teardown

Everything the script creates lives in one GSAP context exposed as window.gsapContext. window.gsapContext.revert() kills every tween and ScrollTrigger, removes listeners and the tray stack, destroys the Draggables, removes the map and stops Lenis, leaving other animations on the page alone.