Good Dirt

Screenshots

Signature effect

Boxes and crackers drawn as SVG that drop into the hero, a pinned dig through a regenerative field, and a cracker that shatters into shards and crumbs when you crunch it

Changelog

1. v1.0.02026-10-01
   • HTML edition: a dependency-free food-brand site that opens straight from disk, with SVG packaging that drops into the hero, a flavour showcase whose tabs repaint the section, a pinned soil cross-section that grows roots, fungi and worms as you scroll, postcard farm cards, a crunch-o-meter with shattering-cracker physics, a review wall, a build-a-box configurator with a crate, a subscription saving and a demo cart, and a postcode stockist finder. Every effect has a CONFIG block at the top of its file.
   • Pages: home, 404, privacy.
   • One codebase, not one file. The concept was a single HTML file. The page is now index.html plus tokens.css, main.css, fonts.css, kit.css, kit.js, util.js, main.js and one file per effect in assets/js/effects/ (art, cart, hero, ribbons, flavours, soil, crunch, build, stockists).
   • Self-hosted fonts. Bricolage Grotesque (variable weight and width) and Rethink Sans ship in assets/fonts/ under the SIL Open Font License, with licences. The concept loaded them from Google Fonts; no request now goes there.
   • The flavours are data. The four flavours (name, box colour, sticker icon, farmer, showcase colour) are entries in FLAVOURS in assets/js/effects/art.js. The showcase box, the build-a-box rows, the crate and the boxes that fly into the cart are all drawn from them by one boxSVG() function, so a new flavour is one entry plus its tab and panel in index.html.
   • Brand tints follow the tokens. Translucent colours (dashed rules, glass, washes) are color-mix() of --soil, --cream and the other tokens instead of raw rgba(). Only neutral black shadows inside the soil drawing keep their own colours.
   Show all notes

   • Contrast-safe twins. Small text on or in tomato or leaf uses --tomato-ink (#C5301B) and --leaf-ink (#2F7A3A), both added in tokens.css, so every label and chip clears 4.5:1. The Paprika and Rosemary showcase colours are those darker twins.
   • Complete without JavaScript, and a reduced-motion version. Hidden start states exist only under .js:not(.rm). Without script, or with reduced motion, there is no loader, every flavour panel is listed, the soil section is the finished drawing with all four facts, and the cart, menu and showcase controls are hidden. A 3-second failsafe in the <head> puts the page into that still state if the scripts never start.
   • Buttons that stay focusable. The stepper and "Add to cart" buttons use aria-disabled instead of disabled, so keyboard focus is not lost when a limit is reached.
   • A visible skip link. "Skip to content" appears on focus.
   • Sub-pages and delivery details. Added 404.html and privacy.html (the same announcement bar, nav and footer), a full SEO head (Open Graph, Twitter card, a canonical placeholder, JSON-LD Organization), a favicon, a touch icon, a web manifest and robots.txt.
   • The page idles when nothing moves. The shared animation loop (util.js) stops when the page is still and wakes on scroll, resize and pointer move; the hero, ribbons and soil scene do nothing while off-screen.
   • The dig is the tallest thing on the page. The soil section is 330vh tall (300vh at 900px and below). Set enabled: false in soil.js and shorten .soil-pin in main.css for a normal-height section.
   • Prices are typed in several places. build.js and cart.js each hold the box price in pence (price: 450); the "£4.50" on each flavour panel, in the receipt on the review wall and in the markup's starting bill is text. The free-shipping line ("Three or more ship free", "3+ boxes") and the 15% subscriber saving are typed in the copy as well as CONFIG. The README lists every place.
   • The demo is a demo. The cart, the checkout button, the newsletter form and the stockist finder post nothing: the finder picks three of six made-up shops from a hash of the postcode. Connect your own shop, email provider and store locator before launch (see the README).
   • The demo brand (Good Dirt Baking Co., Crumb Yard, Bristol), its four flavours, the farms, farmers and their figures, the 640 stockists, the 3,212 reviews and the reviewers, the receipt and order number, the discount code CRUNCH10, the six shops and the addresses (hello@your-domain.com, your-domain.com) are all made up. Replace them before launch.
   • The footer's link columns (Shop, Soil, Hello) are placeholders that point at sections of the page (the flavours, the build-a-box, the stockists, the top). Point them at real pages, or remove them.
   • The privacy page is a placeholder policy marked "replace before launch".

Questions

Related

• 

  Aurel

  Brand

  A quiet, clay-and-bronze skincare template for a Copenhagen barrier-repair brand: a raymarched WebGL serum drop that bulges toward the cursor in the hero, a three-step ritual with CSS-rendered bottles, an ingredient list with generated molecule diagrams, a draggable before/after hydration map, clinical-result stat cards and a working shop with size pickers and a bag.

  Bodoni Moda / JostFrom $29
• 

  Ferro Type

  Studio

  A loud, orange-and-black type foundry site built around one variable font: a hero word that bends its weight and width under your cursor, a live type tester that writes its own CSS, an axis-by-axis tour, a keyboard-driven glyph inspector and a licence configurator with a working cart.

  Roboto Flex / Roboto MonoFrom $29
• 

  Hearth

  Hospitality

  Hearth is a restaurant site cooked over open fire: an ember canvas and heat-haze hero, a nine-course menu drawn plate by plate, a night-long fire timeline and a seat-map booking flow with gift vouchers.

  Gloock / Work SansFrom $29