# Dotdrum, a free print studio website template

> One-page website for a print studio or small press, with a price calculator, shop and workshop dates. One HTML file with GSAP scroll animations, no build step, MIT license. Made by 8B (https://8b.com/).

A one-page site for a two-ink risograph studio that prints zines, posters and books, sells its own editions and runs workshops. Two flat inks, ultramarine and fluorescent pink, and halftone dots drawn in CSS; as you scroll, four drums print the page band by band, ink plates slide into register and a drum inks the workshop dates one by one.

- Page: https://8b.com/templates/dotdrum/
- Live demo: https://8bsite.github.io/print-studio-website-template/
- Repository (GitHub template): https://github.com/8bsite/print-studio-website-template
- Download ZIP: https://github.com/8bsite/print-studio-website-template/archive/refs/heads/main.zip
- Size: 99 KB, 13 photos (Unsplash), fonts: Gabarito and Rethink Sans
- Motion: GSAP 3.13.0 (ScrollTrigger); Lenis 1.3.27 smooth scroll

## Use it with an AI coding agent

Download the files into the project (Windows PowerShell: `curl.exe`):

```bash
curl -LO https://raw.githubusercontent.com/8bsite/print-studio-website-template/main/index.html
curl -LO https://raw.githubusercontent.com/8bsite/print-studio-website-template/main/AGENTS.md
curl -LO https://raw.githubusercontent.com/8bsite/print-studio-website-template/main/LICENSE
curl -LO https://raw.githubusercontent.com/8bsite/print-studio-website-template/main/CREDITS.md
```

Then:

```text
Read AGENTS.md, then edit index.html. Use this template as the base for a site for <your studio or shop: what you make or print, where you are, your prices, products, workshops or events, how people order or book>. Keep the layout, the motion and the single-file format; replace the brand name, copy, photos, prices and rates, dates, client list, links and contacts, and recolour it through the CSS variables if needed.
```

Work on the downloaded file, not on a link. AGENTS.md lists what to keep and what to replace. Or copy the whole repository: `npx degit 8bsite/print-studio-website-template my-site`.

## Design

Dotdrum is a print studio website template for a risograph studio and small press: ink chart, process, own editions for sale, dated workshops, a live price calculator and a contact form. It also suits a screen-print or letterpress studio, or a copy and print shop.

- Palette: #11138d (ultramarine background and text), #ed008e (fluorescent pink: drums, dots, buttons), #f3f3fa (paper white sections and text), #07061f (near-black text on pink)
- Fonts: Gabarito (heavy, tight grotesk headings sized to fill the width), Rethink Sans (body text, buttons, uppercase labels)

Full-width bands of ultramarine, paper white and fluorescent pink. Everything is drawn in the two inks: CSS halftone dots and registration marks, round drums trailing dotted lines, blue-and-pink duotone photos. The ink chart overprints two plates into a 4×4 grid; the job ticket has a perforated top edge.

## Sections and motion

- **Navigation** (navigation): top bar: wordmark, section links, Price a run button; phone menu overlay
- **Two inks, ten thousand dots.** (opening): two-screen opening: big two-line headline and four drums with halftone trails, then a pink panel with the studio statement, a photo and three facts. Motion: Smooth scrolling throughout. Scrolling down, four pink drums roll onto the panel below and print it band by band; photos appear through growing halftone dots.
- **Two inks. Sixteen colours.** (inks): colour chart: two ink plates overprint into a 4×4 grid of tints (demo: blue and pink). Motion: Headings start with an offset ghost that slides into register. Tied to scroll, the tilted blue and pink plates slide together into the chart.
- **One sheet, two passes.** (process): how it works: five numbered steps on a horizontal track beside a sheet that gets printed step by step. Motion: Pinned, the five stations slide sideways while the sheet beside them takes a blue pass, then a pink pass that nudges into register.
- **A small room with a loud machine.** (studio): about the studio: paragraph, list of four machines, three photos at alternating heights
- **From our own drum.** (editions): shop: eight products in four staggered lanes, each with photo, title, format, price and Order link (demo: zines, prints and books). Motion: Tied to scroll, alternate product lanes slide up and down like pistons into their staggered places, printing dotted trails.
- **Learn the drum.** (workshops): event list: five dated sessions with price, places left and a Book link, beside a lane where a drum inks each date. Motion: A pink drum rolls down beside the list as you scroll, and each date fills solid pink as the drum passes.
- **Price a run.** (quote): price calculator: job options on the left, a live job ticket with total, unit price and turnaround, and a Send this ticket email button
- **Lately on the drum.** (runs): list of recent clients and jobs set in large type (demo: a press log). Motion: Client names drift left or right away from mid-screen, with a pink ghost that closes up as each reaches the centre.
- **Before you send a file.** (faq): questions and answers (native <details>)
- **Bring a file. Leave with a stack.** (contact): address, opening hours, email, phone and a contact form (placeholders), four drums across the foot. Motion: Tied to scroll, four drums drop down their lanes at staggered times, printing dotted trails behind them.
- **Footer** (footer): width-filling dotdrum wordmark, links, address, socials, copyright and the Design: 8B credit

## Good for

- risograph, screen-print or letterpress studio
- print shop or copy shop with online quotes
- small press or zine publisher with a few editions for sale
- craft studio that sells work and runs workshops
- any small studio with a two-colour graphic identity

## Questions

**Does the price calculator send real quotes?** It prices in the browser: pick format, copies, inks, paper and sides for a total, unit price and turnaround. Send this ticket opens an email with the job filled in.

**How do orders and bookings work?** Each Order and Book a place link opens an email with the item in the subject, so there is no cart. The contact form needs a form service such as Formspree or Netlify Forms.

## Before publishing

Replace: social preview image, favicon, email address, contact form (sends nothing yet), phone number and social media links, plus the invented demo facts (prices, dates, addresses).

## License

Code MIT. Photos: Unsplash License (credits in CREDITS.md). Fonts: SIL Open Font License 1.1. The "Design: 8B" footer link is optional.